Merge pull request #75 from Duri-Salon/feat(duri)/diary-api(DURI-145)

[feat] 미용일기 관련 API 연결
Duri-Salon · Dec 18, 2024 · b849053 · b849053
2 parents f92f82d + bd2cc1d
commit b849053
Show file tree

Hide file tree

Showing 26 changed files with 608 additions and 269 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,3 +53,5 @@ yarn-error.log*
 
 # Vite Cache
 .vite-cache
+
+
diff --git a/apps/duri/src/components/diary/DiaryData.tsx b/apps/duri/src/components/diary/DiaryData.tsx
@@ -0,0 +1,3 @@
+export const DiaryData = () => {
+  return;
+};
diff --git a/apps/duri/src/components/diary/HistoryCard.tsx b/apps/duri/src/components/diary/HistoryCard.tsx
@@ -12,10 +12,9 @@ import {
   theme,
   WidthFitFlex,
 } from '@duri-fe/ui';
-import styled from '@emotion/styled';
 
 interface HistoryCardProps {
-  visitMonth: string;
+  quotationId: number;
   tagContent: string;
   profileImageUrl?: string;
   designerName: string;
@@ -27,7 +26,7 @@ interface HistoryCardProps {
 }
 
 export const HistoryCard = ({
-  visitMonth,
+  quotationId,
   tagContent,
   profileImageUrl,
   designerName,
@@ -38,8 +37,8 @@ export const HistoryCard = ({
   toggleModal,
 }: HistoryCardProps) => {
   const navigate = useNavigate();
-  const moveToDiaryDetail = () => {
-    navigate('/diary/1');
+  const handleDiaryCardClick = (quotationId: number) => {
+    navigate(`/diary/${quotationId}`);
   };
 
   const handleToggleModal = (e: React.MouseEvent) => {
@@ -50,78 +49,69 @@ export const HistoryCard = ({
   };
 
   return (
-    <HeightFitFlex
-      direction="column"
-      align="start"
-      gap={24}
-      onClick={moveToDiaryDetail}
-    >
-      <Text typo="Title1">{visitMonth} 방문</Text>
-      <HeightFitFlex gap={19} align="stretch">
-        <GrayVerticalLine />
-        <Card direction="row" borderRadius={12} padding="16px 20px">
-          <Flex width={250}>
-            <Flex direction="column" align="flex-start">
-              <Flex justify='space-between' height={30} margin='0 0 13px'>
-                <SalonTag content={tagContent} borderRadius={99} />
-                <WidthFitFlex justify="end" align="start">
-                  {toggleModal && (
-                    <Button
-                      bg={theme.palette.Black}
-                      fontColor={theme.palette.White}
-                      typo="Label3"
-                      padding="10px"
-                      width="85px"
-                      height="30px"
-                      onClick={handleToggleModal}
-                    >
-                      견적서 보기
-                    </Button>
-                  )}
-                </WidthFitFlex>
-              </Flex>
-              <HeightFitFlex justify="start" gap={12}>
-                <ProfileImage
-                  width={20}
-                  height={20}
-                  borderRadius={99}
-                  src={profileImageUrl}
-                />
-                <Text typo="Label3" colorCode={theme.palette.Gray300}>
-                  {designerName}
-                </Text>
-              </HeightFitFlex>
-              <HeightFitFlex justify="flex-start" gap={8} margin="14px 0 0 0">
-                <Text
-                  typo="Title1"
-                  colorCode={theme.palette.Normal700}
-                  margin="0 4px 0 0"
-                >
-                  {shopName}
-                </Text>
-                <Dot width={3} />
-                <Text typo="Title1">{petName}</Text>
-              </HeightFitFlex>
-
-              <HeightFitFlex justify="flex-start" gap={8} margin="16px 0 0 0">
-                <Text typo="Label1" colorCode={theme.palette.Gray300}>
-                  {dayOfWeek}
-                </Text>
-                <Text typo="Label3" colorCode={theme.palette.Gray300}>
-                  {visitDate}
-                </Text>
-              </HeightFitFlex>
+    <div onClick={() => handleDiaryCardClick(quotationId)}>
+      <Card direction="row" borderRadius={12} padding="16px 20px">
+        <Flex width={250}>
+          <Flex direction="column" align="flex-start">
+            <Flex justify="space-between" height={30} margin="0 0 13px">
+              <SalonTag
+                height={24}
+                padding="8px 10px"
+                content={tagContent}
+                borderRadius={99}
+                colorCode={theme.palette.Gray300}
+                typo="Caption5"
+              />
+              <WidthFitFlex justify="end" align="start">
+                {toggleModal && (
+                  <Button
+                    bg={theme.palette.Black}
+                    fontColor={theme.palette.White}
+                    typo="Label3"
+                    padding="10px"
+                    width="85px"
+                    height="30px"
+                    onClick={handleToggleModal}
+                  >
+                    견적서 보기
+                  </Button>
+                )}
+              </WidthFitFlex>
             </Flex>
+            <HeightFitFlex justify="start" gap={12}>
+              <ProfileImage
+                width={20}
+                height={20}
+                borderRadius={99}
+                src={profileImageUrl}
+              />
+              <Text typo="Label3" colorCode={theme.palette.Gray300}>
+                {designerName}
+              </Text>
+            </HeightFitFlex>
+            <HeightFitFlex justify="flex-start" gap={8} margin="14px 0 0 0">
+              <Text
+                typo="Title1"
+                colorCode={theme.palette.Normal700}
+                margin="0 4px 0 0"
+              >
+                {shopName}
+              </Text>
+              <Dot width={3} />
+              <Text typo="Title1">{petName}</Text>
+            </HeightFitFlex>
+
+            <HeightFitFlex justify="flex-start" gap={8} margin="16px 0 0 0">
+              <Text typo="Label1" colorCode={theme.palette.Gray300}>
+                {dayOfWeek}
+              </Text>
+              <Text typo="Label3" colorCode={theme.palette.Gray300}>
+                {visitDate}
+              </Text>
+            </HeightFitFlex>
           </Flex>
-        </Card>
-      </HeightFitFlex>
-    </HeightFitFlex>
+        </Flex>
+      </Card>
+    </div>
   );
 };
-
-const GrayVerticalLine = styled.div`
-  width: 3px;
-  height: 100%;
-  flex-shrink: 0;
-  background-color: ${theme.palette.Gray50};
-`;
diff --git a/apps/duri/src/components/dooriAI/AIHeader.tsx b/apps/duri/src/components/dooriAI/AIHeader.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import {
   Doori,
   FilledHome,
@@ -9,20 +11,33 @@ import {
 import styled from '@emotion/styled';
 
 export const AIHeader = () => {
+  const navigate = useNavigate();
+
   return (
     <HeightFitFlex justify="space-between" margin="0 0 43px" padding="0 6px 0">
-      <WidthFitFlex gap={13}>
+      <LogoWrapper
+        gap={13}
+        onClick={() => {
+          navigate('/ai');
+        }}
+      >
         <Doori width={75} color={theme.palette.White} />
         <TitleTypo typo="Heading" colorCode={theme.palette.White}>
           AI
         </TitleTypo>
-      </WidthFitFlex>
+      </LogoWrapper>
+
       <a href="/">
         <FilledHome width={19} color={theme.palette.White} />
       </a>
     </HeightFitFlex>
   );
 };
+
+const LogoWrapper = styled(WidthFitFlex)`
+  cursor: pointer;
+`;
+
 const TitleTypo = styled(Text)`
   font-size: (26 / 16) rem;
 `;
diff --git a/apps/duri/src/components/home/ShopHorizontal.tsx b/apps/duri/src/components/home/ShopHorizontal.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { BottomSheet } from 'react-spring-bottom-sheet';
 import { useNavigate } from 'react-router-dom';
 
@@ -27,10 +28,18 @@ export const ShopHorizontal = ({
   home: boolean;
 }) => {
   const navigate = useNavigate();
-  const handleClickShop = (shopIdx: number) => navigate(`/shop/${shopIdx}`);
+  const handleClickShop = (shopIdx: number) => {
+    navigate(`/shop/${shopIdx}`);
+  };
   const { openSheet, bottomSheetProps } = useBottomSheet({
     maxHeight: 556,
   });
+  const [clickedShopId, setClickedShopId] = useState<number>(0);
+  const handleSendBtnClick = (shopIdx: number) => {
+    setClickedShopId(shopIdx);
+    openSheet();
+  };
+
   return (
     <Flex direction="column" gap={20} margin="28px 0 0 0">
       {shopList &&
@@ -52,7 +61,11 @@ export const ShopHorizontal = ({
             >
               <Flex justify="space-between">
                 <Wrapper direction="column" align="flex-start">
-                  <Flex justify="flex-start" gap={2} onClick={() => handleClickShop(shop.shopId)}>
+                  <Flex
+                    justify="flex-start"
+                    gap={2}
+                    onClick={() => handleClickShop(shop.shopId)}
+                  >
                     <Text typo="Title3">{shop.shopName}</Text>
                     <NextArrow width={20} height={20} />
                   </Flex>
@@ -81,15 +94,15 @@ export const ShopHorizontal = ({
                 fontColor={theme.palette.White}
                 borderRadius="8px"
                 typo="Label2"
-                onClick={openSheet}
+                onClick={() => handleSendBtnClick(shop.shopId)}
               >
                 <Send width={18} height={17} /> &nbsp; 입찰 넣기
               </Button>
             </Flex>
           </HeightFitFlex>
         ))}
       <BottomSheet {...bottomSheetProps}>
-        <SendRequestQBox />
+        <SendRequestQBox shopIdList={[clickedShopId]} />
       </BottomSheet>
     </Flex>
   );

diff --git a/apps/duri/src/components/shop/MapInfo.tsx b/apps/duri/src/components/shop/MapInfo.tsx
@@ -180,9 +180,14 @@ export const MapInfo = forwardRef<HTMLDivElement, MapProps>(
                 )}
               </BottomSheet>
             )}
-            <BottomSheet {...requestSheetProps}>
-              <SendRequestQBox closeBottomSheet={closeRequestSheet} />
-            </BottomSheet>
+            {selectedShop && (
+              <BottomSheet {...requestSheetProps}>
+                <SendRequestQBox
+                  closeBottomSheet={closeRequestSheet}
+                  shopIdList={[selectedShop.shopId]}
+                />
+              </BottomSheet>
+            )}
           </>
         )}
       </RelativeMobile>

diff --git a/apps/duri/src/components/shop/SendRequesQBox.tsx b/apps/duri/src/components/shop/SendRequesQBox.tsx
@@ -14,13 +14,15 @@ import styled from '@emotion/styled';
 
 export const SendRequestQBox = ({
   closeBottomSheet,
+  shopIdList,
 }: {
   closeBottomSheet?: () => void;
+  shopIdList: number[];
 }) => {
   const navigate = useNavigate();
   const moveToShopRequest = () => {
     if (closeBottomSheet) closeBottomSheet();
-    navigate('/shop/request');
+    navigate('/shop/request', { state: { shopIdList: shopIdList } });
   };
   return (
     <RelativeFlex

diff --git a/apps/duri/src/components/shop/ShopInfo.tsx b/apps/duri/src/components/shop/ShopInfo.tsx
@@ -137,7 +137,7 @@ export const ShopInfo = ({
               </TextLine>
             </Flex>
 
-            <HeightFitFlex justify="flex-start" align="flex-end">
+            <HeightFitFlex justify="space-between" align="flex-end">
               <WidthFitFlex direction="column" gap={8}>
                 <Flex gap={10} justify="flex-start" margin="0 0 0 4px">
                   <Call width={16} />
@@ -166,7 +166,7 @@ export const ShopInfo = ({
                     ))}
                 </TagList>
               </WidthFitFlex>
-              <WidthFitFlex gap={8}>
+              <WidthFitFlex gap={8} padding="0 4px 0">
                 <IconCircle>
                   <Chat width={21} color={theme.palette.Normal700} />
                 </IconCircle>
@@ -247,7 +247,10 @@ export const ShopInfo = ({
           </HeightFitFlex>
         </ShopInfoContainer>
         <BottomSheet {...bottomSheetProps}>
-          <SendRequestQBox closeBottomSheet={closeSheet} />
+          <SendRequestQBox
+            closeBottomSheet={closeSheet}
+            shopIdList={[shopId]}
+          />
         </BottomSheet>
       </>
     )

diff --git a/apps/duri/src/components/shop/ShopList.tsx b/apps/duri/src/components/shop/ShopList.tsx
@@ -213,7 +213,10 @@ export const ShopList = ({
           </Flex>
         </BottomSheet>
         <BottomSheet {...requestSheetProps}>
-          <SendRequestQBox closeBottomSheet={closeRequestSheet} />
+          <SendRequestQBox
+            closeBottomSheet={closeRequestSheet}
+            shopIdList={selectedShops}
+          />
         </BottomSheet>
       </Flex>
     </>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,3 +53,5 @@ yarn-error.log*

		# Vite Cache
		.vite-cache