From 41a3b9841f34d7cbaa9d032db778f880a49e06ff Mon Sep 17 00:00:00 2001
From: hhhello <hhhello0507@dgsw.hs.kr>
Date: Sat, 18 Jan 2025 12:59:52 +0900
Subject: [PATCH] Preview DateFormat

---
 package-lock.json                             |  12 +++++
 package.json                                  |   1 +
 public/EmptyImage.png                         | Bin 0 -> 2855 bytes
 .../template/component/PreviewTemplate.tsx    |  43 ++++++++++--------
 4 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 public/EmptyImage.png

diff --git a/package-lock.json b/package-lock.json
index 32768cf..447c385 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.3.0",
         "craco-alias": "^3.0.1",
+        "date-fns": "^4.1.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -7380,6 +7381,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/package.json b/package.json
index 56e258d..3b871b8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "craco-alias": "^3.0.1",
+    "date-fns": "^4.1.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/public/EmptyImage.png b/public/EmptyImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad00b2e8d87f49b31b27d86c2ed736e6745ab8d8
GIT binary patch
literal 2855
zcmeAS@N?(olHy`uVBq!ia0y~yV9aJ<U<&781B!%-l^O#n&H|6fVg?3oVGw3ym^DWN
zD9BhG<nF|<?wrg^AcrO0(btiIVPik{pF~y$2ChAxE{-7;jBoE6=1umLXm~jPDwmd&
z2eYk7qnb%TA%k8+jT0XO`+_F6RTl~vGB|im7ABfb(@~9dOc4LD=iFzHu$<$qtFJFU
z|G8RkZP@Dd+zi3Lvl$brl6VCat}!r<QlmjInhJ(`MyS^}n5Z4TPN)3coyfd9J2vji
zJ$&)v#iELe9eZkjmo-MlM6C^r7oTz9>gw?6?)`FW|DStsdAa}T&FSZ_)hFKWah!3?
zXQ7;#yxesC__&1IM`mf>*;iY=Dj>h-d&&2AcUiZcJu^%5&HMNBt8AVf)sNp7)7RfW
z-9Gck&j$|@{yyBeaqUgZIVq`UMZSIe=4V^?_t#f>{;vklF6+nbvG_VC!kBqun%C_=
zLGMpb*XKUtwuX`E%o<Ng<<9Ew?{u%Pi;aGNvhM%Czg7Ek{Y`fJtvM+X|ED)#{+68;
zX*GsFUR_<yS~k^?gEP7O*v)|XCQfyqpPdDYL`*JteQj-Vym1rnZm%_-7Q3_RK0P`4
ztL)O(*Vn~wgeLhO>d#qT9BHxpjChYq&5sWcue|#8@$vEhRcCKV7R@vKy|4cNKdXO_
z4@vL#Sg~P~T4Kvro9C_NEx#TfZhx&?pZxvAj`~lVie}7=m~0Ss_Wtcz<@dBIg<oxE
zna!0fVB|KzzW(2ydy+<OO370Uk10R?`M%d-pXjUJv;TWsKzcrH4%eP1{)+ctTG=s$
zH*4}+fBpRY{PpcfH>ERYPR*M8WpBXz7~A=^XZzP2N|au+=BA~+)T_e((b_pPdLuRm
z*O^?AzRzU_45^!v_R>I8mN~4s$@$;(igeT2H%Dge`419HOH1;-wVvy1TY|CnMzz=B
z?Nx_c4bOP2@%$CLur0FF)Y9p!tID+{9H!#Huu{Adlal1y6i|Gz)AX`%mO!@JR?9zS
z(hKF>>kj7panTB{0LJo4=0bU!iVZb?eiYX3cpJIj_{!s&W6jOY!RKXVWpy{?CY=>I
zwlPLM`R`t5hGSm8{r~m6eE9Go)9o~#Ln3Yh$A5NhmVAFQW{zZsX|P25eY@IUC94wp
zzZ=~XKJ(yG*4AIU4!9iSNU5){zj^z1^tQw^=Z{A`J3HI_^v91MnT!oKr&-xoH(AE8
r98(xAjfQ$@G}@*ZZBu}A@dy6Xnc;_oyEk?L+qDdyu6{1-oD!M<@)lI`

literal 0
HcmV?d00001

diff --git a/src/component/template/component/PreviewTemplate.tsx b/src/component/template/component/PreviewTemplate.tsx
index 27cf564..ec53bd4 100644
--- a/src/component/template/component/PreviewTemplate.tsx
+++ b/src/component/template/component/PreviewTemplate.tsx
@@ -1,14 +1,16 @@
-import React, {useRef, useState} from 'react';
+import React, {HTMLProps, useRef, useState} from 'react';
 import Text from "@designsystem/component/text";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Icon, {IconType} from "@designsystem/foundation/icon";
 import colors from "@designsystem/foundation/colors";
-import styled, {CSSProperties} from "styled-components";
+import styled from "styled-components";
 import WeddingSchedule from "@remote/value/WeddingSchedule";
 import WeddingPlace from "@remote/value/WeddingPlace";
 import BaseInfo from "@remote/value/BaseInfo";
 import Template from "@remote/value/Template";
 import Spacer from "@designsystem/component/spacer";
+import {format, parse} from "date-fns";
+import {ko} from "date-fns/locale";
 
 interface PreviewTemplateProps {
     template: Template;
@@ -27,20 +29,25 @@ function PreviewTemplate(
         imgList
     }: PreviewTemplateProps
 ) {
+    const dateString = `${weddingSchedule.weddingDate} ${weddingSchedule.weddingTime}`;
+    console.log(dateString)
+    const date = parse(dateString, 'yyyy-MM-dd HH:mm', new Date());
+    console.log(date)
+    const isValidDate = !isNaN(date.getTime());
+
     switch (template.templateName) {
         case '템플릿1':
             return (
                 <S1.Root background={template.templateColor}>
                     <Column gap={36} $alignItems={'center'} margin={'0 23px 44px 23px'}>
-                        {/*<Text text={'MIN라인LINE Seed*@ HYOLYN & TAFYANG'} font={'LINESeedKR'} weight={400}/>*/}
-                        {/*<HorizontalDivider color={colors.black}/>*/}
                         <Column $alignItems={'center'} gap={12}>
-                            <Text size={18} weight={300}>{weddingSchedule.weddingDate}</Text>
+                            <Text size={18}
+                                  weight={300}>{isValidDate && format(date, 'yyyy년 M월 d일 EEEE a h시', {locale: ko})}</Text>
                             <Text size={18} weight={300}>{weddingPlace.placeName}({weddingPlace.floorHall})</Text>
                         </Column>
                     </Column>
                     <Column gap={44} $alignItems={'center'}>
-                        <S1.Img src={imgList[0]}/>
+                        <S1.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                         <Row gap={8} $alignItems={'center'}>
                             <Text size={16} weight={300}>신랑 {baseInfo.groomName}</Text>
                             <Icon type={IconType.HeartFill} size={16} color={colors.white}/>
@@ -53,10 +60,10 @@ function PreviewTemplate(
             return (
                 <Column $alignItems={'stretch'} background={colors.white}>
                     <Column $alignItems={'center'} gap={8} style={{padding: '72px 0'}}>
-                        <Text size={28} weight={300}>{weddingSchedule.weddingDate}</Text>
+                        <Text size={28} weight={300}>{isValidDate && format(date, 'yyyy/MM/dd', {locale: ko})}</Text>
                         <Text size={18} weight={300}>{weddingPlace.placeName}({weddingPlace.floorHall})</Text>
                     </Column>
-                    <S2.Img src={imgList[0]}/>
+                    <S2.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                     <Row gap={12} $alignItems={'center'} $justifyContent={'center'} padding={'72px 0'}>
                         <Text size={20} weight={300}>{baseInfo.groomName}</Text>
                         <Text size={20} weight={300}>&</Text>
@@ -69,8 +76,9 @@ function PreviewTemplate(
                 <S3.Root>
                     <Column $alignItems={'stretch'} padding={'32px 28px'}
                             style={{width: '100%', height: '100%', position: 'absolute'}}>
-                        <Text size={18} weight={100} color={colors.white}
-                              style={{alignSelf: 'center'}}>{weddingSchedule.weddingDate}</Text>
+                        <Text size={18} weight={100} color={colors.white} style={{alignSelf: 'center'}}>
+                            {isValidDate && format(date, 'yyyy.MM.dd EEE')}
+                        </Text>
                         <Spacer/>
                         <Row>
                             <Text size={16} weight={100} color={colors.white}>신랑 {baseInfo.groomName}</Text>
@@ -78,7 +86,7 @@ function PreviewTemplate(
                             <Text size={16} weight={100} color={colors.white}>신부 {baseInfo.brideName}</Text>
                         </Row>
                     </Column>
-                    <S3.Img src={imgList[0]}/>
+                    <S3.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                 </S3.Root>
             );
         case '템플릿4':
@@ -88,20 +96,20 @@ function PreviewTemplate(
                         <Text size={24} weight={100}>{baseInfo.groomName} & {baseInfo.brideName}</Text>
                         <Column gap={4} $alignItems={'center'}>
                             <Text size={14}
-                                  weight={300}>{weddingSchedule.weddingDate} {weddingSchedule.weddingTime}</Text>
+                                  weight={300}>{isValidDate && format(date, 'yyyy.MM.dd a h시', {locale: ko})}</Text>
                             <Text
                                 size={14}
                                 weight={300}
                             >{weddingPlace.placeName}</Text>
                         </Column>
                     </Column>
-                    <S4.Img src={imgList[0]}/>
+                    <S4.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                 </Column>
             );
         case '템플릿5':
             return (
                 <Column $alignItems={'stretch'} background={colors.white}>
-                    <S5.Img src={imgList[0]}/>
+                    <S5.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                     <Row $alignItems={'center'} gap={20} $justifyContent={'center'} padding={'0 0 48px 0'}>
                         <Text size={24} weight={300}>{baseInfo.groomName}</Text>
                         <Text size={16} weight={300} color={colors.g300}>and</Text>
@@ -113,14 +121,14 @@ function PreviewTemplate(
             return (
                 <Column background={template.templateColor} $alignItems={'stretch'}>
                     <Column gap={12} $alignItems={'center'} margin={'40px 0'}>
-                        <Text size={40} weight={100}>{weddingSchedule.weddingDate}</Text>
+                        <Text size={40} weight={100}>{isValidDate && format(date, 'MM / dd')}</Text>
                         <Row gap={24} $alignItems={'center'}>
                             <Text size={20} weight={300} color={colors.g600}>{baseInfo.groomName}</Text>
                             <Text size={20} weight={300} color={colors.g600}>그리고</Text>
                             <Text size={20} weight={300} color={colors.g600}>{baseInfo.brideName}</Text>
                         </Row>
                     </Column>
-                    <S6.Img src={imgList[0]}/>
+                    <S6.Img src={imgList[0] ?? '/EmptyImage.png'}/>
                 </Column>
             );
     }
@@ -161,8 +169,8 @@ const S3 = {
     `,
     Img: styled.img`
         display: flex;
-        object-fit: cover;
         width: 100%;
+        object-fit: cover;
     `
 };
 const S4 = {
@@ -175,7 +183,6 @@ const S4 = {
 const S5 = {
     Img: styled.img`
         display: flex;
-        width: 100%;
         object-fit: cover;
         margin: 48px 28px;
     `