[김치영] sprint7

README.md

@@ -1,12 +1,182 @@
-# React + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+```
+16-Sprint-Mission
+├─ eslint.config.js
+├─ index.html
+├─ package-lock.json
+├─ package.json
+├─ public
+│  ├─ images
+│  │  ├─ icon_google.png
+│  │  ├─ icon_kakao.png
+│  │  ├─ icon_password_invisible.png
+│  │  ├─ icon_password_visible.png
+│  │  ├─ icon_profile.png
+│  │  ├─ ic_arrow_down.png
+│  │  ├─ ic_back.png
+│  │  ├─ ic_facebook.png
+│  │  ├─ ic_instagram.png
+│  │  ├─ ic_kebab.png
+│  │  ├─ ic_nextPageClick_active.png
+│  │  ├─ ic_nextPageClick_inactive.png
+│  │  ├─ ic_plus.png
+│  │  ├─ ic_prevPageClick_active.png
+│  │  ├─ ic_prevPageClick_inactive.png
+│  │  ├─ ic_search.png
+│  │  ├─ ic_sort.png
+│  │  ├─ ic_twitter.png
+│  │  ├─ ic_X.png
+│  │  ├─ ic_youtube.png
+│  │  ├─ img_comment_none.png
+│  │  ├─ img_favorite_inactive.png
+│  │  ├─ Img_home_01
+│  │  │  ├─ Img_home_01@0.5x.png
+│  │  │  ├─ Img_home_01@1.5x.png
+│  │  │  ├─ Img_home_01@1x.png
+│  │  │  └─ Img_home_01@2x.png
+│  │  ├─ Img_home_02
+│  │  │  ├─ Img_home_02@0.5x.png
+│  │  │  ├─ Img_home_02@1.5x.png
+│  │  │  ├─ Img_home_02@1x.png
+│  │  │  └─ Img_home_02@2x.png
+│  │  ├─ Img_home_03
+│  │  │  ├─ Img_home_03@0.5x.png
+│  │  │  ├─ Img_home_03@1.5x.png
+│  │  │  ├─ Img_home_03@1x.png
+│  │  │  └─ Img_home_03@2x.png
+│  │  ├─ Img_home_bottom
+│  │  │  ├─ Img_home_bottom@0.5x.png
+│  │  │  ├─ Img_home_bottom@1.5x.png
+│  │  │  ├─ Img_home_bottom@1x.png
+│  │  │  └─ Img_home_bottom@2x.png
+│  │  ├─ Img_home_top
+│  │  │  ├─ Img_home_top@0.5x.png
+│  │  │  ├─ Img_home_top@1.5x.png
+│  │  │  ├─ Img_home_top@1x.png
+│  │  │  └─ Img_home_top@2x.png
+│  │  ├─ img_items_default_md.png
+│  │  ├─ Img_logo.png
+│  │  └─ Img_openGraph.png
+│  └─ _redirects
+├─ README.md
+├─ src
+│  ├─ App.jsx
+│  ├─ common.css
+│  ├─ components
+│  │  ├─ comments
+│  │  │  ├─ CommentCard.jsx
+│  │  │  ├─ CommentCard.module.css
+│  │  │  ├─ CommentEditForm.jsx
+│  │  │  ├─ CommentEditForm.module.css
+│  │  │  ├─ CommentRequireForm.jsx
+│  │  │  ├─ CommentRequireForm.module.css
+│  │  │  ├─ CommentsContainer.jsx
+│  │  │  ├─ CommentsContainer.module.css
+│  │  │  ├─ CommentView.jsx
+│  │  │  └─ CommentView.module.css
+│  │  ├─ common
+│  │  │  ├─ AuthField
+│  │  │  │  ├─ AuthField.jsx
+│  │  │  │  └─ AuthField.module.css
+│  │  │  ├─ Button
+│  │  │  ├─ ItemCard
+│  │  │  │  ├─ ItemCard.jsx
+│  │  │  │  └─ ItemCard.module.css
+│  │  │  ├─ ItemCardSkeleton
+│  │  │  │  ├─ ItemCardSkeleton.jsx
+│  │  │  │  └─ ItemCardSkeleton.module.css
+│  │  │  ├─ ItemsContainer
+│  │  │  │  ├─ ItemsContainer.jsx
+│  │  │  │  └─ ItemsContainer.module.css
+│  │  │  ├─ KebabMenu
+│  │  │  │  ├─ KebabMenu.jsx
+│  │  │  │  └─ KebabMenu.module.css
+│  │  │  ├─ Pagination
+│  │  │  │  ├─ Pagination.jsx
+│  │  │  │  ├─ Pagination.module.css
+│  │  │  │  ├─ PaginationButton.jsx
+│  │  │  │  └─ PaginationButton.module.css
+│  │  │  ├─ PaginationButton
+│  │  │  ├─ SearchInput
+│  │  │  │  ├─ SearchInput.jsx
+│  │  │  │  └─ SearchInput.module.css
+│  │  │  └─ SelectDropdown
+│  │  │     ├─ SelectDropdown.jsx
+│  │  │     └─ SelectDropdown.module.css
+│  │  └─ layout
+│  │     ├─ LogoHeader
+│  │     │  ├─ LogoHeader.jsx
+│  │     │  └─ LogoHeader.module.css
+│  │     ├─ Nav
+│  │     │  ├─ Nav.jsx
+│  │     │  └─ Nav.module.css
+│  │     └─ profileCard
+│  │        ├─ ProfileCard.jsx
+│  │        └─ ProfileCard.module.css
+│  ├─ constants
+│  ├─ contexts
+│  │  └─ LoginContext.jsx
+│  ├─ fonts
+│  │  └─ rokafsansmedium-normal.woff
+│  ├─ hooks
+│  │  ├─ useAsync.jsx
+│  │  ├─ useFormFields.jsx
+│  │  ├─ usePageSizeByBreakPoint.jsx
+│  │  ├─ usePaginationByOffset.jsx
+│  │  ├─ useScreenBreakpoint.jsx
+│  │  └─ useSearchQueryString.jsx
+│  ├─ main.jsx
+│  ├─ pages
+│  │  ├─ AddItemPage
+│  │  │  ├─ AddItemPage.jsx
+│  │  │  └─ AddItemPage.module.css
+│  │  ├─ AuthPage
+│  │  │  ├─ fieldsConfig.js
+│  │  │  ├─ FormAuth.css
+│  │  │  ├─ LoginPage.jsx
+│  │  │  ├─ sections
+│  │  │  │  ├─ SocialLogin.jsx
+│  │  │  │  └─ SocialLogin.module.css
+│  │  │  └─ SignupPage.jsx
+│  │  ├─ BoardPage
+│  │  │  └─ BoardPage.jsx
+│  │  ├─ FaqPage
+│  │  │  └─ FaqPage.jsx
+│  │  ├─ HomePage
+│  │  │  ├─ Banner.css
+│  │  │  ├─ BannerBottom.css
+│  │  │  ├─ Card.css
+│  │  │  ├─ Cards.css
+│  │  │  ├─ Footer.css
+│  │  │  ├─ Home.css
+│  │  │  ├─ HomePage.jsx
+│  │  │  └─ Main.css
+│  │  ├─ ItemDetailsPage
+│  │  │  ├─ ItemDetailsPage.jsx
+│  │  │  ├─ ItemDetailsPage.module.css
+│  │  │  └─ sections
+│  │  │     ├─ ItemComments.jsx
+│  │  │     ├─ ItemComments.module.css
+│  │  │     ├─ ItemDetailsSection.jsx
+│  │  │     └─ ItemDetailsSection.module.css
+│  │  ├─ ItemsPage
+│  │  │  ├─ ItemsPage.css
+│  │  │  ├─ ItemsPage.jsx
+│  │  │  └─ sections
+│  │  │     ├─ BestItemsSection.jsx
+│  │  │     ├─ CurrentItemsSection
+│  │  │     │  ├─ ItemsSearchHeader.jsx
+│  │  │     │  └─ ItemsSearchHeader.module.css
+│  │  │     ├─ CurrentItemsSection.jsx
+│  │  │     └─ ItemsSection.module.css
+│  │  └─ PrivacyPage
+│  │     └─ PrivacyPage.jsx
+│  ├─ reset.css
+│  └─ utils
+│     ├─ api.js
+│     ├─ debounce.js
+│     ├─ formatPrice.js
+│     └─ validators.js
+└─ vite.config.js
 
