[Feature] - 프로젝트 환경 세팅 (#4)

* chore: 초기 package.json 설정

* chore: .gitignore 추가

* chore: tsconfig.json 초기 설정

* chore: react 내 webpack 세팅

1. webpack 관련 의존성 추가

2. build scrpit 수정

3. webpack.common.js 추가

4. public 디렉터리 내 index.html 추가

5. src 디렉터리 내 App.tsx 및 main.tsx 추가

* chore: prettier & eslint 설정

* chore: emotion 설정

frontend/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  env: { browser: true, es2020: true, jest: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:compat/recommended",
+  ],
+  plugins: ["react-refresh", "prettier", "@typescript-eslint"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  rules: {
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "import/no-unresolved": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "no-undef": "off",
+    "compat/compat": "warn",
+  },
+};

frontend/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# storybook
+build-storybook.log
+
+node_modules
+*storybook.log

frontend/.prettierrc.json

@@ -0,0 +1,28 @@
+{
+  "endOfLine": "auto",
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "prefer-const": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^@emotion/(.*)$",
+    "^@apis/(.*)$",
+    "^@hooks/(.*)$",
+    "^(@|components/common)(.*|$)",
+    "^(@|components/layout)(.*|$)",
+    "^(@|components/pages)(.*|$)",
+    "^@components/(.*)$",
+    "^@styles/(.*)$",
+    "^@assets/(.*)$",
+    "^@constants/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

frontend/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "2024-touroot",
+  "version": "1.0.0",
+  "description": "to your route, 투룻!",
+  "repository": "https://github.com/woowacourse-teams/2024-touroot",
+  "scripts": {
+    "dev": "webpack serve --config webpack.common.js",
+    "build": "NODE_ENV=production webpack --config webpack.common.js"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-compat": "^5.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.8",
+    "html-webpack-plugin": "^5.6.0",
+    "prettier": "^3.3.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.3",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^6.0.1"
+  },
+  "contributors": [
+    {
+      "name": "Jinyoung Son",
+      "email": "sm099@naver.com",
+      "url": "https://github.com/jinyoung234"
+    },
+    {
+      "name": "Horim Sim",
+      "email": "hori5020@gmail.com",
+      "url": "https://github.com/simorimi"
+    },
+    {
+      "name": "Jaehee Choi",
+      "email": "jenn0.6n@gmail.com",
+      "url": "https://github.com/0jenn0"
+    }
+  ],
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "webpack"
+  ],
+  "engines": {
+    "npm": ">=10.7.0",
+    "node": ">=20.15.1"
+  },
+  "browserslist": [
+    ">1%",
+    "not dead"
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hello React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/src/App.tsx

@@ -0,0 +1,3 @@
+export default function App() {
+  return <div>App</div>;
+}

frontend/src/main.tsx

@@ -0,0 +1,14 @@
+import ReactDOM from "react-dom/client";
+
+import { Global } from "@emotion/react";
+
+import { globalStyle } from "@styles/globalStyle";
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <>
+    <Global styles={globalStyle} />
+    <App />
+  </>,
+);

frontend/src/styles/globalStyle.ts

@@ -0,0 +1,204 @@
+import { css } from "@emotion/react";
+
+export const globalStyle = css`
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    vertical-align: baseline;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    font-size: 100%;
+    font: inherit;
+  }
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  * {
+    user-select: none;
+  }
+  body {
+    font-family: sans-serif;
+  }
+  ol,
+  ul,
+  li {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    color: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+  }
+  input[type="text"] {
+    padding: 0;
+    padding-inline: 0;
+    padding-block: 0;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    font-size: 62.5%;
+  }
+
+  body {
+    background-color: white;
+    color: black;
+    font-size: 1.6rem;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Open Sans",
+      "Helvetica Neue",
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  #root {
+    position: relative;
+
+    margin: 0 auto;
+
+    box-shadow: 0 0 0.315rem rgba(0, 0, 0, 0.25);
+
+    background-color: white;
+    min-width: 28rem;
+
+    max-width: 48rem;
+
+    min-height: 100vh;
+  }
+`;