Merge pull request #223 from JECT-Study/feat/improvements

Feat: 기타 개선 사항
JECT-Study · Nov 25, 2024 · 5eb171a · 5eb171a
2 parents 77bbabd + 8bf36f4
commit 5eb171a
Show file tree

Hide file tree

Showing 42 changed files with 129 additions and 135 deletions.
diff --git a/index.html b/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="src/assets/icons/main_cheese_icon.svg" />
+    <link rel="shortcut icon" href="src/shared/assets/icons/main_cheese_icon.svg" />
     <title>CHZZ Market</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/app/main.tsx"></script>
+    <script type="module" src="src/app/main.tsx"></script>
   </body>
 </html>
diff --git 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 (
     <section className="flex flex-col gap-3">
       <h3 className="text-heading3">{BID_CAUTION.HEADING}</h3>
@@ -18,7 +18,7 @@ export const BidCaution = ({ check, handleCheck }: BidCautionProps) => {
           </div>
         ))}
       </div>
-      <Checkbox title='주의사항을 모두 확인하였으며 위 내용에 동의합니다.' check={check} handleCheck={handleCheck} />
+      <Checkbox title='주의사항을 모두 확인하였으며 위 내용에 동의합니다.' check={check} toggle={toggle} />
     </section>
   );
 };
diff --git a/src/features/bid/ui/BidForm.tsx b/src/features/bid/ui/BidForm.tsx
@@ -1,22 +1,19 @@
-import { getBidSchema } from "@/features/bid/config";
-import { AuctionItem, Button, FormField, MAX_BID_COUNT, convertCurrencyToNumber, formatCurrencyWithWon } 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 { 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 { useState } from "react";
 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 }) => {
   const { auctionDetails } = useGetAuctionDetails(auctionId);
   const { mutate: postBid, isPending } = usePostBid(auctionId);
-  const [check, setCheck] = useState<boolean>(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 +81,7 @@ export const BidForm = ({ auctionId }: { auctionId: number }) => {
               />
             )}
           />
-          <BidCaution check={check} handleCheck={toggleCheckBox} />
+          <BidCaution check={check} toggle={toggle} />
         </div>
       </Layout.Main>
       <Layout.Footer type={isParticipated ? 'double' : 'single'}>

diff --git 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 }) => {
@@ -16,7 +16,7 @@ export const AuctionDetailsMain = ({ auctionId }: { auctionId: number }) => {
       <Layout.Main>
         <figure>
           {/* 상품 이미지 */}
-          <div className='-mx-[20px] -mt-[20px] h-[21.25rem] flex flex-col'>
+          <div className='-mx-[1.25rem] -mt-[1.25rem] web:-mt-[2rem] web:-mx-[2rem] h-[21.25rem] flex flex-col'>
             <CustomCarousel contentStyle="h-[21.25rem]" length={images.length} loop>
               {images.map((img) => (
                 <CarouselItem className='w-full h-full' key={img.imageId}>

diff --git a/src/features/details/ui/PreAuctionDetailsMain.tsx b/src/features/details/ui/PreAuctionDetailsMain.tsx
@@ -1,14 +1,13 @@
+import { CarouselItem, CustomCarousel, Modal, getTimeAgo } 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();
@@ -43,13 +42,15 @@ export const PreAuctionDetailsMain = ({ preAuctionId }: { preAuctionId: number }
       />
       <Layout.Main>
         <figure>
-          <CustomCarousel contentStyle='-mx-[20px] -mt-[20px] h-[21.25rem]' length={images.length} loop>
-            {images.map((img) => (
-              <CarouselItem className='flex items-center justify-center' key={img.imageId}>
-                <img src={img.imageUrl} alt={`${productName}${img.imageId}`} />
-              </CarouselItem>
-            ))}
-          </CustomCarousel>
+          <div className='-mx-[1.25rem] -mt-[1.25rem] web:-mt-[2rem] web:-mx-[2rem]'>
+            <CustomCarousel contentStyle='h-[21.25rem]' length={images.length} loop>
+              {images.map((img) => (
+                <CarouselItem className='flex items-center justify-center' key={img.imageId}>
+                  <img src={img.imageUrl} alt={`${productName}${img.imageId}`} />
+                </CarouselItem>
+              ))}
+            </CustomCarousel>
+          </div>
           <figcaption>
             {/* 판매자 정보 */}
             <div className='flex items-center gap-[13px] h-[3.75rem]'>

diff --git 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
         <div className="relative w-[5.88rem] h-[5.88rem] web:w-[8.1rem] web:h-[8.1rem] cursor-pointer" onClick={onClickImage}>
           <img src={image} alt="프로필 사진" className="object-cover w-full h-full rounded-full" />
           <img src={ProfileEdit} alt='프로필 사진 옆 카메라' className='w-[1.87rem] h-[1.87rem] web:w-12 web:h-12 absolute bottom-0 right-0' />
-          {onMenu && 
+          {onMenu &&
             <div ref={menuRef}>
               <MenuAccordion fileInputRef={fileInputRef} deleteImage={deleteImage} setOnMenu={setOnMenu} />
             </div>

diff --git 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/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 (
     <section className='flex flex-col pt-5 gap-[3rem]'>
       <h3 className='text-heading2'>{kind === 'REGISTER' ? REGISTER_CAUTION.HEADING : PRE_REGISTER_CAUTION.HEADING}</h3>
@@ -32,7 +32,7 @@ export const RegisterCaution = ({ kind, check, handleCheck }: CautionProps) => {
             ))}
           </div>
         )}
-        <Checkbox check={check} handleCheck={handleCheck} />
+        <Checkbox check={check} toggle={toggle} />
       </div>
     </section>
   );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<typeof AuctionShippingSchema>;
 
@@ -134,7 +134,7 @@ export const Payment = () => {
           <div className='flex gap-2'>
             <Button type='button'
               color={selectedAddress?.isDefault ? 'black' : address.isDefault ? 'black' : 'white'}
-              className='w-[10.15rem] h-[3.125rem]' 
+              className='w-[10.15rem] h-[3.125rem]'
               onClick={handleClickDefaultAddress}
             >기본 배송지</Button>
             <Button type='button' color='white' className='w-[10.15rem] h-[3.125rem]' onClick={handleClickAddressList}>배송지 목록</Button>

diff --git 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 } 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,
@@ -24,8 +24,7 @@ export const PaymentAddressAdd = () => {
   const location = useLocation();
   const { roadAddress, zonecode, jibunAddress } = location.state;
   const formRef = useRef<HTMLFormElement>(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 = () => {
               )}
             />
             {/* 기본 배송지 체크박스는 직접 처리 */}
-            <Checkbox title="기본 배송지로 설정" check={isChecked} handleCheck={toggleCheckbox} />
+            <Checkbox title="기본 배송지로 설정" check={isChecked} toggle={toggleCheck} />
           </form>
         </div>
       </Layout.Main>

diff --git a/src/pages/payment/ui/PaymentAddressEdit.tsx b/src/pages/payment/ui/PaymentAddressEdit.tsx
@@ -1,14 +1,14 @@
+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 } from "@/shared";
+import { useEditAddress } from "@/features/address/model";
 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";
-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<HTMLFormElement>(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 = () => {
                 />
               )}
             />
-            <Checkbox title="기본 배송지로 설정" check={isChecked} handleCheck={toggleCheckbox} />
+            <Checkbox title="기본 배송지로 설정" check={isChecked} toggle={toggleCheck} />
           </form>
         </div>
       </Layout.Main>

diff --git 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
@@ -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
@@ -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);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useGetBidderList } from './useGetBidderList';