Merge pull request #220 from itscold96/React-김민찬-sprint7

[김민찬] Sprint7

.vscode/settings.json

@@ -0,0 +1 @@
+{}

src/ constants/infomations/addItemList.ts

@@ -1,4 +1,4 @@
-import { IAddItemFeildset } from 'types/@shared/addItemTypes';
+import { IAddItemFeildset } from 'types/@shared/addProductTypes';
 
 export const ADDITEM_FEIELDSET_LIST: IAddItemFeildset[] = [
   {

src/ constants/queryKeys/queryKeys.ts

@@ -1 +1,2 @@
 export const PRODUCTS_QUERY_KEY = 'products';
+export const PRODUCT_COMMENTS_QUERY_KEY = 'comments';

src/App.tsx

@@ -7,7 +7,8 @@ import Home from 'pages/Home';
 import Login from 'pages/Login';
 import Signup from 'pages/Signup';
 import Market from 'pages/Market';
-import AddItem from 'pages/AddItem';
+import AddProduct from 'pages/AddProduct';
+import ProductInfo from 'pages/ProductInfo';
 
 function App() {
   const queryClient = new QueryClient();
@@ -22,8 +23,11 @@ function App() {
             <Route index element={<Home />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
-            <Route path="/items" element={<Market />} />
-            <Route path="/additem" element={<AddItem />} />
+            <Route path="/items">
+              <Route index element={<Market />} />
+              <Route path=":id" element={<ProductInfo />} />
+            </Route>
+            <Route path="/additem" element={<AddProduct />} />
             <Route path="*" element={<div>해당 페이지는 없는 페이지입니다.</div>} />
           </Route>
         </Routes>

src/components/@shared/Footer.tsx

@@ -1,6 +1,7 @@
 import { SNS_LINKS } from ' constants/infomations/snsLinks';
 import styled from 'styled-components';
 import Image from './Image';
+import { MOBILE_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 
 function Footer() {
   return (
@@ -54,7 +55,7 @@ const StyledFooter = styled.footer`
     gap: 1.2rem;
   }
 
-  @media all and (max-width: 767px) {
+  @media all and (max-width: ${MOBILE_MAX_WIDTH}px) {
     position: relative;
     padding: 3.2rem;
     & .footer-company {

src/components/@shared/Header.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import Button from './Button';
 import { PATH_LOGIN } from ' constants/paths/paths';
 import HeaderLinkSection from './HeaderLinkSection';
+import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 
 function Header() {
   const { navigateTo } = useNavigateTo();
@@ -43,10 +44,10 @@ const StyledHeader = styled.header`
   background-color: var(--white);
   border-bottom: 1px solid var(--border-gray);
 
-  @media all and (min-width: 768px) and (max-width: 1199px) {
+  @media all and (min-width: ${MOBILE_MAX_WIDTH}px) and (max-width: ${TABLET_MAX_WIDTH}px) {
     padding: 0 2.4rem;
   }
-  @media all and (max-width: 767px) {
+  @media all and (max-width: ${MOBILE_MAX_WIDTH}px) {
     padding: 0 1.6rem;
     & button {
       width: 6rem;

src/components/@shared/HeaderLinkSection.tsx

@@ -6,6 +6,7 @@ import { PATH_HOME, PATH_BOARDS, PATH_ITEMS, PATH_ADD_ITEM } from ' constants/pa
 import styled from 'styled-components';
 import useNavigateTo from 'hooks/useNavigateTo';
 import useWindowSize from 'hooks/useWindowSize';
+import { MOBILE_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 
 function HeaderLinkSection() {
   const { innerWidth } = useWindowSize();
@@ -28,7 +29,7 @@ function HeaderLinkSection() {
           <StyledLink to={PATH_BOARDS} $isPageMatch={PATH_BOARDS === pathname}>
             자유게시판
           </StyledLink>
-          <StyledLink to={PATH_ITEMS} $isPageMatch={[PATH_ITEMS, PATH_ADD_ITEM].includes(pathname)}>
+          <StyledLink to={`${PATH_ITEMS}?page=1`} $isPageMatch={[PATH_ITEMS, PATH_ADD_ITEM].includes(pathname)}>
             중고마켓
           </StyledLink>
         </section>
@@ -49,7 +50,7 @@ const StyledLinkSection = styled.section`
     cursor: pointer;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
     gap: 1.5rem;
   }
 `;
@@ -62,12 +63,12 @@ const StyledLink = styled(Link)<{ $isPageMatch: boolean }>`
 
   &:not(:last-child) {
     margin-right: 3.2rem;
-    @media (max-width: 768px) {
+    @media (max-width: ${MOBILE_MAX_WIDTH}px) {
       margin-right: 0.8rem;
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
     font-size: 1.6rem;
     line-height: 1.909rem;
   }

src/components/@shared/Image.tsx

@@ -1,17 +1,23 @@
+import { SyntheticEvent } from 'react';
 import styled from 'styled-components';
+import noImage from 'assets/images/@shared/no-image-placeholder.png';
 
 interface ImageProps {
   src: string;
   alt: string;
-  width: string;
-  height: string;
+  width?: string;
+  height?: string;
   radius?: string;
   className?: string;
   aspectRatio?: string;
   onClick?: () => void;
 }
 
-function Image({ src, alt, width, height, radius, className, onClick, aspectRatio }: ImageProps) {
+function Image({ src, alt, width = 'auto', height = 'auto', radius, className, onClick, aspectRatio }: ImageProps) {
+  const handleImageError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    (e.target as HTMLImageElement).src = noImage;
+  };
+
   return (
     <StyledImage
       src={src}
@@ -22,6 +28,7 @@ function Image({ src, alt, width, height, radius, className, onClick, aspectRati
       className={className || ''}
       $aspectRatio={aspectRatio || ''}
       onClick={onClick}
+      onError={handleImageError}
     />
   );
 }

src/components/@shared/Pagination.tsx

@@ -1,16 +1,17 @@
 import usePageSize from 'hooks/usePageSize';
 import React, { useState } from 'react';
+import { SetURLSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 interface PaginationProps {
-  totalCount: number;
   currentPage: number;
-  setCurrentPageCount: React.Dispatch<React.SetStateAction<number>>;
+  totalCount: number;
+  setSearchParams: SetURLSearchParams;
 }
 
-const MAX_PAGE_BUTTONS = 3; // 화면에 최대 보여줄 페이지 버튼 수
+const MAX_PAGE_BUTTONS = 5; // 화면에 최대 보여줄 페이지 버튼 수
 
-function Pagination({ totalCount, currentPage, setCurrentPageCount }: PaginationProps) {
+function Pagination({ currentPage, totalCount, setSearchParams }: PaginationProps) {
   const pageSize = usePageSize('forSale');
 
   // 현재 페이지 그룹의 시작 페이지 번호
@@ -34,15 +35,15 @@ function Pagination({ totalCount, currentPage, setCurrentPageCount }: Pagination
         // 이전 페이지로 이동할 경우, 이전 페이지 그룹으로 넘어가야 하는 지 확인
         setStartPage(startPage - MAX_PAGE_BUTTONS);
       }
-      setCurrentPageCount(prevState => Math.max(prevState - 1, 1)); // 이전 페이지로 이동
+      setSearchParams({ page: Math.max(currentPage - 1, 1).toString() }); // 이전 페이지로 이동
     } else if (value === 'nextPage') {
       if (endPage < currentPage + 1) {
         // 다음 페이지로 이동할 경우, 다음 페이지 그룹으로 넘어가야 하는 지 확인
         setStartPage(endPage + 1);
       }
-      setCurrentPageCount(prevState => Math.min(prevState + 1, lastPage)); // 다음 페이지로 이동
+      setSearchParams({ page: Math.min(currentPage + 1, lastPage).toString() }); // 다음 페이지로 이동
     } else {
-      setCurrentPageCount(parseInt(value)); // 선택한 페이지로 이동
+      setSearchParams({ page: parseInt(value).toString() }); // 선택한 페이지로 이동
     }
   };
 

src/components/@shared/Spacer.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+interface SpacerProps {
+  $topHeight: string;
+  $bottomHeight: string;
+  $needLine: boolean;
+}
+
+function Spacer({ $topHeight = '0rem', $bottomHeight = '0rem', $needLine = false }: SpacerProps) {
+  return (
+    <StyledSpacer $topHeight={$topHeight} $bottomHeight={$bottomHeight} $needLine={$needLine}>
+      <div className={'spacer-top'} />
+      <div className={'spacer-line'} />
+      <div className={'spacer-bottom'} />
+    </StyledSpacer>
+  );
+}
+
+export default Spacer;
+
+const StyledSpacer = styled.div<SpacerProps>`
+  & .spacer-top {
+    height: ${({ $topHeight }) => $topHeight};
+  }
+  & .spacer-line {
+    // border로 하면 네모 테두리를 그리게 되므로 1px로 설정해도 2px가 되어버림
+    border-bottom: ${({ $needLine }) => $needLine && 'var(--border-200)'};
+  }
+  & .spacer-bottom {
+    height: ${({ $bottomHeight }) => $bottomHeight};
+  }
+`;

src/components/addItem/ImageRegistration.tsx

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 import { inputStyle, placeholderStyle } from 'styles/auth/formStyles';
-import plusIcon from 'assets/images/addItem/plus-icon.png';
+import plusIcon from 'assets/images/addProduct/plus-icon.png';
 import { ALLOW_FILE_EXTENSION } from ' constants/infomations/fileExtension';
-import { StyledAddItemSubTitle } from 'styles/addItem/textStyles';
+import { StyledAddItemSubTitle } from 'styles/addProduct/textStyles';
 import React from 'react';
 import Image from 'components/@shared/Image';
 import PreviewList from './PreviewList';
-import { IPreview } from 'types/@shared/addItemTypes';
+import { IPreview } from 'types/@shared/addProductTypes';
+import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 
 interface ImageRegistrationProps {
   previewList: IPreview[];
@@ -48,13 +49,13 @@ const StyledItemRegistSection = styled.section`
   width: var(--container-width);
   height: 28.2rem;
 
-  @media (max-width: 1200px) {
+  @media (max-width: ${TABLET_MAX_WIDTH}px) {
     height: 16.2rem;
     max-width: calc(100vw - 5.2rem);
     overflow-y: hidden;
     overflow-x: auto;
   }
-  @media (max-width: 768px) {
+  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
     max-width: calc(100vw - 3.2rem);
   }
 
@@ -73,7 +74,7 @@ const StyledItemRegistSection = styled.section`
 
     cursor: pointer;
 
-    @media (max-width: 1200px) {
+    @media (max-width: ${TABLET_MAX_WIDTH}px) {
       width: 16.2rem;
     }
   }

src/components/addItem/InputSection.tsx

@@ -2,10 +2,10 @@ import { ADDITEM_FEIELDSET_LIST } from ' constants/infomations/addItemList';
 import React from 'react';
 import { Fragment } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { StyledAddItemSubTitle, smallTextStyle } from 'styles/addItem/textStyles';
+import { StyledAddItemSubTitle, smallTextStyle } from 'styles/addProduct/textStyles';
 import { inputStyle, placeholderStyle } from 'styles/auth/formStyles';
 import TagList from './TagList';
-import { IFormValue, ITag } from 'types/@shared/addItemTypes';
+import { IFormValue, ITag } from 'types/@shared/addProductTypes';
 
 interface InputSectionProps {
   formValue: IFormValue;

src/components/addItem/PreviewList.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 import React from 'react';
-import { StyledRemoveButton } from 'styles/addItem/buttonStyles';
+import { StyledRemoveButton } from 'styles/addProduct/buttonStyles';
 import Image from 'components/@shared/Image';
-import { IPreview } from 'types/@shared/addItemTypes';
+import { IPreview } from 'types/@shared/addProductTypes';
 
 interface PreviewListProps {
   previewList: IPreview[];

src/components/addItem/TagList.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import { smallTextStyle } from 'styles/addItem/textStyles';
+import { smallTextStyle } from 'styles/addProduct/textStyles';
 
-import { StyledRemoveButton } from 'styles/addItem/buttonStyles';
-import { ITag } from 'types/@shared/addItemTypes';
+import { StyledRemoveButton } from 'styles/addProduct/buttonStyles';
+import { ITag } from 'types/@shared/addProductTypes';
+import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 
 interface TagListProps {
   tagList: ITag[];
@@ -36,10 +37,10 @@ const StyledTagList = styled.ul`
 
   ${smallTextStyle};
 
-  @media (max-width: 1200px) {
+  @media (max-width: ${TABLET_MAX_WIDTH}px) {
     max-width: calc(100vw - 5.2rem);
   }
-  @media (max-width: 768px) {
+  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
     max-width: calc(100vw - 3.2rem);
   }
 `;

src/components/auth/login/LoginForm.tsx

@@ -21,7 +21,6 @@ function LoginForm() {
 
   const handleSubmitClick = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    console.log(form);
     navigateTo(PATH_ITEMS);
   };
 

src/components/auth/signup/ SignupForm.tsx

@@ -23,7 +23,6 @@ function SignupForm() {
 
   const handleSubmitClick = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    console.log(form);
     navigateTo('/');
   };
 

src/components/home/BrandBottom.tsx

@@ -1,3 +1,4 @@
+import { TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 import BrandContainer from './BrandContainer';
 import brandBottomImg from 'assets/images/home/home_bottom.png';
 import Image from 'components/@shared/Image';
@@ -17,7 +18,7 @@ function BrandBottom() {
 export default BrandBottom;
 
 const StyledBrandBottom = styled.div`
-  @media all and (max-width: 1199px) {
+  @media all and (max-width: ${TABLET_MAX_WIDTH}px) {
     padding: 12.1rem 0 5.9rem;
   }
 `;

src/components/home/BrandContainer.tsx

@@ -1,3 +1,4 @@
+import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
@@ -22,7 +23,7 @@ const StyledBrandContainer = styled.article`
   height: 54rem;
   background-color: var(--pale-blue);
 
-  @media all and (max-width: 1199px) {
+  @media all and (max-width: ${TABLET_MAX_WIDTH}px) {
     height: 100%;
   }
 `;
@@ -34,7 +35,7 @@ const StyledBrandWrapper = styled.div`
   display: flex;
   align-items: center;
 
-  @media all and (max-width: 1199px) {
+  @media all and (max-width: ${TABLET_MAX_WIDTH}px) {
     flex-direction: column;
     /* 이미지가 잘려도 되도록 hidden 속성 부여*/
     overflow-x: hidden;
@@ -50,16 +51,16 @@ const StyledBrandWrapper = styled.div`
     color: var(--cool-gray);
     white-space: pre-line;
 
-    @media all and (max-width: 1199px) {
+    @media all and (max-width: ${TABLET_MAX_WIDTH}px) {
       text-align: center;
     }
 
-    @media all and (min-width: 768px) and (max-width: 1199px) {
+    @media all and (min-width: ${MOBILE_MAX_WIDTH}px) and (max-width: ${TABLET_MAX_WIDTH}px) {
       width: 100%;
       white-space: normal;
     }
 
-    @media all and (min-width: 375px) and (max-width: 767px) {
+    @media all and (min-width: 375px) and (max-width: ${MOBILE_MAX_WIDTH}px) {
       font-size: 3.2rem;
 
       line-height: 4.48rem;
@@ -72,7 +73,7 @@ const StyledBrandWrapper = styled.div`
     left: 35rem; /* 뷰포트 너비에 구애 받지 않아야 하므로 .container를 기준으로 피그마를 참고해 다시 계산한 값 */
     bottom: 0;
 
-    @media all and (max-width: 1199px) {
+    @media all and (max-width: ${TABLET_MAX_WIDTH}px) {
       position: static;
       /* 이미지가 확대 되어 필요 이상으로 잘리지 않도록 max-width 지정*/
       max-width: 135%;