diff --git a/apps/duri/package.json b/apps/duri/package.json index b6bfc4b8..5906899d 100644 --- a/apps/duri/package.json +++ b/apps/duri/package.json @@ -22,6 +22,7 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "axios": "^1.7.7", + "date-fns": "^4.1.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-simple-import-sort": "^12.1.1", diff --git a/apps/duri/src/assets/types/reservation.ts b/apps/duri/src/assets/types/reservation.ts new file mode 100644 index 00000000..cf9e6bcb --- /dev/null +++ b/apps/duri/src/assets/types/reservation.ts @@ -0,0 +1,12 @@ +export interface UpcomingReservationProps { + reservationDate: Date; + salonImage:string; + salonName: string; + salonAddress: string; + totalPrice: number; + salonPhone: string; +} + +export interface LastReservationProps { + reservationDate: Date; +} \ No newline at end of file diff --git a/apps/duri/src/assets/types/shop.ts b/apps/duri/src/assets/types/shop.ts index bd706567..6d541c21 100644 --- a/apps/duri/src/assets/types/shop.ts +++ b/apps/duri/src/assets/types/shop.ts @@ -1,12 +1,12 @@ export interface RegularShopProps { - shopIdx: string; - shopName:string; - shopImg: string; - shopScore?: number; - shopReview?: number; - } + salonIdx: string; + salonName:string; + salonImage: string; + salonScore?: number; + salonReviewCount?: number; +} export interface RecommendeShopProps extends RegularShopProps{ - shopAddress: string; - shopTag: string[]; + salonAddress: string; + salonTag: string[]; } \ No newline at end of file diff --git a/apps/duri/src/components/home/Home.tsx b/apps/duri/src/components/home/Home.tsx index 51f87eb5..00724983 100644 --- a/apps/duri/src/components/home/Home.tsx +++ b/apps/duri/src/components/home/Home.tsx @@ -1,15 +1,62 @@ import { SetStateAction, useState } from 'react'; import React from 'react'; +import { + LastReservationProps, + UpcomingReservationProps, +} from '@duri/assets/types/reservation'; import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui'; import styled from '@emotion/styled'; +import { differenceInDays } from 'date-fns'; import { Swiper as OriginalSwiper, SwiperSlide as OriginalSwiperSlide, } from 'swiper/react'; -const CarouselHome = () => { +import LastReservation from './reservation/lastReservation'; +import UpcomingReservation from './reservation/upcomingReservation'; + +const CarouselHome = ({ + upcomingReservation, + lastReservation, +}: { + upcomingReservation?: UpcomingReservationProps; + lastReservation?: LastReservationProps; +}) => { + console.log(upcomingReservation, lastReservation) const [swiperIndex, setSwiperIndex] = useState(0); // 슬라이드 인덱스 상태 + const currentDate = new Date(); + let daysDifference; + if (lastReservation) + daysDifference = differenceInDays( + currentDate, + lastReservation.reservationDate, + ); // 일수 차이 계산 + + const slides = [ + upcomingReservation && ( + + ), + lastReservation && daysDifference && ( + + ), + // 여기는 이제 아무것도 이력이 없는 유저한테 띄울 컴포넌트가 드가야 함! + // (!upcomingReservation && !lastReservation) ?? ( + // + // 예약하시오 + // + // ), + ]; return ( @@ -19,37 +66,35 @@ const CarouselHome = () => { margin="18px 0 23px 25px" > 미용한지
- 12일이 지났어요
+ {daysDifference}일이 지났어요
매일매일 빗질 잘 해주세요! - {/* Swiper를 감싸는 Wrapper */} + }) => { setSwiperIndex(e.realIndex); }} // 슬라이드 변경 완료 시 인덱스 업데이트 > - {[0, 1, 2].map((i) => ( - - - 카드 {i} - + {slides.map((slide, index) => ( + + {slide} ))} {/* Bullets */} - {[0, 1, 2].map((i) => ( + {slides.map((i, index) => ( ` isActive ? '317px !important' : '316px !important'}; `; -const Card = styled(Flex)` - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); - flex-shrink: 0; -`; + const Bullet = styled(Button)` padding: 0; transition: all 0.3s ease; `; - diff --git a/apps/duri/src/components/home/RecommendedShop.tsx b/apps/duri/src/components/home/RecommendedShop.tsx index 6f74bdef..b644777d 100644 --- a/apps/duri/src/components/home/RecommendedShop.tsx +++ b/apps/duri/src/components/home/RecommendedShop.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { RecommendeShopProps } from '@duri/assets/types/shop'; import { Flex, Text, theme } from '@duri-fe/ui'; +import { RecommendeShopProps } from '../../assets/types/shop'; + import { ShopVertical } from './ShopVertical'; const RecommendedShop = ({ shopList }: { shopList: RecommendeShopProps[] }) => { diff --git a/apps/duri/src/components/home/ShopHorizontal.tsx b/apps/duri/src/components/home/ShopHorizontal.tsx index 2f73d516..fdb59720 100644 --- a/apps/duri/src/components/home/ShopHorizontal.tsx +++ b/apps/duri/src/components/home/ShopHorizontal.tsx @@ -21,13 +21,13 @@ export const ShopHorizontal = ({ shopList }: { shopList: RegularShopProps[] }) = {shopList && shopList.map((shop: RegularShopProps) => ( - + handleClickShop(shop.shopIdx)} + src={shop.salonImage} + onClick={() => handleClickShop(shop.salonIdx)} /> {/* onClick함수 추가해야 함!!! */} - {shop.shopName} + {shop.salonName} - {shop.shopScore} + {shop.salonScore} - ({shop.shopReview}) + ({shop.salonReviewCount}) diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx index 45152dad..26cc96c1 100644 --- a/apps/duri/src/components/home/ShopVertical.tsx +++ b/apps/duri/src/components/home/ShopVertical.tsx @@ -17,30 +17,30 @@ export const ShopVertical = ({ {shopList && shopList.map((shop: RecommendeShopProps) => ( handleClickShop(shop.shopIdx)} + onClick={() => handleClickShop(shop.salonIdx)} > - {shop.shopName} + {shop.salonName} - {shop.shopAddress} + {shop.salonAddress} - {shop.shopTag.map((shopTag: string) => ( + {shop.salonTag?.map((tag: string) => ( - {shopTag} + {tag} ))} diff --git a/apps/duri/src/components/home/reservation/lastReservation.tsx b/apps/duri/src/components/home/reservation/lastReservation.tsx new file mode 100644 index 00000000..ba60c7b9 --- /dev/null +++ b/apps/duri/src/components/home/reservation/lastReservation.tsx @@ -0,0 +1,40 @@ +import { Flex, StatusBar, theme, WidthFitFlex } from '@duri-fe/ui'; +import styled from '@emotion/styled'; + +const LastReservation = ({ daysDifference }: { daysDifference: number }) => { + const current = Math.floor(daysDifference / 6); + return ( + + + + + + + ); +}; + +export default LastReservation; + +const Wrapper = styled(Flex)` + flex-shrink: 0; +`; + +const Label = styled(WidthFitFlex)` + padding: 9px 10px; + color: ${theme.palette.Normal800}; + border-radius: 99px; + font-size: ${theme.typo.Label3}; +`; diff --git a/apps/duri/src/components/home/reservation/upcomingReservation.tsx b/apps/duri/src/components/home/reservation/upcomingReservation.tsx new file mode 100644 index 00000000..00e1185d --- /dev/null +++ b/apps/duri/src/components/home/reservation/upcomingReservation.tsx @@ -0,0 +1,93 @@ +import { UpcomingReservationProps } from '@duri/assets/types/reservation'; +import { Button, Flex, Image, Text, theme, WidthFitFlex } from '@duri-fe/ui'; +import styled from '@emotion/styled'; +import { differenceInDays, format } from 'date-fns'; +import { ko } from 'date-fns/locale'; + +const UpcomingReservation = (upcomingReservation: UpcomingReservationProps) => { + const currentDate = new Date(); + const reservationDate = new Date(upcomingReservation.reservationDate); + let daysDifference; + if (reservationDate) + daysDifference = differenceInDays( + currentDate, + upcomingReservation.reservationDate, + ); // 일수 차이 계산 + + return ( + + + + + {upcomingReservation.salonName} + + {upcomingReservation.salonAddress} + + + + + + + + + + + + + + {format(upcomingReservation.reservationDate, 'yyyy.MM.dd a h시', { + locale: ko, + })} + + + {upcomingReservation.totalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} 원 + + + + ); +}; + +const Wrapper = styled(Flex)` + flex-shrink: 0; + position: relative; +`; + +const BottomWrapper = styled(Flex)` + position: absolute; + bottom: 0; + border-radius: 0 0 12px 12px; +` + +export default UpcomingReservation; diff --git a/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx b/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx index dc615d74..b2a3bec9 100644 --- a/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx +++ b/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx @@ -95,7 +95,7 @@ const PetPersonalityInfo = ({ export default PetPersonalityInfo; const FitFlex = styled(Flex)` - max-width: 374px; + max-width: 375px; width: 100%; flex-wrap: wrap; word-break: break-all; diff --git a/apps/duri/src/components/onboarding/Welcome.tsx b/apps/duri/src/components/onboarding/Welcome.tsx index d148b2a8..f031285c 100644 --- a/apps/duri/src/components/onboarding/Welcome.tsx +++ b/apps/duri/src/components/onboarding/Welcome.tsx @@ -29,7 +29,7 @@ export const Container = styled(Flex)<{ show: boolean }>` z-index: ${({ show }) => (show ? 1000 : 0)}; transition: opacity 0.5s; position: absolute; - max-width: 480px; + max-width: 375px; `; export const Wrapper = styled(Flex)` diff --git a/apps/duri/src/components/payment/Info.tsx b/apps/duri/src/components/payment/Info.tsx index 1f784dcb..06d10f04 100644 --- a/apps/duri/src/components/payment/Info.tsx +++ b/apps/duri/src/components/payment/Info.tsx @@ -22,19 +22,14 @@ const PaymentInfo = ({ 주문금액 - - {totalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} 원 - + {totalPrice.toLocaleString()} 원 ㄴ 상품금액 - {totalGroomingPrice - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ',')}{' '} - 원 + {totalGroomingPrice.toLocaleString()} 원 @@ -42,7 +37,7 @@ const PaymentInfo = ({ ㄴ VAT - {vat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} 원 + {vat.toLocaleString()} 원 diff --git a/apps/duri/src/components/payment/Widget.tsx b/apps/duri/src/components/payment/Widget.tsx index 306f0de4..a8af5e7c 100644 --- a/apps/duri/src/components/payment/Widget.tsx +++ b/apps/duri/src/components/payment/Widget.tsx @@ -12,7 +12,6 @@ import { QuotationProps } from '../../assets/types/quotation'; import PaymentInfo from './Info'; - const clientKey = import.meta.env.VITE_CLIENT_KEY; const customerKey = crypto.randomUUID(); //user Idx값으로 대체하기! @@ -25,10 +24,12 @@ interface Amount { } const PaymentWidget = ({ quotationInfo }: QuotationInfo) => { + const vat = quotationInfo.groomingTotalPrice * 0.1; + const totalPrice = quotationInfo.groomingTotalPrice + vat; // const [amount, setAmount] = useState({ const [amount] = useState({ currency: 'KRW', - value: quotationInfo.groomingTotalPrice, + value: totalPrice, }); const [ready, setReady] = useState(false); const [widgets, setWidgets] = useState(null); @@ -147,6 +148,10 @@ const PaymentWidget = ({ quotationInfo }: QuotationInfo) => { failUrl: window.location.origin + '/payment/fail', customerName: '김토스', customerMobilePhone: '01012341234', + metadata: { + salonName: quotationInfo.salonName, + date: new Date().toISOString(), + }, }); } catch (error) { // 에러 처리하기 diff --git a/apps/duri/src/mocks/handler.ts b/apps/duri/src/mocks/handler.ts index d3dab663..aa2e4934 100644 --- a/apps/duri/src/mocks/handler.ts +++ b/apps/duri/src/mocks/handler.ts @@ -11,13 +11,13 @@ export const handlers = [ http.get(`https://api.example.com/api/v1/quotation/:quotationId`, () => { return HttpResponse.json({ - shopIdx: 'shop-001', - shopName: 'Duri', - shopAddress: '서울시 강남구', - shopImg: 'imgage.png', + salonIdx: 'shop-001', + salonName: '댕댕샵', + salonAddress: '서울시 강남구', + salonImage: 'imgage.png', designerName: '김디자이너', - designerCareer: '5', - designerAge: '33', + designerCareer: '5년 4개월', + designerAge: 33, designerGender: '여성', groomingList: [ { menu: '시술1', price: 50000 }, @@ -38,20 +38,22 @@ export const handlers = [ http.get('https://api.example.com/api/v1/shop/regular', () => { return HttpResponse.json([ { - shopIdx: '1', - shopName: '댕댕샵', - shopImg: + salonIdx: '1', + salonName: '댕댕샵', + salonImage: 'https://s3-alpha-sig.figma.com/img/be2d/15b9/6d6d9c56fd4e47388fa79cdfb8f3c4b6?Expires=1733702400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=X1cOpSTMbxxMWxuaqTEsv4id96BVzSloxASEzxOzX87IO8neIKfYCuO8K04E5O8RniSoRCRo7JIlyuYn0AZd6Nda2W7tS8rN36WT7Ewzg-bnozvaUzH5Low6mzAGqUFhQY558k~oAoKolnCTzLEb1DSKR3Zq3Gj073fUrLrxyNnQmXqtbmMObX39c-Flw0~8kzap-ls787b58MKEnfTQ1AVHB8o-Y2~2mQWpFCMY8iKMjIsk84ToA0LhLmiGf5XkRLEtZwwWXFqsTXm0OFB2m~3uqsxFBkuW3gootLBj2ocEp400Za4j8C-IAFj1lNqPeoW9rpLdKLh0xOvoftqeaQ__', - shopScore: 4.9, - shopReview: 120, + salonScore: 4.9, + salonReviewCount: 120, + salonPhone: "070-1234-5678", }, { - shopIdx: '2', - shopName: '멍뭉샵', - shopImg: + salonIdx: '2', + salonName: '멍뭉샵', + salonImage: 'https://s3-alpha-sig.figma.com/img/be2d/15b9/6d6d9c56fd4e47388fa79cdfb8f3c4b6?Expires=1733702400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=X1cOpSTMbxxMWxuaqTEsv4id96BVzSloxASEzxOzX87IO8neIKfYCuO8K04E5O8RniSoRCRo7JIlyuYn0AZd6Nda2W7tS8rN36WT7Ewzg-bnozvaUzH5Low6mzAGqUFhQY558k~oAoKolnCTzLEb1DSKR3Zq3Gj073fUrLrxyNnQmXqtbmMObX39c-Flw0~8kzap-ls787b58MKEnfTQ1AVHB8o-Y2~2mQWpFCMY8iKMjIsk84ToA0LhLmiGf5XkRLEtZwwWXFqsTXm0OFB2m~3uqsxFBkuW3gootLBj2ocEp400Za4j8C-IAFj1lNqPeoW9rpLdKLh0xOvoftqeaQ__', - shopScore: 4.1, - shopReview: 10, + salonScore: 4.1, + salonReviewCount: 10, + salonPhone: "070-1234-5678", }, ]); }), @@ -59,20 +61,22 @@ export const handlers = [ http.get('https://api.example.com/api/v1/shop/recommend', () => { return HttpResponse.json([ { - shopIdx: '1', - shopName: '댕댕샵', - shopImg: + salonIdx: '1', + salonName: '댕댕샵', + salonImage: 'https://s3-alpha-sig.figma.com/img/be2d/15b9/6d6d9c56fd4e47388fa79cdfb8f3c4b6?Expires=1733702400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=X1cOpSTMbxxMWxuaqTEsv4id96BVzSloxASEzxOzX87IO8neIKfYCuO8K04E5O8RniSoRCRo7JIlyuYn0AZd6Nda2W7tS8rN36WT7Ewzg-bnozvaUzH5Low6mzAGqUFhQY558k~oAoKolnCTzLEb1DSKR3Zq3Gj073fUrLrxyNnQmXqtbmMObX39c-Flw0~8kzap-ls787b58MKEnfTQ1AVHB8o-Y2~2mQWpFCMY8iKMjIsk84ToA0LhLmiGf5XkRLEtZwwWXFqsTXm0OFB2m~3uqsxFBkuW3gootLBj2ocEp400Za4j8C-IAFj1lNqPeoW9rpLdKLh0xOvoftqeaQ__', - shopAddress: '경기도 수원시 망포동', - shopTag: ['노견전문', '소형견'], + salonAddress: '경기도 수원시 망포동', + salonTag: ['노견전문', '소형견'], + salonPhone: "070-1234-5678", }, { - shopIdx: '2', - shopName: '멍뭉샵', - shopImg: + salonIdx: '2', + salonName: '멍뭉샵', + salonImage: 'https://s3-alpha-sig.figma.com/img/be2d/15b9/6d6d9c56fd4e47388fa79cdfb8f3c4b6?Expires=1733702400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=X1cOpSTMbxxMWxuaqTEsv4id96BVzSloxASEzxOzX87IO8neIKfYCuO8K04E5O8RniSoRCRo7JIlyuYn0AZd6Nda2W7tS8rN36WT7Ewzg-bnozvaUzH5Low6mzAGqUFhQY558k~oAoKolnCTzLEb1DSKR3Zq3Gj073fUrLrxyNnQmXqtbmMObX39c-Flw0~8kzap-ls787b58MKEnfTQ1AVHB8o-Y2~2mQWpFCMY8iKMjIsk84ToA0LhLmiGf5XkRLEtZwwWXFqsTXm0OFB2m~3uqsxFBkuW3gootLBj2ocEp400Za4j8C-IAFj1lNqPeoW9rpLdKLh0xOvoftqeaQ__', - shopAddress: '경기도 수원시 망포동', - shopTag: ['노견전문', '소형견'], + salonAddress: '경기도 수원시 망포동', + salonTag: ['노견전문', '소형견'], + salonPhone: "070-1234-5678", }, ]); }), @@ -90,4 +94,25 @@ export const handlers = [ }, ); }), + + http.get('https://api.example.com/api/v1/reservation', () => { + return HttpResponse.json( + { + reservationDate: new Date('2024-12-18 17:00'), + salonImage:'https://s3-alpha-sig.figma.com/img/be2d/15b9/6d6d9c56fd4e47388fa79cdfb8f3c4b6?Expires=1733702400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=X1cOpSTMbxxMWxuaqTEsv4id96BVzSloxASEzxOzX87IO8neIKfYCuO8K04E5O8RniSoRCRo7JIlyuYn0AZd6Nda2W7tS8rN36WT7Ewzg-bnozvaUzH5Low6mzAGqUFhQY558k~oAoKolnCTzLEb1DSKR3Zq3Gj073fUrLrxyNnQmXqtbmMObX39c-Flw0~8kzap-ls787b58MKEnfTQ1AVHB8o-Y2~2mQWpFCMY8iKMjIsk84ToA0LhLmiGf5XkRLEtZwwWXFqsTXm0OFB2m~3uqsxFBkuW3gootLBj2ocEp400Za4j8C-IAFj1lNqPeoW9rpLdKLh0xOvoftqeaQ__', + salonName: "멍멍샵", + salonAddress: "서울시 마포구 와우산로18 지하1층", + salonPhone: "070-1234-5678", + totalPrice: "65000" + }, + ); + }), + + http.get('https://api.example.com/api/v1/last/reservation', () => { + return HttpResponse.json( + { + reservationDate: new Date('2024-11-18 15:00'), + }, + ); + }), ]; diff --git a/apps/duri/src/pages/Home.tsx b/apps/duri/src/pages/Home.tsx index 2b37dff5..14e8e9f5 100644 --- a/apps/duri/src/pages/Home.tsx +++ b/apps/duri/src/pages/Home.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { LastReservationProps, UpcomingReservationProps } from '@duri/assets/types/reservation'; import { RecommendeShopProps, RegularShopProps } from '@duri/assets/types/shop'; import CarouselHome from '@duri/components/home/Home'; import RecommendedShop from '@duri/components/home/RecommendedShop'; @@ -15,8 +16,10 @@ import { theme, } from '@duri-fe/ui'; import { + useGetLastReservation, useGetRecommendedShopList, useGetRegularShopList, + useGetUpcomingReservation, } from '@duri-fe/utils'; import styled from '@emotion/styled'; @@ -27,19 +30,21 @@ const Home = () => { const [recommendedShopList, setRecommendedShopList] = useState< RecommendeShopProps[] >([]); + const [upcomingReservation, setUpcomingReservation] = useState(); + const [lastReservation, setLastReservation] = useState(); const recommendedListData = useGetRecommendedShopList(); const regularListData = useGetRegularShopList(); + const reservationData = useGetUpcomingReservation(); + const lastReservationData = useGetLastReservation(); const navigate = useNavigate(); const handleClickSearchIcon = () => navigate('/search'); useEffect(() => { - if (recommendedListData) { - setRecommendedShopList(recommendedListData); - } - if (regularListData) { - setRegularShopList(regularListData); - } - }, [recommendedListData, regularListData]); + if (recommendedListData) setRecommendedShopList(recommendedListData); + if (regularListData) setRegularShopList(regularListData); + if(reservationData) setUpcomingReservation(reservationData); + if(lastReservationData) setLastReservation(lastReservationData); + }, [recommendedListData, regularListData, reservationData, lastReservationData]); return ( @@ -55,7 +60,7 @@ const Home = () => { searchIcon={true} onClickSearch={handleClickSearchIcon} /> - + {/* 단골 빠른입찰 */} diff --git a/apps/duri/src/pages/PaymentPage/index.tsx b/apps/duri/src/pages/PaymentPage/index.tsx index 557827f5..e87ead79 100644 --- a/apps/duri/src/pages/PaymentPage/index.tsx +++ b/apps/duri/src/pages/PaymentPage/index.tsx @@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'; import { QuotationProps } from '@duri/assets/types/quotation'; import PaymentWidget from '@duri/components/payment/Widget'; import { DuriNavbar, Flex, MobileLayout } from '@duri-fe/ui'; -import { getQuotationInfo } from '@duri-fe/utils'; +import { useGetQuotationInfo } from '@duri-fe/utils'; const PaymentPage = () => { const { quotationId } = useParams<{ quotationId: string }>(); @@ -12,24 +12,20 @@ const PaymentPage = () => { //매장 및 시술 정보 const [quotationInfo, setQuotationInfo] = useState(); - useEffect(() => { - (async () => { - if (quotationId) { - try { - const quotation = await getQuotationInfo(quotationId); - if (quotation) setQuotationInfo(quotation); - } catch (error) { - console.error('Failed to fetch quotation info:', error); - } - } - })(); - }, [quotationId]); + if(quotationId === undefined) return + const response = useGetQuotationInfo(quotationId); + + useEffect(()=>{ + if(response){ + setQuotationInfo(response); + } + }, [response]) //쿠폰 정보 - 후순위!!!!!! // const [coupons, setCoupons] = useState(); - useEffect(() => { + // useEffect(() => { // 쿠폰 정보 불러와야 함 - }, []); + // }, []); return ( diff --git a/apps/salon/src/components/onboarding/Welcome.tsx b/apps/salon/src/components/onboarding/Welcome.tsx index d148b2a8..f031285c 100644 --- a/apps/salon/src/components/onboarding/Welcome.tsx +++ b/apps/salon/src/components/onboarding/Welcome.tsx @@ -29,7 +29,7 @@ export const Container = styled(Flex)<{ show: boolean }>` z-index: ${({ show }) => (show ? 1000 : 0)}; transition: opacity 0.5s; position: absolute; - max-width: 480px; + max-width: 375px; `; export const Wrapper = styled(Flex)` diff --git a/packages/ui/src/components/Card/Card.tsx b/packages/ui/src/components/Card/Card.tsx index cf91feb8..2477849e 100644 --- a/packages/ui/src/components/Card/Card.tsx +++ b/packages/ui/src/components/Card/Card.tsx @@ -1,13 +1,13 @@ -import { Flex, theme } from "@duri-fe/ui" -import styled from "@emotion/styled" +import { Flex, theme } from '@duri-fe/ui'; +import styled from '@emotion/styled'; interface CardProps { - height: string, - borderRadius: number, - shadow?: 'small' | 'large', - padding?: string, - borderColor?: string - children: React.ReactNode + height: string; + borderRadius: number; + shadow?: 'small' | 'large'; + padding?: string; + borderColor?: string; + children: React.ReactNode; } export const Card = ({ @@ -19,23 +19,26 @@ export const Card = ({ children, }: CardProps) => { return ( - + {children} - ) -} + ); +}; const CardContainer = styled(Flex)` - box-shadow: ${({ shadow }) => ( + box-shadow: ${({ shadow }) => shadow === 'small' - ? '0px 0px 4px 0px rgba(0, 0, 0, 0.10)' - : '0px 0px 10px 0px rgba(0, 0, 0, 0.10)' - )}; + ? '0px 0px 4px 0px rgba(0, 0, 0, 0.10)' + : '0px 0px 10px 0px rgba(0, 0, 0, 0.10)'}; background-color: ${theme.palette.White}; - padding: ${({padding}) => (padding ? `${padding}` : '0px')}; - border: ${({borderColor}) => ( - borderColor - ? `1px solid ${borderColor}` - : 'none' - )}; -`; \ No newline at end of file + padding: ${({ padding }) => (padding ? `${padding}` : '0px')}; + border: ${({ borderColor }) => + borderColor ? `1px solid ${borderColor}` : 'none'}; +`; diff --git a/packages/ui/src/components/StatusBar/StatusBar.tsx b/packages/ui/src/components/StatusBar/StatusBar.tsx index 6901a4c0..7347f7fd 100644 --- a/packages/ui/src/components/StatusBar/StatusBar.tsx +++ b/packages/ui/src/components/StatusBar/StatusBar.tsx @@ -16,8 +16,10 @@ export const StatusBar: React.FC = ({ mode, }) => { const dots = Array.from({ length: total+1 }, (_, index) => { - if (index <= current) { - return + if (index === 0) { + return + } else if (index <= current) { + return } else { return } @@ -38,7 +40,6 @@ export const StatusBar: React.FC = ({ borderRadius={10} justify="end" > - {mode === "main" && } ) diff --git a/packages/utils/src/apis/duri/hooks/index.ts b/packages/utils/src/apis/duri/hooks/index.ts index b0611fbf..85f7ac8e 100644 --- a/packages/utils/src/apis/duri/hooks/index.ts +++ b/packages/utils/src/apis/duri/hooks/index.ts @@ -2,3 +2,5 @@ export * from './shop'; export * from './auth'; export * from './shop' export * from './pet' +export * from './quotation' +export * from './reservation' diff --git a/packages/utils/src/apis/duri/hooks/quotation.ts b/packages/utils/src/apis/duri/hooks/quotation.ts new file mode 100644 index 00000000..c458ef4e --- /dev/null +++ b/packages/utils/src/apis/duri/hooks/quotation.ts @@ -0,0 +1,12 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getQuotationInfo } from '../request'; + +export const useGetQuotationInfo = (quotationId: string) => { + const { data } = useQuery({ + queryKey: ['getQuotationInfo'], + queryFn: () => getQuotationInfo(quotationId), + staleTime: 1000 * 60 * 10, + }); + return data; +}; diff --git a/packages/utils/src/apis/duri/hooks/reservation.ts b/packages/utils/src/apis/duri/hooks/reservation.ts new file mode 100644 index 00000000..44dce166 --- /dev/null +++ b/packages/utils/src/apis/duri/hooks/reservation.ts @@ -0,0 +1,21 @@ +import { useQuery } from "@tanstack/react-query"; + +import { getLastReservation, getUpcomingReservation } from "../reservation"; + +export const useGetUpcomingReservation = () => { + const { data } = useQuery({ + queryKey: ['getUpcomingReservation'], + queryFn: () => getUpcomingReservation(), + staleTime: 1000 * 60 * 10, + }); + return data; + }; + + export const useGetLastReservation = () => { + const { data } = useQuery({ + queryKey: ['getLastReservation'], + queryFn: () => getLastReservation(), + staleTime: 1000 * 60 * 10, + }); + return data; + }; \ No newline at end of file diff --git a/packages/utils/src/apis/duri/index.ts b/packages/utils/src/apis/duri/index.ts index 37ab01c1..31261112 100644 --- a/packages/utils/src/apis/duri/index.ts +++ b/packages/utils/src/apis/duri/index.ts @@ -1,6 +1,7 @@ export * from './hooks'; -export * from './test'; +export * from './request'; export * from './shop'; export * from './auth'; -export * from './hooks' -export * from './pet' +export * from './hooks'; +export * from './pet'; +export * from './reservation'; diff --git a/packages/utils/src/apis/duri/quotation.ts b/packages/utils/src/apis/duri/quotation.ts deleted file mode 100644 index 393f1005..00000000 --- a/packages/utils/src/apis/duri/quotation.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { RequestProps } from '@duri-fe/duri/assets/types/request'; - -import { duriInstance, ResponseBody } from '../axiosConfig'; - -interface RequestResponse extends ResponseBody { - response: number; -} - -export const postRequestQuotation = async (request: RequestProps) : Promise => { - const response = await duriInstance.post(`quotation/request`, request); - return response.data; -}; diff --git a/packages/utils/src/apis/duri/request.ts b/packages/utils/src/apis/duri/request.ts new file mode 100644 index 00000000..8f0f3180 --- /dev/null +++ b/packages/utils/src/apis/duri/request.ts @@ -0,0 +1,17 @@ +// import { RequestProps } from '@duri-fe/duri/assets/types/RequestProps'; +import { duriInstance } from '../axiosConfig'; +import { RequestProps } from '../types/quotation'; + +export const postRequestQuotation = async (request: RequestProps) => { + // ): Promise => { + const response = await duriInstance.post(`quotation/request`, request); + return response.data; +}; + +export const getQuotationInfo = async ( + quotationId: string, + // ): Promise => { +) => { + const response = await duriInstance.get(`quotation/${quotationId}`); + return response.data; +}; diff --git a/packages/utils/src/apis/duri/reservation.ts b/packages/utils/src/apis/duri/reservation.ts new file mode 100644 index 00000000..25c4487c --- /dev/null +++ b/packages/utils/src/apis/duri/reservation.ts @@ -0,0 +1,11 @@ +import { duriInstance } from '../axiosConfig'; + +export const getUpcomingReservation = async () => { + const response = await duriInstance.get('/reservation'); + return response.data; +}; + +export const getLastReservation = async () => { + const response = await duriInstance.get('/last/reservation'); + return response.data; +}; \ No newline at end of file diff --git a/packages/utils/src/apis/duri/test.ts b/packages/utils/src/apis/duri/test.ts deleted file mode 100644 index 90606950..00000000 --- a/packages/utils/src/apis/duri/test.ts +++ /dev/null @@ -1,22 +0,0 @@ -// import axios from 'axios'; -// import { HttpResponse } from 'msw'; - -import { duriInstance } from '../axiosConfig'; - -/** 비동기 데이터 요청 테스트 */ -export async function getQuotationInfo(quotationId:string) { - try { - const response = await duriInstance.get(`quotation/${quotationId}`); - console.log(response.data) - return response.data; - } catch (error) { - console.error(error); - } -} - -/** 서버 연결 테스트 API */ -export const test = async () => { - const response = await duriInstance.get('example/success'); - console.log(response); - return response.data; -} \ No newline at end of file diff --git a/packages/utils/src/apis/types/quotation.ts b/packages/utils/src/apis/types/quotation.ts new file mode 100644 index 00000000..9b3d5663 --- /dev/null +++ b/packages/utils/src/apis/types/quotation.ts @@ -0,0 +1,22 @@ +export interface TimeProps { + time9: boolean; + time10: boolean; + time11: boolean; + time12: boolean; + time13: boolean; + time14: boolean; + time15: boolean; + time16: boolean; + time17: boolean; + time18: boolean; + } +export interface RequestProps extends TimeProps { + petId?: number; + menu: string[]; + addMenu: string[]; + specialMenu: string[]; + design: string[]; + etc: string; + day: Date; + shopIds: number[]; + } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8a4eebf9..999673da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -494,6 +494,7 @@ __metadata: "@typescript-eslint/parser": "npm:^8.15.0" "@vitejs/plugin-react": "npm:^4.3.3" axios: "npm:^1.7.7" + date-fns: "npm:^4.1.0" eslint: "npm:8.57.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-react: "npm:^7.37.2"