[윤진우] Sprint5

.github/pull_request_template.md

@@ -2,26 +2,148 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+**🐼 중고마켓**
+
+- [x] 중고마켓 페이지 주소는 “/items” 입니다.
+- [x] 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
+- [x] 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
+- [x] 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
+- [x] '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
+- [x] 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
+
+**🖼️ 중고마켓 반응형**
+
+- [x] 베스트 상품
+
+  - [x] Desktop : 4개 보이기
+  - [x] Tablet : 2개 보이기
+  - [x] Mobile : 1개 보이기
+
+- [x] 전체 상품
+  - [x] Desktop : 12개 보이기
+  - [x] Tablet : 6개 보이기
+  - [x] Mobile : 4개 보이기
 
 ### 심화
 
-- [x]
-- []
+- [x] 페이지 네이션 기능을 구현합니다.
 
 ## 주요 변경사항
 
--
--
+- Market 페이지 구현
+- Market 페이지 반응형 구현
 
 ## 스크린샷
 
-![image](이미지url)
+<details>
+<summary>🖥️ 데스크탑 이미지</summary>
+<div markdown="1">
+
+![데스크탑](desktop-img.png)
+
+</div>
+</details>
+
+<details>
+<summary>📲 태블릿 이미지</summary>
+<div markdown="1">
+
+![태블릿](tablet-img.png)
+
+</div>
+</details>
+
+<details>
+<summary>📱 모바일 이미지</summary>
+<div markdown="1">
+
+![모바일](mobile-img.png)
+
+</div>
+</details>
 
 ## 멘토에게
 
--
--
-- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
+- Header 컴포넌트에서 해당하는 페이지 글자에 파란색을 입히는 기능을 구현하기 위해 Header 컴포넌트에서 props로 location을 받아, 해당 값에 따라 active 클래스를 추가하도록 구현했습니다. 근데, 이후에 보니까 NavLink 라는 컴포넌트가 있더라구요. 제가 구현한 기능이랑 비슷한것 같은데, 제가 구현한걸 그대로 써도 될까요? 아님, 이걸 사용하는게 더 나을까요?
+
+```jsx
+const Header = ({ location }) => {
+    //...
+    <Link
+        to={"/boards"}
+        className={location === "community" ? "active" : ""}
+    >
+        자유게시판
+    </Link>
+    <Link
+        to={"/items"}
+        className={location === "market" ? "active" : ""}
+    >
+        중고마켓
+    </Link>
+    //...
+}
+```
+
+- 모바일용 화면에서 전체 상품 부분에 검색칸이 무조건 내려가게 만들기 위해서 어떻게 해야하나 고민을 많이 하다가 결국 title에 min-width를 줘서 내려가도록 했는데 이렇게 해도 괜찮은 부분인가요? 아니면 다른 방법이 존재할까요?
+
+```css
+@media (max-width: 767px) {
+  .AllItems .title {
+    min-width: calc(100% - 200px);
+  }
+}
+```
+
+사실, min-width값도 어림잡아 설정한거라 확신이 안서서 질문드립니다!
+
+- 모바일용 화면에서 정렬 버튼을 누르면 최신순, 좋아요순을 선택하는 드롭다운을 보이도록 했습니다. 그런데, 두 가지 옵션 중 하나를 누르면 그 드롭다운이 다시 숨겨지게 하려고, show 클래스를 toggle 하도록 했는데, 작동이 안됩니다. 정렬 버튼을 누를 시에는 잘 숨겨지는데 왜 옵션 클릭시에는 토글이 안되는지 궁금합니다. 이벤트 버블링? 때문일까요??
+
+```jsx
+<div
+  className="orderby-mobile"
+  onClick={() => {
+    document.querySelector(".orderby-dropdown").classList.toggle("show");
+  }}
+>
+  <button className="orderby-icon"></button>
+  <div className="orderby-dropdown">
+    <div
+      className="first-option"
+      onClick={() => {
+        setOrderBy("recent");
+        setCurrentPage(1);
+        document.querySelector(".orderby-dropdown").classList.toggle("show");
+      }}
+    >
+      최신순
+    </div>
+    <div
+      className="second-option"
+      onClick={() => {
+        setOrderBy("favorite");
+        setCurrentPage(1);
+        document.querySelector(".orderby-dropdown").classList.toggle("show");
+      }}
+    >
+      좋아요순
+    </div>
+  </div>
+</div>
+```
+
+- 상품 검색 시 keyword로 입력값을 넘겨줘서 api를 호출하도록 했습니다. 그런데, 테스트중 이상한 점을 발견했습니다.
+
+  - 'ㅁ'을 검색하면 `이렇게 해야지 한번만 찍`, `aaa`, `에스파 윈터` 가 나오고
+  - '마'를 검색하면 `판다마켓...`, `Ferris the crab` 이 나옵니다.
+
+  검색어와 관련없는 상품들이 왜 나오는지 모르겠습니다..!
+
+- 작성하다보니, App.css와 index.css가 빈 파일로 남게 되었는데, 이부분은 딱히 작성할게 없으면 비워두는 경우도 있나요??
+
+  그리고, 공통 스타일을 base.css로 묶어놨는데, 굳이 base.css 말고 App.css에 넣는게 나을까요??
+
+- netlify로 배포 후 살펴보던 중, /items 에서 새로고침을 하면 Page not found 라는 오류가 나오는데, 왜 그런 걸까요? 메인 페이지를 입력하면 다시 잘 접속됩니다.
+  ![Page not found](image.png)
+
+- netlify로 배포 후 살펴보던 중, 이미지가 늦게 로딩되는 몇가지 상품들이 있는데, 왜 그런 것이며 어떻게 대처할 수 있을까요?

.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?

README.md

@@ -1,70 +1,36 @@
-# Getting Started with Create React App
+# Getting Started with Vite + React
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with [Vite](https://vitejs.dev/).
 
-## Available Scripts
+## 🚀 Available Scripts
 
 In the project directory, you can run:
 
-### `npm start`
+### `npm run dev`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Runs the app in development mode.  
+Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
 
-The page will reload when you make changes.\
+The page will reload when you make changes.  
 You may also see any lint errors in the console.
 
-### `npm test`
-
-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.
-
-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`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-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.
-
-## 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)
+Builds the app for production to the `dist` folder.  
+It optimizes the build for the best performance.
 
-### Advanced Configuration
+### `npm run preview`
 
-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)
+Serves the production build locally.  
+Useful for testing the final output before deployment.
 
-### Deployment
+## 📚 Learn More
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+To learn more about Vite, check out the [Vite documentation](https://vitejs.dev/).  
+To learn React, check out the [React documentation](https://react.dev/).
 
-### `npm run build` fails to minify
+## 🛠 Additional Configurations
 
-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)
+- **Environment Variables:** Use `.env` files for environment-specific settings.
+- **TypeScript Support:** Vite supports TypeScript out of the box.
+- **ESLint & Prettier:** Configure linting and formatting for better code quality.

eslint.config.js

@@ -0,0 +1,34 @@
+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": "off",
+      "react/prop-types": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="src/assets/images/favicon.ico" type="image/x-icon" />
+    <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"
+    />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>