[PEAUTY-164] 견적서 작성 UI 생성

src/components/cards/Card/Card.styles.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { colors } from '../../../style/color';
+import styled from "styled-components";
+import { colors } from "../../../style/color";
 
 export const CardWrapper = styled.div`
   border: 1px solid ${colors.gray300};
@@ -18,16 +18,15 @@ export const TagsWrapper = styled.div`
 `;
 
 export const InfoWrapper = styled.div`
-    flex: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: 16px;
-    gap: 5px;
-`
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 16px;
+  gap: 5px;
+`;
 
 export const DiseaseWrapper = styled.div`
-    display: flex;
-    gap: 5px;
-
-`
+  display: flex;
+  gap: 5px;
+`;

src/components/index.ts

@@ -18,4 +18,4 @@ export * from "./layout/Wrpper";
 export * from "./layout/GNBLayout/GNBLayout";
 export * from "./texts/Text";
 export * from "./rating/Rating";
-export * from './layout/GNB'
+export * from "./cards/Card";

src/components/input/CustomInput/CustomInput.styles.ts

@@ -85,7 +85,7 @@ export const StyledInput = styled.input<{ error: boolean }>`
 
   &::placeholder {
     color: #9ca3af;
-    font-size: ${typography.body100};
+    font-size: ${typography.body300};
   }
 
   &:disabled {

src/pages/designer/quote/index.styles.ts

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { colors } from "../../../style/color";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ContentWrapper = styled.div`
+  padding: 10px 25px;
+`;
+
+export const SectionWrapper = styled.div`
+  display: flex;
+  padding: 20px 25px;
+  flex-direction: column;
+  gap: 17px;
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const PhotoAttachment = styled.div`
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const PhotoAttachmentContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  border-radius: 10px;
+  background-color: ${colors.gray400};
+  font-size: 40px;
+  color: ${colors.gray100};
+  text-align: center;
+  align-content: center;
+  cursor: pointer;
+`;
+
+export const DividerStyle = styled.div`
+  margin: 0;
+  padding: 0;
+`;
+
+export const RequestDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+  white-space: pre-line;
+  gap: 10px;
+`;
+
+export const RequestSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`;

src/pages/designer/quote/index.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { AppBar, Divider, GNB, Text, CustomInput } from "../../../components";
+import Card from "../../../components/cards/Card";
+import { colors } from "../../../style/color";
+import {
+  Container,
+  ContentWrapper,
+  SectionWrapper,
+  InputWrapper,
+  PhotoAttachment,
+  PhotoAttachmentContainer,
+  RequestDetail,
+  RequestSection,
+} from "./index.styles";
+
+export default function Quote() {
+  return (
+    <Container>
+      <AppBar prefix="backButton" title="견적서 작성" />
+      <ContentWrapper>
+        <Card
+          imageSrc={
+            "https://item.kakaocdn.net/do/5c5d49e3cf96b8556201270d137a761f8f324a0b9c48f77dbce3a43bd11ce785"
+          }
+          name={"꼬미"}
+          age={3}
+          gender={"암컷"}
+          weight={"3.4"}
+          breed={"말티즈"}
+          tags={["피부병", "슬개골"]}
+        />
+      </ContentWrapper>
+      <Divider thickness={3} color={`${colors.gray400}`} />
+      <SectionWrapper>
+        <RequestDetail>
+          <Text typo="subtitle200">요청상세</Text>
+          <RequestSection>
+            <Text typo="body400" color="gray100">
+              원하는 미용
+            </Text>
+            <Text typo="body100">곰돌이컷 + 가위컷</Text>
+          </RequestSection>
+          <RequestSection>
+            <Text typo="body400" color="gray100">
+              상세 설명
+            </Text>
+            <Text typo="body100">
+              저희 강아지는 발에 예민한 편이예요! {"\n"}그러니 시술할때 발을
+              많이 만지지 말아주세요
+            </Text>
+          </RequestSection>
+          <RequestSection>
+            <Text typo="body400" color="gray100">
+              첨부한 사진
+            </Text>
+            <Text typo="body100">곰돌이컷 + 가위컷</Text>
+          </RequestSection>
+          <RequestSection>
+            <Text typo="body400" color="gray100">
+              희망 비용
+            </Text>
+            <Text typo="body100">35,000</Text>
+          </RequestSection>
+          <RequestSection>
+            <Text typo="body400" color="gray100">
+              희망 시간 및 날짜
+            </Text>
+            <Text typo="body100">6월 12일 오전 12시</Text>
+          </RequestSection>
+        </RequestDetail>
+      </SectionWrapper>
+      <Divider thickness={3} color={`${colors.gray400}`} />
+      <SectionWrapper>
+        <Text typo="subtitle200">견적 설명</Text>
+        <InputWrapper>
+          <CustomInput label="비용" placeholder="결제비용을 입력해주세요" />
+          <CustomInput
+            label="소요시간"
+            placeholder="예상 소요시간을 입력해주세요"
+          />
+          <CustomInput
+            label="상세설명"
+            placeholder="견적서에 대한 추가 설명을 작성해주세요"
+            inputType="textarea"
+          />
+          <PhotoAttachment>
+            <div>
+              <Text typo="body100">사진첨부</Text>
+              <Text typo="body400" color="gray100">
+                상세 설명에 대한 이해를 돕기 위해 사진을 첨부하면 좋아요
+              </Text>
+            </div>
+            <PhotoAttachmentContainer>+</PhotoAttachmentContainer>
+          </PhotoAttachment>
+        </InputWrapper>
+      </SectionWrapper>
+      <GNB buttonText="견적서 보내기" />
+    </Container>
+  );
+}

src/router/customer/index.tsx

@@ -22,10 +22,6 @@ export const customerPaths = [
     path: "pet",
     children: petPaths,
   },
-  {
-    path: "request",
-    children: requestPaths,
-  },
 ];
 
 export const customerPaths2 = [

src/router/designer/index.tsx

@@ -7,12 +7,9 @@ import DesignerSignUpDetail from "../../pages/designer/signup-detail";
 import DesignerSignUpDetailComplete from "../../pages/designer/signup-detail-complete";
 import DesignerMyBadgesPage from "../../pages/designer/mypage/badges";
 import DesignerHome from "../../pages/designer/home";
+import Quote from "../../pages/designer/quote";
 
 export const designerPaths = [
-  {
-    path: "home",
-    element: <DesignerHome />,
-  },
   {
     path: "mypage",
     element: <DesignerMyPage />,
@@ -45,4 +42,8 @@ export const designerPaths = [
     path: "mypage/edit",
     element: <DesignerMyPageEdit />,
   },
+  {
+    path: "quote",
+    element: <Quote />,
+  },
 ];

src/router/router.tsx

@@ -9,6 +9,7 @@ import { customerPaths2 } from "./customer";
 import Request from "../pages/request";
 import { requestPaths2 } from "./customer/request";
 import Shop from "../pages/shop";
+import Quote from "../pages/designer/quote";
 export const router = createBrowserRouter([
   {
     path: "/",
@@ -63,4 +64,21 @@ export const router = createBrowserRouter([
     ],
     errorElement: <NotFound />,
   },
+  {
+    path: "/designer/quote",
+    element: (
+      <Layout
+        style={{
+          padding: `${theme.size.appBarHeight} 0 ${theme.size.gnbHeight}`,
+        }}
+      />
+    ),
+    children: [
+      {
+        path: "", // 기본 경로
+        element: <Quote />, // Shop 컴포넌트가 Outlet으로 렌더링됨
+      },
+    ],
+    errorElement: <NotFound />,
+  },
 ]);

src/style/color.ts

@@ -7,7 +7,7 @@ export const colors = {
   gray100: "#909090",
   gray200: "#d9d9d9",
   gray300: "#e0e0e0",
-  gray400: "#f2f3f5",
+  gray400: "#F9F9FB",
 
   blue100: "#6f82f1",
   blue200: "#b6c0f7",

src/style/typography.ts

@@ -30,7 +30,7 @@ export const typography = {
     font-size: 16px;
   `,
   body100: css`
-    font-weight: 500;
+    font-weight: 400;
     font-size: 14px;
   `,
   body200: css`