Merge pull request #74 from Duri-Salon/feat(duri)/home-ui-4(DURI-204)

[feat] 메인홈 UI 관련 수정, 이용기록 견적서 컴포넌트 추가

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

@@ -100,9 +100,14 @@ const UpcomingReservation = ({
           </Text>
         </ShopWrapper>
         <WidthFitFlex align="flex-start">
-          <Button width="45px" height="25px" typo="Label2" padding="8px 10px">
-            D-{reserveDday}
-          </Button>
+          <Flex
+            backgroundColor={theme.palette.Normal500}
+            borderRadius={99}
+            height="25px"
+            padding="8px 10px"
+          >
+            <DdayText typo="Label2">D-{reserveDday}</DdayText>
+          </Flex>
         </WidthFitFlex>
       </Flex>
       <Flex gap={8} justify="flex-end" padding="0 13px">
@@ -152,6 +157,9 @@ const UpcomingReservation = ({
 
 export default UpcomingReservation;
 
+const DdayText = styled(Text)`
+  white-space: nowrap;
+`;
 
 const Wrapper = styled(Flex)`
   flex-shrink: 0;

apps/duri/src/components/my/history/ResponseQuotationHistory.tsx

@@ -0,0 +1,83 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button, ResponseQuotation, theme } from '@duri-fe/ui';
+import { useGetDetailQuotation } from '@duri-fe/utils';
+
+export const ResponseQuotationHistory = ({
+  requestId,
+  handleCloseButton,
+}: {
+  requestId: number;
+  handleCloseButton: () => void;
+}) => {
+  const navigate = useNavigate();
+  const { data: quotationData } = useGetDetailQuotation(requestId);
+  const handleClickReviewButton = (quotationId: number) => {
+    navigate('/review/write', {
+      state: {
+        quotationId: quotationId,
+      },
+    });
+  };
+
+  return (
+    <>
+      {quotationData && (
+        <ResponseQuotation responseList={quotationData}>
+          {quotationData.status === '리뷰 작성 가능' && (
+            <>
+              <Button
+                bg={theme.palette.Gray20}
+                borderRadius="8px"
+                typo="Body3"
+                width="123px"
+                height="47px"
+                onClick={handleCloseButton}
+              >
+                닫기
+              </Button>
+              <Button
+                bg={theme.palette.Black}
+                fontColor={theme.palette.White}
+                borderRadius="8px"
+                typo="Body3"
+                width="173px"
+                height="47px"
+                onClick={() =>
+                  handleClickReviewButton(quotationData.quotationId)
+                }
+              >
+                후기 쓰기
+              </Button>
+            </>
+          )}
+          {quotationData.status === '리뷰 작성 ' && (
+            <>
+              <Button
+                bg={theme.palette.Gray20}
+                borderRadius="8px"
+                typo="Body3"
+                width="123px"
+                height="47px"
+                onClick={handleCloseButton}
+              >
+                닫기
+              </Button>
+              <Button
+                bg={theme.palette.Gray200}
+                fontColor={theme.palette.White}
+                borderRadius="8px"
+                typo="Body3"
+                width="173px"
+                height="47px"
+                disabled
+              >
+                후기 쓰기
+              </Button>
+            </>
+          )}
+        </ResponseQuotation>
+      )}
+    </>
+  );
+};

apps/duri/src/pages/Home/index.tsx

@@ -27,6 +27,9 @@ import styled from '@emotion/styled';
 const Home = () => {
   const { coordinates } = useGeolocation();
 
+  //로그인 토큰이 있는지 확인하기 위해
+  const token = localStorage.getItem('authorization_user');
+
   const [lat, setLat] = useState<number | null>(null);
   const [lon, setLon] = useState<number | null>(null);
 
@@ -68,12 +71,21 @@ const Home = () => {
           backgroundColor={theme.palette.Normal500}
           padding="0 0 37px 0"
         >
-          <MainHeader
-            logoColor={theme.palette.Black}
-            iconColor={theme.palette.Normal800}
-            searchIcon={true}
-            onClickSearch={handleNavigate}
-          />
+          {token ? (
+            <MainHeader
+              logoColor={theme.palette.Black}
+              iconColor={theme.palette.Normal800}
+              searchIcon
+              onClickSearch={handleNavigate}
+            />
+          ) : (
+            <MainHeader
+              logoColor={theme.palette.Black}
+              iconColor={theme.palette.Normal800}
+              notificationIcon={false}
+              login
+            />
+          )}
           <CarouselHome
             upcomingReservation={
               reservationData?.reserveDday === -1 ? undefined : reservationData

apps/duri/src/pages/My/MyHistory.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HistoryCard } from '@duri/components/diary/HistoryCard';
+import { ResponseQuotationHistory } from '@duri/components/my/history/ResponseQuotationHistory';
 import {
   DuriNavbar,
   Flex,
@@ -16,30 +17,16 @@ const MyHistoryPage = () => {
   //   미용일지 조회 데이터 상태관리 필요!
   const navigate = useNavigate();
   const handleNavigate = () => navigate('/my');
-  // const moveToWriteReview = () => {
-  //   //quotationId 전달
-  //   navigate('/my/review/write', { state: shopId });
-  // };
 
   const { data: historyData } = useGetVisitHistory();
 
   const { isOpenModal, toggleModal } = useModal();
 
-  const [selectedQuotationId, setSelectedQuotationId] = useState<number>();
-  // const [shopId, setShopId] = useState<number>();
+  const [requestId, setRequestId] = useState<number>();
 
-  useEffect(() => {
-    console.log(selectedQuotationId);
-  }, [selectedQuotationId]);
-
-  useEffect(() => {
-    console.log(historyData);
-  }, [historyData]);
   // 모달 토글 함수
-  // const handleToggleModal = (quotationId: number, shopId: number) => {
-  const handleToggleModal = (quotationId: number) => {
-    setSelectedQuotationId(quotationId);
-    // setShopId(shopId);
+  const handleToggleModal = (requestId: number) => {
+    setRequestId(requestId);
     toggleModal();
   };
 
@@ -63,35 +50,29 @@ const MyHistoryPage = () => {
             <div key={month}>
               {historyList.map((history) => (
                 <HistoryCard
-                  key={history.quotationId}
+                  key={history.requestId}
                   visitMonth={`${month}월`}
                   tagContent={history.complete ? '미용 완료' : '미완료'}
                   designerName={history.groomerName}
                   shopName={history.shopName}
                   petName={history.petName}
                   visitDate={history.startDate}
                   dayOfWeek={history.day}
-                  toggleModal={() =>
-                    // handleToggleModal(history.quotationId, history.shopId)
-                    handleToggleModal(history.quotationId)
-                  }
+                  toggleModal={() => handleToggleModal(history.requestId)}
                 />
               ))}
             </div>
           ))
         ) : (
           <Text>이용 기록이 없습니다.</Text>
         )}
-        {isOpenModal && selectedQuotationId && (
+        {isOpenModal && requestId && (
           <Modal isOpen={isOpenModal} toggleModal={toggleModal}>
-            <></>
-            {/*  여기는 따로 응답견적서UI 컴포넌트를 만들어야함
-            <DetailResponseQuotation
-              requestId={selectedQuotationId}
-              // quotationId={selectedQuotationId}
+            {/* 리뷰용 견적응답서 UI 컴포넌트 */}
+            <ResponseQuotationHistory
+              requestId={requestId}
               handleCloseButton={toggleModal}
-              handleNavigate={moveToWriteReview}
-            /> */}
+            />
           </Modal>
         )}
       </Flex>

apps/duri/src/pages/Request/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { RequestType } from '@duri/assets/types';
 import MonthlyCalendar from '@duri/components/request/Calendar';
@@ -47,6 +47,8 @@ const validateRequestInfo = (requestInfo: RequestType): boolean => {
 
 const RequestPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
   const { data: petInfo } = useGetPetInfo();
   const {
     mutateAsync: request,
@@ -90,12 +92,16 @@ const RequestPage = () => {
     navigate(-1);
   };
 
-  // const handle
-
+  //스크롤 멘 위로 옮기고 shopIds리스트 받은 애 set
   useEffect(() => {
     window.scrollTo(0, 0);
+    setRequestInfo((prev) => ({
+      ...prev,
+      shopIds: location.state?.shopIds,
+    }));
   }, []);
 
+
   useEffect(() => {
     if (petInfo) {
       setRequestInfo((prev) => ({ ...prev, petId: petInfo.petId }));
@@ -106,7 +112,6 @@ const RequestPage = () => {
   useEffect(() => {
     const isValid = validateRequestInfo(requestInfo);
     setIsButton(isValid);
-
   }, [requestInfo]);
 
   // 오류 처리

packages/ui/src/components/Header/MainHeader.tsx

@@ -1,13 +1,15 @@
-import { Doori, Flex, Magnifier, Notification, theme } from "@duri-fe/ui";
-import styled from "@emotion/styled";
+import { Doori, Flex, Magnifier, Notification, theme } from '@duri-fe/ui';
+import styled from '@emotion/styled';
 
-import { HeightFitFlex } from "../FlexBox/Flex";
+import { HeightFitFlex } from '../FlexBox/Flex';
 
 interface MainHeaderProps {
   logoColor: string;
   iconColor: string;
   searchIcon?: boolean;
+  notificationIcon?: boolean;
   badge?: boolean;
+  login?: boolean;
 
   onClickLogo?: () => void;
   onClickSearch?: () => void;
@@ -19,41 +21,72 @@ export const MainHeader = ({
   iconColor,
   searchIcon,
   badge,
+  login,
+  notificationIcon = true,
   onClickLogo,
   onClickSearch,
   onClickNotification,
 }: MainHeaderProps) => {
   return (
-    <HeightFitFlex justify="space-between" backgroundColor="transparent" padding="20px">
+    <HeightFitFlex
+      justify="space-between"
+      backgroundColor="transparent"
+      padding="20px"
+    >
       <button onClick={onClickLogo}>
         <Doori height={26} color={logoColor} />
       </button>
 
       <IconContainer gap={20}>
-        {searchIcon && onClickSearch && 
+        {searchIcon && onClickSearch && (
           <button onClick={onClickSearch}>
             <Magnifier width={21.5} color={iconColor} />
           </button>
-        }
-        <NotificationContainer onClick={onClickNotification}>
-          <Notification height={24} color={iconColor} />
-          {badge && <NotificationBadge width={8} height={8} borderRadius={8} backgroundColor={theme.palette.Alert} />}
-        </NotificationContainer>
+        )}
+        {notificationIcon && (
+          <NotificationContainer onClick={onClickNotification}>
+            <Notification height={24} color={iconColor} />
+            {badge && (
+              <NotificationBadge
+                width={8}
+                height={8}
+                borderRadius={8}
+                backgroundColor={theme.palette.Alert}
+              />
+            )}
+          </NotificationContainer>
+        )}
+        {login && (
+          <LoginButton>
+            <LoginLink href="/login">Login</LoginLink>
+          </LoginButton>
+        )}
       </IconContainer>
     </HeightFitFlex>
-  )
-}
+  );
+};
 
 const IconContainer = styled(Flex)`
   width: fit-content;
-`
+`;
 
 const NotificationContainer = styled.button`
   position: relative;
-`
+`;
 
 const NotificationBadge = styled(Flex)`
   position: absolute;
   top: 0px;
   right: 0px;
-`;
+`;
+
+const LoginLink = styled.a`
+  color: ${theme.palette.Black};
+  ${theme.typo.Body3};
+  text-decoration: none;
+`;
+
+const LoginButton = styled.div`
+  cursor: pointer;
+  padding: 5px 10px;
+`;

packages/utils/src/apis/types/my.ts

@@ -95,7 +95,9 @@ export interface ReviewDetailResponse {
   };
 }
 
+//이용기록 - 견적응답서 조회를 위한 requestId 컬럼 추가
 export interface HistoryType {
+  requestId: number;
   quotationId: number;
   complete: boolean;
   groomerImageURL: string;