feat: dash를 dot으로 변경하는 format 생성

peauty · Dec 27, 2024 · 99c043d · 99c043d
1 parent 5e0af3a
commit 99c043d
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 46 deletions.
diff --git a/src/pages/customer/review/history/components/ReviewCard.tsx b/src/pages/customer/review/history/components/ReviewCard.tsx
@@ -4,7 +4,7 @@ import { colors } from "../../../../../style/color";
 import { Divider } from "../../../../../components";
 import Rating from "../../../../../components/rating/Rating";
 import theme from "../../../../../style/theme";
-
+import { formatDashDate } from "../../../../../utils/dataformat";
 interface ReviewProps {
   reviewDate: string;
   groomingStyle: string;
@@ -34,8 +34,20 @@ export default function ReviewCard({
     <div style={{ border: `2px solid  ${theme.colors.background}` }}>
       <CardContainer>
         <Date>
+          <span
+            style={{
+              backgroundColor: `${colors.background}`,
+              padding: "1px 3px",
+              borderRadius: "3px",
+              fontSize: "11px",
+              fontWeight: "500",
+              color: `${colors.gray100}`,
+            }}
+          >
+            작성일
+          </span>
           <Text typo="body400" color="gray100">
-            작성일 {reviewDate}
+            {formatDashDate(reviewDate)}
           </Text>
         </Date>
         <div
@@ -130,6 +142,7 @@ const ImageContainer = styled.div`
 const Date = styled.div`
   width: 100%;
   display: flex;
+  gap: 5px;
 `;
 
 const Info = styled.div`

diff --git a/src/pages/customer/status/components/Info/index.tsx b/src/pages/customer/status/components/Info/index.tsx
@@ -7,13 +7,13 @@ import {
 } from "./index.styles";
 import { useNavigate } from "react-router-dom";
 import { Text } from "../../../../../components";
-
+import { formatDashDate } from "../../../../../utils/dataformat";
 interface InfoProps {
   requestDate: string;
   requestText: string;
-  userId: number;  // userId 타입 추가
-  puppyId: number;  // puppyId 타입 추가
-  processId: number;  // processId 타입 추가
+  userId: number; // userId 타입 추가
+  puppyId: number; // puppyId 타입 추가
+  processId: number; // processId 타입 추가
 }
 
 export default function Info({
@@ -29,14 +29,13 @@ export default function Info({
     console.log("Navigating to URL:", url); // URL을 콘솔에 출력
     navigate(url);
   };
-
 
   return (
     <Container>
       <InnerBox>
-        <Text typo="body300" color="gray100">
+        <Text typo="body400" color="gray100">
           <RequestDate>요청일</RequestDate>
-          {requestDate}
+          {formatDashDate(requestDate)}
         </Text>
         <CutTextWrapper>
           <Text typo="subtitle300" color="blue100">

diff --git a/src/pages/customer/status/components/NoReceived/index.styles.ts b/src/pages/customer/status/components/NoReceived/index.styles.ts
@@ -18,30 +18,28 @@ export const Button = styled.button`
 
 export const Wrapper = styled.div`
   display: flex;
-  padding: 0 25px;
-  margin-top: 80px;
- // height: calc(100vh - ${theme.size.appBarHeight} - ${theme.size.gnbHeight} - 50px);
+  height: calc(
+    100vh - ${theme.size.appBarHeight} - ${theme.size.gnbHeight} - 284px
+  );
   justify-content: center;
   align-items: center;
 `;
 
 export const ContentsWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center; 
+  align-items: center;
   text-align: center;
-  gap: 20px;
-  margin-bottom: 50px;
+  gap: 10px;
 `;
 
 export const IconTextWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center; 
+  align-items: center;
 `;
 
-
 export const IconWrapper = styled.div`
   display: flex;
-  padding: 30px 0;
-`;
+  margin-bottom: 20px;
+`;
diff --git a/src/pages/customer/status/components/NoReceived/index.tsx b/src/pages/customer/status/components/NoReceived/index.tsx
@@ -20,17 +20,18 @@ export default function NoReceived() {
   };
   return (
     <Wrapper>
-        <ContentsWrapper>
-    <IconTextWrapper>
-      <IconWrapper>
-        <NoStatus width={101} />
-      </IconWrapper>
-      <Text typo="subtitle200">받은 견적이 없어요</Text>
-      <Text typo="body100">아직 견적을 요청하지 않으셨다면 요청해보세요</Text>
-    </IconTextWrapper>
-    <Button onClick={handleStatus}>견적 요청하기</Button>
-    </ContentsWrapper>
-  </Wrapper>
-
+      <ContentsWrapper>
+        <IconTextWrapper>
+          <IconWrapper>
+            <NoStatus width={90} />
+          </IconWrapper>
+          <Text typo="subtitle300">받은 견적이 없어요</Text>
+          <Text typo="body400">
+            아직 견적을 요청하지 않으셨다면 요청해보세요
+          </Text>
+        </IconTextWrapper>
+        <Button onClick={handleStatus}>견적 요청하기</Button>
+      </ContentsWrapper>
+    </Wrapper>
   );
-}
+}
diff --git a/src/pages/customer/status/components/Nosent/index.tsx b/src/pages/customer/status/components/Nosent/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Text } from "../../../../../components/texts/Text";
 import { colors } from "../../../../../style/color";
-import { NoReceived} from "../../../../../assets/svg";
+import { NoReceived } from "../../../../../assets/svg";
 
 import { useNavigate } from "react-router-dom";
 import { ROUTE } from "../../../../../constants/routes";
@@ -20,17 +20,16 @@ export default function Nosend() {
   };
   return (
     <Wrapper>
-        <ContentsWrapper>
-    <IconTextWrapper>
-      <IconWrapper>
-        <NoReceived width={90} />
-      </IconWrapper>
-      <Text typo="subtitle200">요청한 견적이 없어요</Text>
-      <Text typo="body100">견적은 반려견별로 요청할 수 있어요</Text>
-    </IconTextWrapper>
-    <Button onClick={handleStatus}>견적 요청하기</Button>
-    </ContentsWrapper>
-  </Wrapper>
-
+      <ContentsWrapper>
+        <IconTextWrapper>
+          <IconWrapper>
+            <NoReceived width={80} />
+          </IconWrapper>
+          <Text typo="subtitle200">요청한 견적이 없어요</Text>
+          <Text typo="body100">견적은 반려견별로 요청할 수 있어요</Text>
+        </IconTextWrapper>
+        <Button onClick={handleStatus}>견적 요청하기</Button>
+      </ContentsWrapper>
+    </Wrapper>
   );
-}
+}
diff --git a/src/utils/dataformat.ts b/src/utils/dataformat.ts
@@ -26,3 +26,9 @@ export const formatDate = (isoDate?: string): string => {
 
   return `${year} . ${month} . ${day} . ${period} ${formattedHours}:${minutes}`;
 };
+
+export const formatDashDate = (isoDate?: string): string => {
+  if (!isoDate) return "";
+  const transDat = isoDate.replace(/-/g, ".");
+  return transDat;
+};