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

[chore] 기본 사항 수정
Duri-Salon · Dec 18, 2024 · d31cbba · d31cbba
2 parents 23e5f4a + 095a2ab
commit d31cbba
Show file tree

Hide file tree

Showing 34 changed files with 281 additions and 180 deletions.
diff --git a/apps/admin/src/components/home/ShopBox.tsx b/apps/admin/src/components/home/ShopBox.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import {
   DownArrow,
@@ -30,6 +30,15 @@ export const ShopInfoBox = ({
   license,
 }: ShopInfoBoxType) => {
   const [isBoxOpen, setIsBoxOpen] = useState<boolean>(false);
+  const [careerYear, setCareerYear] = useState<number>(0);
+  const [careerMonth, setCareerMonth] = useState<number>(0);
+
+  useEffect(() => {
+    if (history !== 0) {
+      setCareerYear(Math.floor(history / 12));
+      setCareerMonth(history % 12);
+    }
+  }, [history]);
 
   const handleToggleButtonClick = () => {
     setIsBoxOpen(!isBoxOpen);
@@ -81,7 +90,7 @@ export const ShopInfoBox = ({
 
           <ShopInfoLine>
             <Text typo="Label2">경력</Text>
-            <Text typo="Caption4">{history} 년</Text>
+            <Text typo="Caption4">{`${careerYear ? `${careerYear}년` : ''} ${careerMonth ? `${careerMonth}개월` : ''}`}</Text>
           </ShopInfoLine>
 
           <ShopInfoLine align="start">

diff --git a/apps/admin/src/pages/Home/index.tsx b/apps/admin/src/pages/Home/index.tsx
@@ -19,35 +19,47 @@ import styled from '@emotion/styled';
 const Home = () => {
   const { data: requestShopListData } = UseGetRequestShopList({});
   const { data: approvedShopListData } = UseGetApprovedShopList({});
-  const { mutate: mutateApproveShop } = UsePostApproveRequest({
-    options: {
-      onSuccess: () => {
-        console.log('Shop Approved successfully!');
+  const { mutate: mutateApproveShop, isSuccess: approvedSuccess } =
+    UsePostApproveRequest({
+      options: {
+        onSuccess: () => {
+          console.log('Shop Approved successfully!');
+        },
+        onError: (err) => {
+          console.error('Error creating user:', err);
+        },
       },
-      onError: (err) => {
-        console.error('Error creating user:', err);
+    });
+  const { mutate: mutateRejectShop, isSuccess: rejectedSuccess } =
+    UsePostRejectRequest({
+      options: {
+        onSuccess: () => {
+          console.log('Shop Rejected successfully!');
+        },
+        onError: (err) => {
+          console.error('Error creating user:', err);
+        },
       },
-    },
-  });
-  const { mutate: mutateRejectShop } = UsePostRejectRequest({
-    options: {
-      onSuccess: () => {
-        console.log('Shop Rejected successfully!');
-      },
-      onError: (err) => {
-        console.error('Error creating user:', err);
-      },
-    },
-  });
+    });
 
   const handleApproveButtonClick = async (shopId: number) => {
     mutateApproveShop({ shopId: shopId });
   };
 
+  if (approvedSuccess) {
+    window.alert('성공적으로 수락하였습니다.');
+    window.location.reload();
+  }
+
   const handleRejectButtonClick = async (shopId: number) => {
     mutateRejectShop({ shopId: shopId });
   };
 
+  if (rejectedSuccess) {
+    window.alert('성공적으로 거절하였습니다.');
+    window.location.reload();
+  }
+
   return (
     <MobileLayout>
       <Flex direction="column" justify="start" padding="72px 21px">
@@ -68,7 +80,7 @@ const Home = () => {
             requestShopListData.map((shop) => (
               <>
                 <ShopInfoBox
-                  key={shop.shop.shopId}
+                  key={shop.shop.shopName}
                   shopName={shop.shop.shopName}
                   shopAddress={shop.shop.shopAddress}
                   businessRegistration={shop.shop.businessRegistrationNumber}
@@ -109,7 +121,7 @@ const Home = () => {
             approvedShopListData.map((shop) => {
               return (
                 <ShopInfoBox
-                  key={shop.shop.shopId}
+                  key={shop.shop.shopName}
                   shopName={shop.shop.shopName}
                   shopAddress={shop.shop.shopAddress}
                   businessRegistration={shop.shop.businessRegistrationNumber}

diff --git a/apps/admin/vite.config.ts.timestamp-1734531572622-60e0f4a382fa.mjs b/apps/admin/vite.config.ts.timestamp-1734531572622-60e0f4a382fa.mjs
@@ -0,0 +1,22 @@
+// vite.config.ts
+import react from "file:///Users/binary_ro/Documents/Github/Duri-FE/.yarn/__virtual__/@vitejs-plugin-react-virtual-4e7212b94d/4/.yarn/berry/cache/@vitejs-plugin-react-npm-4.3.4-e5f654de44-10c0.zip/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import { defineConfig } from "file:///Users/binary_ro/Documents/Github/Duri-FE/.yarn/__virtual__/vite-virtual-4c119f49ef/4/.yarn/berry/cache/vite-npm-5.4.11-9da365ef2b-10c0.zip/node_modules/vite/dist/node/index.js";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      { find: "@admin", replacement: "/src" },
+      { find: "@pages", replacement: "/src/pages" },
+      { find: "@components", replacement: "/src/components" },
+      { find: "@styles", replacement: "/src/styles" },
+      { find: "@assets", replacement: "/src/assets" }
+    ]
+  },
+  server: {
+    port: 3002
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYmluYXJ5X3JvL0RvY3VtZW50cy9HaXRodWIvRHVyaS1GRS9hcHBzL2FkbWluXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvYmluYXJ5X3JvL0RvY3VtZW50cy9HaXRodWIvRHVyaS1GRS9hcHBzL2FkbWluL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9iaW5hcnlfcm8vRG9jdW1lbnRzL0dpdGh1Yi9EdXJpLUZFL2FwcHMvYWRtaW4vdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3QnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiBbXG4gICAgICB7IGZpbmQ6ICdAYWRtaW4nLCByZXBsYWNlbWVudDogJy9zcmMnIH0sXG4gICAgICB7IGZpbmQ6ICdAcGFnZXMnLCByZXBsYWNlbWVudDogJy9zcmMvcGFnZXMnIH0sXG4gICAgICB7IGZpbmQ6ICdAY29tcG9uZW50cycsIHJlcGxhY2VtZW50OiAnL3NyYy9jb21wb25lbnRzJyB9LFxuICAgICAgeyBmaW5kOiAnQHN0eWxlcycsIHJlcGxhY2VtZW50OiAnL3NyYy9zdHlsZXMnIH0sXG4gICAgICB7IGZpbmQ6ICdAYXNzZXRzJywgcmVwbGFjZW1lbnQ6ICcvc3JjL2Fzc2V0cycgfSxcbiAgICBdLFxuICB9LFxuICBzZXJ2ZXI6IHtcbiAgICBwb3J0OiAzMDAyLFxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQThVLE9BQU8sV0FBVztBQUNoVyxTQUFTLG9CQUFvQjtBQUU3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQUEsRUFDakIsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLE1BQ0wsRUFBRSxNQUFNLFVBQVUsYUFBYSxPQUFPO0FBQUEsTUFDdEMsRUFBRSxNQUFNLFVBQVUsYUFBYSxhQUFhO0FBQUEsTUFDNUMsRUFBRSxNQUFNLGVBQWUsYUFBYSxrQkFBa0I7QUFBQSxNQUN0RCxFQUFFLE1BQU0sV0FBVyxhQUFhLGNBQWM7QUFBQSxNQUM5QyxFQUFFLE1BQU0sV0FBVyxhQUFhLGNBQWM7QUFBQSxJQUNoRDtBQUFBLEVBQ0Y7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNSO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -38,6 +38,7 @@ import PrivateRoute from '@components/PrivateRoute';
 import 'react-spring-bottom-sheet/dist/style.css';
 
 import MyPetRegisterPage from './pages/My/MyPetRegister';
+import ShopDetail from './pages/Shop/ShopDetail';
 
 function App() {
   return (
@@ -49,7 +50,7 @@ function App() {
 
         <Route path="/" element={<Home />} />
         <Route path="/shop" element={<Shop />} />
-        <Route path="shop/:shopId " />
+        <Route path="/shop/:shopId" element={<ShopDetail />} />
 
         <Route path="/ai" element={<DooriAI />} />
         <Route path="/ai/styling" element={<AIStyling />} />

diff --git a/apps/duri/src/assets/images/gifs/Final_renderfile.gif b/apps/duri/src/assets/images/gifs/Final_renderfile.gif
diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { RecommendedShopType } from '@duri/assets/types/shop';
 import { Button, Flex, HeightFitFlex, Image, Text, theme } from '@duri-fe/ui';
+import { getShortenedAddress } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 
 export const ShopVertical = ({
@@ -50,25 +51,27 @@ export const ShopVertical = ({
                 colorCode={theme.palette.Gray500}
                 margin="0 0 12px 6px"
               >
-                {shop.address}
+                {getShortenedAddress(shop.address)}
               </Text>
               <HeightFitFlex
                 direction="column"
                 align="flex-start"
                 gap={3}
                 margin="0 0 0 6px"
               >
-                <Tag
-                  key="tag1"
-                  typo="Caption5"
-                  bg={theme.palette.Gray50}
-                  fontColor={theme.palette.Gray500}
-                  width="fit-content"
-                  height="19px"
-                  borderRadius="2px"
-                >
-                  {shop.shopTag1}
-                </Tag>
+                {
+                  <Tag
+                    key="tag1"
+                    typo="Caption5"
+                    bg={theme.palette.Gray50}
+                    fontColor={theme.palette.Gray500}
+                    width="fit-content"
+                    height="19px"
+                    borderRadius="2px"
+                  >
+                    {shop.shopTag1}
+                  </Tag>
+                }
                 <Tag
                   key="tag2"
                   typo="Caption5"

diff --git a/apps/duri/src/components/shop/ShopInfo.tsx b/apps/duri/src/components/shop/ShopInfo.tsx
@@ -26,9 +26,9 @@ import {
   UseGetShopReviewList,
 } from '@duri-fe/utils';
 import styled from '@emotion/styled';
+import { format, parse } from 'date-fns';
 
 import { SendRequestQBox } from './SendRequesQBox';
-import { ShopPhotos } from './ShopPhotos';
 import { ShopReviewBox } from './ShopReviewBox';
 
 interface ShopInfoProps {
@@ -63,6 +63,10 @@ export const ShopInfo = ({
 
   if (!shopData) return null;
 
+  const handleKaKaoButtonClick = (kakaoUrl: string) => {
+    window.location.href = kakaoUrl;
+  };
+
   const {
     shopDetail: {
       shopId,
@@ -76,6 +80,8 @@ export const ShopInfo = ({
       reviewCnt,
       distance,
       tags,
+      shopInfo,
+      kakaoTalkUrl,
     },
     groomerProfileDetail: {
       id: groomerId,
@@ -84,12 +90,13 @@ export const ShopInfo = ({
       age: groomerAge,
       history: groomerHistory,
       image: groomerImage,
-      info: groomerInfo,
       license: groomerLicense,
     },
-    shopImages,
   } = shopData;
 
+  const openTime = parse(shopOpenTime, 'HH:mm:ss', new Date());
+  const closeTime = parse(shopCloseTime, 'HH:mm:ss', new Date());
+
   return (
     shopData && (
       <>
@@ -107,7 +114,9 @@ export const ShopInfo = ({
           {isForBottomSheet ? (
             <DownArrow width={42} />
           ) : (
-            <BeforeArrow width={42} />
+            <HeightFitFlex padding="12px 4px 8px" justify="start">
+              <BeforeArrow width={42} />
+            </HeightFitFlex>
           )}
         </HeightFitFlex>
         <ShopInfoContainer
@@ -149,8 +158,7 @@ export const ShopInfo = ({
                 <Flex gap={10} justify="flex-start" margin="0 0 0 4px">
                   <Time width={16} />
                   <Text typo="Caption3">
-                    {shopOpenTime.hour}:{shopOpenTime.minute} ~{' '}
-                    {shopCloseTime.hour}:{shopCloseTime.minute}
+                    {format(openTime, 'HH:mm')}~ {format(closeTime, 'HH:mm')}
                   </Text>
                 </Flex>
 
@@ -167,7 +175,9 @@ export const ShopInfo = ({
                 </TagList>
               </WidthFitFlex>
               <WidthFitFlex gap={8} padding="0 4px 0">
-                <IconCircle>
+                <IconCircle
+                  onClick={() => handleKaKaoButtonClick(kakaoTalkUrl)}
+                >
                   <Chat width={21} color={theme.palette.Normal700} />
                 </IconCircle>
                 <IconCircle onClick={openSheet}>
@@ -177,6 +187,7 @@ export const ShopInfo = ({
             </HeightFitFlex>
           </HeightFitFlex>
 
+          {/** 인삿말 */}
           <HeightFitFlex
             justify="flex-start"
             backgroundColor={theme.palette.Gray_White}
@@ -185,7 +196,7 @@ export const ShopInfo = ({
             margin="26px 0 0 0"
           >
             <TextHeight typo="Caption2" colorCode={theme.palette.Gray500}>
-              {groomerInfo}
+              {shopInfo ?? '등록된 소개글이 없어요.'}
             </TextHeight>
           </HeightFitFlex>
 
@@ -210,15 +221,15 @@ export const ShopInfo = ({
           </HeightFitFlex>
 
           {/**샵 내부 */}
-          <HeightFitFlex
+          {/* <HeightFitFlex
             direction="column"
             gap={24}
             margin="36px 0 0 0"
             align="flex-start"
           >
             <Text typo="Title3">샵 내부</Text>
             <ShopPhotos images={shopImages} />
-          </HeightFitFlex>
+          </HeightFitFlex> */}
 
           {/**리뷰 */}
           <HeightFitFlex
@@ -241,7 +252,9 @@ export const ShopInfo = ({
               ))
             ) : (
               <Flex height={48}>
-                <Text>아직 등록된 리뷰가 없습니다.</Text>
+                <Text colorCode={theme.palette.Gray700}>
+                  등록된 리뷰가 없습니다.
+                </Text>
               </Flex>
             )}
           </HeightFitFlex>

diff --git a/apps/duri/src/components/shop/ShopLine.tsx b/apps/duri/src/components/shop/ShopLine.tsx
@@ -13,7 +13,7 @@ import {
   theme,
   WidthFitFlex,
 } from '@duri-fe/ui';
-import { useBottomSheet } from '@duri-fe/utils';
+import { getShortenedAddress, useBottomSheet } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 
 import { ShopInfo } from './ShopInfo';
@@ -82,7 +82,7 @@ export const ShopLine = ({
 
         <TextLine typo="Caption3" colorCode={theme.palette.Gray400}>
           <MarkText>{`${distance}m | `}</MarkText>
-          {address}
+          {getShortenedAddress(address)}
         </TextLine>
         <Flex>
           <Flex direction="column" gap={8}>