codeit-bootcamp-frontend · sermain2 · Apr 20, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,16 @@
 {
-  "name": "1-weekly-mission",
+  "name": "panda-market-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "history": "^5.3.0",
     "react": "^18.2.0",
+    "react-app": "^1.1.2",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/home/bottom-banner-image.png b/public/images/home/bottom-banner-image.png
diff --git a/public/images/home/feature1-image.png b/public/images/home/feature1-image.png
diff --git a/public/images/home/feature2-image.png b/public/images/home/feature2-image.png
diff --git a/public/images/home/feature3-image.png b/public/images/home/feature3-image.png
diff --git a/public/images/home/hero-image.png b/public/images/home/hero-image.png
diff --git a/public/images/icons/eye-invisible.svg b/public/images/icons/eye-invisible.svg
diff --git a/public/images/icons/eye-visible.svg b/public/images/icons/eye-visible.svg
diff --git a/public/images/logo/favicon.ico b/public/images/logo/favicon.ico
diff --git a/public/images/logo/logo.svg b/public/images/logo/logo.svg
diff --git a/public/images/logo/og-image.png b/public/images/logo/og-image.png
diff --git a/public/images/social/facebook-logo.svg b/public/images/social/facebook-logo.svg
diff --git a/public/images/social/google-logo.png b/public/images/social/google-logo.png
diff --git a/public/images/social/instagram-logo.svg b/public/images/social/instagram-logo.svg
diff --git a/public/images/social/kakao-logo.png b/public/images/social/kakao-logo.png
diff --git a/public/images/social/twitter-logo.svg b/public/images/social/twitter-logo.svg
diff --git a/public/images/social/youtube-logo.svg b/public/images/social/youtube-logo.svg
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,32 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <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.
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
 
-      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`.
+    <!-- 
+      Font preloading
+      - 페이지가 처음 로딩될 때 텍스트가 순간적으로 깜빡이거나 바뀌는 듯한 현상을 보신 적이 있으신가요? (Flash of Unstyled Text, FOUT)
+        브라우저가 지정된 폰트를 다운로드 받는 동안 임시로 대체 폰트("fallback font")를 사용하기 때문인데요, 폰트를 preload하면 텍스트 렌더링을 보다 매끄럽게 할 수 있습니다.
+      - 브라우저는 rel="preload"로 지정된 리소스를 우선적으로 준비합니다.
+      - 폰트, 페이지 상단의 이미지, 가장 먼저 실행되어야 하는 스크립트 등에 preload 속성을 사용하는 경우가 많아요.
+      - href의 리소스 유형에 따라 <link>의 `as` 속성값을 정해야 해요. 일반적인 폰트 파일(예: .woff, .ttf 등)이라면 as="font"겠지만, 우리가 사용하는 웹폰트는 css 형식이기 때문에 as="style"을 사용합니다.
     -->
-    <title>React App</title>
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <!-- 간혹 보안 등의 이슈로 자바스크립트를 지원하지 않는 브라우저 환경에서도 최소한의 스타일이 로딩될 수 있도록 합니다. -->
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    /></noscript>
   </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>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt