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

[feat] 메인 홈 슬라이더 css 변경
Duri-Salon · Dec 5, 2024 · 35fc7ba · 35fc7ba
2 parents d1edc1e + bf6bd24
commit 35fc7ba
Show file tree

Hide file tree

Showing 29 changed files with 438 additions and 165 deletions.
diff --git a/apps/duri/package.json b/apps/duri/package.json
@@ -22,6 +22,7 @@
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "axios": "^1.7.7",
+    "date-fns": "^4.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",

diff --git a/apps/duri/src/assets/types/reservation.ts b/apps/duri/src/assets/types/reservation.ts
@@ -0,0 +1,12 @@
+export interface UpcomingReservationProps {
+    reservationDate: Date;
+    salonImage:string;
+    salonName: string;
+    salonAddress: string;
+    totalPrice: number;
+    salonPhone: string;
+}
+
+export interface LastReservationProps {
+    reservationDate: Date;
+}
diff --git a/apps/duri/src/assets/types/shop.ts b/apps/duri/src/assets/types/shop.ts
@@ -1,12 +1,12 @@
 export interface RegularShopProps {
-    shopIdx: string;
-    shopName:string;
-    shopImg: string;
-    shopScore?: number;
-    shopReview?: number;
-  }
+  salonIdx: string;
+  salonName:string;
+  salonImage: string;
+  salonScore?: number;
+  salonReviewCount?: number;
+}
 
 export interface RecommendeShopProps extends RegularShopProps{
-    shopAddress: string;
-    shopTag: string[];
+  salonAddress: string;
+  salonTag: string[];
 }
diff --git a/apps/duri/src/components/home/Home.tsx b/apps/duri/src/components/home/Home.tsx
@@ -1,15 +1,62 @@
 import { SetStateAction, useState } from 'react';
 import React from 'react';
 
+import {
+  LastReservationProps,
+  UpcomingReservationProps,
+} from '@duri/assets/types/reservation';
 import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui';
 import styled from '@emotion/styled';
+import { differenceInDays } from 'date-fns';
 import {
   Swiper as OriginalSwiper,
   SwiperSlide as OriginalSwiperSlide,
 } from 'swiper/react';
 
