feat: 스케줄 완료

peauty · Dec 19, 2024 · 371ef28 · 371ef28
2 parents 151cc44 + cdf56ba
commit 371ef28
Show file tree

Hide file tree

Showing 24 changed files with 445 additions and 98 deletions.
diff --git a/public/svg/NoReceived.svg b/public/svg/NoReceived.svg
diff --git a/public/svg/NoStatus.svg b/public/svg/NoStatus.svg
diff --git a/src/assets/svg/NoReceived.tsx b/src/assets/svg/NoReceived.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgNoReceived = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 105 105"
+    {...props}
+  >
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="M10.85 30.113h27.073V2M10.85 30.113 37.923 2M10.85 30.113v16.92M37.923 2h29.675M10.85 63.954v-16.92m0 16.92c4.685 0 13.536 0 13.536 7.809 0 6.247 5.9 8.503 8.85 8.85h40.608c2.083 0 6.456-1.77 7.289-8.85s6.942-8.157 9.892-7.81H103m-92.15 0H2m92.67 0v-16.92m-83.82 0L2 63.954m0 0v32.8s.19 3.33 1.562 4.685C4.798 102.659 7.727 103 7.727 103h90.067c4.165 0 4.685-2.082 4.685-2.082s.521-1.562.521-4.165v-32.8m0 0-8.33-16.92m0 0v-16.92m0 0H67.598V2M94.67 30.113 67.598 2"
+    />
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M54.32 54.911v3.125"
+    />
+    <path
+      fill="#E0E0E0"
+      stroke="#E0E0E0"
+      strokeWidth={2}
+      d="M57.223 48.271a2.906 2.906 0 0 1-5.81 0c0-.147.01-.245.02-.307q.039-.002.094 0c.227.006.496.05.884.113l.228.037c.476.077 1.055.16 1.679.16.623 0 1.203-.083 1.679-.16l.228-.037c.387-.063.657-.107.883-.113q.056-.002.094 0c.01.062.021.16.021.307Zm-5.887-.296.003-.001zm5.964 0-.003-.001z"
+    />
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M54.318 52.177v2.734m0 0c-4.947.39-14.92.625-15.232-1.562m15.232 1.562c4.296 0 16.091.937 16.404-1.562M49.24 55.302c0 4.687 1.933 6.249 5.078 6.249 3.144 0 5.077-.781 5.077-6.25M38.224 40.614l5.752 4.163-5.752 3.33M69.86 40.614l-5.753 4.163 5.752 3.33"
+    />
+  </svg>
+);
+export default SvgNoReceived;
diff --git a/src/assets/svg/NoStatus.tsx b/src/assets/svg/NoStatus.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgNoStatus = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 105 105"
+    {...props}
+  >
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="M10.85 30.113h27.073V2M10.85 30.113 37.923 2M10.85 30.113v16.92M37.923 2h29.675M10.85 63.954v-16.92m0 16.92c4.685 0 13.536 0 13.536 7.809 0 6.247 5.9 8.503 8.85 8.85h40.608c2.083 0 6.456-1.77 7.289-8.85s6.942-8.157 9.892-7.81H103m-92.15 0H2m92.67 0v-16.92m-83.82 0L2 63.954m0 0v32.8s.19 3.33 1.562 4.685C4.798 102.659 7.727 103 7.727 103h90.067c4.165 0 4.685-2.082 4.685-2.082s.521-1.562.521-4.165v-32.8m0 0-8.33-16.92m0 0v-16.92m0 0H67.598V2M94.67 30.113 67.598 2"
+    />
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M54.32 54.911v3.125"
+    />
+    <path
+      fill="#E0E0E0"
+      stroke="#E0E0E0"
+      strokeWidth={2}
+      d="M56.811 48.271a2.906 2.906 0 0 1-5.811 0c0-.147.01-.245.022-.307h.093c.227.006.496.05.884.113l.228.037c.476.077 1.055.16 1.679.16.623 0 1.203-.083 1.678-.16l.229-.037c.387-.063.656-.107.883-.113q.055-.002.093 0c.012.062.022.16.022.307Zm-5.887-.296.003-.001zm5.964 0-.003-.001z"
+    />
+    <path
+      stroke="#E0E0E0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M54.318 52.177v2.734m0 0c-4.947.39-14.92.625-15.232-1.562m15.232 1.562c4.296 0 16.091.937 16.404-1.562M49.24 55.302c0 4.687 1.933 6.249 5.078 6.249 3.144 0 5.077-.781 5.077-6.25"
+    />
+    <circle
+      cx={3.5}
+      cy={3.5}
+      r={3.5}
+      fill="#E0E0E0"
+      transform="matrix(1 0 0 -1 36 50)"
+    />
+    <circle
+      cx={3.5}
+      cy={3.5}
+      r={3.5}
+      fill="#E0E0E0"
+      transform="matrix(1 0 0 -1 64.588 50)"
+    />
+  </svg>
+);
+export default SvgNoStatus;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -70,3 +70,5 @@ export { default as Pin } from "./Pin";
 export { default as Search } from "./Search";
 export { default as Smile } from "./Smile";
 export { default as Warning } from "./Warning";
