Feature/add editpage (#133)

* feat: firebase library * Squashed commit of the following: commit 064eb0a Author: hosono kotaro <[email protected]> Date: Sun Feb 21 11:00:29 2021 +0900 fix: precommit script (#127) commit bea617a Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Feb 21 10:21:22 2021 +0900 build(deps-dev): bump @babel/preset-typescript from 7.12.16 to 7.12.17 (#124) Bumps [@babel/preset-typescript](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-typescript) from 7.12.16 to 7.12.17. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.17/packages/babel-preset-typescript) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: hosono kotaro <[email protected]> commit 1d2c51b Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Feb 20 23:19:41 2021 +0900 build(deps-dev): bump @types/webpack-bundle-analyzer from 3.9.0 to 3.9.1 (#123) commit 64f4864 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Feb 20 23:14:33 2021 +0900 build(deps-dev): bump @typescript-eslint/parser from 4.14.2 to 4.15.1 (#122) commit 806314f Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Feb 20 23:06:46 2021 +0900 build(deps-dev): bump @types/node from 14.14.22 to 14.14.31 (#121) commit 3781d1d Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Feb 20 23:00:33 2021 +0900 build(deps-dev): bump @typescript-eslint/eslint-plugin (#120) commit 7ecf748 Author: hosono kotaro <[email protected]> Date: Sat Feb 20 20:51:55 2021 +0900 feature/husky fix (#125) * feat: Add husky * fix: precommit task * feat: add auth page * fix: move store files * fix: move page files * feat: split edit page * fix: delete chunk filename * wip: add create post * feat: login 機能 * fix: move createPost logic * fix: add regenerator-runtime * Squashed commit of the following: commit 5609b26 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 19:41:57 2021 +0900 build(deps-dev): bump html-webpack-plugin from 4.5.1 to 5.2.0 (#130) Bumps [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) from 4.5.1 to 5.2.0. - [Release notes](https://github.com/jantimon/html-webpack-plugin/releases) - [Changelog](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md) - [Commits](jantimon/html-webpack-plugin@v4.5.1...v5.2.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit e45d792 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:29:30 2021 +0900 build(deps-dev): bump @babel/preset-env from 7.12.16 to 7.13.8 (#134) commit bb6093c Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:26:48 2021 +0900 build(deps-dev): bump @typescript-eslint/parser from 4.15.1 to 4.15.2 (#132) commit d899582 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:21:37 2021 +0900 build(deps-dev): bump @babel/preset-react from 7.12.10 to 7.12.13 (#129) * fix: import resolve * fix: export component name * fix: component に型を持たせる * fix: import path name を resolve 名で指定 * fix: add jest の alias * feat: add CreatePost test * Squashed commit of the following: commit c655686 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:52:47 2021 +0900 build(deps-dev): bump is-ci from 2.0.0 to 3.0.0 (#140) commit 8fddef2 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:48:32 2021 +0900 build(deps-dev): bump css-loader from 5.0.1 to 5.1.1 (#139) commit ad98aaf Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:41:59 2021 +0900 build(deps-dev): bump fork-ts-checker-webpack-plugin from 6.1.0 to 6.1.1 (#138) commit 9a9f16e Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:35:52 2021 +0900 build(deps-dev): bump eslint-config-prettier from 7.2.0 to 8.1.0 (#137) commit 5609b26 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 19:41:57 2021 +0900 build(deps-dev): bump html-webpack-plugin from 4.5.1 to 5.2.0 (#130) Bumps [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) from 4.5.1 to 5.2.0. - [Release notes](https://github.com/jantimon/html-webpack-plugin/releases) - [Changelog](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md) - [Commits](jantimon/html-webpack-plugin@v4.5.1...v5.2.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit e45d792 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:29:30 2021 +0900 build(deps-dev): bump @babel/preset-env from 7.12.16 to 7.13.8 (#134) commit bb6093c Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:26:48 2021 +0900 build(deps-dev): bump @typescript-eslint/parser from 4.15.1 to 4.15.2 (#132) commit d899582 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:21:37 2021 +0900 build(deps-dev): bump @babel/preset-react from 7.12.10 to 7.12.13 (#129) * fix: dependabot ignore husky v5x * fix: edit page top * fix: component name * feat: add edit App test * feat: EditPostList の状態排除、Style * feat: EditPost * Squashed commit of the following: commit 8d3a7f0 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Mar 14 01:40:16 2021 +0900 build(deps-dev): bump webpack-cli from 4.4.0 to 4.5.0 (#146) Bumps [webpack-cli](https://github.com/webpack/webpack-cli) from 4.4.0 to 4.5.0. - [Release notes](https://github.com/webpack/webpack-cli/releases) - [Changelog](https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-cli/compare/[email protected]@4.5.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: hosono kotaro <[email protected]> commit 56bc5fa Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Mar 14 01:32:37 2021 +0900 build(deps-dev): bump ts-jest from 26.5.1 to 26.5.3 (#145) Bumps [ts-jest](https://github.com/kulshekhar/ts-jest) from 26.5.1 to 26.5.3. - [Release notes](https://github.com/kulshekhar/ts-jest/releases) - [Changelog](https://github.com/kulshekhar/ts-jest/blob/master/CHANGELOG.md) - [Commits](kulshekhar/ts-jest@v26.5.1...v26.5.3) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit 7967d40 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Mar 14 01:27:53 2021 +0900 build(deps-dev): bump stylelint from 13.9.0 to 13.12.0 (#144) Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.9.0 to 13.12.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](stylelint/stylelint@13.9.0...13.12.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: hosono kotaro <[email protected]> commit 101e07e Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Mar 14 01:10:01 2021 +0900 build(deps-dev): bump typescript from 4.1.3 to 4.2.3 (#143) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.1.3 to 4.2.3. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v4.1.3...v4.2.3) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: hosono kotaro <[email protected]> commit 267ddce Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun Mar 14 01:03:22 2021 +0900 build(deps-dev): bump cypress from 6.3.0 to 6.6.0 (#142) Bumps [cypress](https://github.com/cypress-io/cypress) from 6.3.0 to 6.6.0. - [Release notes](https://github.com/cypress-io/cypress/releases) - [Changelog](https://github.com/cypress-io/cypress/blob/develop/.releaserc.base.js) - [Commits](cypress-io/cypress@v6.3.0...v6.6.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit c655686 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:52:47 2021 +0900 build(deps-dev): bump is-ci from 2.0.0 to 3.0.0 (#140) commit 8fddef2 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:48:32 2021 +0900 build(deps-dev): bump css-loader from 5.0.1 to 5.1.1 (#139) commit ad98aaf Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:41:59 2021 +0900 build(deps-dev): bump fork-ts-checker-webpack-plugin from 6.1.0 to 6.1.1 (#138) commit 9a9f16e Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat Mar 6 10:35:52 2021 +0900 build(deps-dev): bump eslint-config-prettier from 7.2.0 to 8.1.0 (#137) commit 5609b26 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 19:41:57 2021 +0900 build(deps-dev): bump html-webpack-plugin from 4.5.1 to 5.2.0 (#130) Bumps [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) from 4.5.1 to 5.2.0. - [Release notes](https://github.com/jantimon/html-webpack-plugin/releases) - [Changelog](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md) - [Commits](jantimon/html-webpack-plugin@v4.5.1...v5.2.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit e45d792 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:29:30 2021 +0900 build(deps-dev): bump @babel/preset-env from 7.12.16 to 7.13.8 (#134) commit bb6093c Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:26:48 2021 +0900 build(deps-dev): bump @typescript-eslint/parser from 4.15.1 to 4.15.2 (#132) commit d899582 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 1 00:21:37 2021 +0900 build(deps-dev): bump @babel/preset-react from 7.12.10 to 7.12.13 (#129) * fix: edit spinner
hosonokotaro · Mar 20, 2021 · 90ab667 · 90ab667
1 parent 8d3a7f0
commit 90ab667
Show file tree

Hide file tree

Showing 37 changed files with 23,008 additions and 62 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,13 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": 3,
+        "debug": true
+      }
+    ],
     "@babel/preset-react",
     [
       "@babel/preset-typescript",

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -7,3 +7,7 @@ updates:
       interval: 'weekly'
       day: 'saturday'
       timezone: 'Asia/Tokyo'
+    ignore:
+      - dependency-name: "husky"
+        # 5.x の新しいバージョンのみを無視する
+        versions: ["5.x"]
diff --git a/jest.config.json b/jest.config.json
@@ -2,6 +2,8 @@
   "preset": "ts-jest",
   "moduleNameMapper": {
     "^@App/(.*)$": "<rootDir>/src/$1",
+    "^~/(.+)": "<rootDir>/src/$1",
+    "^@/(.+)": "<rootDir>/src/components/$1",
     ".+\\.(css|scss)$": "identity-obj-proxy"
   },
   "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.13.8",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.17",
@@ -89,7 +88,10 @@
     "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/react-redux": "^7.1.16",
     "axios": "^0.21.1",
+    "core-js": "^3.9.0",
+    "firebase": "^8.2.7",
     "lint-staged": "^10.5.4",
-    "react-redux": "^7.2.2"
+    "react-redux": "^7.2.2",
+    "regenerator-runtime": "^0.13.7"
   }
 }