-const CarouselHome = () => {
+import LastReservation from './reservation/lastReservation';
+import UpcomingReservation from './reservation/upcomingReservation';
+
+const CarouselHome = ({
+  upcomingReservation,
+  lastReservation,
+}: {
+  upcomingReservation?: UpcomingReservationProps;
+  lastReservation?: LastReservationProps;
+}) => {
+  console.log(upcomingReservation, lastReservation)
   const [swiperIndex, setSwiperIndex] = useState<number>(0); // 슬라이드 인덱스 상태
+  const currentDate = new Date();
+  let daysDifference;
+  if (lastReservation)
+    daysDifference = differenceInDays(
+      currentDate,
+      lastReservation.reservationDate,
+    ); // 일수 차이 계산
+
+  const slides = [
+    upcomingReservation && (
+      <UpcomingReservation reservationDate={upcomingReservation.reservationDate}
+      salonAddress={upcomingReservation.salonAddress}
+      salonName={upcomingReservation.salonName}
+      salonImage={upcomingReservation.salonImage}
+      totalPrice={upcomingReservation.totalPrice}
+      salonPhone={upcomingReservation.salonPhone}
+      />
+    ),
+    lastReservation && daysDifference && (
+      <LastReservation daysDifference={daysDifference} />
+    ),
+    // 여기는 이제 아무것도 이력이 없는 유저한테 띄울 컴포넌트가 드가야 함!
+    // (!upcomingReservation && !lastReservation) ?? (
+    //   <Wrapper
+    //     borderRadius={12}
+    //     padding="27px 20px"
+    //     backgroundColor={theme.palette.White}
+    //   >
+    //     <Text>예약하시오</Text>
+    //   </Wrapper>
+    // ),
+  ];
 
   return (
     <HeightFitFlex direction="column" align="flex-start">
@@ -19,37 +66,35 @@ const CarouselHome = () => {
         margin="18px 0 23px 25px"
       >
         미용한지 <br />
-        12일이 지났어요 <br />
+        {daysDifference}일이 지났어요 <br />
         매일매일 빗질 잘 해주세요!
       </Text>
-      {/* Swiper를 감싸는 Wrapper */}
+
       <CustomSwiperWrapper>
         <CustomSwiper
-          slidesPerView={1.5}
+          slidesPerView={1.18}
           spaceBetween={8}
           centeredSlides={true}
           onSlideChange={(e: { realIndex: SetStateAction<number> }) => {
             setSwiperIndex(e.realIndex);
           }} // 슬라이드 변경 완료 시 인덱스 업데이트
         >
-          {[0, 1, 2].map((i) => (
-            <CustomSwiperSlide key={i} isActive={swiperIndex === i}>
-              <Card backgroundColor={theme.palette.White} borderRadius={12}>
-                카드 {i}
-              </Card>
+          {slides.map((slide, index) => (
+            <CustomSwiperSlide isActive={index === swiperIndex} key={index}>
+              {slide}
             </CustomSwiperSlide>
           ))}
         </CustomSwiper>
       </CustomSwiperWrapper>
       <Flex margin="9px 0 0 0" gap={4}>
         {/* Bullets */}
-        {[0, 1, 2].map((i) => (
+        {slides.map((i, index) => (
           <Bullet
-            key={i}
-            width={swiperIndex === i ? '18px' : '5px'}
+            key={index}
+            width={swiperIndex === index ? '18px' : '5px'}
             height="4px"
             bg={
-              swiperIndex === i
+              swiperIndex === index
                 ? theme.palette.Normal700
                 : theme.palette.Gray100
             }
@@ -70,6 +115,8 @@ const CustomSwiperWrapper = styled(Flex)`
 // Swiper를 커스텀한 스타일 컴포넌트
 const CustomSwiper = styled(OriginalSwiper)`
   width: 100%;
+  max-height: 171px;
+  min-height: 141px;
   padding: 0 16px;
   .swiper-wrapper {
     display: flex;
@@ -89,13 +136,9 @@ const CustomSwiperSlide = styled(OriginalSwiperSlide)<{ isActive: boolean }>`
     isActive ? '317px !important' : '316px !important'};
 `;
 
-const Card = styled(Flex)`
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
-`;
+
 
 const Bullet = styled(Button)`
   padding: 0;
   transition: all 0.3s ease;
 `;
-
diff --git a/apps/duri/src/components/home/RecommendedShop.tsx b/apps/duri/src/components/home/RecommendedShop.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { RecommendeShopProps } from '@duri/assets/types/shop';
 import { Flex, Text, theme } from '@duri-fe/ui';
 
+import { RecommendeShopProps } from '../../assets/types/shop';
+
 import { ShopVertical } from './ShopVertical';
 
 const RecommendedShop = ({ shopList }: { shopList: RecommendeShopProps[] }) => {

diff --git a/apps/duri/src/components/home/ShopHorizontal.tsx b/apps/duri/src/components/home/ShopHorizontal.tsx
@@ -21,13 +21,13 @@ export const ShopHorizontal = ({ shopList }: { shopList: RegularShopProps[] }) =
     <Flex direction="column" gap={15} margin="28px 0 0 0">
       {shopList &&
         shopList.map((shop: RegularShopProps) => (
-          <HeightFitFlex key={shop.shopIdx} justify="flex-start" gap={15}>
+          <HeightFitFlex key={shop.salonIdx} justify="flex-start" gap={15}>
             <Image
               width={100}
               height={100}
               borderRadius={8}
-              src={shop.shopImg}
-              onClick={() => handleClickShop(shop.shopIdx)}
+              src={shop.salonImage}
+              onClick={() => handleClickShop(shop.salonIdx)}
             />
             <Flex
               direction="column"
@@ -38,17 +38,17 @@ export const ShopHorizontal = ({ shopList }: { shopList: RegularShopProps[] }) =
               <Wrapper direction='column' align='flex-start'>
                 {/* onClick함수 추가해야 함!!! */}
                 <Flex justify='flex-start' gap={2}>
-                  <Text typo='Title3'>{shop.shopName}</Text>
+                  <Text typo='Title3'>{shop.salonName}</Text>
                   <NextArrow width={20} height={20} />
                 </Flex>
                 <HeightFitFlex align='flex-start' gap={7}>
                   <Star width={14} height={14} />
                   <Flex justify='flex-start' gap={3}>
                   <Text typo='Label1'>
-                    {shop.shopScore}
+                    {shop.salonScore}
                   </Text>
                   <Text typo='Label3' justify='flex-start'>
-                  ({shop.shopReview})
+                  ({shop.salonReviewCount})
                   </Text>
                   </Flex>
                 </HeightFitFlex>

diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx
@@ -17,38 +17,38 @@ export const ShopVertical = ({
       {shopList &&
         shopList.map((shop: RecommendeShopProps) => (
           <Wrapper
-            key={shop.shopIdx}
+            key={shop.salonIdx}
             direction="column"
             align="flex-start"
             gap={6}
             width={152}
             height={184}
             padding="3px 3px 13px 3px"
-            onClick={() => handleClickShop(shop.shopIdx)}
+            onClick={() => handleClickShop(shop.salonIdx)}
           >
             <Image
               width={146}
               height={81}
               borderRadius={8}
-              src={shop.shopImg}
+              src={shop.salonImage}
             />
             <HeightFitFlex direction='column' align='flex-start'>
-              <Text typo="Title3" margin='13px 0 11px 6px'>{shop.shopName}</Text>
+              <Text typo="Title3" margin='13px 0 11px 6px'>{shop.salonName}</Text>
               <Text typo="Caption4" colorCode={theme.palette.Gray500} margin='0 0 12px 6px'>
-                {shop.shopAddress}
+                {shop.salonAddress}
               </Text>
               <HeightFitFlex justify="flex-start" gap={3} margin='0 0 0 6px'>
-                {shop.shopTag.map((shopTag: string) => (
+                {shop.salonTag?.map((tag: string) => (
                   <Tag
-                    key={shopTag}
+                    key={tag}
                     typo="Caption2"
                     bg={theme.palette.Gray50}
                     fontColor={theme.palette.Gray500}
                     width="fit-content"
                     height="19px"
                     borderRadius="2px"
                   >
-                    {shopTag}
+                    {tag}
                   </Tag>
                 ))}
               </HeightFitFlex>

diff --git a/apps/duri/src/components/home/reservation/lastReservation.tsx b/apps/duri/src/components/home/reservation/lastReservation.tsx
@@ -0,0 +1,40 @@
+import { Flex, StatusBar, theme, WidthFitFlex } from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+const LastReservation = ({ daysDifference }: { daysDifference: number }) => {
+    const current = Math.floor(daysDifference / 6);
+  return (
+    <Wrapper
+      direction="column"
+      borderRadius={12}
+      padding='27px 20px'
+      backgroundColor={theme.palette.White}
+      justify="flex-start"
+      align="flex-start"
+    >
+      <Label
+        width="110px"
+        height="26px"
+        backgroundColor={theme.palette.Normal500}
+      >
+        미용한지 {daysDifference}일째
+      </Label>
+      <Flex>
+      <StatusBar current={current} total={4} mode='main' />
+      </Flex>
+    </Wrapper>
+  );
+};
+
+export default LastReservation;
+
+const Wrapper = styled(Flex)`
+  flex-shrink: 0;
+`;
+
+const Label = styled(WidthFitFlex)`
+  padding: 9px 10px;
+  color: ${theme.palette.Normal800};
+  border-radius: 99px;
+  font-size: ${theme.typo.Label3};
+`;