Merge pull request #203 from naynara87/React-나윤주-sprint6

README.md

@@ -1,4 +1,4 @@
-## 스프린트 5미션
+## 스프린트 6미션
 
 - site 확인: https://pandamarket-momo.netlify.app/
 
@@ -9,21 +9,14 @@
 - [x] React를 사용합니다
 - [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
 - [x] Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
-      체크리스트 [기본]
-      중고마켓
-- [x] 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
-- [x] 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
-- [x] 중고마켓 페이지 주소는 “/items” 입니다.
-- [x] 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
-- [x] '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
-- [x] 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
-      중고마켓 반응형
-- [x] 베스트 상품
-  - Desktop : 4개 보이기
-  - Tablet : 2개 보이기
-  - Mobile : 1개 보이기
-- [x] 전체 상품
-      _ Desktop : 12개 보이기
-      _ Tablet : 6개 보이기 \* Mobile : 4개 보이기
+      상품 등록
+- [ ] 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
+- [x] 상품 이미지는 최대 한개 업로드가 가능합니다.
+- [x] 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
+- [x] API를 통한 상품 등록은 추후 미션에서 적용합니다.
+- [x] 각 input의 placeholder 값을 정확히 입력해주세요.
+- [x] 상품 등록 페이지 주소는 “/additem” 입니다.
       체크리스트 [심화]
-- [x] 페이지 네이션 기능을 구현합니다.
+      상품 등록
+- [x] 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.
+- [x] 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.

package.json

@@ -9,6 +9,7 @@
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "sass": "^1.77.6",
@@ -20,12 +21,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -39,6 +34,12 @@
     ]
   },
   "devDependencies": {
-    "eslint-plugin-prettier": "^5.1.3"
+    "@eslint/compat": "^1.1.0",
+    "@eslint/js": "^9.6.0",
+    "eslint": "^9.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "globals": "^15.7.0",
+    "prettier": "^3.3.2"
   }
 }

src/App.js

@@ -12,8 +12,11 @@ function App() {
       <Routes>
         {/* 일시적 확인용 메인으로 addItems 세팅 */}
         <Route path="/" element={<AddItem />} />
+        <Route path="/items" element={<Items />}>
+          <Route index element={<Items />} />
+          {/* <Route path=":postId" element={<ItemsPage />} /> */}
+        </Route>
         <Route path="/addItem" element={<AddItem />} />
-        <Route path="/items" element={<Items />} />
         <Route path="/boards" element={<Board />} />
         <Route path="/login" element={<Login />} />
         <Route path="*" element={<Notfound />} />

src/assets/scss/components/_input-file.scss

@@ -35,6 +35,12 @@
     aspect-ratio: 1/1;
     overflow: hidden;
     border-radius: 12px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
     .ic_remove {
       position: absolute;
       right: 10px;