-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.
+```

src/App.jsx

@@ -1,5 +1,5 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { LoginStateProvider } from "./contexts/LoginStateContext";
+import { LoginProvider } from "./contexts/LoginContext";
 import HomePage from "./pages/HomePage/HomePage";
 import LoginPage from "./pages/AuthPage/LoginPage";
 import SignupPage from "./pages/AuthPage/SignupPage";
@@ -8,15 +8,19 @@ import AddItemPage from "./pages/AddItemPage/AddItemPage";
 import PrivacyPage from "./pages/PrivacyPage/PrivacyPage";
 import FaqPage from "./pages/FaqPage/FaqPage";
 import BoardPage from "./pages/BoardPage/BoardPage";
+import ItemDetailsPage from "./pages/ItemDetailsPage/ItemDetailsPage";
 
 function App() {
   return (
     <BrowserRouter>
-      <LoginStateProvider>
+      <LoginProvider>
         <Routes>
           <Route path="/">
             <Route index element={<HomePage />} />
-            <Route path="items" element={<ItemsPage />} />
+            <Route path="items">
+              <Route index element={<ItemsPage />} />
+              <Route path=":itemId" element={<ItemDetailsPage />} />
+            </Route>
             <Route path="board" element={<BoardPage />} />
             <Route path="additem" element={<AddItemPage />} />
             <Route path="privacy" element={<PrivacyPage />} />
@@ -25,7 +29,7 @@ function App() {
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
         </Routes>
-      </LoginStateProvider>
+      </LoginProvider>
     </BrowserRouter>
   );
 }

src/common.css

@@ -34,6 +34,7 @@ body {
   font-weight: 600;
   font-family: 'Pretendard';
   border: none;
+	cursor: pointer;
 }
 
 .button-style:hover {
@@ -42,6 +43,7 @@ body {
 
 .button-style:disabled {
   background-color: var(--color-gray400);
+	cursor: auto;
 }
 
 @font-face {