+export{ default as NoStatus} from "./NoStatus";
+export{ default as NoReceived} from "./NoReceived";
diff --git a/src/components/input/CustomInput/CustomInput.tsx b/src/components/input/CustomInput/CustomInput.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useState, ReactNode } from "react";
+import { InputHTMLAttributes, useState, useEffect, ReactNode } from "react";
 import {
   Container,
   Label,
@@ -27,6 +27,7 @@ interface CustomInputProps
   extraText?: string; // 추가 텍스트를 위한 prop
   maxLength?: number; // 최대 글자수 prop 추가
   hasError?: boolean;
+  value?: string | readonly string[]; // value 타입 추가
 }
 
 export default function CustomInput({
@@ -47,12 +48,21 @@ export default function CustomInput({
   hasError = false,
   ...props
 }: CustomInputProps) {
+  // ⭐ 초기값을 props.value의 길이로 설정
+  const [inputLength, setInputLength] = useState(
+    props.value ? props.value.length : 0,
+  );
   const [focused, setFocused] = useState(false);
-  const [inputLength, setInputLength] = useState(0);
 
-  // 조건 변수 추출
-  const isTextOverLimit = inputLength > maxLength; // 글자 수 초과 조건
-  const showError = !!error || isTextOverLimit; // 에러 메시지 표시 조건
+  // ⭐ props.value가 변경될 때 inputLength 업데이트
+  useEffect(() => {
+    if (props.value) {
+      setInputLength(props.value.length);
+    }
+  }, [props.value]);
+
+  const isTextOverLimit = inputLength > maxLength;
+  const showError = !!error || isTextOverLimit;
   const charCountColor = isTextOverLimit
     ? "red100"
     : focused
@@ -121,11 +131,7 @@ export default function CustomInput({
         )}
       </InputWrapper>
 
-      <NoticeContainer
-        hasError={
-          !!error || (inputType === "textarea" && inputLength > maxLength)
-        }
-      >
+      <NoticeContainer hasError={showError}>
         <Text
           color={
             error || (inputType === "textarea" && inputLength > maxLength)
@@ -142,16 +148,7 @@ export default function CustomInput({
         </Text>
 
         {inputType === "textarea" && (
-          <Text
-            color={
-              inputLength > maxLength
-                ? "red100"
-                : focused
-                  ? "blue100"
-                  : "gray100"
-            }
-            typo="body400"
-          >
+          <Text color={charCountColor} typo="body400">
             {inputLength}/{maxLength}
           </Text>
         )}

diff --git a/src/pages/customer/mypage/edit/CustomerMyPageEdit.tsx b/src/pages/customer/mypage/edit/CustomerMyPageEdit.tsx
@@ -181,11 +181,7 @@ export default function CustomerMyPageEdit() {
   };
   return (
     <>
-      {(locationLoading || uploadLoading || updateLoading) && (
-        <Loading
-          imageUrl={"https://avatars.githubusercontent.com/u/70759627?v=4"}
-        />
-      )}
+      {(locationLoading || uploadLoading || updateLoading) && <Loading />}
       <MyPageEditWrapper>
         <AppBar
           prefix="backButton"
@@ -225,7 +221,7 @@ export default function CustomerMyPageEdit() {
                 (error !== "" && error !== "이미 사용중인 닉네임입니다.")
               }
             >
-              중복검사
+              중복 검사
             </CustomButton>
           }
         />

diff --git a/src/pages/customer/pet/edit/index.tsx b/src/pages/customer/pet/edit/index.tsx
@@ -248,7 +248,7 @@ export default function PetEdit() {
             label="몸무게"
             placeholder="예) 22"
             extraText="kg"
-            value={puppyWeight}
+            value={String(puppyWeight)}
             onChange={handleWeightChange}
           />
         </Style.Wrapper>

diff --git a/src/pages/customer/quote-detail/index.styles.ts b/src/pages/customer/quote-detail/index.styles.ts
@@ -91,3 +91,9 @@ export const TextSectionWrapper = styled.div`
   flex-direction: column;
   gap: 5px;
 `;
+
+export const Reservation = styled.div`
+  display: flex;
+
+  gap: 5px;
+`;
diff --git a/src/pages/customer/quote-detail/index.tsx b/src/pages/customer/quote-detail/index.tsx
@@ -1,5 +1,6 @@
 import { CareerIcon, CheckIcon2, Maker } from "../../../assets/svg";
 import { AppBar, GNB, Text } from "../../../components";
+import InfoButton from"../../../components/button/InfoButton";
 import Rating from "../../../components/rating";
 import { colors } from "../../../style/color";
 import {
@@ -17,6 +18,7 @@ import {
   TextSectionWrapper,
   ProfileRow,
   DashedDivider,
+  Reservation
 } from "./index.styles";
 import { useEffect, useState } from "react";
 import { getEstimateAndProposalDetails } from "../../../apis/customer/resources/bidding";
@@ -33,7 +35,8 @@ import { useRecoilState } from "recoil";
 import { PaymentData, paymentAtom } from "../../../atoms/paymentAtom";
 import { ROUTE } from "../../../constants/routes";
 import { Icon } from "../../designer/quote/quoute-detail/index.styles";
-import InfoButton from "../../../components/button/InfoButton";
+import { formatDate } from "../../../utils/dataformat";
+
 function formatDateToKorean(dateStr: string): string {
   const date = new Date(dateStr);
   const year = date.getFullYear();
@@ -160,23 +163,26 @@ export default function QuoteDetail() {
     }
   };
 
+  console.log(designer?.profileImageUrl, "designer?.profileImageUrl");
+
   return (
     <PageContainer>
       <AppBar prefix="backButton" title="견적서 보기" />
       <InfoContainer>
         <InfoCard>
           <ProfileImage
-            src="" // 새 타입에는 profileImageUrl이 없음
+            src={`${designer?.profileImageUrl}`} // 새 타입에는 profileImageUrl이 없음
             width="100px"
             height="100px"
           />
           <div>
             <Text typo="subtitle200">{designer?.workspaceName}</Text>
             <ProfileTextContainer>
               <ProfileRow>
-                <Rating score={0} /> {/* 새 타입에는 reviewRating이 없음 */}
+              <Rating score={designer?.reviewCount ?? 0} />
+
                 <Text typo="body300" color="gray100">
-                  &nbsp;(0)
+                  &nbsp;(6)
                 </Text>
               </ProfileRow>
               <ProfileRow>
@@ -214,7 +220,7 @@ export default function QuoteDetail() {
               </DetailLabel>
               <Text typo="body300">
                 {estimateProposal?.desiredDateTime
-                  ? new Date(estimateProposal.desiredDateTime).toLocaleString()
+                  ? formatDate(estimateProposal.desiredDateTime)
                   : "날짜 정보 없음"}
               </Text>
             </DetailRow>
@@ -274,6 +280,31 @@ export default function QuoteDetail() {
           </div>
 
           <DashedDivider />
+          <DetailRow>
+            <DetailLabel>
+              <Text typo="body100">전체비용</Text>
+            </DetailLabel>
+            <Text typo="body100">
+              {estimate?.estimatedCost
+                ? `${estimate.estimatedCost.toLocaleString()}원`
+                : "0원"}
+            </Text>
+          </DetailRow>
+
+          <DetailRow>
+            <DetailLabel>
+              <Reservation>
+              <Text typo="body100">예약금 </Text>
+              <InfoButton  message="예약금은 전체 결제비용의 50%로 계산된 비용이예요"/>
+              </Reservation>
+
+            </DetailLabel>
+            <Text typo="body100">
+              {estimate?.depositPrice
+                ? `${estimate.depositPrice.toLocaleString()}원`
+                : "0원"}
+            </Text>
+          </DetailRow>
 
           <div
             style={{ display: "flex", flexDirection: "column", gap: "20px" }}

diff --git a/src/pages/customer/request/components/choose-pet/index.styles.ts b/src/pages/customer/request/components/choose-pet/index.styles.ts
@@ -1,10 +1,10 @@
 import styled from "styled-components";
+import theme from "../../../../../style/theme";
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  justify-content: space-between;
+  height: calc(100vh - ${theme.size.gnbHeight} - ${theme.size.appBarHeight});
 `;
 
 export const CardWrapper = styled.div`

diff --git a/src/pages/customer/request/components/choose-pet/index.tsx b/src/pages/customer/request/components/choose-pet/index.tsx
@@ -2,12 +2,12 @@ import { useState, useEffect } from "react";
 import { AppBar, GNB, Text } from "../../../../../components";
 import Card from "../../../../../components/cards/Card";
 import { CardWrapper, TextWrapper, Wrapper } from "./index.styles";
-
 import { useUserDetails } from "../../../../../hooks/useUserDetails";
 import Loading from "../../../../../components/page/sign-up/Loading";
 import { GetPuppyProfileResponse } from "../../../../../types/customer/puppy";
 import { getPuppyProfiles } from "../../../../../apis/customer/resources/puppy";
 import { getPuppyProfilesWithCanStartProcessStatus } from "../../../../../apis/customer/resources/bidding";
+import NotFoundPuppy from "../../../status/components/NotFoundPuppy";
 
 interface ChoosePetProps {
   onNext: () => void;
@@ -120,9 +120,7 @@ export default function ChoosePetForGrooming({
             );
           })
         ) : (
-          <Text typo="body100" color="gray100">
-            등록된 반려견이 없습니다.
-          </Text>
+          <NotFoundPuppy />
         )}
       </Wrapper>
       <GNB

diff --git a/src/pages/customer/request/components/notice/index.styles.ts b/src/pages/customer/request/components/notice/index.styles.ts
@@ -1,13 +1,14 @@
 import styled from "styled-components";
 import { colors } from "../../../../../style/color";
+import theme from "../../../../../style/theme";
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
-  height: 80vh;
+  height: calc(100vh - ${theme.size.appBarHeight});
 `;
 
 export const IconBox = styled.div`