[나윤주] sprint7

README.md

@@ -1,22 +1,29 @@
-## 스프린트 6미션
+## 스프린트 7미션
 
 - site 확인: https://pandamarket-momo.netlify.app/
 
-### 템플릿 코드 확인
-
-기본 요구사항
+### 기본 요구사항
 
 - [x] React를 사용합니다
 - [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
 - [x] Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
       상품 등록
-- [ ] 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
-- [x] 상품 이미지는 최대 한개 업로드가 가능합니다.
-- [x] 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
-- [x] API를 통한 상품 등록은 추후 미션에서 적용합니다.
-- [x] 각 input의 placeholder 값을 정확히 입력해주세요.
-- [x] 상품 등록 페이지 주소는 “/additem” 입니다.
-      체크리스트 [심화]
-      상품 등록
-- [x] 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.
-- [x] 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
+
+### 상품 상세
+
+- [x] response 로 받은 아래의 데이터로 화면을 구현합니다.
+- [x] 상품 상세 페이지 주소는 “/items/{productId}” 입니다.
+      => favoriteCount : 하트 개수
+      => images : 상품 이미지
+      => tags : 상품태그
+      => name : 상품 이름
+      => description : 상품 설명
+- [x] 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
+      상품 문의 댓글
+- [x] response 로 받은 아래의 데이터로 화면을 구현합니다
+- [x] 문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
+      => image : 작성자 이미지
+      => nickname : 작성자 닉네임
+      => content : 작성자가 남긴 문구
+      => description : 상품 설명
+      => updatedAt : 문의글 마지막 업데이트 시간

package.json

@@ -37,8 +37,6 @@
     "@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

@@ -1,20 +1,22 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import AddItem from './pages/AddItem';
-import Items from './pages/Items';
-import Board from './pages/Board';
-import Login from './pages/Login';
-import Notfound from './pages/Notfound';
+import Home from './pages/Home/Home';
+import AddItem from './pages/Item/AddItem';
+import Items from './pages/Item/Items';
+import ItemsPage from './pages/Item/ItemsPage';
+import Board from './pages/Board/Board';
+import Login from './pages/Auth/Login';
+import Notfound from './pages/Error/Notfound';
 import './assets/css/style.css';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        {/* 일시적 확인용 메인으로 addItems 세팅 */}
-        <Route path="/" element={<AddItem />} />
-        <Route path="/items" element={<Items />}>
+        {/* 일시적 확인용 메인으로 Items 세팅 */}
+        <Route path="/" element={<Items />} />
+        <Route path="/items">
           <Route index element={<Items />} />
-          {/* <Route path=":postId" element={<ItemsPage />} /> */}
+          <Route path=":productId" element={<ItemsPage />} />
         </Route>
         <Route path="/addItem" element={<AddItem />} />
         <Route path="/boards" element={<Board />} />

src/assets/scss/components/_button.scss

@@ -2,6 +2,7 @@
 
 .btn-sm {
   display: flex;
+  width: auto;
   min-width: 88px;
   height: 48px;
   font-size: 16px;
@@ -38,3 +39,34 @@
   background: var(--gray400);
   color: var(--white);
 }
+
+.btn-profile {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: url('../img/profile.png') no-repeat;
+}
+
+.btn-favorite {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--gray200);
+  background: var(--white);
+  border-radius: 2em;
+  padding: 0.5em 1em;
+  font-size: 16px;
+  color: var(--gray500);
+  transition: 0.2s ease;
+  &:hover {
+    background: var(--gray100);
+    color: var(--gray600);
+  }
+  &.on {
+    .ic_heart {
+      background-image: url('../img/ic_heart_fill.svg');
+    }
+  }
+}

src/assets/scss/components/_loadingbar.scss

@@ -1,9 +1,16 @@
 /* ==== loadingbar ==== */
+.bg-dark {
+  background: var(--gray100);
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+}
 .load-wrapp {
   width: 100px;
   height: 100px;
-  margin: 60px auto;
-  padding: 20px 20px 20px;
+  margin: 0 auto;
+  padding: 80px 20px 140px;
   text-align: center;
 
   .load {