[이지현] Sprint5

.gitignore

@@ -1,23 +1,24 @@
-# 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
-
+# 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?

CHECKLIST.md

@@ -0,0 +1,83 @@
+# ✅ Vanilla JS → React 마이그레이션 체크리스트
+
+React로 마이그레이션하는 전 과정을 단계별로 정리한 체크리스트입니다.  
+진행하면서 항목을 하나씩 체크해보세요!
+
+---
+
+## 1️⃣ 기본 환경 설정
+
+- [x] 기존 프로젝트 백업
+- [x] Vite 기반 React 프로젝트 생성
+- [x] `CHECKLIST.md`, `README.md`, 등 설정
+
+---
+
+## 2️⃣ 폴더 구조 구성
+
+- [x] `components/` 폴더 생성
+- [x] `pages/` 폴더 생성
+- [x] `styles/` 폴더 생성
+- [x] `utils/`, `constants/` 폴더 생성 (필요 시)
+- [x] `App.jsx` 생성 및 루트에서 관리
+- [x] `main.jsx`에서 `App.jsx` 렌더링 설정
+
+---
+
+## 3️⃣ 라우팅 설정
+
+- [x] `react-router-dom` 설치
+- [x] `BrowserRouter`로 라우팅 구성
+- [x] `Routes` 및 `Route` 정의
+- [x] 각 페이지를 JSX 컴포넌트로 생성 (Home, Login 등)
+
+---
+
+## 4️⃣ 공통 레이아웃 구성
+
+- [x] `Header`, `Footer`, `Navigation` 컴포넌트 생성
+- [x] 레이아웃 컴포넌트에서 `<Outlet />` 사용
+- [ ] 공통 레이아웃으로 전체 구성 확인
+
+---
+
+## 5️⃣ 페이지 마이그레이션
+
+- [x] `index.html` → `Home.jsx`
+- [x] `login.html` → `Login.jsx`
+- [x] `signup.html` → `Signup.jsx`
+- [x] 기타 페이지들도 마이그레이션
+
+---
+
+## 6️⃣ 스타일 적용
+
+- [x] 기존 CSS → `styles/` 폴더에 정리
+- [x] 각 컴포넌트에서 필요한 CSS import
+- [x] CSS 파일 구조 및 분리 전략 결정
+
+---
+
+## 7️⃣ 기능 로직 이전
+
+- [x] 로그인 / 회원가입 로직 마이그레이션
+- [x] API 호출 관련 코드 React에 맞게 리팩토링
+- [x] 공통 함수는 `utils/`로 이동
+
+---
+
+## 8️⃣ 상태 관리
+
+- [x] `useState`, `useEffect` 등 훅 사용
+- [ ] 필요 시 Context API 또는 외부 상태 관리 도입 검토
+
+---
+
+## 9️⃣ 마무리 정리
+
+- [x] 전체 기능 테스트 완료
+- [ ] 불필요한 파일/코드 정리
+- [x] README 작성 및 업데이트
+- [x] 커밋 정리 및 PR 제출
+
+---

README.md

@@ -1,70 +1,67 @@
-# Getting Started with Create React App
+# 🛠️ Vanilla JS → React 마이그레이션 프로젝트 (판다마켓)
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+이 프로젝트는 기존에 Vanilla JavaScript로 작성된 웹 애플리케이션을 **React** 기반으로 리팩토링하는 마이그레이션 작업입니다.  
+유지보수성과 확장성을 높이기 위해 Vite, React, React Router 등을 도입했습니다.
 
-## Available Scripts
+---
 
-In the project directory, you can run:
+## 📦 기술 스택
 
-### `npm start`
+- React (with Vite)
+- React Router DOM
+- JavaScript (ES6+)
+- CSS (컴포넌트별 분리)
+- Git & GitHub
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+---
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+## 📁 폴더 구조 (초기 구성)
 
-### `npm test`
+```
+public/
+├──icons/            # 아이콘 파일
+├──images/           # 이미지 파일
+└──logo/             # 로고 파일
+src/
+├── api/             # api 파일
+├── assets/          # 이미지, 로고, 아이콘 등
+├── components/      # 공통 UI 컴포넌트
+├── pages/           # 라우팅 기반 페이지 컴포넌트
+├── styles/          # CSS 스타일 파일 모음
+├── utils/           # 유틸 함수 (API, 공통 로직 등)
+├── App.jsx          # 루트 컴포넌트
+└── main.jsx         # 진입점
+```
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+---
 
-### `npm run build`
+## 🚀 실행 방법
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```bash
+npm install
+npm run dev
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+---
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## ✅ 현재 진행 상황
 
-### `npm run eject`
+- [x] Vite 기반 프로젝트 초기 세팅
+- [x] 폴더 구조 정리 및 기본 구성
+- [x] 페이지별 JSX 마이그레이션 작업 중
+- [x] 공통 컴포넌트 (Header, Footer) 구성 예정
+- [x] 기능 로직 이전 (API 호출, localStorage 등)
+- [x] 스타일 분리 및 리팩토링
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+👉 자세한 진행 내용은 [`CHECKLIST.md`](./CHECKLIST.md)를 참고해주세요.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+---
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+## ✨ 마이그레이션 목적
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+- 유지보수 가능한 구조로 변경
+- React의 컴포넌트 기반 UI 설계 적용
+- 페이지 라우팅 및 상태 관리를 보다 효율적으로 구성
+- CSS 파일 구조를 개선하고 재사용성 확보
 
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+---

babel.config.js

@@ -0,0 +1,12 @@
+export default {
+  presets: [
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+        importSource: "@emotion/react",
+      },
+    ],
+  ],
+  plugins: ["@emotion/babel-plugin"],
+};

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 },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <title>판다마켓</title>
+    <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "@emotion/react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}