[김민찬] Sprint8

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "cSpell.words": ["ADDITEM", "kakao", "Signup", "uuidv"]
+}

src/ constants/infomations/addItemList.ts → src/ constants/information/addItemList.ts

@@ -1,6 +1,6 @@
-import { IAddItemFeildset } from 'types/@shared/addProductTypes';
+import { IAddItemFieldset } from 'types/@shared/addProductTypes';
 
-export const ADDITEM_FEIELDSET_LIST: IAddItemFeildset[] = [
+export const ADDITEM_FIELDSET_LIST: IAddItemFieldset[] = [
   {
     subTitle: '상품명',
     name: 'title',

src/ constants/information/mediaQuerySize.ts

@@ -0,0 +1,11 @@
+export const DEVICE_MAX_WIDTH = {
+  tablet: 1280,
+  mobile: 768,
+};
+
+export const MEDIA_QUERY_SIZE = {
+  desktop: `(min-width: ${DEVICE_MAX_WIDTH.tablet}px)`,
+  tablet: `(min-width: ${DEVICE_MAX_WIDTH.mobile}px) and (max-width: ${DEVICE_MAX_WIDTH.tablet}px)`,
+  underTablet: `(max-width: ${DEVICE_MAX_WIDTH.tablet}px)`,
+  mobile: `(max-width: ${DEVICE_MAX_WIDTH.mobile}px)`,
+};

src/components/@shared/Footer.tsx

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

src/components/@shared/Header.tsx

@@ -1,20 +1,20 @@
-import useNavigateTo from 'hooks/useNavigateTo';
 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';
+import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize';
+import { Link } from 'react-router-dom';
 
 function Header() {
-  const { navigateTo } = useNavigateTo();
-
   return (
     <StyledHeaderWrapper>
       <StyledHeader>
         <HeaderLinkSection />
-        <Button width={'12.8rem'} height={'4.8rem'} onClick={() => navigateTo(PATH_LOGIN)}>
-          로그인
-        </Button>
+        <Link to={PATH_LOGIN}>
+          <Button width={'12.8rem'} height={'4.8rem'}>
+            로그인
+          </Button>
+        </Link>
       </StyledHeader>
     </StyledHeaderWrapper>
   );
@@ -24,7 +24,7 @@ export default Header;
 
 const StyledHeaderWrapper = styled.header`
   /* 매 페이지마다 fixed에 의해 숨겨진 영역 떄문에 패딩값을 주지 않도록 */
-  height: var(--header-heigt);
+  height: var(--header-height);
 `;
 
 const StyledHeader = styled.header`
@@ -38,16 +38,16 @@ const StyledHeader = styled.header`
   align-items: center;
 
   width: 100%;
-  height: var(--header-heigt);
+  height: var(--header-height);
   padding: var(--padding-001);
 
   background-color: var(--white);
   border-bottom: 1px solid var(--border-gray);
 
-  @media all and (min-width: ${MOBILE_MAX_WIDTH}px) and (max-width: ${TABLET_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.tablet} {
     padding: 0 2.4rem;
   }
-  @media all and (max-width: ${MOBILE_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.mobile} {
     padding: 0 1.6rem;
     & button {
       width: 6rem;

src/components/@shared/HeaderLinkSection.tsx

@@ -4,25 +4,24 @@ import typoImg from 'assets/images/home/typo.png';
 import Image from './Image';
 import { PATH_HOME, PATH_BOARDS, PATH_ITEMS, PATH_ADD_ITEM } from ' constants/paths/paths';
 import styled from 'styled-components';
-import useNavigateTo from 'hooks/useNavigateTo';
 import useWindowSize from 'hooks/useWindowSize';
-import { MOBILE_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
+import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize';
 
 function HeaderLinkSection() {
   const { innerWidth } = useWindowSize();
-  const { navigateTo } = useNavigateTo();
   const { pathname } = useLocation();
   const needLinkHeaderPaths = [PATH_BOARDS, PATH_ITEMS, PATH_ADD_ITEM];
 
   return (
     <StyledLinkSection>
-      <Image
-        src={innerWidth > 769 ? logoImg : typoImg}
-        alt={'로고 이미지'}
-        height={innerWidth > 769 ? '5.1rem' : '4rem'}
-        width={innerWidth > 769 ? '15.3rem' : '8.1rem'}
-        onClick={() => navigateTo(PATH_HOME)}
-      />
+      <Link to={PATH_HOME}>
+        <Image
+          src={innerWidth > 769 ? logoImg : typoImg}
+          alt={'로고 이미지'}
+          height={innerWidth > 769 ? '5.1rem' : '4rem'}
+          width={innerWidth > 769 ? '15.3rem' : '8.1rem'}
+        />
+      </Link>
       {/* 링크가 필요한 페이지에서만 링크들이 나타나도록 */}
       {needLinkHeaderPaths.includes(pathname) && (
         <section>
@@ -50,7 +49,7 @@ const StyledLinkSection = styled.section`
     cursor: pointer;
   }
 
-  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.mobile} {
     gap: 1.5rem;
   }
 `;
@@ -63,12 +62,12 @@ const StyledLink = styled(Link)<{ $isPageMatch: boolean }>`
 
   &:not(:last-child) {
     margin-right: 3.2rem;
-    @media (max-width: ${MOBILE_MAX_WIDTH}px) {
+    @media ${MEDIA_QUERY_SIZE.mobile} {
       margin-right: 0.8rem;
     }
   }
 
-  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.mobile} {
     font-size: 1.6rem;
     line-height: 1.909rem;
   }

src/components/@shared/Pagination.tsx

@@ -48,7 +48,7 @@ function Pagination({ currentPage, totalCount, setSearchParams }: PaginationProp
   };
 
   return (
-    <StyledPagenationSection onClick={handlePageButtonClick}>
+    <StyledPaginationSection onClick={handlePageButtonClick}>
       <StyledPageButton data-value={'prevPage'} disabled={currentPage === 1}>
         {'<'}
       </StyledPageButton>
@@ -60,13 +60,13 @@ function Pagination({ currentPage, totalCount, setSearchParams }: PaginationProp
       <StyledPageButton data-value={'nextPage'} disabled={currentPage === lastPage}>
         {'>'}
       </StyledPageButton>
-    </StyledPagenationSection>
+    </StyledPaginationSection>
   );
 }
 
 export default Pagination;
 
-const StyledPagenationSection = styled.section`
+const StyledPaginationSection = styled.section`
   width: 100%;
   display: flex;
   justify-content: center;

src/components/addItem/InputSection.tsx → src/components/addItem/AddProductInputSection.tsx

@@ -1,4 +1,4 @@
-import { ADDITEM_FEIELDSET_LIST } from ' constants/infomations/addItemList';
+import { ADDITEM_FIELDSET_LIST } from ' constants/information/addItemList';
 import React from 'react';
 import { Fragment } from 'react/jsx-runtime';
 import styled from 'styled-components';
@@ -7,24 +7,24 @@ import { inputStyle, placeholderStyle } from 'styles/auth/formStyles';
 import TagList from './TagList';
 import { IFormValue, ITag } from 'types/@shared/addProductTypes';
 
-interface InputSectionProps {
+interface AddProductInputSectionProps {
   formValue: IFormValue;
   tagList: ITag[];
   handleInputChange: (event: React.ChangeEvent<HTMLElement>) => void;
   handleReturnKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   handleRemoveClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-function InputSection({
+function AddProductInputSection({
   formValue,
   tagList,
   handleInputChange,
   handleReturnKeyDown,
   handleRemoveClick,
-}: InputSectionProps) {
+}: AddProductInputSectionProps) {
   return (
-    <StyledAddItemInputSection>
-      {ADDITEM_FEIELDSET_LIST.map(fieldset => (
+    <StyledAdProductInputSection>
+      {ADDITEM_FIELDSET_LIST.map(fieldset => (
         <Fragment key={fieldset.name}>
           <fieldset>
             <StyledAddItemSubTitle htmlFor={fieldset.name}>{fieldset.subTitle}</StyledAddItemSubTitle>
@@ -50,12 +50,12 @@ function InputSection({
           </fieldset>
         </Fragment>
       ))}
-    </StyledAddItemInputSection>
+    </StyledAdProductInputSection>
   );
 }
-export default InputSection;
+export default AddProductInputSection;
 
-const StyledAddItemInputSection = styled.section`
+const StyledAdProductInputSection = styled.section`
   & input,
   & textarea {
     ${inputStyle};

src/components/addItem/ImageRegistration.tsx

@@ -1,16 +1,16 @@
 import styled from 'styled-components';
 import { inputStyle, placeholderStyle } from 'styles/auth/formStyles';
 import plusIcon from 'assets/images/addProduct/plus-icon.png';
-import { ALLOW_FILE_EXTENSION } from ' constants/infomations/fileExtension';
+import { ALLOW_FILE_EXTENSION } from ' constants/information/fileExtension';
 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/addProductTypes';
-import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
+import { IImagePreview } from 'types/@shared/addProductTypes';
+import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize';
 
 interface ImageRegistrationProps {
-  previewList: IPreview[];
+  previewList: IImagePreview[];
   handleInputChange: (event: React.ChangeEvent<HTMLElement>) => void;
   handleRemoveClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
@@ -19,7 +19,7 @@ function ImageRegistration({ previewList, handleInputChange, handleRemoveClick }
   return (
     <fieldset>
       <StyledAddItemSubTitle>상품 이미지</StyledAddItemSubTitle>
-      <StyledItemRegistSection>
+      <StyledItemRegistrationSection>
         <label htmlFor={'file-input-display-none'}>
           <Image src={plusIcon} alt={'이미지 추가하기 아이콘'} height={'4.8rem'} width={'4.8rem'} />
           <div>이미지 등록하기</div>
@@ -35,27 +35,27 @@ function ImageRegistration({ previewList, handleInputChange, handleRemoveClick }
           onChange={handleInputChange}
         />
         <PreviewList previewList={previewList} handleRemoveClick={handleRemoveClick} />
-      </StyledItemRegistSection>
+      </StyledItemRegistrationSection>
     </fieldset>
   );
 }
 
 export default ImageRegistration;
 
-const StyledItemRegistSection = styled.section`
+const StyledItemRegistrationSection = styled.section`
   display: flex;
   gap: 2.4rem;
   overflow-x: auto; // 사진이 많아지면 좌우 스크롤이 되도록 지정
   width: var(--container-width);
   height: 28.2rem;
 
-  @media (max-width: ${TABLET_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.underTablet} {
     height: 16.2rem;
     max-width: calc(100vw - 5.2rem);
     overflow-y: hidden;
     overflow-x: auto;
   }
-  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.mobile} {
     max-width: calc(100vw - 3.2rem);
   }
 
@@ -74,7 +74,7 @@ const StyledItemRegistSection = styled.section`
 
     cursor: pointer;
 
-    @media (max-width: ${TABLET_MAX_WIDTH}px) {
+    @media ${MEDIA_QUERY_SIZE.underTablet} {
       width: 16.2rem;
     }
   }

src/components/addItem/PreviewList.tsx

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import React from 'react';
 import { StyledRemoveButton } from 'styles/addProduct/buttonStyles';
 import Image from 'components/@shared/Image';
-import { IPreview } from 'types/@shared/addProductTypes';
+import { IImagePreview } from 'types/@shared/addProductTypes';
 
 interface PreviewListProps {
-  previewList: IPreview[];
+  previewList: IImagePreview[];
   handleRemoveClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
@@ -16,7 +16,7 @@ function PreviewList({ previewList, handleRemoveClick }: PreviewListProps) {
       {previewList.map(preview => (
         <StyledPreviewItem key={preview.id}>
           <Image
-            src={preview.url}
+            src={preview.imgUrl}
             alt={'등록한 상품 이미지 미리보기'}
             height={'100%'}
             width={'auto'}
@@ -27,7 +27,7 @@ function PreviewList({ previewList, handleRemoveClick }: PreviewListProps) {
             className={'preview-remove-btn'}
             data-category={'preview'}
             data-id={preview.id}
-            data-url={preview.url}
+            data-url={preview.imgUrl}
           />
         </StyledPreviewItem>
       ))}

src/components/addItem/RegistrationHeader.tsx

@@ -2,11 +2,11 @@ import Button from 'components/@shared/Button';
 import styled from 'styled-components';
 import { StyledTitleText } from 'styles/market/textStyles';
 
-interface RegistraionHeaderProps {
+interface RegistrationHeaderProps {
   isSubmitActive: boolean;
 }
 
-function RegistraionHeader({ isSubmitActive }: RegistraionHeaderProps) {
+function RegistrationHeader({ isSubmitActive }: RegistrationHeaderProps) {
   return (
     <StyledAddItemHeader>
       <StyledAddItemTitle>상품 등록하기</StyledAddItemTitle>
@@ -17,7 +17,7 @@ function RegistraionHeader({ isSubmitActive }: RegistraionHeaderProps) {
   );
 }
 
-export default RegistraionHeader;
+export default RegistrationHeader;
 
 const StyledAddItemHeader = styled.header`
   display: flex;

src/components/addItem/TagList.tsx

@@ -4,7 +4,7 @@ import { smallTextStyle } from 'styles/addProduct/textStyles';
 
 import { StyledRemoveButton } from 'styles/addProduct/buttonStyles';
 import { ITag } from 'types/@shared/addProductTypes';
-import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize';
+import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize';
 
 interface TagListProps {
   tagList: ITag[];
@@ -16,7 +16,7 @@ function TagList({ tagList, handleRemoveClick }: TagListProps) {
     <StyledTagList onClick={handleRemoveClick}>
       {tagList.map(tag => (
         <StyledTagItem key={tag.id}>
-          {tag.content}
+          {tag.tagContent}
           <StyledRemoveButton className={'tag-remove-btn'} data-category={'tag'} data-id={tag.id} />
         </StyledTagItem>
       ))}
@@ -37,10 +37,10 @@ const StyledTagList = styled.ul`
 
   ${smallTextStyle};
 
-  @media (max-width: ${TABLET_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.underTablet} {
     max-width: calc(100vw - 5.2rem);
   }
-  @media (max-width: ${MOBILE_MAX_WIDTH}px) {
+  @media ${MEDIA_QUERY_SIZE.mobile} {
     max-width: calc(100vw - 3.2rem);
   }
 `;