Merge pull request #71 from Duri-Salon/feat(duri)/payment-api(DURI-126)

[feat] Payment API 연결, Salon 마이페이지 UI 구현

apps/duri/package.json

@@ -18,7 +18,6 @@
     "@emotion/styled": "^11.13.5",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-query-devtools": "^5.62.2",
-    "@tosspayments/tosspayments-sdk": "^2.3.2",
     "@types/node": "^22.10.1",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",

apps/duri/src/App.tsx

@@ -63,7 +63,7 @@ function App() {
 
           <Route path="/quotation" element={<QuotationPage />} />
           <Route
-            path="/quotation/:quotationId"
+            path="/quotation/:quotationReqId"
             element={<QuotationDetailPage />}
           />
 

apps/duri/src/assets/types/quotation.ts

@@ -1,16 +1,3 @@
-export interface QuotationProps {
-  salonIdx: string;
-  salonName: string;
-  salonAddress: string;
-  salonImage: string;
-  designerName: string;
-  designerCareer: string;
-  designerAge: number;
-  designerGender: string;
-  groomingList: { menu: string; price: number }[]; // 배열의 각 요소가 "{menu:"시술 이름", price:"금액"}" 형식의 객체
-  groomingTotalPrice: number;
-}
-
 export interface RequestItemType {
   quotationReqId: number;
   requestId: number;

apps/duri/src/components/home/Home.tsx

@@ -1,7 +1,6 @@
 import { SetStateAction, useState } from 'react';
 import React from 'react';
 
-import { UpcomingReservationType } from '@duri/assets/types';
 import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui';
 import styled from '@emotion/styled';
 import { differenceInDays } from 'date-fns';
@@ -13,25 +12,38 @@ import {
 import LastReservation from './reservation/LastReservation';
 import UpcomingReservation from './reservation/UpcomingReservation';
 
+interface UpcomingReservationProps {
+  petId: number;
+  shopId: number;
+  imageURL: string;
+  name: string;
+  address: string;
+  phone: string;
+  kakaoURL: string;
+  quotationId: number;
+  reserveDday: number;
+  reservationDate: string;
+  price: string;
+}
+
 const CarouselHome = ({
   upcomingReservation,
   lastReservation,
 }: {
-  upcomingReservation?: UpcomingReservationType;
+  upcomingReservation?: UpcomingReservationProps;
   lastReservation: string;
 }) => {
   const [swiperIndex, setSwiperIndex] = useState<number>(0); // 슬라이드 인덱스 상태
   const currentDate = new Date();
 
   let daysDifference = null;
-  if(lastReservation !== '')
+  if (lastReservation !== '')
     daysDifference = differenceInDays(currentDate, new Date(lastReservation)); // 일수 차이 계산
 
   const slides = [
     upcomingReservation ? (
       <UpcomingReservation
         reservationDate={upcomingReservation.reservationDate}
-        lastSinceDay={upcomingReservation.lastSinceDay}
         shopId={upcomingReservation.shopId}
         address={upcomingReservation.address}
         name={upcomingReservation.name}

apps/duri/src/components/home/reservation/UpcomingReservation.tsx

@@ -1,10 +1,17 @@
-import { Button, Flex, Image, Text, theme, WidthFitFlex } from '@duri-fe/ui';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  Button,
+  Flex,
+  Image,
+  Store,
+  Text,
+  theme,
+  WidthFitFlex,
+} from '@duri-fe/ui';
 import styled from '@emotion/styled';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
 
 interface UpcomingReservationProps {
-  lastSinceDay: number;
   shopId: number;
   imageURL: string;
   name: string;
@@ -19,42 +26,81 @@ interface UpcomingReservationProps {
 const UpcomingReservation = ({
   imageURL,
   address,
-  // kakaoURL,
+  kakaoURL,
   name,
   phone,
   price,
   reservationDate,
   reserveDday,
-  // shopId,
+  shopId,
 }: UpcomingReservationProps) => {
+  const navigate = useNavigate();
+
   const handleClickTelButton = () => {
     window.location.href = `tel:${phone}`; //모바일에서 전화걸기 창 뜨는 그거... 하고시픈뎃!!
   };
+
   const handleClickChatButton = () => {
     //오픈채팅방 주소 알려주는 모달 뜨게?하면 될 듯
+    console.log(kakaoURL);
+  };
+
+  const handleClickShopButton = () => {
+    navigate(`/shop/${shopId}`);
+  };
+
+  const formatReservationDate = (reservationDate: string): string => {
+    if (!reservationDate) return '예약 정보 없음';
+
+    // 날짜와 시간 분리
+    const [datePart, hourPart] = reservationDate.split(' ');
+
+    // 시간 포맷 결정 (오전/오후)
+    const hour = parseInt(hourPart, 10);
+    const period = hour < 12 ? '오전' : '오후';
+    const formattedHour = hour <= 12 ? hour : hour - 12;
+
+    // 날짜 변환 (YYYY-MM-DD → YYYY.MM.DD)
+    const formattedDate = datePart.replace(/-/g, '.');
+
+    return `${formattedDate} ${period} ${formattedHour}시`;
   };
+
   return (
     <Wrapper
       direction="column"
       borderRadius={12}
-      padding="27px 0"
+      padding="27px 0 36px"
       backgroundColor={theme.palette.White}
     >
       <Flex gap={14} padding="0 20px">
-        <Image src={imageURL} width={67} height={67} borderRadius={13} />
-        <Flex direction="column" align="flex-start" gap={12}>
+        {imageURL ? (
+          <ImageWrapper
+            src={imageURL}
+            width={67}
+            height={67}
+            borderRadius={13}
+            onClick={handleClickShopButton}
+          />
+        ) : (
+          <ImageBox borderRadius={13}>
+            <Store width={67} height={67} />
+          </ImageBox>
+        )}
+
+        <ShopWrapper
+          direction="column"
+          align="flex-start"
+          gap={12}
+          onClick={handleClickShopButton}
+        >
           <Text>{name}</Text>
           <Text typo="Caption4" colorCode={theme.palette.Gray400}>
             {address}
           </Text>
-        </Flex>
+        </ShopWrapper>
         <WidthFitFlex align="flex-start">
-          <Button
-            width="45px"
-            height="25px"
-            typo="Label2"
-            fontColor={theme.palette.Normal800}
-          >
+          <Button width="45px" height="25px" typo="Label2" padding="8px 10px">
             D-{reserveDday}
           </Button>
         </WidthFitFlex>
@@ -94,18 +140,19 @@ const UpcomingReservation = ({
         padding="12px 27px"
       >
         <Text typo="Label2" colorCode={theme.palette.Normal800}>
-          {format(reservationDate, 'yyyy.MM.dd a h시', {
-            locale: ko,
-          })}
+          {formatReservationDate(reservationDate)}
         </Text>
         <Text typo="Label2" colorCode={theme.palette.Normal800}>
-          {price.toLocaleString()} 원
+          {price ? `${price.toLocaleString()} 원` : '가격 정보 없음'}
         </Text>
       </BottomWrapper>
     </Wrapper>
   );
 };
 
+export default UpcomingReservation;
+
+
 const Wrapper = styled(Flex)`
   flex-shrink: 0;
   position: relative;
@@ -117,4 +164,15 @@ const BottomWrapper = styled(Flex)`
   border-radius: 0 0 12px 12px;
 `;
 
-export default UpcomingReservation;
+const ImageWrapper = styled(Image)`
+  cursor: pointer;
+`;
+
+const ImageBox = styled(WidthFitFlex)`
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+`;
+
+const ShopWrapper = styled(Flex)`
+  cursor: pointer;
+`;

apps/duri/src/components/my/review/ReviewUserInfo.tsx

@@ -2,14 +2,17 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import {
+  Button,
   Flex,
   Menu,
+  Modal,
   ProfileImage,
   RatingStars,
   Text,
   theme,
   WidthFitFlex,
 } from '@duri-fe/ui';
+import { useDeleteReview, useModal } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 
 interface ReviewUserInfoProps {
@@ -29,8 +32,14 @@ export const ReviewUserInfo = ({
 }: ReviewUserInfoProps) => {
   const navigate = useNavigate();
 
+  const { isOpenModal, toggleModal } = useModal();
+
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const { mutateAsync: deleteReview } = useDeleteReview(() => {
+    navigate('/my/review', { replace: true });
+  });
+
   const handleClickMenu = () => {
     setIsOpen(!isOpen);
   };
@@ -41,7 +50,12 @@ export const ReviewUserInfo = ({
 
   const handleClickDeleteButton = () => {
     //삭제 모달 띄우기
-  }
+    toggleModal();
+  };
+
+  const handleClickDeleteConfirmButton = () => {
+    deleteReview(reviewId);
+  };
 
   return (
     <Wrapper justify="space-between">
@@ -86,6 +100,47 @@ export const ReviewUserInfo = ({
           </MenuItem>
         </MenuCard>
       )}
+      {isOpenModal && (
+        <Modal
+          isOpen={isOpenModal}
+          toggleModal={toggleModal}
+          title="후기를 삭제하시겠습니까?"
+          closeIcon={false}
+        >
+          <Flex direction="column" gap={24}>
+            <Flex direction="column">
+              <Text typo="Caption2" colorCode={theme.palette.Gray400}>
+                후기 삭제 후
+              </Text>
+              <Text typo="Caption2" colorCode={theme.palette.Gray400}>
+                복구할 수 없습니다.
+              </Text>
+            </Flex>
+            <Flex>
+              <Button
+                width="104px"
+                height="47px"
+                padding="10px"
+                bg={theme.palette.Gray20}
+                typo="Body3"
+                onClick={toggleModal}
+              >
+                아니오
+              </Button>
+              <Button
+                width="145px"
+                height="47px"
+                padding="10px"
+                bg={theme.palette.Alert}
+                typo="Body3"
+                onClick={handleClickDeleteConfirmButton}
+              >
+                네
+              </Button>
+            </Flex>
+          </Flex>
+        </Modal>
+      )}
     </Wrapper>
   );
 };