Merge pull request #43 from Duri-Salon/feat(duri)/home-api(DURI-136)

[feat] onboarding, home 페이지 내 api 연결
Duri-Salon · Dec 7, 2024 · fa5f9da · fa5f9da
2 parents 88daacd + 6ae7b2c
commit fa5f9da
Show file tree

Hide file tree

Showing 73 changed files with 1,506 additions and 512 deletions.
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -8,10 +8,11 @@ import { Global } from '@emotion/react';
 import Home from '@pages/Home';
 import LoginPage from '@pages/Login';
 import StartPage from '@pages/Onboarding/StartPage';
-import PaymentPage from '@pages/PaymentPage';
-import FailPage from '@pages/PaymentPage/Fail';
-import SuccessPage from '@pages/PaymentPage/Success';
-import RequestPage from '@pages/RequestPage';
+import PaymentPage from '@pages/Payment';
+import FailPage from '@pages/Payment/Fail';
+import SuccessPage from '@pages/Payment/Success';
+import QuotationPage from '@pages/Quotation';
+import RequestPage from '@pages/Request';
 import Shop from '@pages/Shop';
 
 function App() {
@@ -20,7 +21,7 @@ function App() {
       <Global styles={globalStyle} />
       <Routes>
         <Route path="/" element={<Home />} />
-        
+
         <Route path="/login" element={<LoginPage />} />
         <Route path="/auth" element={<AuthPage />} />
 
@@ -30,8 +31,10 @@ function App() {
         <Route path="/payment/:quotationId" element={<PaymentPage />} />
         <Route path="/payment/success" element={<SuccessPage />} />
         <Route path="/payment/fail" element={<FailPage />} />
-        <Route path="/quotation/request" element={<RequestPage />} />
+        <Route path="/shop/request" element={<RequestPage />} />
         <Route path="/shop" element={<Shop />} />
+
+        <Route path="/quotation" element={<QuotationPage />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/apps/duri/src/assets/data/breed.ts b/apps/duri/src/assets/data/breed.ts
@@ -0,0 +1,130 @@
+export const breedMapping: Record<string, string> = {
+  도베르만: '도베르만',
+  '래브라도 리트리버': '래브라도 리트리버',
+  러시안블루: '러시안블루',
+  롯트와일러: '롯트와일러',
+  리트리버: '리트리버',
+  '말티숑(말티즈+비숑)': '말티숑',
+  말티즈: '말티즈',
+  '말티폼(말티즈+포메라니안)': '말티폼',
+  '말티푸(말티즈+토이푸들)': '말티푸',
+  미니핀: '미니핀',
+  '미디엄 푸들': '미디엄 푸들',
+  믹스견: '믹스견',
+  '베들링턴 테리어': '베들링턴 테리어',
+  '보더 콜리': '보더 콜리',
+  불독: '불독',
+  비글: '비글',
+  비숑: '비숑',
+  '비숑 프리제': '비숑 프리제',
+  빠삐용: '빠삐용',
+  사모예드: '사모예드',
+  삽살개: '삽살개',
+  샤페이: '샤페이',
+  샴: '샴',
+  '세인트 버나드': '세인트 버나드',
+  '셔틀랜드 쉽독(셀티)': '셔틀랜드 쉽독',
+  셰퍼드: '셰퍼드',
+  슈나우저: '슈나우저',
+  '스코티시 폴드': '스코티시 폴드',
+  '스탠다드 푸들': '스탠다드 푸들',
+  스피츠: '스피츠',
+  시바견: '시바견',
+  '시베리안 허스키': '시베리안 허스키',
+  시츄: '시츄',
+  '시푸(시츄+푸들)': '시푸',
+  '아프간 하운드': '아프간 하운드',
+  '알라스칸 말라뮤트': '알라스칸 말라뮤트',
+  '올드 잉글리쉬 쉽독': '올드 잉글리쉬 쉽독',
+  요크셔테리어: '요크셔테리어',
+  웰시코기: '웰시코기',
+  '자이언트 슈나우져': '자이언트 슈나우져',
+  '제페니즈 친': '제페니즈 친',
+  진돗개: '진돗개',
+  차우차우: '차우차우',
+  치와와: '치와와',
+  '치와와(단모)': '단모 치와와',
+  '치와와(장모)': '장모 치와와',
+  '코카 스파니엘': '코카 스파니엘',
+  '코카푸(코커 스파니엘+푸들)': '코카푸',
+  콜리: '콜리',
+  '킹 찰스 스패니얼': '킹 찰스 스패니얼',
+  터키시앙고라: '터키시앙고라',
+  '토이 푸들': '토이 푸들',
+  퍼그: '퍼그',
+  페르시안: '페르시안',
+  페키니즈: '페키니즈',
+  포메라니안: '포메라니안',
+  '폼피츠(포메라니안+스피츠)': '폼피츠',
+  푸들: '푸들',
+  '푸숑(푸들+비숑 프리제)': '푸숑',
+  풍산견: '풍산견',
+  프렌치불독: '프렌치불독',
+  화이트테리어: '화이트테리어',
+};
+
+
+export const breeds: string[] = [
+    '도베르만',
+    '래브라도 리트리버',
+    '러시안블루',
+    '롯트와일러',
+    '리트리버',
+    '말티숑(말티즈+비숑)',
+    '말티즈',
+    '말티폼(말티즈+포메라니안)',
+    '말티푸(말티즈+토이푸들)',
+    '미니핀',
+    '미디엄 푸들',
+    '믹스견',
+    '베들링턴 테리어',
+    '보더 콜리',
+    '불독',
+    '비글',
+    '비숑',
+    '비숑 프리제',
+    '빠삐용',
+    '사모예드',
+    '삽살개',
+    '샤페이',
+    '샴',
+    '세인트 버나드',
+    '셔틀랜드 쉽독(셀티)',
+    '셰퍼드',
+    '슈나우저',
+    '스코티시 폴드',
+    '스탠다드 푸들',
+    '스피츠',
+    '시바견',
+    '시베리안 허스키',
+    '시츄',
+    '시푸(시츄+푸들)',
+    '아프간 하운드',
+    '알라스칸 말라뮤트',
+    '올드 잉글리쉬 쉽독',
+    '요크셔테리어',
+    '웰시코기',
+    '자이언트 슈나우져',
+    '제페니즈 친',
+    '진돗개',
+    '차우차우',
+    '치와와',
+    '치와와(단모)',
+    '치와와(장모)',
+    '코카 스파니엘',
+    '코카푸(코커 스파니엘+푸들)',
+    '콜리',
+    '킹 찰스 스패니얼',
+    '터키시앙고라',
+    '토이 푸들',
+    '퍼그',
+    '페르시안',
+    '페키니즈',
+    '포메라니안',
+    '폼피츠(포메라니안+스피츠)',
+    '푸들',
+    '푸숑(푸들+비숑 프리제)',
+    '풍산견',
+    '프렌치불독',
+    '화이트테리어',
+  ];
diff --git a/apps/duri/src/assets/data/index.ts b/apps/duri/src/assets/data/index.ts
@@ -1 +1,2 @@
-export * from './requestMenu';
+export * from './requestMenu';
+export * from './breed';
diff --git a/apps/duri/src/assets/types/index.ts b/apps/duri/src/assets/types/index.ts
@@ -0,0 +1,6 @@
+export * from './PositonType';
+export * from './pet';
+export * from './quotation';
+export * from './request';
+export * from './reservation';
+export * from './shop';
diff --git a/apps/duri/src/assets/types/pet.ts b/apps/duri/src/assets/types/pet.ts
@@ -1,9 +1,9 @@
-export interface PetInfoProps {
-    petId: number;
-    petName: string;
-    petImage: string;
-    breed: string;
-    age: string;
-    weight: string;
-    gender: string;
-}
+export interface PetInfoType {
+  id: number | undefined;
+  image: string | null;
+  name: string;
+  breed: string;
+  age: number;
+  weight: number;
+  gender: string;
+}
diff --git a/apps/duri/src/assets/types/request.ts b/apps/duri/src/assets/types/request.ts
@@ -1,5 +1,5 @@
-export interface RequestProps extends TimeProps{
-  petId?: number;
+export interface RequestProps extends TimeType {
+  petId: number | undefined;
   menu: string[];
   addMenu: string[];
   specialMenu: string[];
@@ -9,15 +9,15 @@ export interface RequestProps extends TimeProps{
   shopIds: number[];
 }
 
-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 TimeType {
+  time9: boolean;
+  time10: boolean;
+  time11: boolean;
+  time12: boolean;
+  time13: boolean;
+  time14: boolean;
+  time15: boolean;
+  time16: boolean;
+  time17: boolean;
+  time18: boolean;
+}
diff --git a/apps/duri/src/assets/types/reservation.ts b/apps/duri/src/assets/types/reservation.ts
@@ -1,10 +1,13 @@
 export interface UpcomingReservationProps {
-    reservationDate: Date;
-    salonImage:string;
-    salonName: string;
-    salonAddress: string;
-    totalPrice: number;
-    salonPhone: string;
+    shopId: number;
+    reservationDate: string;
+    reserveDday: number; //예약 디데이
+    imageURL:string; //매장 이미지
+    name: string; //매장 이름
+    address: string;
+    phone: string;
+    kakaoURL: string;
+    price: number;
 }
 
 export interface LastReservationProps {

diff --git a/apps/duri/src/components/home/Home.tsx b/apps/duri/src/components/home/Home.tsx
@@ -13,8 +13,9 @@ import {
   SwiperSlide as OriginalSwiperSlide,
 } from 'swiper/react';
 
-import LastReservation from './reservation/lastReservation';
-import UpcomingReservation from './reservation/upcomingReservation';
+import LastReservation from './reservation/LastReservation';
+import UpcomingReservation from './reservation/UpcomingReservation';
+
 
 const CarouselHome = ({
   upcomingReservation,
@@ -36,11 +37,14 @@ const CarouselHome = ({
   const slides = [
     upcomingReservation && (
       <UpcomingReservation reservationDate={upcomingReservation.reservationDate}
-      salonAddress={upcomingReservation.salonAddress}
-      salonName={upcomingReservation.salonName}
-      salonImage={upcomingReservation.salonImage}
-      totalPrice={upcomingReservation.totalPrice}
-      salonPhone={upcomingReservation.salonPhone}
+      shopId={upcomingReservation.shopId}
+      address={upcomingReservation.address}
+      name={upcomingReservation.name}
+      imageURL={upcomingReservation.imageURL}
+      price={upcomingReservation.price}
+      phone={upcomingReservation.phone}
+      kakaoURL={upcomingReservation.kakaoURL}
+      reserveDday={upcomingReservation.reserveDday}
       />
     ),
     lastReservation && daysDifference && (

diff --git a/apps/duri/src/components/home/SpeedQuotation.tsx b/apps/duri/src/components/home/SpeedQuotation.tsx
@@ -1,23 +1,13 @@
 import React from 'react';
 
 import { RegularShopProps } from '@duri/assets/types/shop';
-import { Flex, Text, theme } from '@duri-fe/ui';
+import { Flex } from '@duri-fe/ui';
 
 import { ShopHorizontal } from './ShopHorizontal';
 
 const SpeedQuotation = ({ shopList }: { shopList: RegularShopProps[] }) => {
   return (
     <>
-      <Flex direction="column" align="flex-start" margin="28px 0 0 0">
-        <Text
-          typo="Caption1"
-          colorCode={theme.palette.Gray400}
-          margin="0 0 6px 0"
-        >
-          멍멍이가 3회 이상 방문한 샵들이에요.
-        </Text>
-        <Text typo="Title1">단골 샵 빠른 입찰</Text>
-      </Flex>
       <Flex gap={15}>
         <ShopHorizontal shopList={shopList} />
       </Flex>

diff --git a/...ents/home/reservation/lastReservation.tsx → ...ents/home/reservation/LastReservation.tsx b/...ents/home/reservation/lastReservation.tsx → ...ents/home/reservation/LastReservation.tsx
diff --git a/.../home/reservation/upcomingReservation.tsx → .../home/reservation/UpcomingReservation.tsx b/.../home/reservation/upcomingReservation.tsx → .../home/reservation/UpcomingReservation.tsx
@@ -1,19 +1,16 @@
 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 { 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,
-    ); // 일수 차이 계산
-
+  const handleClickTelButton = () => {
+    window.location.href = `tel:${upcomingReservation.phone}`; //모바일에서 전화걸기 창 뜨는 그거... 하고시픈뎃!!
+  };
+  const handleClickChatButton = () => {
+    //오픈채팅방 주소 알려주는 모달 뜨게?하면 될 듯
+  }
   return (
     <Wrapper
       direction="column"
@@ -23,20 +20,20 @@ const UpcomingReservation = (upcomingReservation: UpcomingReservationProps) => {
     >
       <Flex gap={14} padding="0 20px">
         <Image
-          src={upcomingReservation.salonImage}
+          src={upcomingReservation.imageURL}
           width={67}
           height={67}
           borderRadius={13}
         />
         <Flex direction="column" align="flex-start" gap={12}>
-          <Text>{upcomingReservation.salonName}</Text>
+          <Text>{upcomingReservation.name}</Text>
           <Text typo="Caption4" colorCode={theme.palette.Gray400}>
-            {upcomingReservation.salonAddress}
+            {upcomingReservation.address}
           </Text>
         </Flex>
         <WidthFitFlex align="flex-start">
           <Button width="45px" height="25px" typo="Label2" fontColor={theme.palette.Normal800}>
-            D{daysDifference}
+            D-{upcomingReservation.reserveDday}
           </Button>
         </WidthFitFlex>
       </Flex>
@@ -49,6 +46,8 @@ const UpcomingReservation = (upcomingReservation: UpcomingReservationProps) => {
           bg={theme.palette.Gray20}
           fontColor={theme.palette.Gray500}
           typo="Caption2"
+          onClick={handleClickTelButton}
+
         >
           전화하기
         </Button>
@@ -60,6 +59,7 @@ const UpcomingReservation = (upcomingReservation: UpcomingReservationProps) => {
           bg={theme.palette.Gray20}
           fontColor={theme.palette.Gray500}
           typo="Caption2"
+          onClick={handleClickChatButton}
         >
           문의하기
         </Button>
@@ -72,7 +72,7 @@ const UpcomingReservation = (upcomingReservation: UpcomingReservationProps) => {
           })}
         </Text>
         <Text typo='Label2' colorCode={theme.palette.Normal800}>
-          {upcomingReservation.totalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} 원
+          {upcomingReservation.price.toLocaleString()} 원
         </Text>
       </BottomWrapper>
     </Wrapper>