next + ts 세팅

+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        [
+            "babel-plugin-styled-components",
+            {
+                "fileName": true,
+                "displayName": true,
+                "pure": true
+            }
+        ]
+    ]
+}
\ No newline at end of file

+export const browserslist = ["defaults"];

-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Config
+!config/default.json
+!config/development.json.sample
+config/*.json
 
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Next
+.next
+out
 
 
-# testing
-/coverage
+# Logs
+npm-debug.log*
+
+# NPM
+node_modules/
 
 
-# production
-/build
+# Transpiled code
+dist
+out
+.out
 
 
-# misc
+# Dev tools
 .DS_Store
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.vscode
+.idea
+*.swp
+*.bak
 
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules.nosync/
+*.env.*
\ No newline at end of file

+{
+  "editor.formatOnSave": true,
+  "prettier.semi": false,
+  "prettier.trailingComma": "all",
+  "prettier.singleQuote": true,
+  "prettier.tslintIntegration": true,
+  "prettier.tabWidth": 2,
+  "prettier.printWidth": 120
+}

+/// <reference types="next" />
+/// <reference types="next/types/global" />

+/* eslint-disable @typescript-eslint/no-var-requires */
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
+module.exports = withBundleAnalyzer({
+  target: "serverless",
+  env: {
+    BASE_URL: process.env.BASE_URL,
+  },
+
+  webpack(conf) {
+    conf.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: "@svgr/webpack",
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  // Enable figma's wrong mask-type attribute work
+                  removeRasterImages: false,
+                  removeStyleElement: false,
+                  removeUnknownsAndDefaults: false,
+                  // Enable svgr's svg to fill the size
+                  removeViewBox: false,
+                },
+              ],
+            },
+          },
+        },
+      ],
+    });
+    // 절대경로
+    conf.resolve.modules.push(__dirname);
+    return conf;
+  },
+});

@@ -6,17 +6,46 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@testing-library/user-event": "^12.1.10",
+    "@next/bundle-analyzer": "^10.0.7",
     "react": "^17.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
     "styled-components": "^5.2.3",
     "styled-components": "^5.2.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "next": "^10.0.5",
+    "styled-reset": "^4.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@svgr/webpack": "^5.5.0",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-window": "^1.8.2",
+    "@types/styled-components": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.14.1",
+    "@typescript-eslint/parser": "^4.14.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.18.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
+    "typescript": "^4.1.3"
   },
   },
   "scripts": {
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next",
+    "debug": "NODE_OPTIONS='--inspect' next dev",
+    "build": "next build",
+    "start": "next start",
+    "export": "next export",
+    "type-check": "tsc",
+    "eslint": "eslint .",
+    "analyze": "ANALYZE=true next build"
   },
   },
   "eslintConfig": {
   "eslintConfig": {
     "extends": [
     "extends": [

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

-body {
-  margin: 0;
-  font-size: 10px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #f7f7f7;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import { theme } from "./theme";
-import "./index.css";
-import { ThemeProvider } from "styled-components";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
-);

+import type { AppProps } from "next/app";
+import Head from "next/head";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "styles/global-style";
+import { theme } from "styles/theme";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Gif Generator</title>
+      </Head>
+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <Component {...pageProps} />
+        <div id="modal-root" />
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default MyApp;

+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <meta charSet="utf-8" />
+          <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+          <meta property="og:title" content="네이버 예약" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
+            rel="preload"
+            as="style"
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
+            rel="stylesheet"
+          />
+          <script
+            type="text/javascript"
+            src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=3ioixdkru3"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

+import Header from "components/Header";
+import Image from "components/Image";
 import styled from "styled-components";
 import styled from "styled-components";
-import Header from "./components/Header";
-import Image from "./components/Image";
 
 
-function App() {
-  return (
-    <Container>
-      <Header />
-      <Image />
-    </Container>
-  );
-}
+const Index = () => (
+  <Container>
+    <Header />
+    <Image />
+  </Container>
+);
 
 
 const Container = styled.div`
 const Container = styled.div`
   display: flex;
   display: flex;
@@ -17,4 +15,4 @@ const Container = styled.div`
   align-items: center;
   align-items: center;
 `;
 `;
 
 
-export default App;
+export default Index;

+import { createGlobalStyle } from "styled-components";
+import { reset } from "styled-reset";
+import { media } from "./theme";
+
+export const GlobalStyle = createGlobalStyle`
+    ${reset}
+    :focus {
+        outline: none;
+        border: none;
+    }
+    div[role="button"] {
+        cursor: pointer;
+    }
+    ::-webkit-scrollbar {
+        display: none;
+    }
+    html{
+        -webkit-text-size-adjust: none;
+        font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif;       
+        font-display: fallback;
+        ${media.tablet}{
+            font-size: 10px;
+        }
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+    button {
+        background: none;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        &:disabled {
+            cursor: default;
+            fill: #f2f3f4;
+        }
+    }
+
+    .pc-tablet-only {
+        display: block;
+        ${media.mobile} {
+            display: none;
+        }
+    }
+    .tablet-mobile-only{
+        display: none;
+        ${media.tablet}{
+            display:block;
+        }
+    }
+    .mobile-only {
+        display: none;
+        ${media.mobile} {
+            display: block;
+        }
+    }
+`;

+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    color: {
+      purple: "#8661de";
+      blue: "#00bac7";
+      gray: "#f6f6f6";
+      green: "#07b495";
+      lightGreen: "#99ecdd";
+      darkGray: "#54595d";
+    };
+    boxShadow: {
+      normal: "0 3px 8px 0 rgb(0 0 0 / 10%)";
+      purple: "0 3px 8px 0 #d6c9ff";
+      blue: "0 3px 8px 0 #b3e2e6";
+    };
+  }
+}

-export const theme = {
+import { DefaultTheme } from "styled-components";
+
+export const theme: DefaultTheme = {
   color: {
   color: {
     purple: "#8661de",
     purple: "#8661de",
     blue: "#00bac7",
     blue: "#00bac7",
@@ -14,7 +16,8 @@ export const theme = {
   },
   },
 };
 };
 
 
-const customMediaQuery = (maxWidth) => `@media (max-width: ${maxWidth}px)`;
+const customMediaQuery = (maxWidth: number): string =>
+  `@media (max-width: ${maxWidth}px)`;
 
 
 export const media = {
 export const media = {
   custom: customMediaQuery,
   custom: customMediaQuery,

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "src",
+    "rootDir": "src",
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js",
+    "custom.d.ts",
+    "styled.d.ts",
+    "src/styles",
+    "src/pages",
+    "public",
+    "**/*.scss",
+    "src/components",
+    "resources",
+  ],
+  "exclude": [
+    "node_modules",
+  ]
+}
\ No newline at end of file