Merge pull request #73 from Duri-Salon/feat(salon)/portfolio-ui

[feat] Salon 포트폴리오 UI 구현, Duri 요청서 관련 수정 및 CSS 수정
Duri-Salon · Dec 18, 2024 · a294a0d · a294a0d
2 parents 9d92a4a + e2c5da6
commit a294a0d
Show file tree

Hide file tree

Showing 40 changed files with 578 additions and 164 deletions.
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import AuthPage from '@duri/pages/Auth';
+import Home from '@duri/pages/Home';
 import MyPetPage from '@duri/pages/My/MyPet';
 import Onboarding from '@duri/pages/Onboarding';
 import { globalStyle } from '@duri-fe/ui';
@@ -11,7 +12,6 @@ import PetDiaryDetail from '@pages/Diary/DiaryDetail';
 import DooriAI from '@pages/DooriAI';
 import DooriAIResult from '@pages/DooriAI/AIResult';
 import AIStyling from '@pages/DooriAI/AIStyling';
-import Home from '@pages/Home';
 import LoginPage from '@pages/Login';
 import MyPage from '@pages/My';
 import MyHistoryPage from '@pages/My/MyHistory';

diff --git a/apps/duri/src/components/my/review/ReviewUserInfo.tsx b/apps/duri/src/components/my/review/ReviewUserInfo.tsx
@@ -80,18 +80,12 @@ export const ReviewUserInfo = ({
         <SingleLineText typo="Caption5" colorCode={theme.palette.Gray300}>
           {createdAt}
         </SingleLineText>
-        <WidthFitFlex onClick={handleClickMenu}>
+        <MenuWrapper onClick={handleClickMenu}>
           <Menu width={23} height={23} />
-        </WidthFitFlex>
+        </MenuWrapper>
       </WidthFitFlex>
       {isOpen && (
-        <MenuCard
-          direction="column"
-          borderRadius={8}
-          width={114}
-          height={67}
-          gap={8}
-        >
+        <MenuCard direction="column" borderRadius={8} width={114} height={67}>
           <MenuItem onClick={handleClickModifyButton}>
             <Text typo="Label3">수정하기</Text>
           </MenuItem>
@@ -101,27 +95,24 @@ export const ReviewUserInfo = ({
         </MenuCard>
       )}
       {isOpenModal && (
-        <Modal
-          isOpen={isOpenModal}
-          toggleModal={toggleModal}
-          title="후기를 삭제하시겠습니까?"
-          closeIcon={false}
-        >
+        <Modal isOpen={isOpenModal} toggleModal={toggleModal} closeIcon={false}>
           <Flex direction="column" gap={24}>
-            <Flex direction="column">
+            <Text typo="Body2">후기를 삭제하시겠습니까?</Text>
+            <Flex direction="column" margin="16px 0 40px" gap={4}>
               <Text typo="Caption2" colorCode={theme.palette.Gray400}>
                 후기 삭제 후
               </Text>
               <Text typo="Caption2" colorCode={theme.palette.Gray400}>
                 복구할 수 없습니다.
               </Text>
             </Flex>
-            <Flex>
+            <Flex gap={6}>
               <Button
                 width="104px"
                 height="47px"
                 padding="10px"
                 bg={theme.palette.Gray20}
+                borderRadius="8px"
                 typo="Body3"
                 onClick={toggleModal}
               >
@@ -132,7 +123,9 @@ export const ReviewUserInfo = ({
                 height="47px"
                 padding="10px"
                 bg={theme.palette.Alert}
+                borderRadius="8px"
                 typo="Body3"
+                fontColor={theme.palette.White}
                 onClick={handleClickDeleteConfirmButton}
               >
                 네
@@ -148,24 +141,29 @@ export const ReviewUserInfo = ({
 const Wrapper = styled(Flex)`
   position: relative;
 `;
+
+const SingleLineText = styled(Text)`
+  word-break: no-wrap;
+`;
+
+const MenuWrapper = styled(WidthFitFlex)`
+  cursor: pointer;
+`;
+
 const MenuCard = styled(Flex)`
   position: absolute;
   top: 37.4px;
   right: 9px;
   background-color: ${theme.palette.White};
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
 `;
-const SingleLineText = styled(Text)`
-  word-break: no-wrap;
-`;
 
 const MenuItem = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   cursor: pointer;
-  padding: 0 10px; // 좌우 여백을 추가하여 텍스트가 너무 붙지 않도록 조정
   &:hover {
     background-color: ${theme.palette.Gray_White};
   }

diff --git a/apps/duri/src/components/request/Calendar.tsx b/apps/duri/src/components/request/Calendar.tsx
@@ -5,7 +5,7 @@ import { Value } from 'react-calendar/dist/cjs/shared/types';
 
 import { Flex, theme } from '@duri-fe/ui';
 import { css } from '@emotion/react';
-import { format } from 'date-fns';
+import { addHours, format } from 'date-fns';
 
 interface CalendarProps {
   onSelect: (key: string, value: string) => void;
@@ -22,8 +22,11 @@ const MonthlyCalendar = ({ onSelect }: CalendarProps) => {
 
   const handleClickCalendar = (value: Value) => {
     if (value instanceof Date) {
-      setSelectedDate(value);
-      const stringDate = format(value, 'yyyy-MM-dd')
+      // 한국 시간으로 변환
+      const koreaDate = addHours(value, 9);
+      setSelectedDate(koreaDate);
+
+      const stringDate = format(value, 'yyyy-MM-dd');
       onSelect('day', stringDate);
     }
     console.log(value);

diff --git a/apps/duri/src/constants/pet.ts b/apps/duri/src/constants/pet.ts
@@ -17,7 +17,7 @@ export const PERSONALITY_OPTION_LIST = [
   },
   {
     key: 'character2',
-    label: '낯가려요.',
+    label: '낯가려요',
   },
   {
     key: 'character3',

diff --git a/apps/duri/src/constants/request.ts b/apps/duri/src/constants/request.ts
@@ -18,5 +18,5 @@ export const DEFAULT_REQUEST_INFO = {
   time16: false,
   time17: false,
   time18: false,
-  shopIds: [1, 2, 3],
+  shopIds: [5],
 };
diff --git a/apps/duri/src/pages/Home.tsx → apps/duri/src/pages/Home/index.tsx b/apps/duri/src/pages/Home.tsx → apps/duri/src/pages/Home/index.tsx
diff --git a/apps/duri/src/pages/Quotation/QuotationDetail.tsx b/apps/duri/src/pages/Quotation/QuotationDetail.tsx
@@ -144,16 +144,14 @@ const QuotationDetailPage = () => {
           <Flex direction="column" align="flex-start" margin="31px 0 17px">
             <Text typo="Title2">들어온 견적</Text>
             <Flex direction="column" margin="17px 0 0 0" gap={8}>
-              {quotationList?.map(
-                ({ requestId, shopName, totalPrice }) => (
-                  <IncomingQuotation
-                    key={requestId}
-                    requestId={Number(requestId)}
-                    salonName={shopName}
-                    price={totalPrice}
-                  />
-                ),
-              )}
+              {quotationList?.map(({ requestId, shopName, totalPrice }) => (
+                <IncomingQuotation
+                  key={requestId}
+                  requestId={Number(requestId)}
+                  salonName={shopName}
+                  price={totalPrice}
+                />
+              ))}
             </Flex>
           </Flex>
         }

diff --git a/apps/salon/package.json b/apps/salon/package.json
@@ -33,7 +33,8 @@
     "react-hook-form": "^7.54.0",
     "react-router-dom": "^7.0.1",
     "react-spring-bottom-sheet": "^3.4.1",
-    "react-toastify": "^10.0.6"
+    "react-toastify": "^10.0.6",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@types/navermaps": "^3.7.8",

diff --git a/apps/salon/src/App.tsx b/apps/salon/src/App.tsx
@@ -11,6 +11,8 @@ import MyPage from '@pages/My';
 import OnboardingPage from '@pages/Onboarding';
 import OnboardingPendingPage from '@pages/Onboarding/Pending';
 import StartPage from '@pages/Onboarding/StartPage';
+import PortfolioPage from '@pages/Portfolio';
+import PortfolioDetailPage from '@pages/Portfolio/PortfolioDetail';
 import QuotationPage from '@pages/Quotation';
 import ReplyPage from '@pages/Quotation/ReplyPage';
 import ReservationPage from '@pages/Quotation/ReservationPage';
@@ -39,6 +41,12 @@ function App() {
           <Route path="/quotation/reply/:requestId" element={<ReplyPage />} />
 
           <Route path="/my" element={<MyPage />} />
+
+          <Route path="/portfolio" element={<PortfolioPage />} />
+          <Route
+            path="/portfolio/:groomerId/:portfolioId"
+            element={<PortfolioDetailPage />}
+          />
         </Route>
       </Routes>
     </BrowserRouter>

diff --git a/apps/salon/src/components/my/info/OwnerInfo.tsx b/apps/salon/src/components/my/info/OwnerInfo.tsx
@@ -1,4 +1,11 @@
-import { Button, Flex, ProfileImage, Text, theme, WidthFitFlex } from '@duri-fe/ui';
+import {
+  Flex,
+  ProfileImage,
+  Text,
+  theme,
+  WidthFitFlex,
+} from '@duri-fe/ui';
+import styled from '@emotion/styled';
 
 interface OwnerInfoProps {
   shopId: number;
@@ -15,16 +22,20 @@ export const OwnerInfo = ({ image, shopName }: OwnerInfoProps) => {
           <br />
           안녕하세요!
         </Text>
-        <Button
-          bg={theme.palette.White}
-          typo="Caption3"
-          fontColor={theme.palette.Gray300}
-          padding='10px'
-        >
-          내 포트폴리오 보기
-        </Button>
+        <MoveToPortfolio href='/portfolio'>내 포트폴리오 보기</MoveToPortfolio>
       </WidthFitFlex>
-        <ProfileImage width={100} height={100} borderRadius={40} src={image} />
+      <ProfileImage width={100} height={100} borderRadius={40} src={image} />
     </Flex>
   );
 };
+
+const MoveToPortfolio = styled.a`
+  background-color: ${theme.palette.White};
+  ${theme.typo.Caption3}
+  color: ${theme.palette.Gray300};
+  padding: 10px;
+  text-align: center;
+  border-radius: 99px;
+  cursor: pointer;
+  text-decoration: none;
+`;
diff --git a/apps/salon/src/components/onboarding/InputSalon.tsx b/apps/salon/src/components/onboarding/InputSalon.tsx
@@ -225,6 +225,7 @@ const InputSalon = ({
                   placeholder="미용사 면허번호 입력"
                   isEssential
                   width={175}
+                  maxLength={10}
                   isNoBorder
                   shadow="0px 0px 4px 0px rgba(0, 0, 0, 0.10)"
                   helperText={
@@ -260,7 +261,7 @@ const InputSalon = ({
           <Button
             bg={theme.palette.Black}
             fontColor={theme.palette.White}
-            onSubmit={handleSubmit(onSubmitSalonData)}
+            onClick={handleSubmit(onSubmitSalonData)}
           >
             다음 단계
           </Button>

diff --git a/apps/salon/src/components/onboarding/InputSalonOwner.tsx b/apps/salon/src/components/onboarding/InputSalonOwner.tsx
@@ -362,8 +362,8 @@ const InputSalonOwner = ({
         <Button
           bg={theme.palette.Black}
           fontColor={theme.palette.White}
-          onClick={() => console.log(historyYear, historyMonths, license)}
-          onSubmit={handleSubmit(onSubmitSalonOwnerData)}
+          // onClick={() => console.log(historyYear, historyMonths, license)}
+          onClick={handleSubmit(onSubmitSalonOwnerData)}
         >
           다음 단계
         </Button>

diff --git a/apps/salon/src/pages/Home/index.tsx b/apps/salon/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BottomSheet } from 'react-spring-bottom-sheet';
 import { useNavigate } from 'react-router-dom';
 
@@ -22,13 +22,15 @@ import {
   useBottomSheet,
   useGetClosetGrooming,
   useGetDailySchedule,
+  useGetGroomersList,
   useGetHomeQuotationRequest,
   useGetHomeShopInfo,
   usePutGroomingComplete,
   usePutGroomingNoshow,
 } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 import { RadioButton } from '@salon/components/home/RadioButton';
+import useGroomerStore from '@salon/stores/groomerStore';
 
 import ClosetGrooming from '@components/home/ClosetGrooming';
 import DailyScheduleItem from '@components/home/DailyScheduleItem';
@@ -49,6 +51,10 @@ const Home = () => {
 
   const [completeToggle, setCompleteToggle] = useState<number | null>(null);
 
+  //홈 진입 시 groomerId 전역변수로 저장
+  const { data: groomersListInfo } = useGetGroomersList({});
+  const { setGroomerId } = useGroomerStore();
+
   const { data: shopInfoData } = useGetHomeShopInfo({});
   const { data: closetGroomingData, isPending: closetGroomingPending } =
     useGetClosetGrooming();
@@ -72,6 +78,11 @@ const Home = () => {
     }
   };
 
+  //로그인 후 미용사 id를 전역변수로 저장 for 포트폴리오
+  useEffect(() => {
+    if (groomersListInfo) setGroomerId(groomersListInfo[0].id);
+  }, [groomersListInfo]);
+
   return (
     <MobileLayout>
       <HomeHeaderContainer