From 712f2e67e1d35923d10513abdce2e9dc37a509d0 Mon Sep 17 00:00:00 2001 From: JunSeok Date: Mon, 25 Nov 2024 13:37:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20useToggleState=20=ED=9B=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/bid/ui/BidCaution.tsx | 6 +++--- src/features/bid/ui/BidForm.tsx | 10 ++++------ src/features/register/ui/RegisterCaution.tsx | 6 +++--- src/pages/payment/ui/PaymentAddressAdd.tsx | 7 +++---- src/pages/payment/ui/PaymentAddressEdit.tsx | 11 ++++------- src/shared/hooks/index.ts | 1 + src/shared/hooks/useToggleState.ts | 11 +++++++++++ src/shared/index.ts | 1 + src/shared/ui/AuctionForm.tsx | 9 ++++----- src/shared/ui/Checkbox.tsx | 8 ++++---- 10 files changed, 38 insertions(+), 32 deletions(-) create mode 100644 src/shared/hooks/index.ts create mode 100644 src/shared/hooks/useToggleState.ts diff --git a/src/features/bid/ui/BidCaution.tsx b/src/features/bid/ui/BidCaution.tsx index 375817b2..27694f49 100644 --- a/src/features/bid/ui/BidCaution.tsx +++ b/src/features/bid/ui/BidCaution.tsx @@ -3,10 +3,10 @@ import { BID_CAUTION } from "../config"; interface BidCautionProps { check: boolean; - handleCheck: () => void; + toggle: () => void; } -export const BidCaution = ({ check, handleCheck }: BidCautionProps) => { +export const BidCaution = ({ check, toggle }: BidCautionProps) => { return (

{BID_CAUTION.HEADING}

@@ -18,7 +18,7 @@ export const BidCaution = ({ check, handleCheck }: BidCautionProps) => { ))} - +
); }; \ No newline at end of file diff --git a/src/features/bid/ui/BidForm.tsx b/src/features/bid/ui/BidForm.tsx index 5a884fcf..96225283 100644 --- a/src/features/bid/ui/BidForm.tsx +++ b/src/features/bid/ui/BidForm.tsx @@ -1,12 +1,11 @@ -import { getBidSchema } from "@/features/bid/config"; -import { AuctionItem, Button, FormField, MAX_BID_COUNT, convertCurrencyToNumber, formatCurrencyWithWon } from "@/shared"; +import { AuctionItem, Button, FormField, MAX_BID_COUNT, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; import { SubmitHandler, useForm } from "react-hook-form"; import { Layout } from "@/app/layout/index"; +import { getBidSchema } from "@/features/bid/config"; import { useGetAuctionDetails } from "@/features/details"; import { useEditableNumberInput } from "@/features/register/lib/useEditableNumberInput"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useState } from "react"; import { z } from "zod"; import { Input } from "../../../shared/shadcn/ui/input"; import { usePostBid } from "../model/usePostBid"; @@ -15,8 +14,7 @@ import { BidCaution } from "./BidCaution"; export const BidForm = ({ auctionId }: { auctionId: number }) => { const { auctionDetails } = useGetAuctionDetails(auctionId); const { mutate: postBid, isPending } = usePostBid(auctionId); - const [check, setCheck] = useState(false); - const toggleCheckBox = () => setCheck((state) => !state); + const [check, toggle] = useToggleState(false) const { images, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipated } = auctionDetails; const BidSchema = getBidSchema(minPrice, bidAmount); @@ -84,7 +82,7 @@ export const BidForm = ({ auctionId }: { auctionId: number }) => { /> )} /> - + diff --git a/src/features/register/ui/RegisterCaution.tsx b/src/features/register/ui/RegisterCaution.tsx index 989bb6f8..f18f8dfb 100644 --- a/src/features/register/ui/RegisterCaution.tsx +++ b/src/features/register/ui/RegisterCaution.tsx @@ -4,10 +4,10 @@ import { PRE_REGISTER_CAUTION, REGISTER_CAUTION } from '../config'; interface CautionProps { kind: string; check: boolean; - handleCheck: () => void; + toggle: () => void; } -export const RegisterCaution = ({ kind, check, handleCheck }: CautionProps) => { +export const RegisterCaution = ({ kind, check, toggle }: CautionProps) => { return (

{kind === 'REGISTER' ? REGISTER_CAUTION.HEADING : PRE_REGISTER_CAUTION.HEADING}

@@ -32,7 +32,7 @@ export const RegisterCaution = ({ kind, check, handleCheck }: CautionProps) => { ))} )} - +
); diff --git a/src/pages/payment/ui/PaymentAddressAdd.tsx b/src/pages/payment/ui/PaymentAddressAdd.tsx index ac80fc2f..f65f290e 100644 --- a/src/pages/payment/ui/PaymentAddressAdd.tsx +++ b/src/pages/payment/ui/PaymentAddressAdd.tsx @@ -3,7 +3,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom"; import { Layout } from "@/app/layout/index"; import { ADDRESS_SCRIPT_URL } from "@/features/address/config/address"; -import { Button, Checkbox, FormField } from "@/shared"; +import { Button, Checkbox, FormField, useToggleState } from "@/shared"; import { Input } from "@/shared/shadcn/ui/input"; import { formatPhoneNumber } from "@/shared/utils/formatPhoneNumber"; import { useForm } from "react-hook-form"; @@ -24,8 +24,7 @@ export const PaymentAddressAdd = () => { const location = useLocation(); const { roadAddress, zonecode, jibunAddress } = location.state; const formRef = useRef(null); - const [isChecked, setIsChecked] = useState(false); - const toggleCheckbox = () => setIsChecked((prev) => !prev) + const [isChecked, toggleCheck] = useToggleState(false); const [isVaild, setIsVaild] = useState(false); if (!auctionId) { return; @@ -231,7 +230,7 @@ export const PaymentAddressAdd = () => { )} /> {/* 기본 배송지 체크박스는 직접 처리 */} - + diff --git a/src/pages/payment/ui/PaymentAddressEdit.tsx b/src/pages/payment/ui/PaymentAddressEdit.tsx index 77cd75c0..29163550 100644 --- a/src/pages/payment/ui/PaymentAddressEdit.tsx +++ b/src/pages/payment/ui/PaymentAddressEdit.tsx @@ -3,12 +3,12 @@ import { useLocation, useNavigate, useParams } from "react-router-dom"; import { Layout } from "@/app/layout/index"; import { ADDRESS_SCRIPT_URL } from "@/features/address/config/address"; -import { Button, Checkbox, FormField } from "@/shared"; +import { useEditAddress } from "@/features/address/model"; +import { Button, Checkbox, FormField, useToggleState } from "@/shared"; import { ROUTES } from "@/shared/constants/routes"; import { Input } from "@/shared/shadcn/ui/input"; import { formatPhoneNumber } from "@/shared/utils/formatPhoneNumber"; import { useForm } from "react-hook-form"; -import { useEditAddress } from "@/features/address/model"; interface AddressProps { recipientName: string, @@ -27,10 +27,7 @@ export const PaymentAddressEdit = () => { const roadAddress = location.state?.roadAddress; const zonecode = location.state?.zonecode; const formRef = useRef(null); - const [isChecked, setIsChecked] = useState(addressItem.isDefault); - const toggleCheckbox = () => { - setIsChecked((prev: boolean) => !prev); - } + const [isChecked, toggleCheck] = useToggleState(addressItem.isDefault) const [isVaild, setIsVaild] = useState(false); if (!auctionId) { return; @@ -236,7 +233,7 @@ export const PaymentAddressEdit = () => { /> )} /> - + diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts new file mode 100644 index 00000000..3a7d2e11 --- /dev/null +++ b/src/shared/hooks/index.ts @@ -0,0 +1 @@ +export { useToggleState } from './useToggleState'; diff --git a/src/shared/hooks/useToggleState.ts b/src/shared/hooks/useToggleState.ts new file mode 100644 index 00000000..a185ebab --- /dev/null +++ b/src/shared/hooks/useToggleState.ts @@ -0,0 +1,11 @@ +import { useCallback, useState } from 'react'; + +export const useToggleState = (initialState: boolean) => { + const [state, setState] = useState(initialState); + + const toggle = useCallback(() => { + setState((prev) => !prev); + }, []); + + return [state, toggle] as const; +}; diff --git a/src/shared/index.ts b/src/shared/index.ts index 6b9a58e4..4f4a9087 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -2,3 +2,4 @@ export * from './api'; export * from './constants'; export * from './ui'; export * from './utils'; +export * from './hooks'; diff --git a/src/shared/ui/AuctionForm.tsx b/src/shared/ui/AuctionForm.tsx index df06e1a1..de006a54 100644 --- a/src/shared/ui/AuctionForm.tsx +++ b/src/shared/ui/AuctionForm.tsx @@ -1,4 +1,4 @@ -import { Button, CATEGORIES, FormField, convertCurrencyToNumber, formatCurrencyWithWon } from "@/shared"; +import { Button, CATEGORIES, FormField, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; import { Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Textarea } from "@/shared/shadcn"; import { Layout } from "@/app/layout"; @@ -24,7 +24,7 @@ const defaultValues = { export const AuctionForm = ({ preAuction }: { preAuction?: IPreAuctionDetails }) => { const [caution, setCaution] = useState(''); - const [check, setCheck] = useState(false); + const [check, toggle] = useToggleState(false) const navigate = useNavigate(); const { mutate: patchPreAuction, isPending: patchPending } = usePatchPreAuction(); @@ -53,10 +53,9 @@ export const AuctionForm = ({ preAuction }: { preAuction?: IPreAuctionDetails }) }); const title = caution ? '주의사항' : preAuction ? '사전 경매 수정하기' : '경매 등록하기'; - const toggleCheckBox = () => setCheck((state) => !state); const clickBack = () => { (caution === '' ? navigate(-1) : setCaution('')); - toggleCheckBox() + toggle() } const handleProceed = (proceedType: 'PRE_REGISTER' | 'REGISTER') => { handleSubmit(() => setCaution(proceedType))(); @@ -196,7 +195,7 @@ export const AuctionForm = ({ preAuction }: { preAuction?: IPreAuctionDetails }) ) : ( - + )} diff --git a/src/shared/ui/Checkbox.tsx b/src/shared/ui/Checkbox.tsx index 9a7f0e79..8d2875f6 100644 --- a/src/shared/ui/Checkbox.tsx +++ b/src/shared/ui/Checkbox.tsx @@ -4,10 +4,10 @@ import CheckOn from '@/shared/assets/icons/check_on.svg'; interface CheckboxProps { check: boolean; title?: string - handleCheck: () => void; + toggle: () => void; } -export const Checkbox = ({ check, handleCheck, title = '주의사항을 모두 확인하였으며 위 내용에 동의합니다.' }: CheckboxProps) => { +export const Checkbox = ({ check, toggle, title = '주의사항을 모두 확인하였으며 위 내용에 동의합니다.' }: CheckboxProps) => { const state = check ? 'on' : 'off'; const iconSrc = check ? CheckOn : CheckOff; @@ -18,12 +18,12 @@ export const Checkbox = ({ check, handleCheck, title = '주의사항을 모두 role="checkbox" aria-label="체크박스" aria-checked={check} - onClick={handleCheck} + onClick={toggle} className="flex items-center cursor-pointer" > {`check_${state}`} - + {title} From fa0ca6140fd6ed0947e263fd2846393786f7d8dc Mon Sep 17 00:00:00 2001 From: JunSeok Date: Mon, 25 Nov 2024 16:56:48 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EA=B2=BD?= =?UTF-8?q?=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 --- index.html | 4 ++-- src/features/bid/ui/BidForm.tsx | 11 +++++------ src/features/details/ui/AuctionDetailsMain.tsx | 6 +++--- .../details/ui/PreAuctionDetailsMain.tsx | 9 ++++----- src/features/profile/ui/ProfileImageUploader.tsx | 7 ++++--- src/features/register/ui/ImageUploader.tsx | 3 +-- src/pages/Test.tsx | 6 ++---- src/pages/details/ui/PreAuctionDetails.tsx | 2 +- src/pages/home/model/useGetPreAuctions.ts | 2 +- src/pages/home/ui/BestItemList.tsx | 3 +-- src/pages/home/ui/HomeRegisterBtn.tsx | 2 +- src/pages/home/ui/ImminentItemList.tsx | 3 +-- src/pages/home/ui/PreAuctionItemList.tsx | 3 +-- src/pages/payment/ui/Payment.tsx | 14 +++++++------- src/pages/payment/ui/PaymentAddressAdd.tsx | 6 +++--- src/pages/payment/ui/PaymentAddressEdit.tsx | 4 ++-- src/pages/settlement/model/index.ts | 1 + src/pages/settlement/ui/Settlement.tsx | 4 ++-- src/pages/settlement/ui/SettlementMain.tsx | 2 +- src/pages/sign-up/ui/Signup.tsx | 15 ++++++++------- src/pages/user/ui/UserProfileEdit.tsx | 14 +++++++------- src/shared/{shadcn => }/lib/utils.ts | 0 src/shared/shadcn/index.ts | 1 - src/shared/shadcn/ui/index.ts | 6 ------ src/shared/ui/AuctionForm.tsx | 3 +-- src/shared/ui/CustomCarousel.tsx | 2 +- .../{shadcn/ui/button.tsx => ui/buttonCN.tsx} | 8 ++++---- src/shared/{shadcn => }/ui/carousel.tsx | 16 ++++++++-------- src/shared/ui/index.ts | 6 ++++++ src/shared/{shadcn => }/ui/input.tsx | 2 +- src/shared/{shadcn => }/ui/select.tsx | 2 +- src/shared/{shadcn => }/ui/sonner.tsx | 0 src/shared/{shadcn => }/ui/textarea.tsx | 2 +- tailwind.config.js | 3 --- tsconfig.base.json | 12 ++++-------- vite.config.ts | 2 +- 36 files changed, 86 insertions(+), 100 deletions(-) rename src/shared/{shadcn => }/lib/utils.ts (100%) delete mode 100644 src/shared/shadcn/index.ts delete mode 100644 src/shared/shadcn/ui/index.ts rename src/shared/{shadcn/ui/button.tsx => ui/buttonCN.tsx} (90%) rename src/shared/{shadcn => }/ui/carousel.tsx (96%) rename src/shared/{shadcn => }/ui/input.tsx (94%) rename src/shared/{shadcn => }/ui/select.tsx (99%) rename src/shared/{shadcn => }/ui/sonner.tsx (100%) rename src/shared/{shadcn => }/ui/textarea.tsx (93%) diff --git a/index.html b/index.html index 563b85a1..83d91c8d 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,11 @@ - + CHZZ Market
- + diff --git a/src/features/bid/ui/BidForm.tsx b/src/features/bid/ui/BidForm.tsx index 96225283..d8970501 100644 --- a/src/features/bid/ui/BidForm.tsx +++ b/src/features/bid/ui/BidForm.tsx @@ -1,14 +1,13 @@ -import { AuctionItem, Button, FormField, MAX_BID_COUNT, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; +import { AuctionItem, Button, FormField, Input, MAX_BID_COUNT, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; import { SubmitHandler, useForm } from "react-hook-form"; -import { Layout } from "@/app/layout/index"; -import { getBidSchema } from "@/features/bid/config"; +import { Layout } from "@/app/layout"; import { useGetAuctionDetails } from "@/features/details"; -import { useEditableNumberInput } from "@/features/register/lib/useEditableNumberInput"; +import { useEditableNumberInput } from "@/features/register"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { Input } from "../../../shared/shadcn/ui/input"; -import { usePostBid } from "../model/usePostBid"; +import { getBidSchema } from "../config"; +import { usePostBid } from "../model"; import { BidCaution } from "./BidCaution"; export const BidForm = ({ auctionId }: { auctionId: number }) => { diff --git a/src/features/details/ui/AuctionDetailsMain.tsx b/src/features/details/ui/AuctionDetailsMain.tsx index 4bd422e4..fe68df97 100644 --- a/src/features/details/ui/AuctionDetailsMain.tsx +++ b/src/features/details/ui/AuctionDetailsMain.tsx @@ -1,10 +1,10 @@ +import { CarouselItem, CustomCarousel, formatCurrencyWithWon } from "@/shared"; +import { AuctionDetailsFooter, DetailsBasic, ProgressBar } from "."; + import { Layout } from "@/app/layout"; -import { CustomCarousel, formatCurrencyWithWon } from "@/shared"; import ParticipantAmount from '@/shared/assets/icons/my_participation_amount.svg'; import Participants from '@/shared/assets/icons/participants.svg'; import ProfileDefaultImage from '@/shared/assets/icons/profile.svg'; -import { CarouselItem } from "@/shared/shadcn/ui/carousel"; -import { AuctionDetailsFooter, DetailsBasic, ProgressBar } from "."; import { useGetAuctionDetails } from ".."; export const AuctionDetailsMain = ({ auctionId }: { auctionId: number }) => { diff --git a/src/features/details/ui/PreAuctionDetailsMain.tsx b/src/features/details/ui/PreAuctionDetailsMain.tsx index 3f454f70..e2aa4bd0 100644 --- a/src/features/details/ui/PreAuctionDetailsMain.tsx +++ b/src/features/details/ui/PreAuctionDetailsMain.tsx @@ -1,14 +1,13 @@ +import { CustomCarousel, Modal, getTimeAgo, CarouselItem } from '@/shared'; +import { DetailsBasic, DetailsOption, PreAuctionDetailsFooter } from '.'; +import { useDeletePreAuction, useGetPreAuctionDetails } from '..'; + import { Layout } from '@/app/layout'; -import { CustomCarousel, Modal, getTimeAgo } from '@/shared'; import BoxEditIcon from '@/shared/assets/icons/in_box_edit_time.svg'; import BoxLikeIcon from '@/shared/assets/icons/in_box_like.svg'; import ProfileDefaultImage from '@/shared/assets/icons/profile.svg'; import ThreeDotsIcon from '@/shared/assets/icons/three_dots.svg'; - -import { CarouselItem } from '@/shared/shadcn/ui/carousel'; import { useNavigate } from 'react-router-dom'; -import { DetailsBasic, DetailsOption, PreAuctionDetailsFooter } from '.'; -import { useDeletePreAuction, useGetPreAuctionDetails } from '..'; export const PreAuctionDetailsMain = ({ preAuctionId }: { preAuctionId: number }) => { const navigate = useNavigate(); diff --git a/src/features/profile/ui/ProfileImageUploader.tsx b/src/features/profile/ui/ProfileImageUploader.tsx index 034b3f39..9c60b22a 100644 --- a/src/features/profile/ui/ProfileImageUploader.tsx +++ b/src/features/profile/ui/ProfileImageUploader.tsx @@ -1,8 +1,9 @@ +import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'; + import { MenuAccordion } from '@/shared'; import Profile from '@/shared/assets/icons/profile.svg'; import ProfileEdit from '@/shared/assets/icons/profile_edit.svg'; -import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'; -import { Input } from '../../../shared/shadcn/ui/input'; +import { Input } from '../../../shared/ui/input'; import { useProfileImageUploader } from '../lib'; interface ImageUploaderProps { @@ -42,7 +43,7 @@ export const ProfileImageUploader = ({ file, setFile, image, setImage }: ImageUp
프로필 사진 프로필 사진 옆 카메라 - {onMenu && + {onMenu &&
diff --git a/src/features/register/ui/ImageUploader.tsx b/src/features/register/ui/ImageUploader.tsx index 170f1b54..593c8218 100644 --- a/src/features/register/ui/ImageUploader.tsx +++ b/src/features/register/ui/ImageUploader.tsx @@ -1,8 +1,7 @@ import { useDragAndDrop, useImageUploader } from '../lib'; -import { CustomCarousel } from "@/shared"; +import { CarouselItem, CustomCarousel, Input } from "@/shared"; import DeleteIcon from '@/shared/assets/icons/delete.svg'; -import { CarouselItem, Input } from '@/shared/shadcn'; import { AddImageButton } from '.'; interface ImageUploaderProps { diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx index 8c3d9a83..702b633c 100644 --- a/src/pages/Test.tsx +++ b/src/pages/Test.tsx @@ -1,7 +1,5 @@ -import { Layout } from "@/app/layout/index"; -import { httpClient } from "@/shared/api/axios"; -import { Input } from "@/shared/shadcn/ui/input"; -import { Button } from "@/shared"; +import { Layout } from "@/app/layout"; +import { Button, httpClient, Input } from "@/shared"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; diff --git a/src/pages/details/ui/PreAuctionDetails.tsx b/src/pages/details/ui/PreAuctionDetails.tsx index 41a039a6..5e9d94be 100644 --- a/src/pages/details/ui/PreAuctionDetails.tsx +++ b/src/pages/details/ui/PreAuctionDetails.tsx @@ -1,6 +1,6 @@ import { LoaderFunction, useLoaderData } from 'react-router-dom'; -import { Layout } from '@/app/layout/index'; +import { Layout } from '@/app/layout'; import { PreAuctionDetailsMain } from "@/features/details"; import { APIAsyncBoundary } from '@/shared'; diff --git a/src/pages/home/model/useGetPreAuctions.ts b/src/pages/home/model/useGetPreAuctions.ts index 0988e991..948c5fd7 100644 --- a/src/pages/home/model/useGetPreAuctions.ts +++ b/src/pages/home/model/useGetPreAuctions.ts @@ -1,4 +1,4 @@ -import { QUERY_KEYS } from '@/shared/constants/queryKeys'; +import { QUERY_KEYS } from '@/shared'; import { useSuspenseQuery } from '@tanstack/react-query'; import { getPreAuctions } from '../api'; diff --git a/src/pages/home/ui/BestItemList.tsx b/src/pages/home/ui/BestItemList.tsx index f5dd5435..253b271b 100644 --- a/src/pages/home/ui/BestItemList.tsx +++ b/src/pages/home/ui/BestItemList.tsx @@ -1,6 +1,5 @@ -import { AuctionItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; +import { AuctionItem, CarouselItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; -import { CarouselItem } from "@/shared/shadcn/ui/carousel"; import { useNavigate } from "react-router-dom"; import { useGetBestAuctions } from "../model"; diff --git a/src/pages/home/ui/HomeRegisterBtn.tsx b/src/pages/home/ui/HomeRegisterBtn.tsx index b96a0fd5..4908ec75 100644 --- a/src/pages/home/ui/HomeRegisterBtn.tsx +++ b/src/pages/home/ui/HomeRegisterBtn.tsx @@ -1,4 +1,4 @@ -import { ROUTES } from '@/shared/constants'; +import { ROUTES } from '@/shared'; import { AiOutlinePlus } from 'react-icons/ai'; import { useNavigate } from 'react-router-dom'; diff --git a/src/pages/home/ui/ImminentItemList.tsx b/src/pages/home/ui/ImminentItemList.tsx index c15d9e41..5dc01af7 100644 --- a/src/pages/home/ui/ImminentItemList.tsx +++ b/src/pages/home/ui/ImminentItemList.tsx @@ -1,6 +1,5 @@ -import { AuctionItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; +import { AuctionItem, CarouselItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; -import { CarouselItem } from "@/shared/shadcn/ui/carousel"; import { useNavigate } from "react-router-dom"; import { useGetImminentAuctions } from "../model"; diff --git a/src/pages/home/ui/PreAuctionItemList.tsx b/src/pages/home/ui/PreAuctionItemList.tsx index 0c39aab5..9742aed3 100644 --- a/src/pages/home/ui/PreAuctionItemList.tsx +++ b/src/pages/home/ui/PreAuctionItemList.tsx @@ -1,6 +1,5 @@ -import { AuctionItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; +import { AuctionItem, CarouselItem, CustomCarousel, EmptyBoundary, ROUTES } from "@/shared"; -import { CarouselItem } from "@/shared/shadcn/ui/carousel"; import { useNavigate } from "react-router-dom"; import { useGetPreAuctions } from "../model"; diff --git a/src/pages/payment/ui/Payment.tsx b/src/pages/payment/ui/Payment.tsx index ff3d66a4..5278979d 100644 --- a/src/pages/payment/ui/Payment.tsx +++ b/src/pages/payment/ui/Payment.tsx @@ -1,21 +1,21 @@ -import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/shared/shadcn/ui/select'; +import { Button, FormField } from "@/shared"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'; import { useEffect, useRef, useState } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { Layout } from '@/app/layout/index'; +import type { IAddressWithId } from '@/entities/address/address'; import { addressMemo } from '@/features/address/config/address'; -import { Button, FormField } from "@/shared"; +import { usePostPayment } from '@/features/address/model'; +import { usePostOrderId } from '@/features/address/model/usePostPayment'; import rocation_on from '@/shared/assets/icons/rocation_on.svg'; import trophyImage from '@/shared/assets/icons/successful_auction_win.svg'; import { ROUTES } from '@/shared/constants/routes'; import { AuctionShippingSchema } from '@/shared/constants/schema'; -import { Input } from '@/shared/shadcn/ui/input'; +import { Input } from '@/shared/ui/input'; import { formatCurrencyWithWon } from '@/shared/utils/formatCurrencyWithWon'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; -import type { IAddressWithId } from '@/entities/address/address'; -import { usePostPayment } from '@/features/address/model'; -import { usePostOrderId } from '@/features/address/model/usePostPayment'; type FormFields = z.infer; @@ -134,7 +134,7 @@ export const Payment = () => {
diff --git a/src/pages/payment/ui/PaymentAddressAdd.tsx b/src/pages/payment/ui/PaymentAddressAdd.tsx index f65f290e..a48d4fb6 100644 --- a/src/pages/payment/ui/PaymentAddressAdd.tsx +++ b/src/pages/payment/ui/PaymentAddressAdd.tsx @@ -1,13 +1,13 @@ +import { Button, Checkbox, FormField, useToggleState } from "@/shared"; import { useEffect, useRef, useState } from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import { Layout } from "@/app/layout/index"; import { ADDRESS_SCRIPT_URL } from "@/features/address/config/address"; -import { Button, Checkbox, FormField, useToggleState } from "@/shared"; -import { Input } from "@/shared/shadcn/ui/input"; +import { usePostAddress } from "@/features/address/model"; +import { Input } from "@/shared/ui/input"; import { formatPhoneNumber } from "@/shared/utils/formatPhoneNumber"; import { useForm } from "react-hook-form"; -import { usePostAddress } from "@/features/address/model"; interface AddressProps { recipientName: string, diff --git a/src/pages/payment/ui/PaymentAddressEdit.tsx b/src/pages/payment/ui/PaymentAddressEdit.tsx index 29163550..13701684 100644 --- a/src/pages/payment/ui/PaymentAddressEdit.tsx +++ b/src/pages/payment/ui/PaymentAddressEdit.tsx @@ -1,12 +1,12 @@ +import { Button, Checkbox, FormField, useToggleState } from "@/shared"; import { useEffect, useRef, useState } from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import { Layout } from "@/app/layout/index"; import { ADDRESS_SCRIPT_URL } from "@/features/address/config/address"; import { useEditAddress } from "@/features/address/model"; -import { Button, Checkbox, FormField, useToggleState } from "@/shared"; import { ROUTES } from "@/shared/constants/routes"; -import { Input } from "@/shared/shadcn/ui/input"; +import { Input } from "@/shared/ui/input"; import { formatPhoneNumber } from "@/shared/utils/formatPhoneNumber"; import { useForm } from "react-hook-form"; diff --git a/src/pages/settlement/model/index.ts b/src/pages/settlement/model/index.ts index e69de29b..a86c6ab3 100644 --- a/src/pages/settlement/model/index.ts +++ b/src/pages/settlement/model/index.ts @@ -0,0 +1 @@ +export { useGetBidderList } from './useGetBidderList'; diff --git a/src/pages/settlement/ui/Settlement.tsx b/src/pages/settlement/ui/Settlement.tsx index 36b898e4..ebbdcf0b 100644 --- a/src/pages/settlement/ui/Settlement.tsx +++ b/src/pages/settlement/ui/Settlement.tsx @@ -1,8 +1,8 @@ import { LoaderFunction, useLoaderData } from 'react-router-dom'; -import { Layout } from '@/app/layout/index'; -import SettlementMain from '@/pages/settlement/ui/SettlementMain'; +import { Layout } from '@/app/layout'; import { APIAsyncBoundary } from '@/shared'; +import SettlementMain from './SettlementMain'; export const Settlement = () => { const auctionId = useLoaderData() as number; diff --git a/src/pages/settlement/ui/SettlementMain.tsx b/src/pages/settlement/ui/SettlementMain.tsx index bc95bdcf..03c2fa44 100644 --- a/src/pages/settlement/ui/SettlementMain.tsx +++ b/src/pages/settlement/ui/SettlementMain.tsx @@ -5,7 +5,7 @@ import { useGetAuctionDetails } from "@/features/details"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { BIDDER_LIST_PRICE_FILTER, type IBidder } from "../config"; -import { useGetBidderList } from "../model/useGetBidderList"; +import { useGetBidderList } from "../model"; const SettlementMain = ({ auctionId }: { auctionId: number }) => { const [filterState, setFilterState] = useState(BIDDER_LIST_PRICE_FILTER.HIGH); diff --git a/src/pages/sign-up/ui/Signup.tsx b/src/pages/sign-up/ui/Signup.tsx index 4ebcd4db..4238b3c3 100644 --- a/src/pages/sign-up/ui/Signup.tsx +++ b/src/pages/sign-up/ui/Signup.tsx @@ -1,16 +1,17 @@ -import type { IUser } from '@/entities/user/user'; +import { setIsNameValid, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '@/features/sign-up/model/signupSlice'; +import { Button, FormField } from '@/shared'; +import { KeyboardEvent, useEffect, useRef } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + import { Layout } from '@/app/layout/index'; import { RootState } from '@/app/store'; +import type { IUser } from '@/entities/user/user'; import { useCheckNickname } from '@/features/profile/model/useProfile'; import { useSignup } from '@/features/sign-up/hooks'; -import { setIsNameValid, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '@/features/sign-up/model/signupSlice'; -import { Button, FormField } from '@/shared'; import NoticeBlue from '@/shared/assets/icons/blue_notice.svg'; import NoticeRed from '@/shared/assets/icons/notice_red.svg'; -import { Input } from '@/shared/shadcn/ui/input'; -import { Textarea } from '@/shared/shadcn/ui/textarea'; -import { KeyboardEvent, useEffect, useRef } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { Input } from '@/shared/ui/input'; +import { Textarea } from '@/shared/ui/textarea'; import { useNavigate } from 'react-router-dom'; export const Signup = () => { diff --git a/src/pages/user/ui/UserProfileEdit.tsx b/src/pages/user/ui/UserProfileEdit.tsx index 02494306..1a97989b 100644 --- a/src/pages/user/ui/UserProfileEdit.tsx +++ b/src/pages/user/ui/UserProfileEdit.tsx @@ -1,18 +1,18 @@ import { setIsNicknameCheckDisabled, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '@/entities/user/model/profileEditSlice'; +import { Button, FormField } from '@/shared'; import { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import type { IUserProfile } from '@/entities/user/user'; import { Layout } from '@/app/layout/index'; import { RootState } from '@/app/store'; -import { Button, FormField } from '@/shared'; +import type { IUserProfile } from '@/entities/user/user'; +import { useEditProfile } from '@/features/profile/hooks'; +import { useCheckNickname } from '@/features/profile/model/useProfile'; +import { ProfileImageUploader } from '@/features/profile/ui'; import NoticeBlue from '@/shared/assets/icons/blue_notice.svg'; import NoticeRed from '@/shared/assets/icons/notice_red.svg'; -import { Input } from '@/shared/shadcn/ui/input'; -import { Textarea } from '@/shared/shadcn/ui/textarea'; -import { ProfileImageUploader } from '@/features/profile/ui'; -import { useCheckNickname } from '@/features/profile/model/useProfile'; -import { useEditProfile } from '@/features/profile/hooks'; +import { Input } from '@/shared/ui/input'; +import { Textarea } from '@/shared/ui/textarea'; export const UserProfileEdit = () => { const formRef = useRef(null); diff --git a/src/shared/shadcn/lib/utils.ts b/src/shared/lib/utils.ts similarity index 100% rename from src/shared/shadcn/lib/utils.ts rename to src/shared/lib/utils.ts diff --git a/src/shared/shadcn/index.ts b/src/shared/shadcn/index.ts deleted file mode 100644 index 5ecdd1f3..00000000 --- a/src/shared/shadcn/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ui'; diff --git a/src/shared/shadcn/ui/index.ts b/src/shared/shadcn/ui/index.ts deleted file mode 100644 index c5be3466..00000000 --- a/src/shared/shadcn/ui/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { Button } from './button'; -export * from './carousel'; -export { Input } from './input'; -export * from './select'; -export { Toaster } from './sonner'; -export { Textarea } from './textarea'; diff --git a/src/shared/ui/AuctionForm.tsx b/src/shared/ui/AuctionForm.tsx index de006a54..d67ee6d1 100644 --- a/src/shared/ui/AuctionForm.tsx +++ b/src/shared/ui/AuctionForm.tsx @@ -1,5 +1,4 @@ -import { Button, CATEGORIES, FormField, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; -import { Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Textarea } from "@/shared/shadcn"; +import { Button, CATEGORIES, FormField, Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Textarea, convertCurrencyToNumber, formatCurrencyWithWon, useToggleState } from "@/shared"; import { Layout } from "@/app/layout"; import type { IPreAuctionDetails } from "@/entities"; diff --git a/src/shared/ui/CustomCarousel.tsx b/src/shared/ui/CustomCarousel.tsx index 39c9c08e..593c1b14 100644 --- a/src/shared/ui/CustomCarousel.tsx +++ b/src/shared/ui/CustomCarousel.tsx @@ -1,4 +1,4 @@ -import { Carousel, CarouselContent, CarouselNext, CarouselPrevious } from '../shadcn/ui/carousel'; +import { Carousel, CarouselContent, CarouselNext, CarouselPrevious } from './carousel'; import { ReactNode } from 'react'; diff --git a/src/shared/shadcn/ui/button.tsx b/src/shared/ui/buttonCN.tsx similarity index 90% rename from src/shared/shadcn/ui/button.tsx rename to src/shared/ui/buttonCN.tsx index 83e6312f..1f6a7725 100644 --- a/src/shared/shadcn/ui/button.tsx +++ b/src/shared/ui/buttonCN.tsx @@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import * as React from "react" -import { cn } from "@/shared/shadcn/lib/utils" +import { cn } from "@/shared/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", @@ -39,7 +39,7 @@ export interface ButtonProps asChild?: boolean } -const Button = React.forwardRef( +const ButtonCN = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( @@ -51,6 +51,6 @@ const Button = React.forwardRef( ) } ) -Button.displayName = "Button" +ButtonCN.displayName = "Button" -export { Button, buttonVariants } +export { ButtonCN, buttonVariants } diff --git a/src/shared/shadcn/ui/carousel.tsx b/src/shared/ui/carousel.tsx similarity index 96% rename from src/shared/shadcn/ui/carousel.tsx rename to src/shared/ui/carousel.tsx index f3c1a2d3..3774a704 100644 --- a/src/shared/shadcn/ui/carousel.tsx +++ b/src/shared/ui/carousel.tsx @@ -2,8 +2,8 @@ import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-reac import { ArrowLeft, ArrowRight } from 'lucide-react'; import * as React from 'react'; -import { cn } from '@/shared/shadcn/lib/utils'; -import { Button } from '@/shared/shadcn/ui/button'; +import { cn } from '@/shared/lib/utils'; +import { ButtonCN } from '@/shared/ui/buttonCN'; type CarouselApi = UseEmblaCarouselType[1]; type UseCarouselParameters = Parameters; @@ -150,12 +150,12 @@ const CarouselItem = React.forwardRef>( +const CarouselPrevious = React.forwardRef>( ({ className, variant = 'outline', size = 'icon', ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( - + ); } ); CarouselPrevious.displayName = 'CarouselPrevious'; -const CarouselNext = React.forwardRef>( +const CarouselNext = React.forwardRef>( ({ className, variant = 'outline', size = 'icon', ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( - + ); } ); diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 47249248..717fa291 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -15,5 +15,11 @@ export { ParticipantCount } from './ParticipantCount'; export { Price } from './Price'; export { TimeLabel } from './TimeLabel'; export * from './boundary'; +export { ButtonCN } from './buttonCN'; +export * from './carousel'; +export { Input } from './input'; export { PrivateRoute, PublicRoute } from './route'; +export * from './select'; +export { Toaster } from './sonner'; export { ButtonSpinner, GlobalSpinner, LocalSpinner } from './spinner'; +export { Textarea } from './textarea'; diff --git a/src/shared/shadcn/ui/input.tsx b/src/shared/ui/input.tsx similarity index 94% rename from src/shared/shadcn/ui/input.tsx rename to src/shared/ui/input.tsx index bf04df17..108d6ce6 100644 --- a/src/shared/shadcn/ui/input.tsx +++ b/src/shared/ui/input.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { cn } from '@/shared/shadcn/lib/utils'; +import { cn } from '@/shared/lib/utils'; export interface InputProps extends React.InputHTMLAttributes { } diff --git a/src/shared/shadcn/ui/select.tsx b/src/shared/ui/select.tsx similarity index 99% rename from src/shared/shadcn/ui/select.tsx rename to src/shared/ui/select.tsx index 5a6ee806..a923180d 100644 --- a/src/shared/shadcn/ui/select.tsx +++ b/src/shared/ui/select.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { Check, ChevronDown, ChevronUp } from 'lucide-react'; -import { cn } from '@/shared/shadcn/lib/utils'; +import { cn } from '@/shared/lib/utils'; const Select = SelectPrimitive.Root; diff --git a/src/shared/shadcn/ui/sonner.tsx b/src/shared/ui/sonner.tsx similarity index 100% rename from src/shared/shadcn/ui/sonner.tsx rename to src/shared/ui/sonner.tsx diff --git a/src/shared/shadcn/ui/textarea.tsx b/src/shared/ui/textarea.tsx similarity index 93% rename from src/shared/shadcn/ui/textarea.tsx rename to src/shared/ui/textarea.tsx index 5a85a2f4..1d0d20f3 100644 --- a/src/shared/shadcn/ui/textarea.tsx +++ b/src/shared/ui/textarea.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { cn } from '@/shared/shadcn/lib/utils'; +import { cn } from '@/shared/lib/utils'; export interface TextareaProps extends React.TextareaHTMLAttributes { } diff --git a/tailwind.config.js b/tailwind.config.js index 31073c66..5a640517 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,9 +2,6 @@ module.exports = { darkMode: ['class'], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], prefix: '', diff --git a/tsconfig.base.json b/tsconfig.base.json index 3170b351..f26bbe8b 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -16,15 +16,11 @@ "baseUrl": "./src", "paths": { "@/*": ["/*"], - "@/components/*": ["components/*"], - "@/shared/assets/*": ["shared/assets/*"], - "@/constants/*": ["constants/*"], - "@/mocks/*": ["mocks/*"], + "@/app/*": ["app/*"], + "@/entities/*": ["entities/*"], + "@/features/*": ["features/*"], "@/pages/*": ["pages/*"], - "@/api/*": ["api/*"], - "@/utils/*": ["utils/*"], - "@/models/*": ["models/*"], - "@/store/*": ["store/*"], + "@/shared/*": ["shared/*"], } } } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 8b428b3f..c8147baf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -25,7 +25,7 @@ export default defineConfig({ alias: { '@': resolve(__dirname, 'src'), '@/components': resolve(__dirname, 'src/components'), - '@/shared/assets': resolve(__dirname, 'src/shared/assets'), + '@/shared': resolve(__dirname, 'src/shared'), '@/constants': resolve(__dirname, 'src/constants'), '@/mocks': resolve(__dirname, 'src/mocks'), '@/pages': resolve(__dirname, 'src/pages'), From 8bf36f4aedba4c6838a20ab3341b135ad40237fc Mon Sep 17 00:00:00 2001 From: JunSeok Date: Mon, 25 Nov 2024 17:04:39 +0900 Subject: [PATCH 3/3] =?UTF-8?q?style:=20=EC=83=81=EC=84=B8=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/details/ui/AuctionDetailsMain.tsx | 2 +- .../details/ui/PreAuctionDetailsMain.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/features/details/ui/AuctionDetailsMain.tsx b/src/features/details/ui/AuctionDetailsMain.tsx index fe68df97..de9e7801 100644 --- a/src/features/details/ui/AuctionDetailsMain.tsx +++ b/src/features/details/ui/AuctionDetailsMain.tsx @@ -16,7 +16,7 @@ export const AuctionDetailsMain = ({ auctionId }: { auctionId: number }) => {
{/* 상품 이미지 */} -
+
{images.map((img) => ( diff --git a/src/features/details/ui/PreAuctionDetailsMain.tsx b/src/features/details/ui/PreAuctionDetailsMain.tsx index e2aa4bd0..70d9b428 100644 --- a/src/features/details/ui/PreAuctionDetailsMain.tsx +++ b/src/features/details/ui/PreAuctionDetailsMain.tsx @@ -1,4 +1,4 @@ -import { CustomCarousel, Modal, getTimeAgo, CarouselItem } from '@/shared'; +import { CarouselItem, CustomCarousel, Modal, getTimeAgo } from '@/shared'; import { DetailsBasic, DetailsOption, PreAuctionDetailsFooter } from '.'; import { useDeletePreAuction, useGetPreAuctionDetails } from '..'; @@ -42,13 +42,15 @@ export const PreAuctionDetailsMain = ({ preAuctionId }: { preAuctionId: number } />
- - {images.map((img) => ( - - {`${productName}${img.imageId}`} - - ))} - +
+ + {images.map((img) => ( + + {`${productName}${img.imageId}`} + + ))} + +
{/* 판매자 정보 */}