Merge pull request #85 from Duri-Salon/fix(duri)/duri-ui

seungboshim · web-flow · commit b6fb4d7040dc · 2024-12-19T14:10:40.000+09:00
[feat] 통계 페이지 막대 그래프 구현, 잘못된 padding 및 ui 수정
diff --git a/apps/duri/src/components/home/Home.tsx b/apps/duri/src/components/home/Home.tsx
@@ -2,6 +2,7 @@ import { SetStateAction, useState } from 'react';
 import React from 'react';
 
 import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui';
+import { getShortenedAddress } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 import { differenceInDays } from 'date-fns';
 import {
@@ -45,7 +46,7 @@ const CarouselHome = ({
       <UpcomingReservation
         reservationDate={upcomingReservation.reservationDate}
         shopId={upcomingReservation.shopId}
-        address={upcomingReservation.address}
+        address={getShortenedAddress(upcomingReservation.address)}
         name={upcomingReservation.name}
         imageURL={upcomingReservation.imageURL}
         price={upcomingReservation.price}
diff --git a/apps/duri/src/components/home/reservation/UpcomingReservation.tsx b/apps/duri/src/components/home/reservation/UpcomingReservation.tsx
@@ -47,7 +47,7 @@ const UpcomingReservation = ({
     navigate(`/shop/${shopId}`);
   };
 
-  const formatReservationDate = (reservationDate: string): string => {
+  const formatReservationDate = (reservationDate: string) => {
     if (!reservationDate) return '예약 정보 없음';
 
     // 날짜와 시간 분리
@@ -61,7 +61,14 @@ const UpcomingReservation = ({
     // 날짜 변환 (YYYY-MM-DD → YYYY.MM.DD)
     const formattedDate = datePart.replace(/-/g, '.');
 
-    return `${formattedDate} ${period} ${formattedHour}시`;
+    return (
+      <ReservationText typo="Label2" colorCode={theme.palette.Normal800}>
+        <span>{formattedDate}</span>{' '}
+        <span>
+          {period} {formattedHour}시
+        </span>
+      </ReservationText>
+    );
   };
 
   return (
@@ -116,7 +123,7 @@ const UpcomingReservation = ({
           padding="6px 26px"
           bg={theme.palette.Gray20}
           fontColor={theme.palette.Gray500}
-          typo="Caption2"
+          typo="Caption3"
           onClick={handleClickTelButton}
         >
           전화하기
@@ -128,7 +135,7 @@ const UpcomingReservation = ({
           padding="6px 26px"
           bg={theme.palette.Gray20}
           fontColor={theme.palette.Gray500}
-          typo="Caption2"
+          typo="Caption3"
           onClick={handleClickChatButton}
         >
           문의하기
@@ -142,9 +149,7 @@ const UpcomingReservation = ({
         margin="12px 0 0 0"
         padding="12px 27px"
       >
-        <Text typo="Label2" colorCode={theme.palette.Normal800}>
-          {formatReservationDate(reservationDate)}
-        </Text>
+        {formatReservationDate(reservationDate)}
         <Text typo="Label2" colorCode={theme.palette.Normal800}>
           {price ? `${price.toLocaleString()} 원` : '가격 정보 없음'}
         </Text>
@@ -182,3 +187,7 @@ const ImageBox = styled(WidthFitFlex)`
 const ShopWrapper = styled(Flex)`
   cursor: pointer;
 `;
+
+const ReservationText = styled(Text)`
+  gap: 10px;
+`;
diff --git a/apps/duri/src/pages/Diary/DiaryDetail.tsx b/apps/duri/src/pages/Diary/DiaryDetail.tsx
@@ -69,17 +69,22 @@ const PetDiaryDetail = () => {
             <Flex padding="16px 22px" justify="space-between">
               <Text typo="Title3">시술날짜</Text>
               <Text typo="Body2" css={LightBody2}>
-                2024-12-26
+                {diaryDetailData.groomingDate}
               </Text>
             </Flex>
             <Seperator />
 
             <Flex padding="16px 22px" justify="space-between">
               <Text typo="Title3">담당자</Text>
               <WidthFitFlex gap={12}>
-                <ProfileImage width={20} height={20} borderRadius={99} />
+                <ProfileImage
+                  width={20}
+                  height={20}
+                  borderRadius={99}
+                  src={diaryDetailData.groomerInfo.profileImageUrl}
+                />
                 <Text typo="Body2" css={LightBody2}>
-                  미나쌤
+                  {diaryDetailData.groomerInfo.name}
                 </Text>
               </WidthFitFlex>
             </Flex>
@@ -95,29 +100,41 @@ const PetDiaryDetail = () => {
             <Text typo="Caption1" colorCode={theme.palette.Gray400}>
               미용사님이 작성하신 미용 일지에요
             </Text>
-            <Flex gap={4} justify="flex-start" margin="4px 0 0 0">
-              <SalonTag
-                height={23}
-                content={diaryDetailData.friendly}
-                bg={theme.palette.Normal100}
-                colorCode={theme.palette.Normal700}
-                typo="Label2"
-              />
-              <SalonTag
-                height={23}
-                content={diaryDetailData.reaction}
-                bg={theme.palette.Normal100}
-                colorCode={theme.palette.Normal700}
-                typo="Label2"
-              />
-              <SalonTag
-                height={23}
-                content={diaryDetailData.behavior}
-                bg={theme.palette.Normal100}
-                colorCode={theme.palette.Normal700}
-                typo="Label2"
-              />
-            </Flex>
+            <TagListFlex gap={4} justify="flex-start" margin="4px 0 0 0">
+              <Flex justify="space-between">
+                <Text typo="Label2">🥰 미용사와의 친화력</Text>
+                <SalonTag
+                  height={23}
+                  content={diaryDetailData.friendly}
+                  bg={theme.palette.Normal100}
+                  colorCode={theme.palette.Normal700}
+                  typo="Label3"
+                  padding="10px"
+                />
+              </Flex>
+              <Flex justify="space-between">
+                <Text typo="Label2">✂️ 미용도구 반응</Text>
+                <SalonTag
+                  height={23}
+                  content={diaryDetailData.reaction}
+                  bg={theme.palette.Normal100}
+                  colorCode={theme.palette.Normal700}
+                  typo="Label3"
+                  padding="10px"
+                />
+              </Flex>
+              <Flex justify="space-between">
+                <Text typo="Label2">🐶 행동 밎 짖음</Text>
+                <SalonTag
+                  height={23}
+                  content={diaryDetailData.behavior}
+                  bg={theme.palette.Normal100}
+                  colorCode={theme.palette.Normal700}
+                  typo="Label3"
+                  padding="10px"
+                />
+              </Flex>
+            </TagListFlex>
           </Flex>
           <Seperator height="5px" />
           <RelativeFlex padding="25px 20px 117px 20px">
@@ -152,3 +169,7 @@ const TapeWrapper = styled.div`
   transform: translateX(-50%);
   z-index: 10;
 `;
+
+const TagListFlex = styled(Flex)`
+  flex-wrap: wrap;
+`;
diff --git a/apps/duri/src/pages/Diary/index.tsx b/apps/duri/src/pages/Diary/index.tsx
@@ -18,10 +18,9 @@ const PetDiary = () => {
 
   return (
     <RelativeMobile backgroundColor={theme.palette.Gray_White}>
-      <AbsoluteHeader title="일지" iconColor={theme.palette.White} />
-      <Flex
+      <AbsoluteHeader title="미용 일기" iconColor={theme.palette.White} />
+      <HalfBorderRadius
         backgroundColor={theme.palette.Normal500}
-        borderRadius={12}
         margin="-70px 0 0 0"
         padding="70px 28px 26px 28px"
       >
@@ -31,7 +30,7 @@ const PetDiary = () => {
           backgroundColor={theme.palette.Normal300}
           direction="column"
           align="start"
-          padding="24px 33px"
+          padding="24px 26px"
           gap={21}
         >
           <Text typo="Title2">미용 레포트</Text>
@@ -68,7 +67,7 @@ const PetDiary = () => {
             </Flex>
           </HeightFitFlex>
         </Flex>
-      </Flex>
+      </HalfBorderRadius>
 
       <Flex padding="32px 20px 124px 20px" direction="column" gap={32}>
         {historyData && historyData.length > 0 ? (
@@ -127,3 +126,7 @@ const AbsoluteHeader = styled(Header)`
 const BorderLeftFlex = styled(Flex)`
   border-left: 3px solid ${theme.palette.Gray50};
 `;
+
+const HalfBorderRadius = styled(Flex)`
+  border-radius: 0 0 12px 12px;
+`;
diff --git a/packages/ui/src/assets/Max.tsx b/packages/ui/src/assets/Max.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+const SvgMax = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 43 32"
+    {...props}
+  >
+    <g filter="url(#Max_svg__a)">
+      <path
+        fill="#F0FC98"
+        fillRule="evenodd"
+        d="M12 4a8 8 0 0 0-8 8v4a8 8 0 0 0 8 8h7.434L22 28l2.566-4H31a8 8 0 0 0 8-8v-4a8 8 0 0 0-8-8z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#BBD029"
+        d="M15.523 14.121v1.711c.92-.047 1.846-.129 2.72-.258l.105.961c-2.38.434-4.922.457-6.785.457l-.165-1.055c.827-.005 1.8-.011 2.825-.046v-1.77zM17.81 9.75v1.055h-2.262c.058 1.13.955 2.15 2.555 2.554l-.598 1.02c-1.254-.34-2.15-1.072-2.625-2.016-.469.996-1.354 1.758-2.613 2.098l-.621-.984c1.6-.44 2.478-1.483 2.554-2.672h-2.238V9.75h2.262V8.543h1.3V9.75zm2.367-1.3v10.605h-1.301V8.449zm10.664 0v10.593h-1.242v-5.402h-1.196v4.863h-1.195V8.648h1.195v3.95h1.196V8.449zm-4.828 1.253v1.055h-2.649v4.71c1.155-.011 2.104-.07 3.176-.269l.094 1.067c-1.277.257-2.39.293-3.867.304h-.715V9.703z"
+      />
+    </g>
+    <defs>
+      <filter
+        id="Max_svg__a"
+        width={43}
+        height={32}
+        x={0}
+        y={0}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={2} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3254_6761"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_3254_6761"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgMax;
diff --git a/packages/ui/src/assets/Min.tsx b/packages/ui/src/assets/Min.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+const SvgMin = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 43 32"
+    {...props}
+  >
+    <g filter="url(#Min_svg__a)">
+      <path
+        fill="#F0FC98"
+        fillRule="evenodd"
+        d="M12 4a8 8 0 0 0-8 8v4a8 8 0 0 0 8 8h7.434L22 28l2.566-4H31a8 8 0 0 0 8-8v-4a8 8 0 0 0-8-8z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#BBD029"
+        d="M15.523 14.121v1.711c.92-.047 1.846-.129 2.72-.258l.105.961c-2.38.434-4.922.457-6.785.457l-.165-1.055c.827-.005 1.8-.011 2.825-.046v-1.77zM17.81 9.75v1.055h-2.262c.058 1.13.955 2.15 2.555 2.554l-.598 1.02c-1.254-.34-2.15-1.072-2.625-2.016-.469.996-1.354 1.758-2.613 2.098l-.621-.984c1.6-.44 2.478-1.483 2.554-2.672h-2.238V9.75h2.262V8.543h1.3V9.75zm2.367-1.3v10.605h-1.301V8.449zm11.226 8.226v1.055h-9.68v-1.055h4.15v-2.45h1.288v2.45zm-4.207-6.809c0 1.606 1.606 3.188 3.832 3.54l-.562 1.077c-1.793-.34-3.258-1.365-3.961-2.754-.703 1.383-2.156 2.426-3.938 2.754l-.562-1.078c2.215-.351 3.797-1.945 3.808-3.539v-.773h1.383z"
+      />
+    </g>
+    <defs>
+      <filter
+        id="Min_svg__a"
+        width={43}
+        height={32}
+        x={0}
+        y={0}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={2} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3254_6767"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_3254_6767"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgMin;
diff --git a/packages/ui/src/assets/index.tsx b/packages/ui/src/assets/index.tsx
@@ -84,6 +84,8 @@ export { default as Save } from './Save';
 export { default as LinkIcon } from './LinkIcon';
 export { default as ToggleDisable } from './ToggleDisable';
 export { default as ToggleEnable } from './ToggleEnable';
+export { default as Max } from './Max';
+export { default as Min } from './Min';
 
 import Add from './Add';
 import AddNew from './AddNew';
@@ -125,7 +127,9 @@ import Location from './Location';
 import LocationShop from './LocationShop';
 import Lock from './Lock';
 import Magnifier from './Magnifier';
+import Max from './Max';
 import Menu from './Menu';
+import Min from './Min';
 import MyLocation from './MyLocation';
 import Notification from './Notification';
 import PaymentSuccess from './PaymentSuccess';
@@ -227,6 +231,8 @@ export const icons = {
   UploadIcon,
   Save,
   LinkIcon,
+  Max,
+  Min,
 };
 
 export default icons;
diff --git a/packages/ui/src/components/Chart/ResponsiveBarChart.tsx b/packages/ui/src/components/Chart/ResponsiveBarChart.tsx
diff --git a/packages/utils/src/apis/types/diary.ts b/packages/utils/src/apis/types/diary.ts
