diff --git a/.vscode/settings.json b/.vscode/settings.json index 0967ef424..a90e172e6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1 +1,3 @@ -{} +{ + "cSpell.words": ["ADDITEM", "kakao", "Signup", "uuidv"] +} diff --git a/src/ constants/infomations/mediaQuerySize.ts b/src/ constants/infomations/mediaQuerySize.ts deleted file mode 100644 index a504e1bd0..000000000 --- a/src/ constants/infomations/mediaQuerySize.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const TABLET_MAX_WIDTH = 1280; -export const MOBILE_MAX_WIDTH = 768; diff --git a/src/ constants/infomations/addItemList.ts b/src/ constants/information/addItemList.ts similarity index 78% rename from src/ constants/infomations/addItemList.ts rename to src/ constants/information/addItemList.ts index c7e7b28d2..45575893b 100644 --- a/src/ constants/infomations/addItemList.ts +++ b/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', diff --git a/src/ constants/infomations/brandFeatureList.ts b/src/ constants/information/brandFeatureList.ts similarity index 100% rename from src/ constants/infomations/brandFeatureList.ts rename to src/ constants/information/brandFeatureList.ts diff --git a/src/ constants/infomations/fileExtension.ts b/src/ constants/information/fileExtension.ts similarity index 100% rename from src/ constants/infomations/fileExtension.ts rename to src/ constants/information/fileExtension.ts diff --git a/src/ constants/information/mediaQuerySize.ts b/src/ constants/information/mediaQuerySize.ts new file mode 100644 index 000000000..1d07461b1 --- /dev/null +++ b/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)`, +}; diff --git a/src/ constants/infomations/snsLinks.ts b/src/ constants/information/snsLinks.ts similarity index 100% rename from src/ constants/infomations/snsLinks.ts rename to src/ constants/information/snsLinks.ts diff --git a/src/components/@shared/Footer.tsx b/src/components/@shared/Footer.tsx index d4fef40f2..906cf1110 100644 --- a/src/components/@shared/Footer.tsx +++ b/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 { diff --git a/src/components/@shared/Header.tsx b/src/components/@shared/Header.tsx index 755f9223e..a3e36cff0 100644 --- a/src/components/@shared/Header.tsx +++ b/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 ( - + + + ); @@ -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; diff --git a/src/components/@shared/HeaderLinkSection.tsx b/src/components/@shared/HeaderLinkSection.tsx index 22ec6b203..6f3db542f 100644 --- a/src/components/@shared/HeaderLinkSection.tsx +++ b/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 ( - 769 ? logoImg : typoImg} - alt={'로고 이미지'} - height={innerWidth > 769 ? '5.1rem' : '4rem'} - width={innerWidth > 769 ? '15.3rem' : '8.1rem'} - onClick={() => navigateTo(PATH_HOME)} - /> + + 769 ? logoImg : typoImg} + alt={'로고 이미지'} + height={innerWidth > 769 ? '5.1rem' : '4rem'} + width={innerWidth > 769 ? '15.3rem' : '8.1rem'} + /> + {/* 링크가 필요한 페이지에서만 링크들이 나타나도록 */} {needLinkHeaderPaths.includes(pathname) && (
@@ -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; } diff --git a/src/components/@shared/Pagination.tsx b/src/components/@shared/Pagination.tsx index f7e31c5d1..7c3c17bd8 100644 --- a/src/components/@shared/Pagination.tsx +++ b/src/components/@shared/Pagination.tsx @@ -48,7 +48,7 @@ function Pagination({ currentPage, totalCount, setSearchParams }: PaginationProp }; return ( - + {'<'} @@ -60,13 +60,13 @@ function Pagination({ currentPage, totalCount, setSearchParams }: PaginationProp {'>'} - + ); } export default Pagination; -const StyledPagenationSection = styled.section` +const StyledPaginationSection = styled.section` width: 100%; display: flex; justify-content: center; diff --git a/src/components/addItem/InputSection.tsx b/src/components/addItem/AddProductInputSection.tsx similarity index 83% rename from src/components/addItem/InputSection.tsx rename to src/components/addItem/AddProductInputSection.tsx index cdf593e83..029adf81d 100644 --- a/src/components/addItem/InputSection.tsx +++ b/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,7 +7,7 @@ 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) => void; @@ -15,16 +15,16 @@ interface InputSectionProps { handleRemoveClick: (event: React.MouseEvent) => void; } -function InputSection({ +function AddProductInputSection({ formValue, tagList, handleInputChange, handleReturnKeyDown, handleRemoveClick, -}: InputSectionProps) { +}: AddProductInputSectionProps) { return ( - - {ADDITEM_FEIELDSET_LIST.map(fieldset => ( + + {ADDITEM_FIELDSET_LIST.map(fieldset => (
{fieldset.subTitle} @@ -50,12 +50,12 @@ function InputSection({
))} - + ); } -export default InputSection; +export default AddProductInputSection; -const StyledAddItemInputSection = styled.section` +const StyledAdProductInputSection = styled.section` & input, & textarea { ${inputStyle}; diff --git a/src/components/addItem/ImageRegistration.tsx b/src/components/addItem/ImageRegistration.tsx index 5c00f88bd..bdcec94b5 100644 --- a/src/components/addItem/ImageRegistration.tsx +++ b/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) => void; handleRemoveClick: (event: React.MouseEvent) => void; } @@ -19,7 +19,7 @@ function ImageRegistration({ previewList, handleInputChange, handleRemoveClick } return (
상품 이미지 - + +
); } 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; } } diff --git a/src/components/addItem/PreviewList.tsx b/src/components/addItem/PreviewList.tsx index 51f35fbbd..d76da199b 100644 --- a/src/components/addItem/PreviewList.tsx +++ b/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) => void; } @@ -16,7 +16,7 @@ function PreviewList({ previewList, handleRemoveClick }: PreviewListProps) { {previewList.map(preview => ( {'등록한 ))} diff --git a/src/components/addItem/RegistrationHeader.tsx b/src/components/addItem/RegistrationHeader.tsx index c339f5293..0e58b179d 100644 --- a/src/components/addItem/RegistrationHeader.tsx +++ b/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 ( 상품 등록하기 @@ -17,7 +17,7 @@ function RegistraionHeader({ isSubmitActive }: RegistraionHeaderProps) { ); } -export default RegistraionHeader; +export default RegistrationHeader; const StyledAddItemHeader = styled.header` display: flex; diff --git a/src/components/addItem/TagList.tsx b/src/components/addItem/TagList.tsx index 3be725ad4..e50a6e58f 100644 --- a/src/components/addItem/TagList.tsx +++ b/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) { {tagList.map(tag => ( - {tag.content} + {tag.tagContent} ))} @@ -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); } `; diff --git a/src/components/auth/AuthLogo.tsx b/src/components/auth/AuthLogo.tsx index 17011b7a8..7a427f5ff 100644 --- a/src/components/auth/AuthLogo.tsx +++ b/src/components/auth/AuthLogo.tsx @@ -2,26 +2,19 @@ import Image from 'components/@shared/Image'; import styled from 'styled-components'; import authLogoImg from 'assets/images/auth/auth-logo.png'; import { PATH_HOME } from ' constants/paths/paths'; -import useNavigateTo from 'hooks/useNavigateTo'; +import { Link } from 'react-router-dom'; function AuthLogo() { - const { navigateTo } = useNavigateTo(); return ( - - {'판다마켓 navigateTo(PATH_HOME)} - /> + + {'판다마켓 ); } export default AuthLogo; -const StyledAuthLogo = styled.div` +const StyledAuthLogo = styled(Link)` height: 13.2rem; width: 39.6rem; margin: 6rem auto 4rem; diff --git a/src/components/auth/login/LoginForm.tsx b/src/components/auth/login/LoginForm.tsx index 5985dee2c..5456600c3 100644 --- a/src/components/auth/login/LoginForm.tsx +++ b/src/components/auth/login/LoginForm.tsx @@ -1,60 +1,48 @@ import PasswordInput from '../PasswordInput'; -import React, { useEffect, useState } from 'react'; import Button from 'components/@shared/Button'; -import useNavigateTo from 'hooks/useNavigateTo'; import { PATH_ITEMS } from ' constants/paths/paths'; -import useValidForm from 'hooks/useValidForm'; import { StyledAuthForm, StyledAuthLabel, StyledInputSection } from 'styles/auth/formStyles'; +import React from 'react'; +import useLoginForm from 'hooks/form/useLoginForm'; +import { useNavigate } from 'react-router-dom'; function LoginForm() { - const { navigateTo } = useNavigateTo(); - const [form, setForm] = useState({ - email: '', - password: '', - }); - const { validMessages, validationResult, isFormValid, validateForm } = useValidForm(form); - - const handleInputChange = (event: React.ChangeEvent) => { - const { value, name } = event.target; - setForm({ ...form, [name]: value }); - }; + const navigator = useNavigate(); + const { form, handler, result, message, isFormValid } = useLoginForm(); const handleSubmitClick = (event: React.FormEvent) => { + // 입력 양식을 통과하지 못하면 button이 disabled 상태라 누를 수 없음 event.preventDefault(); - navigateTo(PATH_ITEMS); + navigator(PATH_ITEMS); }; - useEffect(() => { - validateForm(); - }, [validationResult.email, validationResult.password]); - return ( // 로그인 정보를 서버로 보낼 form, 비밀번호가 url에 표시되지 않도록 하기위해 method post로 전송 - + 이메일 - {validMessages.email} + {message.emailValidMessage} - + 비밀번호 - {validMessages.password} + {message.passwordValidMessage} + + + 인사하는 판다 이미지 @@ -33,12 +30,12 @@ const StyledBrandTop = styled.div` flex-direction: column; gap: 3.2rem; - @media all and (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.underTablet} { padding: 8.4rem 0 10rem; align-items: center; } - @media all and (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { button { width: 15.4rem; height: 4.8rem; diff --git a/src/components/home/FeatItem.tsx b/src/components/home/FeatItem.tsx index c65963442..bad7bbdd2 100644 --- a/src/components/home/FeatItem.tsx +++ b/src/components/home/FeatItem.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import Image from 'components/@shared/Image'; import { IBrandFeatureItem } from 'types/@shared/homeTypes'; -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; function FeatItem({ src, alt, title, description, detail }: Omit) { return ( @@ -25,7 +25,7 @@ const StyledFeatItemContainer = styled.figure` align-items: center; gap: 6.4rem; - @media all and (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.underTablet} { flex-direction: column; height: 100%; @@ -47,7 +47,7 @@ const StyledFeatTextWrapper = styled.div` 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈 */ white-space: pre-line; - @media all and (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.underTablet} { width: 100%; :not(h2) { white-space: normal; @@ -60,7 +60,7 @@ const StyledFeatTextWrapper = styled.div` line-height: 2.52rem; color: var(--brand-blue); margin-bottom: 1.2rem; - @media all and (min-width: 375px) and (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { font-size: 1.6rem; line-height: 2.24rem; } @@ -72,11 +72,11 @@ const StyledFeatTextWrapper = styled.div` letter-spacing: 0.2rem; color: var(--cool-gray); margin-bottom: 2.4rem; - @media all and (min-width: ${MOBILE_MAX_WIDTH}px) and (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.tablet} { font-size: 3.2rem; line-height: 4.48rem; } - @media all and (min-width: 375px) and (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { font-size: 2.4rem; line-height: 3.36rem; } @@ -87,11 +87,11 @@ const StyledFeatTextWrapper = styled.div` line-height: 2.88rem; letter-spacing: 0.3rem; color: var(--cool-gray); - @media all and (min-width: ${MOBILE_MAX_WIDTH}px) and (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.tablet} { font-size: 1.8rem; line-height: 2.16rem; } - @media all and (min-width: 375px) and (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { font-size: 1.6rem; line-height: 1.92rem; } diff --git a/src/components/home/FeatList.tsx b/src/components/home/FeatList.tsx index 661596636..288e51950 100644 --- a/src/components/home/FeatList.tsx +++ b/src/components/home/FeatList.tsx @@ -1,8 +1,8 @@ -import { BRAND_FEATURE_ITEM_LIST } from ' constants/infomations/brandFeatureList'; +import { BRAND_FEATURE_ITEM_LIST } from ' constants/information/brandFeatureList'; import { commonContainerStyle } from 'styles/@shared/shared'; import FeatItem from './FeatItem'; import styled from 'styled-components'; -import { TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; function FeatList() { return ( @@ -28,7 +28,7 @@ const StyledFeatList = styled.main` & figure:nth-of-type(2) { text-align: right; - @media all and (min-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.desktop} { /* 두번째 기능은 사진과 텍스트 위치가 바뀌고 우측 정렬이어야 함 */ flex-direction: row-reverse; } diff --git a/src/components/market/BestProductList.tsx b/src/components/market/BestProductList.tsx index d65d8e25d..57755637a 100644 --- a/src/components/market/BestProductList.tsx +++ b/src/components/market/BestProductList.tsx @@ -3,7 +3,7 @@ import Product from './Product'; import useProductsQuery from 'queries/useProductsQuery'; import usePageSize from 'hooks/usePageSize'; import { IProduct } from 'types/@shared/marketTypes'; -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; function BestProductList() { const pageSize = usePageSize('best'); @@ -26,10 +26,10 @@ const StyledBestProductsSection = styled.section` display: grid; grid-template-columns: repeat(4, 1fr); - @media (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.underTablet} { grid-template-columns: repeat(2, 1fr); } - @media (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { grid-template-columns: repeat(1, 1fr); } diff --git a/src/components/market/BestProductsSection.tsx b/src/components/market/BestProductsSection.tsx index d83fa5726..16afae9a4 100644 --- a/src/components/market/BestProductsSection.tsx +++ b/src/components/market/BestProductsSection.tsx @@ -2,15 +2,15 @@ import { Suspense } from 'react'; import BestProductList from './BestProductList'; import { StyledProductCategoryText } from 'styles/market/textStyles'; -function BsetProductsSection() { +function BestProductsSection() { return (
베스트 상품 - Loding...}> + Loading...}>
); } -export default BsetProductsSection; +export default BestProductsSection; diff --git a/src/components/market/ForSaleProductList.tsx b/src/components/market/ForSaleProductList.tsx index 90a5877ec..5ec9815a5 100644 --- a/src/components/market/ForSaleProductList.tsx +++ b/src/components/market/ForSaleProductList.tsx @@ -4,8 +4,8 @@ import useProductsQuery from 'queries/useProductsQuery'; import Pagination from 'components/@shared/Pagination'; import usePageSize from 'hooks/usePageSize'; import { IProduct, ProductOrderByType } from 'types/@shared/marketTypes'; -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; import { useSearchParams } from 'react-router-dom'; +import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; interface ForSaleProductListProps { order: ProductOrderByType; @@ -13,8 +13,8 @@ interface ForSaleProductListProps { } function ForSaleProductList({ order, keyword }: ForSaleProductListProps) { - const [serchParams, setSearchParams] = useSearchParams(); // 현재 페이지 번호 - const currentPage = serchParams.get('page'); + const [searchParams, setSearchParams] = useSearchParams(); // 현재 페이지 번호 + const currentPage = searchParams.get('page'); // 상품 상세 페이지 등에서 목록으로 돌아가기 버튼을 누를 경우에, 사용자가 들어왔던 페이지를 기억하기 위함 // 만약 100 페이지에서 상품 상세 페이지를 들어온 경우에, @@ -53,10 +53,10 @@ const StyledForSaleProductsSection = styled.section` column-gap: 2.4rem; row-gap: 4rem; - @media (max-width: ${TABLET_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.underTablet} { grid-template-columns: repeat(3, 1fr); } - @media (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { grid-template-columns: repeat(2, 1fr); } `; diff --git a/src/components/market/ForSaleProductSection.tsx b/src/components/market/ForSaleProductSection.tsx index 747354f5a..eebe2918b 100644 --- a/src/components/market/ForSaleProductSection.tsx +++ b/src/components/market/ForSaleProductSection.tsx @@ -6,7 +6,7 @@ import ProductManagement from './ProductManagement'; import useToggle from 'hooks/useToggle'; import { ProductOrderByType } from 'types/@shared/marketTypes'; -import { MOBILE_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; function ForSaleProductsSection() { const [searchValue, setSearchValue] = useState(''); @@ -46,7 +46,7 @@ function ForSaleProductsSection() { /> - Loding...}> + Loading...}> @@ -65,7 +65,7 @@ const StyledForSaleProductSubHeader = styled.div` display: flex; justify-content: space-between; - @media (max-width: ${MOBILE_MAX_WIDTH}px) { + @media ${MEDIA_QUERY_SIZE.mobile} { position: relative; & .for-sale-text { diff --git a/src/components/market/Product.tsx b/src/components/market/Product.tsx index 4d1c007a8..5f4e72abf 100644 --- a/src/components/market/Product.tsx +++ b/src/components/market/Product.tsx @@ -42,6 +42,7 @@ const StyledProductContainer = styled(Link)` display: flex; flex-direction: column; justify-content: space-between; + width: 100%; `; const StyledProductInfoWrapper = styled.div` diff --git a/src/components/market/ProductManagement.tsx b/src/components/market/ProductManagement.tsx index 4c7d52cdf..eb5f0f594 100644 --- a/src/components/market/ProductManagement.tsx +++ b/src/components/market/ProductManagement.tsx @@ -6,10 +6,10 @@ import sortIcon from 'assets/images/market/sort-icon.png'; import dropDownIcon from 'assets/images/market/order-dropdown.png'; import { PATH_ADD_ITEM } from ' constants/paths/paths'; import Image from 'components/@shared/Image'; -import useNavigateTo from 'hooks/useNavigateTo'; import useWindowSize from 'hooks/useWindowSize'; -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { DEVICE_MAX_WIDTH, MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; import { ProductOrderByType } from 'types/@shared/marketTypes'; +import { Link } from 'react-router-dom'; const orderByObject = { recent: '최신순', @@ -31,7 +31,6 @@ function ProductManagement({ handleSearchSubmit, handleIsOpenClick, }: ProductManagementProps) { - const { navigateTo } = useNavigateTo(); const { innerWidth } = useWindowSize(); return ( @@ -41,20 +40,18 @@ function ProductManagement({ - + + + - {innerWidth > MOBILE_MAX_WIDTH && {orderByObject[orderBy]}} + {innerWidth > DEVICE_MAX_WIDTH.mobile && {orderByObject[orderBy]}}