diff --git a/src/adapter/firebase.ts b/src/adapter/firebase.ts
@@ -0,0 +1,25 @@
+import 'firebase/auth';
+
+import firebase from 'firebase/app';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyBsC6ZAinkt3n3fB0B-Yo1UMqwqaoCzi4s',
+  authDomain: 'hosonokotaro-blog.firebaseapp.com',
+  databaseURL: 'https://hosonokotaro-blog.firebaseio.com',
+  projectId: 'hosonokotaro-blog',
+  storageBucket: 'hosonokotaro-blog.appspot.com',
+  messagingSenderId: '23911354523',
+  appId: '1:23911354523:web:56bec2eb2bf7d1b712f63e',
+};
+
+firebase.initializeApp(firebaseConfig);
+
+// NOTE: firebase 認証機能を利用する
+export const Auth = firebase.auth();
+
+// NOTE: Google 認証を利用する
+export const GoogleAuthProvider = new firebase.auth.GoogleAuthProvider();
+
+export type User = firebase.User;
+
+export default firebase;
diff --git a/src/components/CreatePost.test.tsx b/src/components/CreatePost.test.tsx
@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import React from 'react';
+
+import { render, screen } from '~/testUtil';
+
+import CreatePost from './CreatePost';
+
+const handleSubmit = jest.fn();
+const onTitleChanged = jest.fn();
+
+it('it should render: CreatePost の input area に入れた文字が表示される', () => {
+  const title = 'test title';
+  const canSaveNewPost = true;
+
+  render(
+    <CreatePost
+      title={title}
+      handleSubmit={handleSubmit}
+      onTitleChanged={onTitleChanged}
+      canSaveNewPost={canSaveNewPost}
+    />
+  );
+
+  expect(screen.getByRole('textbox').getAttribute('value')).toEqual(title);
+});
+
+it('it should render: CreatePost の input area に入れた文字が表示されない', () => {
+  const title = '';
+  const canSaveNewPost = false;
+
+  render(
+    <CreatePost
+      title={title}
+      handleSubmit={handleSubmit}
+      onTitleChanged={onTitleChanged}
+      canSaveNewPost={canSaveNewPost}
+    />
+  );
+
+  expect(screen.getByRole('textbox').getAttribute('value')).toEqual(title);
+});
diff --git a/src/components/CreatePost.tsx b/src/components/CreatePost.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+  StyledButton,
+  StyledInputText,
+  StyledLabel,
+  StyledSection,
+  StyledWrapper,
+} from './styledCreatePost';
+
+export interface Props {
+  title: string;
+  handleSubmit: () => void;
+  onTitleChanged: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  canSaveNewPost: boolean;
+}
+
+const CreatePost: React.FC<Props> = ({
+  title,
+  handleSubmit,
+  onTitleChanged,
+  canSaveNewPost,
+}) => {
+  return (
+    <StyledSection>
+      <h2>記事の新規作成</h2>
+      <StyledWrapper>
+        <form>
+          <StyledLabel htmlFor="postTitle">タイトル</StyledLabel>
+          <StyledInputText
+            type="text"
+            id="postTitle"
+            name="postTitle"
+            value={title}
+            onChange={onTitleChanged}
+          />
+        </form>
+        <StyledButton onClick={handleSubmit} disabled={!canSaveNewPost}>
+          記事を準備する
+        </StyledButton>
+      </StyledWrapper>
+    </StyledSection>
+  );
+};
+
+export default CreatePost;
diff --git a/src/components/EditPostList.test.tsx b/src/components/EditPostList.test.tsx
@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import React from 'react';
+// NOTE: React Router をテストする場合は MemoryRouter を使用する
+import { Link, MemoryRouter } from 'react-router-dom';
+
+import { render, screen } from '~/testUtil';
+
+import EditPostList, { Post } from './EditPostList';
+
+const postList: Post[] = [
+  {
+    id: 'a1b2c3',
+    release: true,
+    createDate: '2021年1月10日 00:57',
+    routerLink: <Link to="/edit/a1b2c3">test title</Link>,
+  },
+  {
+    id: 'b2c3d4',
+    release: true,
+    createDate: '2021年1月11日 00:57',
+    routerLink: <Link to="/edit/b2c3d4">test title2</Link>,
+  },
+];
+
+it('should render: EditPostList に投稿記事一覧の各リンクが存在するか', () => {
+  render(
+    <MemoryRouter>
+      <EditPostList postList={postList} />
+    </MemoryRouter>
+  );
+
+  expect(screen.getAllByRole('link')).toHaveLength(postList.length);
+});
diff --git a/src/components/EditPostList.tsx b/src/components/EditPostList.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {
+  StyledPost,
+  StyledPosts,
+  StyledSection,
+  StyledTimestamp,
+} from './styledEditPostList';
+
+export interface Post {
+  id: string;
+  release: boolean;
+  createDate: string;
+  routerLink: React.ReactNode;
+}
+
+interface Props {
+  postList: Post[];
+}
+
+// TODO: どこかの処理で、release が false の状態だと弾く処理が入っているようだ
+const EditPostList: React.FC<Props> = ({ postList }) => {
+  return (
+    <StyledSection>
+      <h2>投稿された記事一覧</h2>
+      <StyledPosts>
+        {postList.map(({ id, release, createDate, routerLink }) => (
+          <StyledPost key={id}>
+            <div>
+              {!release && <span>【非公開】</span>}
+              {routerLink}
+            </div>
+            <StyledTimestamp>
+              作成日時: {createDate}
+              <br />
+              id: {id}
+            </StyledTimestamp>
+          </StyledPost>
+        ))}
+      </StyledPosts>
+    </StyledSection>
+  );
+};
+
+export default EditPostList;
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Props as EditProps } from '~/pages/edit/useLogin';
+
+import { StyledLogin, StyledUid } from './styledLogin';
+
+const Login: React.FC<EditProps> = ({ user, login, logout }) => {
+  return (
+    <StyledLogin>
+      {user ? (
+        <button onClick={logout}>ログアウトする</button>
+      ) : (
+        <button onClick={login}>ログインする</button>
+      )}
+      {user && <StyledUid>uid: {user.uid}</StyledUid>}
+    </StyledLogin>
+  );
+};
+
+export default Login;
diff --git a/src/components/styledCreatePost.ts b/src/components/styledCreatePost.ts
@@ -0,0 +1,48 @@
+import { styled } from '@linaria/react';
+
+export const StyledSection = styled.section`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 40px 0 40px;
+`;
+
+export const StyledWrapper = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledLabel = styled.label`
+  display: block;
+  input + & {
+    margin-top: 20px;
+  }
+  textarea + & {
+    margin-top: 20px;
+  }
+`;
+
+export const StyledLabelInlineBlock = styled.label`
+  display: inline-block;
+  textarea + & {
+    margin-top: 20px;
+  }
+`;
+
+export const StyledInputText = styled.input`
+  width: 100%;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledTextarea = styled.textarea`
+  width: 100%;
+  max-width: 100%;
+  min-height: 400px;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledButton = styled.button`
+  margin-top: 20px;
+`;
diff --git a/src/components/styledEditPostList.ts b/src/components/styledEditPostList.ts
@@ -0,0 +1,26 @@
+import { styled } from '@linaria/react';
+
+export const StyledSection = styled.section`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 40px 0 40px;
+`;
+
+export const StyledPosts = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledPost = styled.div`
+  & + div {
+    padding-top: 20px;
+  }
+`;
+
+export const StyledTimestamp = styled.div`
+  padding-top: 20px;
+  & + label {
+    margin-top: 80px;
+    padding-top: 80px;
+    border-top: 1px solid #333;
+  }
+`;
diff --git a/src/components/styledLogin.ts b/src/components/styledLogin.ts
@@ -0,0 +1,12 @@
+import { styled } from '@linaria/react';
+
+export const StyledLogin = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px;
+  text-align: center;
+`;
+
+export const StyledUid = styled.div`
+  margin-top: 20px;
+`;
diff --git a/src/App.test.tsx → src/pages/App.test.tsx b/src/App.test.tsx → src/pages/App.test.tsx
@@ -3,9 +3,9 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { Provider } from 'react-redux';
 
+import store from '../store/store';
+import { render, screen } from '../testUtil';
 import App from './App';
-import store from './store';
-import { render, screen } from './testUtil';
 
 it('it should render: App の article に指定された className が存在する', () => {
   // NOTE: App は index に記載がある通り、Provider で wrap する必要がある

diff --git a/src/App.tsx → src/pages/App.tsx b/src/App.tsx → src/pages/App.tsx
@@ -4,10 +4,10 @@ import { Helmet } from 'react-helmet';
 import { hot } from 'react-hot-loader/root';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Footer from './components/Footer';
-import Header from './components/Header';
-import Pages from './pages/Pages';
-import ScrollToTop from './utility/ScrollToTop';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Pages from '../pages/Pages';
+import ScrollToTop from '../utility/ScrollToTop';
 
 const App: React.FC = () => {
   return (