codeit-bootcamp-frontend · Chiman2937 · May 1, 2025 · May 8, 2025 · May 9, 2025 · May 10, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/index.html b/index.html
@@ -10,226 +10,12 @@
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
     <meta property="og:image" content="/images/Img_openGraph.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="styles/reset.css" />
-    <link rel="stylesheet" href="styles/common.css" />
-    <link rel="stylesheet" href="styles/index-style.css" />
-    <title>판다 마켓</title>
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="./src/reset.css" />
+    <link rel="stylesheet" href="./src/common.css" />
   </head>
   <body>
-    <header class="page-header">
-      <nav aria-label="메인 메뉴" class="nav-container">
-        <a href="/" class="nav-logo-link">
-          <img
-            class="nav-logo-image"
-            src="images/판다 얼굴.png"
-            alt="메인페이지로 이동"
-            width="40"
-            height="40"
-          />
-          <span aria-hidden="true" class="nav-logo-text">판다마켓</span>
-        </a>
-        <a aria-label="로그인 버튼 클릭" href="/login.html" class="nav-btn btn"
-          >로그인</a
-        >
-      </nav>
-    </header>
-    <main class="page-main">
-      <section class="page-hero">
-        <div class="hero-container">
-          <div class="hero-context">
-            <h1 class="hero-title">일상의 모든 물건을 거래해보세요</h1>
-            <a
-              aria-label="구경하러가기 버튼 클릭"
-              class="hero-btn btn"
-              href="/items"
-              >구경하러 가기
-            </a>
-          </div>
-          <div class="hero-img-container">
-            <img
-              id="hero-img-top"
-              src="images/Img_home_top/[email protected]"
-              srcset="
-                images/Img_home_top/[email protected]  373w,
-                images/Img_home_top/[email protected]    746w,
-                images/Img_home_top/[email protected] 1119w,
-                images/Img_home_top/[email protected]   1492w
-              "
-              sizes="(max-width: 767px) 447px, 746px"
-              alt="홈페이지를 소개하고 있는 그림"
-              width="746"
-              loading="eager"
-            />
-          </div>
-        </div>
-      </section>
-      <section class="cards">
-        <div class="card-container">
-          <!-- 1200px이상 : 588px, 768px이상 : 696px, 767이하: 344px-->
-          <img
-            class="card-img"
-            src="images/Img_home_01/[email protected]"
-            srcset="
-              images/Img_home_01/[email protected]  294w,
-              images/Img_home_01/[email protected]    588w,
-              images/Img_home_01/[email protected]  882w,
-              images/Img_home_01/[email protected]   1176w
-            "
-            sizes="(max-width: 767px) 344px,(max-width: 1199px) 696px, 588px"
-            alt="가장 HOT한 중고거래 물품을 판다마켓에서 확인해보세요"
-            width="588"
-            loading="lazy"
-          />
-          <div class="card-context">
-            <h2 class="card-tag">Hot item</h2>
-            <h3 class="card-title">인기 상품을 확인해 보세요</h3>
-            <p class="card-description">
-              가장 HOT한 중고거래 물품을<br />
-              판다 마켓에서 확인해보세요
-            </p>
-          </div>
-        </div>
-        <div class="card-container reverse">
-          <img
-            class="card-img"
-            src="images/Img_home_02/[email protected]"
-            srcset="
-              images/Img_home_02/[email protected]  294w,
-              images/Img_home_02/[email protected]    588w,
-              images/Img_home_02/[email protected]  882w,
-              images/Img_home_02/[email protected]   1176w
-            "
-            sizes="(max-width: 767px) 344px,(max-width: 1199px) 696px, 588px"
-            alt="구매하고 싶은 물품은 검색해서 쉽게 찾아보세요"
-            width="588"
-            loading="lazy"
-          />
-          <div class="card-context reverse">
-            <h2 class="card-tag">Search</h2>
-            <h3 class="card-title">구매를 원하는 상품을 검색하세요</h3>
-            <p class="card-description">
-              구매하고 싶은 물품은 검색해서<br />
-              쉽게 찾아보세요
-            </p>
-          </div>
-        </div>
-        <div class="card-container">
-          <img
-            class="card-img"
-            src="images/Img_home_03.png"
-            srcset="
-              images/Img_home_03/[email protected]  294w,
-              images/Img_home_03/[email protected]    588w,
-              images/Img_home_03/[email protected]  882w,
-              images/Img_home_03/[email protected]   1176w
-            "
-            sizes="(max-width: 767px) 344px,(max-width: 1199px) 696px, 588px"
-            alt="어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요"
-            width="588"
-            loading="lazy"
-          />
-          <div class="card-context">
-            <h2 class="card-tag">Register</h2>
-            <h3 class="card-title">판매를 원하는 상품을 등록하세요</h3>
-            <p class="card-description">
-              어떤 물건이든 판매하고 싶은 상품을<br />
-              쉽게 등록하세요
-            </p>
-          </div>
-        </div>
-      </section>
-      <section id="banner-bottom" class="page-hero">
-        <div class="hero-container">
-          <div class="hero-context">
-            <h1 class="hero-title">
-              믿을 수 있는<br />
-              판다마켓 중고 거래
-            </h1>
-          </div>
-          <div class="hero-img-container">
-            <img
-              id="hero-img-bottom"
-              src="images/Img_home_bottom/[email protected]"
-              srcset="
-                images/Img_home_bottom/[email protected]  373w,
-                images/Img_home_bottom/[email protected]    746w,
-                images/Img_home_bottom/[email protected] 1119w,
-                images/Img_home_bottom/[email protected]   1492w
-              "
-              alt="중고 거래를 진행중인 그림"
-              width="746"
-              loading="lazy"
-            />
-          </div>
-        </div>
-      </section>
-    </main>
-    <footer aria-label="링크 모음" class="page-footer">
-      <div class="footer-container">
-        <div class="footer-corp">@codeit - 2024</div>
-        <div class="footer-links">
-          <a href="/Privacy">Privacy Policy</a>
-          <a href="/FAQ">FAQ</a>
-        </div>
-        <div class="footer-icons">
-          <a
-            href="https://www.facebook.com/?locale=ko_KR"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              class="footer-icon"
-              src="images/ic_facebook.png"
-              alt="판다마켓 페이스북 채널로 이동"
-              width="18"
-              height="18"
-              loading="lazy"
-            />
-          </a>
-          <a
-            href="https://x.com/?lang=ko"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              class="footer-icon"
-              src="images/ic_twitter.png"
-              alt="판다마켓 트위터 채널로 이동"
-              width="18"
-              height="18"
-              loading="lazy"
-            />
-          </a>
-          <a
-            href="https://www.youtube.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              class="footer-icon"
-              src="images/ic_youtube.png"
-              alt="판다마켓 유튜브 채널로 이동"
-              width="18"
-              height="18"
-              loading="lazy"
-            />
-          </a>
-          <a
-            href="https://www.instagram.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              class="footer-icon"
-              src="images/ic_instagram.png"
-              alt="판다마켓 인스타그램 채널로 이동"
-              width="18"
-              height="18"
-              loading="lazy"
-            />
-          </a>
-        </div>
-      </div>
-    </footer>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/items.html b/items.html