CRA에서 Next.js로 환경 변경

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

.gitignore

@@ -1,6 +1,6 @@
 
-# Created by https://www.toptal.com/developers/gitignore/api/macos,react,node,visualstudiocode
-# Edit at https://www.toptal.com/developers/gitignore?templates=macos,react,node,visualstudiocode
+# Created by https://www.toptal.com/developers/gitignore/api/react,macos,nextjs,visualstudiocode,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=react,macos,nextjs,visualstudiocode,node
 
 ### macOS ###
 # General
@@ -31,6 +31,10 @@ Network Trash Folder
 Temporary Items
 .apdisk
 
+### NextJS ###
+# Next build dir
+.next/
+
 ### Node ###
 # Logs
 logs
@@ -205,4 +209,4 @@ sketch
 
 # Support for Project snippet scope
 
-# End of https://www.toptal.com/developers/gitignore/api/macos,react,node,visualstudiocode
+# End of https://www.toptal.com/developers/gitignore/api/react,macos,nextjs,visualstudiocode,node

.storybook/main.js

@@ -1,14 +1,24 @@
+const path = require('path');
+const setRootPath = (_path) => path.resolve(process.cwd(), _path);
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/preset-create-react-app',
     '@storybook/addon-a11y',
   ],
   framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': setRootPath('src'),
+      '@emotion/core': setRootPath('node_modules/@emotion/react'),
+      '@emotion/styled': setRootPath('node_modules/@emotion/styled'),
+    };
+
+    return config;
   },
 };

.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="loading-start" aria-live="assertive"></div>
+<div id="loading-end" aria-live="assertive"></div>

.storybook/preview.js

@@ -1,16 +1,16 @@
 import ko from 'axe-core/locales/ko.json';
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { GlobalStyle } from 'styles/GlobalStyle';
+// import React from 'react';
+// import { MemoryRouter } from 'react-router-dom';
+// import { GlobalStyle } from 'styles/GlobalStyle';
 
-export const decorators = [
-  (Story) => (
-    <MemoryRouter>
-      <GlobalStyle />
-      <Story />
-    </MemoryRouter>
-  ),
-];
+// export const decorators = [
+//   (Story) => (
+//     <MemoryRouter>
+//       <GlobalStyle />
+//       <Story />
+//     </MemoryRouter>
+//   ),
+// ];
 
 export const parameters = {
   a11y: {

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -3,89 +3,51 @@
   "version": "0.0.1",
   "private": true,
   "description": "hanspoon 개선을 위한 TwoSpoon 프로젝트 입니다.",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "NODE_PATH=src start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.26",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "emotion-normalize": "^11.0.1",
     "firebase": "^9.6.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.2.3",
+    "next": "12.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-icons": "^4.3.1",
-    "react-loading-icons": "^1.0.8",
-    "react-router-dom": "^6.2.2",
-    "react-scripts": "5.0.0",
-    "styled-components": "^5.3.3",
-    "styled-normalize": "^8.0.7",
-    "typescript": "^4.6.2",
-    "web-vitals": "^2.1.4",
-    "yup": "^0.32.11"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react-loading-icons": "^1.0.8"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.7",
+    "@emotion/babel-plugin": "^11.7.2",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-interactions": "^6.4.19",
     "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/node-logger": "^6.4.19",
-    "@storybook/preset-create-react-app": "^4.0.1",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
-    "@types/styled-components": "^5.1.24",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "@typescript-eslint/parser": "^5.13.0",
-    "eslint": "^8.10.0",
+    "@types/node": "17.0.21",
+    "@types/react": "17.0.40",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "babel-loader": "^8.2.3",
+    "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "12.1.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "firebase-tools": "^10.2.2",
+    "firebase-tools": "^10.3.0",
     "prettier": "^2.5.1",
-    "webpack": "^5.70.0"
+    "typescript": "4.6.2"
   }
 }

src/components/CookingInfo/CookingInfo.styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { BsBookmarkHeartFill } from 'react-icons/bs';
 import { RiTimerFill } from 'react-icons/ri';
 import { pxToRem } from 'utils';

src/components/Loading/Loading.styled.tsx

@@ -1,5 +1,5 @@
 import LoadingIcons from 'react-loading-icons';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const StyledLoadingThreeDots = styled(LoadingIcons.ThreeDots)`
   z-index: 400;