Merge pull request #48 from Duri-Salon/feat(duri)/q-post-ui(DURI-107)

[feat] 지도 주변 API 수정 및 가게, 디자이너 상세 페이지 초안 / useModal, useBottomSheet 훅, 컴포넌트 구현
Duri-Salon · Dec 8, 2024 · 5e386da · 5e386da
2 parents f477951 + 014f9f5
commit 5e386da
Show file tree

Hide file tree

Showing 50 changed files with 894 additions and 227 deletions.
diff --git a/apps/duri/index.html b/apps/duri/index.html
@@ -9,6 +9,12 @@
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css"
     />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin="anonymous"
+      href="https://ownglyph-ryryu.vercel.app/style.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>두리묭실</title>
   </head>

diff --git a/apps/duri/package.json b/apps/duri/package.json
@@ -17,6 +17,7 @@
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-query-devtools": "^5.62.2",
     "@tosspayments/tosspayments-sdk": "^2.3.2",
     "@types/node": "^22.10.1",
     "@typescript-eslint/eslint-plugin": "^8.15.0",

diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -15,13 +15,15 @@ import QuotationPage from '@pages/Quotation';
 import RequestPage from '@pages/Request';
 import Shop from '@pages/Shop';
 
+import Portfolio from './pages/Shop/Portfolio';
+import ShopDetail from './pages/Shop/ShopDetail';
+
 function App() {
   return (
     <BrowserRouter>
       <Global styles={globalStyle} />
       <Routes>
         <Route path="/" element={<Home />} />
-
         <Route path="/login" element={<LoginPage />} />
         <Route path="/auth" element={<AuthPage />} />
 
@@ -33,6 +35,8 @@ function App() {
         <Route path="/payment/fail" element={<FailPage />} />
         <Route path="/shop/request" element={<RequestPage />} />
         <Route path="/shop" element={<Shop />} />
+        <Route path="/shop/:shopId" element={<ShopDetail />} />
+        <Route path="/portfolio/:designerId" element={<Portfolio />} />
 
         <Route path="/quotation" element={<QuotationPage />} />
       </Routes>

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 {
   salonIdx: string;
-  salonName:string;
+  salonName: string;
   salonImage: string;
   salonScore?: number;
   salonReviewCount?: number;
 }
 
-export interface RecommendeShopProps extends RegularShopProps{
+export interface RecommendeShopProps extends RegularShopProps {
   salonAddress: string;
   salonTag: string[];
-}
+}
diff --git a/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx b/apps/duri/src/components/onboarding/PetPersonalityInfo.tsx
@@ -47,7 +47,11 @@ const PetPersonalityInfo = ({
         {name}는 <br />
         어떤 성격을 가지고 있나요?
       </Text>
-      <Text typo="Caption1" justify="flex-start" colorCode={theme.palette.Gray500}>
+      <Text
+        typo="Caption1"
+        justify="flex-start"
+        colorCode={theme.palette.Gray500}
+      >
         입력된 성격은 MY에서 변경가능해요.
       </Text>
       <Controller
@@ -58,12 +62,12 @@ const PetPersonalityInfo = ({
             value.length > 0 || '성격에 대해 알려주세요.',
         }}
         render={() => (
-          <FitFlex justify='flex-start' gap={8} margin='47px 0'>
+          <FitFlex justify="flex-start" gap={8} margin="47px 0">
             {personalityOptions.map((value) => (
               <Button
                 key={value}
-                typo='Body3'
-                width='fit-content'
+                typo="Body3"
+                width="fit-content"
                 height="43px"
                 bg={
                   personalityList.includes(value)

diff --git a/apps/duri/src/components/payment/Widget.tsx b/apps/duri/src/components/payment/Widget.tsx
@@ -13,7 +13,7 @@ import { QuotationProps } from '../../assets/types/quotation';
 import PaymentInfo from './Info';
 
 const clientKey = import.meta.env.VITE_CLIENT_KEY;
-const customerKey = crypto.randomUUID(); //user Idx값으로 대체하기!
+const customerKey = '1'; //user Idx값으로 대체하기!
 
 interface QuotationInfo {
   quotationInfo: QuotationProps;

diff --git a/apps/duri/src/components/shop/DesignerInfo.tsx b/apps/duri/src/components/shop/DesignerInfo.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Approve, Flex, Text } from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+export const DesignerInfo = () => {
+  const navigate = useNavigate();
+  const moveToDetail = (designerId: number | string) => {
+    navigate(`/portfolio/${designerId}`);
+  };
+  return (
+    <Flex direction="column" align="flex-start" onClick={() => moveToDetail(1)}>
+      <DesignerImg
+        src={
+          'https://s3-alpha-sig.figma.com/img/06a3/855c/666ff7b8f7c18c7121369ac3b3132d84?Expires=1734307200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=kHnZaYFZ9lw11funsRnXLgiFg5Rwsg7mFn7dItWEmC-GWXDmtViBiw1KYXRDvjiutCH3s32c4r2kyPD10nx86gKJxZJWeJMVAfXaTRJVMlkBDHRajnbgbaQXd1s7JKwyNMZVxf64jzNBjyrhdCPZJk8npT8Ubb-OKkhsHGIq2zn9soSWjKqcmV9nsclfu6hFEnQlnUi77tBHKLROr8baKtikIlyYVqvOencSVUwSi~tU2Yq4DE3zhHyt9oVhIFwPcxAmS8M8d245IgP4Oehq2FUHEPyxExXdlVW6iZdRSas0SojaIv3ksehA3EH-8IMraM1RQGixX~iXhGZj6OPPtg__'
+        }
+      />
+
+      <Text>김댕댕</Text>
+      <Flex justify="flex-start">
+        <Text>경력 5년</Text>,<Text>30세</Text>,<Text>남성</Text>
+      </Flex>
+      <Flex direction="column">
+        {['반려견 스타일리스트', '펫테이너'].map((item, idx) => (
+          <Flex key={idx} justify="flex-start">
+            <Text>{item}</Text>
+            <Approve width={11} height={10} />
+          </Flex>
+        ))}
+      </Flex>
+    </Flex>
+  );
+};
+
+const DesignerImg = styled.img`
+  display: flex;
+  width: 160px;
+  height: 160px;
+  border-radius: 8px;
+  object-fit: cover;
+`;
diff --git a/apps/duri/src/components/shop/MapInfo.tsx b/apps/duri/src/components/shop/MapInfo.tsx
@@ -107,7 +107,7 @@ const MapWrapper = styled(Flex)`
 const LocationBtn = styled(Flex)`
   position: absolute;
   height: fit-content;
-  max-width: 480px;
+  max-width: 375px;
   bottom: 120px;
   z-index: 10;
 `;
diff --git a/apps/duri/src/components/shop/ShopInfo.tsx b/apps/duri/src/components/shop/ShopInfo.tsx
@@ -0,0 +1,167 @@
+import salonDefault from '@assets/images/pngs/salonDefault.png';
+import {
+  Call,
+  FilledLocation,
+  Flex,
+  HeightFitFlex,
+  Star,
+  Text,
+  theme,
+  Time,
+  WidthFitFlex,
+} from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+import { DesignerInfo } from './DesignerInfo';
+import { ShopPhotos } from './ShopPhotos';
+
+export const ShopInfo = () => {
+  return (
+    <ShopInfoContainer
+      direction="column"
+      align="flex-start"
+      padding="0 20px 112px 20px"
+    >
+      <MainImg
+        src={
+          'https://s3-alpha-sig.figma.com/img/b451/cdeb/1b126206922d93851b0f7d50c8e39562?Expires=1734307200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZI~FkT7vXniXT8Kwm-tEkVdtP0PUf8YfdcOEtpO0P1PQAJlG6dJz-VvaTRl8k-IiXvleuMayGOw8k53CfVHh7Qnw9Q0U9QRyhDZ71dxK7NWKSghjD6O4LcTalyZ0-RNYovDwZEfc90WDYmHid49LMyhX0qlxFyhNQtqKt-dvtu92SGG1LiTbKkH3xoeLg3QsJBTezqIvQA7UE16KuPQx-73RML9nR3gPs9~69sI-Aw3lcZC8s0xEo9lIqZ-WhjbyRWdFoXYpl8TDM8x160IDZG51zx-R3n-OFoaLHYntEj2jZchfuKNsX8GJvN6ia8XCouQ5bdvPU2lBWNDAdx9EcA__'
+        }
+      />
+      {/**헤더 */}
+      <Flex direction="column" gap={8}>
+        <Flex gap={17} justify="flex-start">
+          <Text typo="Body2">댕댕샵</Text>
+          <WidthFitFlex gap={7}>
+            <Star width={14} />
+            <Text typo="Label3">4.9 (120)</Text>
+          </WidthFitFlex>
+        </Flex>
+
+        <Flex gap={17} justify="flex-start">
+          <FilledLocation width={22} />
+          <TextLine typo="Caption3" colorCode={theme.palette.Gray400}>
+            <MarkText>{`354m | `}</MarkText>
+            주소
+          </TextLine>
+        </Flex>
+
+        <Flex gap={17} justify="flex-start">
+          <Call width={16} />
+          <Text typo="Caption3" colorCode={theme.palette.Link}>
+            02-111-1111
+          </Text>
+        </Flex>
+
+        <Flex gap={17} justify="flex-start">
+          <Time width={16} />
+          <Text typo="Caption3">9:00 ~ 1800</Text>
+        </Flex>
+      </Flex>
+
+      <Flex
+        justify="flex-start"
+        backgroundColor={theme.palette.Gray_White}
+        padding="15px 16px"
+        borderRadius={12}
+      >
+        <TextHeight typo="Caption1" colorCode={theme.palette.Gray500}>
+          안녕하세요! <br />
+          꼼꼼하고 소중히 미용하는 댕댕샵입니다.
+        </TextHeight>
+      </Flex>
+
+      {/**디자이너 */}
+      <Text typo="Title3">디자이너 소개</Text>
+      <DesignerInfo />
+
+      {/**샵 내부 */}
+      <Text typo="Title3">샵 내부</Text>
+      <ShopPhotos />
+
+      {/**리뷰 */}
+      <WidthFitFlex gap={7}>
+        <Text typo="Title3">리뷰</Text>
+        <Star width={14} />
+        <Text typo="Label3">4.9 (120)</Text>
+      </WidthFitFlex>
+      <ShadowFlex
+        direction="column"
+        gap={8}
+        align="flex-start"
+        padding="15px 17px"
+        borderRadius={16}
+      >
+        <Flex justify="flex-start">
+          <HeightFitFlex justify="space-between">
+            <WidthFitFlex gap={16}>
+              <ReviewerImg src={salonDefault} />
+              <WidthFitFlex direction="column" align="flex-start" gap={2}>
+                <Text>사용자 이름</Text>
+                <Star width={12} />
+              </WidthFitFlex>
+            </WidthFitFlex>
+          </HeightFitFlex>
+          <Text typo="Caption5" colorCode={theme.palette.Gray300}>
+            2024-12-26
+          </Text>
+        </Flex>
+        <Text>후기를 작성하는 곳 ~~ 아주 좋았습니다</Text>
+        <HeightFitFlex
+          gap={20}
+          backgroundColor={theme.palette.Gray_White}
+          padding="12px"
+          margin="16px 0 0 0"
+        >
+          <PetImg src={salonDefault} />
+          <Flex direction="column" align="flex-start">
+            <Text>신참이</Text>
+            <Flex justify="flex-start">
+              <Text>시츄,</Text> <Text>암컷,</Text> <Text>7세,</Text>
+              <Text>7.3kg</Text>
+            </Flex>
+          </Flex>
+        </HeightFitFlex>
+      </ShadowFlex>
+    </ShopInfoContainer>
+  );
+};
+const ShopInfoContainer = styled(Flex)`
+  overflow-y: auto;
+`;
+
+const MarkText = styled.span`
+  font-weight: 600;
+`;
+
+const TextLine = styled(Text)`
+  display: inline;
+`;
+
+const TextHeight = styled(Text)`
+  line-height: 140%;
+`;
+
+const MainImg = styled.img`
+  width: 100%;
+  aspect-ratio: 330 / 180;
+  border-radius: 12px;
+  object-fit: cover;
+`;
+
+const ReviewerImg = styled.img`
+  display: flex;
+  width: 34px;
+  height: 34px;
+  border-radius: 99px;
+`;
+
+const PetImg = styled.img`
+  display: flex;
+  width: 77px;
+  height: 77px;
+  border-radius: 99px;
+`;
+
+const ShadowFlex = styled(HeightFitFlex)`
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+`;