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

Duri-Salon · Dec 10, 2024 · d219aee · d219aee
2 parents 94b232c + 7a4b397
commit d219aee
Show file tree

Hide file tree

Showing 24 changed files with 842 additions and 236 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -4,3 +4,9 @@
   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"
+/>
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -19,6 +19,10 @@ import Shop from '@pages/Shop';
 import Portfolio from '@pages/Shop/Portfolio';
 import ShopDetail from '@pages/Shop/ShopDetail';
 
+import 'react-spring-bottom-sheet/dist/style.css';
+
+import PortfolioDetail from './pages/Shop/PortfolioDetail';
+
 function App() {
   return (
     <BrowserRouter>
@@ -34,18 +38,24 @@ function App() {
         <Route path="/payment" element={<PaymentPage />} />
         <Route path="/payment/success" element={<SuccessPage />} />
         <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="/portfolio/:designerId/:portfolioId"
+          element={<PortfolioDetail />}
+        />
 
         <Route path="/quotation" element={<QuotationPage />} />
-        <Route path="/quotation/:quotationId" element={<QuotationDetailPage />} />
-
-        <Route path="/my" element={<MyPage />} />
+        <Route
+          path="/quotation/:quotationId"
+          element={<QuotationDetailPage />}
+        />
 
+        <Route path="/my" element={<MyPage />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/apps/duri/src/components/shop/DesignerInfo.tsx b/apps/duri/src/components/shop/DesignerInfo.tsx
@@ -1,41 +1,105 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Approve, Flex, Text } from '@duri-fe/ui';
+import { Approve, Flex, Text, theme } from '@duri-fe/ui';
 import styled from '@emotion/styled';
 
-export const DesignerInfo = () => {
+interface DesignerInfoProps {
+  version?: 'vertical' | 'horizontal';
+  designerId: number | string;
+  name: string;
+  age: number;
+  gender: string;
+  experience: number;
+  roles: string[];
+  imageUrl: string;
+  padding?: string;
+}
+
+export const DesignerInfo = ({
+  version = 'vertical',
+  designerId,
+  name,
+  age,
+  gender,
+  experience,
+  roles,
+  imageUrl,
+  padding,
+}: DesignerInfoProps) => {
   const navigate = useNavigate();
-  const moveToDetail = (designerId: number | string) => {
-    navigate(`/portfolio/${designerId}`);
+
+  const moveToPortfolio = () => {
+    if (version === 'vertical') {
+      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>
-        ))}
+    <Container
+      version={version}
+      onClick={moveToPortfolio}
+      clickable={version === 'vertical'}
+      direction={version === 'horizontal' ? 'row' : 'column'}
+      align={version === 'horizontal' ? 'center' : 'flex-start'}
+      gap={version === 'horizontal' ? 16 : 8}
+      padding={padding}
+    >
+      <ImageWrapper version={version}>
+        <DesignerImg
+          version={version}
+          src={imageUrl}
+          alt={`${name}'s profile`}
+        />
+      </ImageWrapper>
+
+      <Flex direction="column" align="flex-start" justify="flex-start" gap={8}>
+        <Text typo="Title3">{name}</Text>
+
+        <Text
+          typo="Caption4"
+          colorCode={theme.palette.Gray400}
+        >{`경력 ${experience}년, ${age}세, ${gender}`}</Text>
+
+        <Flex direction="column" gap={8}>
+          {roles.map((item, idx) => (
+            <Role key={idx}>
+              <Text typo="Caption3" colorCode={theme.palette.Link}>
+                {item}
+              </Text>
+              <Approve width={11} height={10} />
+            </Role>
+          ))}
+        </Flex>
       </Flex>
-    </Flex>
+    </Container>
   );
 };
 
-const DesignerImg = styled.img`
-  display: flex;
-  width: 160px;
-  height: 160px;
-  border-radius: 8px;
+const Container = styled(Flex)<{
+  version: 'vertical' | 'horizontal';
+  clickable: boolean;
+}>`
+  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+`;
+
+const DesignerImg = styled.img<{ version: 'vertical' | 'horizontal' }>`
+  width: ${({ version }) => (version === 'horizontal' ? '124px' : '160px')};
+  height: ${({ version }) => (version === 'horizontal' ? '124px' : '160px')};
+  border-radius: ${({ version }) =>
+    version === 'horizontal' ? '99px' : '8px'};
   object-fit: cover;
 `;
+
+const ImageWrapper = styled.div<{ version: 'vertical' | 'horizontal' }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+// 역할 태그 스타일
+const Role = styled(Flex)`
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+`;
diff --git a/apps/duri/src/components/shop/PortfolioPhotos.tsx b/apps/duri/src/components/shop/PortfolioPhotos.tsx
@@ -0,0 +1,46 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Flex } from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+interface PortfolioPhotosProps {
+  portfolios: { id: number; src: string }[];
+  designerId: string | number;
+}
+
+export const PortfolioPhotos = ({
+  portfolios,
+  designerId,
+}: PortfolioPhotosProps) => {
+  const navigate = useNavigate();
+
+  const moveToProfolioDetail = (id: number) => {
+    navigate(`/portfolio/${designerId}/${id}`);
+  };
+  return (
+    <Flex>
+      <PhotoGrid>
+        {portfolios.map((item, index) => (
+          <PortfolioInsideImg
+            key={item.id}
+            src={item.src}
+            alt={`Porfolio ${index + 1}`}
+            onClick={() => moveToProfolioDetail(item.id)}
+          />
+        ))}
+      </PhotoGrid>
+    </Flex>
+  );
+};
+
+const PhotoGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3px;
+`;
+
+const PortfolioInsideImg = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+`;
diff --git a/apps/duri/src/components/shop/SendRequesQBox.tsx b/apps/duri/src/components/shop/SendRequesQBox.tsx
@@ -0,0 +1,77 @@
+import { useNavigate } from 'react-router-dom';
+
+import {
+  Button,
+  HeightFitFlex,
+  NextArrow,
+  RelativeFlex,
+  SendColor,
+  Text,
+  theme,
+  WidthFitFlex,
+} from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+export const SendRequestQBox = () => {
+  const navigate = useNavigate();
+  const moveToShopRequest = () => {
+    navigate('/shop/request');
+  };
+  return (
+    <RelativeFlex
+      height={500}
+      direction="column"
+      justify="flex-start"
+      padding="54px 0 56px 0"
+    >
+      <SendColor width={55} />
+      <Text
+        typo="Title1"
+        margin="55px 0 0 0"
+        colorCode={theme.palette.Normal700}
+      >
+        견적 요청서를 전송하시겠습니까?
+      </Text>
+      <Text typo="Body3" colorCode={theme.palette.Gray300} margin="14px 0 0 0">
+        선택한 샵에 요청서를 전송합니다.
+      </Text>
+
+      <HeightFitFlex
+        direction="column"
+        align="flex-start"
+        padding="58px 24px 0 28px"
+        gap={24}
+      >
+        <Text typo="Title3">요청서 선택</Text>
+        <HeightFitFlex justify="space-between">
+          <Text typo="Title3">작성한 요청서가 없습니다.</Text>
+          <WidthFitFlex onClick={moveToShopRequest}>
+            <Text typo="Label3" colorCode={theme.palette.Gray300}>
+              작성하러가기
+            </Text>
+            <NextArrow width={23} color={theme.palette.Gray300} />
+          </WidthFitFlex>
+        </HeightFitFlex>
+      </HeightFitFlex>
+      <AbsoluteBtnWrapper gap={8} padding="0 20px">
+        <FlexBtn flex="136" bg={theme.palette.Gray20}>
+          <Text typo="Body3">취소</Text>
+        </FlexBtn>
+        <FlexBtn flex="191" bg={theme.palette.Gray200}>
+          <Text typo="Body3" colorCode={theme.palette.White}>
+            확인
+          </Text>
+        </FlexBtn>
+      </AbsoluteBtnWrapper>
+    </RelativeFlex>
+  );
+};
+const AbsoluteBtnWrapper = styled(HeightFitFlex)`
+  position: absolute;
+  bottom: 0;
+`;
+
+const FlexBtn = styled(Button)<{ flex: string }>`
+  border-radius: 8px;
+  flex: ${({ flex }) => flex};
+`;