From 07384bb42ed7b9361cab5a62ddaa536500b5f315 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Tue, 30 Jul 2024 17:52:40 +0900 Subject: [PATCH 01/18] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 4 +++- .../{infomations => information}/addItemList.ts | 4 ++-- .../brandFeatureList.ts | 0 .../{infomations => information}/fileExtension.ts | 0 .../{infomations => information}/mediaQuerySize.ts | 0 .../{infomations => information}/snsLinks.ts | 0 src/components/@shared/Footer.tsx | 4 ++-- src/components/@shared/Header.tsx | 6 +++--- src/components/@shared/HeaderLinkSection.tsx | 2 +- src/components/@shared/Pagination.tsx | 6 +++--- src/components/addItem/ImageRegistration.tsx | 10 +++++----- src/components/addItem/InputSection.tsx | 4 ++-- src/components/addItem/RegistrationHeader.tsx | 6 +++--- src/components/addItem/TagList.tsx | 2 +- src/components/home/BrandBottom.tsx | 2 +- src/components/home/BrandContainer.tsx | 2 +- src/components/home/BrandTop.tsx | 2 +- src/components/home/FeatItem.tsx | 2 +- src/components/home/FeatList.tsx | 4 ++-- src/components/market/BestProductList.tsx | 2 +- src/components/market/BestProductsSection.tsx | 6 +++--- src/components/market/ForSaleProductList.tsx | 6 +++--- src/components/market/ForSaleProductSection.tsx | 4 ++-- src/components/market/ProductManagement.tsx | 6 +++--- src/components/productInfo/ProductDetail.tsx | 2 +- src/components/productInfo/ProductSpecs.tsx | 2 +- src/pages/AddProduct.tsx | 14 +++++++------- src/pages/Market.tsx | 4 ++-- src/styles/@shared/global/init.css | 2 +- src/styles/@shared/shared.ts | 2 +- src/styles/auth/containerStyles.ts | 2 +- src/types/@shared/addProductTypes.ts | 8 ++++---- 32 files changed, 61 insertions(+), 59 deletions(-) rename src/ constants/{infomations => information}/addItemList.ts (78%) rename src/ constants/{infomations => information}/brandFeatureList.ts (100%) rename src/ constants/{infomations => information}/fileExtension.ts (100%) rename src/ constants/{infomations => information}/mediaQuerySize.ts (100%) rename src/ constants/{infomations => information}/snsLinks.ts (100%) 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/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/infomations/mediaQuerySize.ts b/src/ constants/information/mediaQuerySize.ts similarity index 100% rename from src/ constants/infomations/mediaQuerySize.ts rename to src/ constants/information/mediaQuerySize.ts 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..bee5395c9 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 { MOBILE_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function Footer() { return ( diff --git a/src/components/@shared/Header.tsx b/src/components/@shared/Header.tsx index 755f9223e..d121ccbd0 100644 --- a/src/components/@shared/Header.tsx +++ b/src/components/@shared/Header.tsx @@ -3,7 +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'; +import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function Header() { const { navigateTo } = useNavigateTo(); @@ -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,7 +38,7 @@ 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); diff --git a/src/components/@shared/HeaderLinkSection.tsx b/src/components/@shared/HeaderLinkSection.tsx index 22ec6b203..5e239d699 100644 --- a/src/components/@shared/HeaderLinkSection.tsx +++ b/src/components/@shared/HeaderLinkSection.tsx @@ -6,7 +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'; +import { MOBILE_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function HeaderLinkSection() { const { innerWidth } = useWindowSize(); 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/ImageRegistration.tsx b/src/components/addItem/ImageRegistration.tsx index 5c00f88bd..d04b0efb4 100644 --- a/src/components/addItem/ImageRegistration.tsx +++ b/src/components/addItem/ImageRegistration.tsx @@ -1,13 +1,13 @@ 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; interface ImageRegistrationProps { previewList: IPreview[]; @@ -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; // 사진이 많아지면 좌우 스크롤이 되도록 지정 diff --git a/src/components/addItem/InputSection.tsx b/src/components/addItem/InputSection.tsx index cdf593e83..32dbe66e8 100644 --- a/src/components/addItem/InputSection.tsx +++ b/src/components/addItem/InputSection.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'; @@ -24,7 +24,7 @@ function InputSection({ }: InputSectionProps) { return ( - {ADDITEM_FEIELDSET_LIST.map(fieldset => ( + {ADDITEM_FIELDSET_LIST.map(fieldset => (
{fieldset.subTitle} 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..5e155a691 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; interface TagListProps { tagList: ITag[]; diff --git a/src/components/home/BrandBottom.tsx b/src/components/home/BrandBottom.tsx index 72d31c0dc..a3e5b042d 100644 --- a/src/components/home/BrandBottom.tsx +++ b/src/components/home/BrandBottom.tsx @@ -1,4 +1,4 @@ -import { TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; import BrandContainer from './BrandContainer'; import brandBottomImg from 'assets/images/home/home_bottom.png'; import Image from 'components/@shared/Image'; diff --git a/src/components/home/BrandContainer.tsx b/src/components/home/BrandContainer.tsx index e8d6b9c08..e6d7b0912 100644 --- a/src/components/home/BrandContainer.tsx +++ b/src/components/home/BrandContainer.tsx @@ -1,4 +1,4 @@ -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; import { ReactNode } from 'react'; import styled from 'styled-components'; diff --git a/src/components/home/BrandTop.tsx b/src/components/home/BrandTop.tsx index 64478c4da..85c36c404 100644 --- a/src/components/home/BrandTop.tsx +++ b/src/components/home/BrandTop.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import useNavigateTo from 'hooks/useNavigateTo'; import Image from 'components/@shared/Image'; import { PATH_ITEMS } from ' constants/paths/paths'; -import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/infomations/mediaQuerySize'; +import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function BrandTop() { const { navigateTo } = useNavigateTo(); diff --git a/src/components/home/FeatItem.tsx b/src/components/home/FeatItem.tsx index c65963442..b61d3ce73 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function FeatItem({ src, alt, title, description, detail }: Omit) { return ( diff --git a/src/components/home/FeatList.tsx b/src/components/home/FeatList.tsx index 661596636..6381e3959 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 { TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function FeatList() { return ( diff --git a/src/components/market/BestProductList.tsx b/src/components/market/BestProductList.tsx index d65d8e25d..1bebe2c8e 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function BestProductList() { const pageSize = usePageSize('best'); 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..7c608d681 100644 --- a/src/components/market/ForSaleProductList.tsx +++ b/src/components/market/ForSaleProductList.tsx @@ -4,7 +4,7 @@ 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; import { useSearchParams } from 'react-router-dom'; interface ForSaleProductListProps { @@ -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 페이지에서 상품 상세 페이지를 들어온 경우에, diff --git a/src/components/market/ForSaleProductSection.tsx b/src/components/market/ForSaleProductSection.tsx index 747354f5a..a430355e1 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 { MOBILE_MAX_WIDTH } from ' constants/information/mediaQuerySize'; function ForSaleProductsSection() { const [searchValue, setSearchValue] = useState(''); @@ -46,7 +46,7 @@ function ForSaleProductsSection() { /> - Loding...}> + Loading...}> diff --git a/src/components/market/ProductManagement.tsx b/src/components/market/ProductManagement.tsx index 4c7d52cdf..598281dbf 100644 --- a/src/components/market/ProductManagement.tsx +++ b/src/components/market/ProductManagement.tsx @@ -8,7 +8,7 @@ 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 { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from ' constants/information/mediaQuerySize'; import { ProductOrderByType } from 'types/@shared/marketTypes'; const orderByObject = { @@ -42,7 +42,7 @@ function ProductManagement({ + + + ); diff --git a/src/components/@shared/HeaderLinkSection.tsx b/src/components/@shared/HeaderLinkSection.tsx index ad90abd74..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 { 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) && (
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 29ae85bd3..5456600c3 100644 --- a/src/components/auth/login/LoginForm.tsx +++ b/src/components/auth/login/LoginForm.tsx @@ -1,19 +1,19 @@ import PasswordInput from '../PasswordInput'; import Button from 'components/@shared/Button'; -import useNavigateTo from 'hooks/useNavigateTo'; import { PATH_ITEMS } from ' constants/paths/paths'; 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 navigator = useNavigate(); const { form, handler, result, message, isFormValid } = useLoginForm(); const handleSubmitClick = (event: React.FormEvent) => { // 입력 양식을 통과하지 못하면 button이 disabled 상태라 누를 수 없음 event.preventDefault(); - navigateTo(PATH_ITEMS); + navigator(PATH_ITEMS); }; return ( diff --git a/src/components/auth/signup/ SignupForm.tsx b/src/components/auth/signup/ SignupForm.tsx index 772debc40..269165c10 100644 --- a/src/components/auth/signup/ SignupForm.tsx +++ b/src/components/auth/signup/ SignupForm.tsx @@ -1,17 +1,17 @@ +import React from 'react'; import Button from 'components/@shared/Button'; import PasswordInput from '../PasswordInput'; -import useNavigateTo from 'hooks/useNavigateTo'; import { StyledAuthForm, StyledAuthLabel, StyledInputSection } from 'styles/auth/formStyles'; import useSignupForm from 'hooks/form/useSignupForm'; -import React from 'react'; +import { useNavigate } from 'react-router-dom'; function SignupForm() { - const { navigateTo } = useNavigateTo(); + const navigator = useNavigate(); const { form, handler, result, message, isFormValid } = useSignupForm(); const handleSubmitClick = (event: React.FormEvent) => { event.preventDefault(); - navigateTo('/'); + navigator('/'); }; return ( diff --git a/src/components/home/BrandTop.tsx b/src/components/home/BrandTop.tsx index b32e73c47..d7111f3c1 100644 --- a/src/components/home/BrandTop.tsx +++ b/src/components/home/BrandTop.tsx @@ -2,24 +2,21 @@ import Button from 'components/@shared/Button'; import BrandContainer from './BrandContainer'; import brandTopImg from 'assets/images/home/home_top.png'; import styled from 'styled-components'; -import useNavigateTo from 'hooks/useNavigateTo'; import Image from 'components/@shared/Image'; import { PATH_ITEMS } from ' constants/paths/paths'; import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; +import { Link } from 'react-router-dom'; function BrandTop() { - const { navigateTo } = useNavigateTo(); return (

{'일상의 모든 물건을\n거래해 보세요'}

- + + + 인사하는 판다 이미지 diff --git a/src/components/market/ProductManagement.tsx b/src/components/market/ProductManagement.tsx index 72709e31a..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 { 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,13 +40,11 @@ function ProductManagement({ - + + + diff --git a/src/pages/AddProduct.tsx b/src/pages/AddProduct.tsx index 1a78ab6f0..70ac7d3d5 100644 --- a/src/pages/AddProduct.tsx +++ b/src/pages/AddProduct.tsx @@ -1,14 +1,12 @@ import styled from 'styled-components'; import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import useAllFieldFilled from 'hooks/useAllFieldFilled'; - import ImageRegistration from 'components/addItem/ImageRegistration'; import AddProductInputSection from 'components/addItem/AddProductInputSection'; - import RegistrationHeader from 'components/addItem/RegistrationHeader'; import { IFormValue, IImagePreview, ITag } from 'types/@shared/addProductTypes'; import { MEDIA_QUERY_SIZE } from ' constants/information/mediaQuerySize'; +import useAllFieldFilled from 'hooks/form/useAllFieldFilled'; function AddProduct() { const [addProductFormValue, setAddProductFormValue] = useState({ From 64b3b3dc5723afc2b5e54b5d323d888736408025 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Fri, 2 Aug 2024 19:56:40 +0900 Subject: [PATCH 16/18] =?UTF-8?q?docs(useDidMountEffect):=20=EC=A3=BC?= =?UTF-8?q?=EC=84=9D=20=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDidMountEffect.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useDidMountEffect.ts b/src/hooks/useDidMountEffect.ts index e9de05521..c967916a7 100644 --- a/src/hooks/useDidMountEffect.ts +++ b/src/hooks/useDidMountEffect.ts @@ -19,11 +19,11 @@ export default useDidMountEffect; /* 참고 내용 : didMount를 false로 초기화를 했습니다. -즉, 처음 렌더링 할 때는 didMount가 false이기 때문에 콜백함수 func()를 실행하지 않고 didMount를 true로 전환합니다. +즉, 처음 렌더링 할 때는 didMount가 false이기 때문에 콜백함수 callback()를 실행하지 않고 didMount를 true로 전환합니다. 그리고 다음 렌더링 때는 didMount가 false가 아닌 true이므로 이때 콜백함수를 실행합니다. didMount는 useState가 아닌 useRef로 선언이 되었는데, -useRef는 useState와 달리 값이 변경되었다고 해서 Rerendering을 하지 않습니다. +useRef는 useState와 달리 값이 변경되었다고 해서 Rerendering을 하지 않기 때문입니다. 만약 didMount를 useState로 선언을 했다면, didMount.current = true 시점에서 개발자가 원하지 않음에도 불구하고 Rerendering 발생을 했을 것입니다. From 27cd0211d81a3d2a3ceedec48b2560d3784f9136 Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Fri, 2 Aug 2024 22:16:51 +0900 Subject: [PATCH 17/18] =?UTF-8?q?fix:=20=EC=9E=84=ED=8F=AC=ED=8A=B8=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Signup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Signup.tsx b/src/pages/Signup.tsx index f0ed214f5..2d1cc5a9d 100644 --- a/src/pages/Signup.tsx +++ b/src/pages/Signup.tsx @@ -3,7 +3,7 @@ import SignupForm from 'components/auth/signup/ SignupForm'; import AuthLogo from 'components/auth/AuthLogo'; import SocialLogin from 'components/auth/SocialLogin'; import MemberCheck from 'components/auth/MemberCheck'; -import { StyledAuthContainer, StyledAuthMain } from 'styles/market/auth/containerStyles'; +import { StyledAuthContainer, StyledAuthMain } from 'styles/auth/containerStyles'; function Signup() { return ( From ddcb0afd08ac6d48d241d0dc62b2ee5620d453fc Mon Sep 17 00:00:00 2001 From: Minchan <98478661+itscold96@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:43:24 +0900 Subject: [PATCH 18/18] =?UTF-8?q?refactor(useLoginForm,=20useSignupForm):?= =?UTF-8?q?=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20useEffect=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 리팩토링 과정 중에 잔재하던 불필요한 useEffect 제거 --- src/hooks/form/useLoginForm.ts | 10 ++-------- src/hooks/form/useSignupForm.ts | 13 +++---------- 2 files changed, 5 insertions(+), 18 deletions(-) diff --git a/src/hooks/form/useLoginForm.ts b/src/hooks/form/useLoginForm.ts index 97fd68e5f..64949c0a0 100644 --- a/src/hooks/form/useLoginForm.ts +++ b/src/hooks/form/useLoginForm.ts @@ -1,17 +1,11 @@ -import { useEffect, useState } from 'react'; +// import { useEffect, useState } from 'react'; import useEmail from './useEmail'; import usePassword from './usePassword'; function useLoginForm() { const { email, handleEmailChange, result: emailValidResult, message: emailValidMessage } = useEmail(); const { password, handlePasswordChange, result: passwordValidResult, message: passwordValidMessage } = usePassword(); - const [isFormValid, setIsFormValid] = useState(false); - - useEffect(() => { - // emailValidResult, passwordValidResult가 변경될 때마다 모두 valid 상태인지 확인 - const isValid = [emailValidResult, passwordValidResult].every(result => result === 'valid'); - setIsFormValid(isValid); - }, [emailValidResult, passwordValidResult]); + const isFormValid = [emailValidResult, passwordValidResult].every(result => result === 'valid'); return { form: { diff --git a/src/hooks/form/useSignupForm.ts b/src/hooks/form/useSignupForm.ts index c204c4daa..aaa971b19 100644 --- a/src/hooks/form/useSignupForm.ts +++ b/src/hooks/form/useSignupForm.ts @@ -1,4 +1,3 @@ -import { useEffect, useState } from 'react'; import useEmail from './useEmail'; import usePassword from './usePassword'; import useNickname from './useNickname'; @@ -14,15 +13,9 @@ function useSignupForm() { result: verifyPasswordValidResult, message: verifyPasswordMessage, } = useVerifyPassword(password); - const [isFormValid, setIsFormValid] = useState(false); - - useEffect(() => { - // 모든 입력값의 상태가 변경될 때마다 모두 valid 상태인지 확인 - const isValid = [emailValidResult, passwordValidResult, nicknameValidResult, verifyPasswordValidResult].every( - result => result === 'valid', - ); - setIsFormValid(isValid); - }, [emailValidResult, passwordValidResult, nicknameValidResult, verifyPasswordValidResult]); + const isFormValid = [emailValidResult, passwordValidResult, nicknameValidResult, verifyPasswordValidResult].every( + result => result === 'valid', + ); return { form: {