From 9111869eec2efc1697629f1e89f40495a09ecbbc Mon Sep 17 00:00:00 2001
From: hhhello <hhhello0507@dgsw.hs.kr>
Date: Sat, 18 Jan 2025 12:22:46 +0900
Subject: [PATCH] =?UTF-8?q?InvitationLetter=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/InvitationLetterIcon.svg               |  3 +
 .../template/TemplateComponent.style.ts       |  2 +-
 src/component/template/TemplateComponent.tsx  | 17 ++++++
 .../component/InvitationLetterTemplate.tsx    | 61 +++++++++++++++++++
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 public/InvitationLetterIcon.svg
 create mode 100644 src/component/template/component/InvitationLetterTemplate.tsx

diff --git a/public/InvitationLetterIcon.svg b/public/InvitationLetterIcon.svg
new file mode 100644
index 0000000..4c99d31
--- /dev/null
+++ b/public/InvitationLetterIcon.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.87387 2.73122C9.83461 2.82949 9.79902 2.92956 9.76674 3.02979C9.69186 2.87347 9.61103 2.71383 9.52457 2.55483C9.24321 2.0374 8.8856 1.49553 8.45593 1.10075C8.02624 0.705961 7.4563 0.400449 6.78942 0.529908C5.2114 0.836248 4.66003 2.23559 4.19195 3.47992C3.7953 4.53438 3.96795 5.90649 4.194 6.93226C4.28275 7.33497 4.38413 7.70266 4.47556 8.00349C4.11681 7.95987 3.67341 7.92587 3.21823 7.9409C2.68338 7.95855 2.08522 8.04496 1.58577 8.30095C1.06211 8.56934 0.644059 9.02975 0.549107 9.73841C0.396058 10.8807 0.625929 11.846 0.892181 12.5232C1.0254 12.862 1.16865 13.1311 1.28032 13.318C1.33624 13.4115 1.38449 13.4848 1.41998 13.5363C1.43774 13.5621 1.45233 13.5824 1.46313 13.5972L1.47641 13.6151L1.48078 13.6209L1.48237 13.6229L1.48302 13.6238L1.4833 13.6241C1.48343 13.6243 1.48356 13.6245 1.87897 13.3184L1.48356 13.6245L1.52103 13.6729L1.56909 13.7108C2.11473 14.1417 2.49853 14.4237 2.88339 14.571C3.29406 14.7281 3.66951 14.7187 4.12821 14.6963C4.44836 14.6806 4.78221 14.577 5.08259 14.4496C4.85767 15.1558 4.63325 16.0914 4.71902 16.8857C4.83132 17.9258 5.03683 18.5974 5.64064 19.461C6.06923 20.074 6.54913 20.4463 7.14317 20.5937C7.7087 20.734 8.31132 20.6513 8.93773 20.5148C9.61287 20.3677 10.1042 20.1042 10.4777 19.6582C10.8298 19.2377 11.0427 18.6916 11.2516 18.075C11.3063 17.9136 11.351 17.747 11.3876 17.5818C11.6727 18.0022 12.036 18.4431 12.4511 18.7145C13.1528 19.1735 13.9194 19.4783 14.7002 19.5066C15.4943 19.5354 16.2669 19.2759 16.9499 18.6702C17.437 18.2382 17.8095 17.7495 18.0325 17.1797C18.2561 16.6083 18.3178 15.9848 18.226 15.3015C18.1612 14.8187 17.9275 14.39 17.6522 14.0337C17.3753 13.6753 17.0355 13.3633 16.7158 13.1101C16.6689 13.073 16.6222 13.0369 16.5758 13.0019C16.8887 12.929 17.2361 12.8348 17.5901 12.7144C18.1804 12.5137 18.8129 12.2322 19.3354 11.8373C19.8596 11.4412 20.3062 10.9045 20.4459 10.194L20.4679 10.0824C20.6787 9.01681 20.913 7.83211 20.0722 6.74784C19.8598 6.47395 19.678 6.26686 19.4109 6.09629C19.1628 5.93791 18.8611 5.82528 18.4566 5.679C17.7894 5.43775 16.9464 5.4033 16.314 5.41788C16.1297 5.42213 15.9577 5.43074 15.8059 5.44091C15.8246 5.24828 15.8407 5.02325 15.8466 4.78227C15.8553 4.4241 15.8418 4.01955 15.7766 3.62842C15.7122 3.24223 15.5918 2.83515 15.3638 2.49765C14.2523 0.852375 11.8889 0.357432 10.4225 1.8404C10.1735 2.09228 9.99905 2.41792 9.87387 2.73122ZM5.10212 9.12044L5.10292 9.12062L5.10312 9.12067L5.10321 9.12069L5.10324 9.1207L6.02769 9.33559L5.68184 8.45163L5.68181 8.45156L5.68181 8.45155L5.68176 8.45143L5.68141 8.45053L5.67933 8.44514L5.67027 8.42129C5.66214 8.39972 5.64997 8.36702 5.63454 8.32427C5.60366 8.23874 5.55976 8.11325 5.50893 7.95653C5.40704 7.64244 5.27837 7.20623 5.17057 6.71705C4.94803 5.70724 4.84258 4.59054 5.12792 3.83201C5.6319 2.49224 6.02542 1.69689 6.98 1.51158C7.20788 1.46734 7.4677 1.55078 7.77936 1.83713C8.09103 2.12349 8.38634 2.55493 8.64606 3.03254C8.9025 3.50414 9.10821 3.99061 9.25048 4.36231C9.3213 4.54733 9.37568 4.70199 9.41212 4.80965C9.43032 4.86344 9.44401 4.90538 9.45299 4.93338L9.46291 4.96463L9.46517 4.97189L9.46561 4.97332L9.46562 4.97335L9.46565 4.97347L9.46635 4.97323L10.4423 4.8538C10.4431 4.85385 10.4431 4.85386 10.4431 4.85386L10.4431 4.85378L10.4431 4.85371L10.4432 4.85118L10.444 4.83827C10.4448 4.82632 10.4461 4.80784 10.448 4.78357C10.4518 4.73498 10.4581 4.6634 10.4679 4.57469C10.4876 4.39657 10.521 4.15277 10.5755 3.88891C10.6302 3.62358 10.7043 3.3479 10.8025 3.10225C10.9025 2.85189 11.0158 2.66263 11.1336 2.54351C12.0702 1.59628 13.7047 1.82823 14.5352 3.05746C14.6514 3.22945 14.7379 3.47972 14.7902 3.79296C14.8416 4.10127 14.8547 4.43823 14.8469 4.7579C14.8391 5.07592 14.8111 5.36583 14.7848 5.57659C14.7717 5.6816 14.7592 5.76603 14.7501 5.82338C14.7455 5.85204 14.7418 5.87387 14.7394 5.88805L14.7367 5.90348L14.7361 5.90669L14.7361 5.90679L14.736 5.90695L14.736 5.90706L14.736 5.90713L14.6089 6.58922L15.2962 6.49365L15.2963 6.49365L15.2964 6.49364L15.2965 6.49362L15.2967 6.49359L15.2996 6.49319L15.3134 6.49139C15.326 6.48976 15.3453 6.48733 15.3706 6.48433C15.4214 6.47832 15.4963 6.47003 15.5902 6.46127C15.7784 6.4437 16.0409 6.42444 16.337 6.41761C16.9464 6.40356 17.6329 6.44453 18.1165 6.61941C18.5463 6.77481 18.736 6.85184 18.8727 6.93913C18.9903 7.01423 19.0867 7.10882 19.2819 7.36063C19.8291 8.0663 19.6985 8.81157 19.4646 10.0012C19.3879 10.3918 19.1354 10.7351 18.7325 11.0395C18.328 11.3452 17.8057 11.5849 17.2681 11.7677C16.7344 11.9492 16.2094 12.0668 15.8153 12.139C15.6191 12.1749 15.4572 12.1993 15.3454 12.2145C15.2895 12.2221 15.2463 12.2275 15.2176 12.2309L15.1858 12.2345L15.1786 12.2352L15.1775 12.2354L15.1773 12.2354L15.1772 12.2354L13.4825 12.4062L15.0006 13.1783L15.0006 13.1784L15.0008 13.1784L15.001 13.1785L15.001 13.1785L15.0042 13.1802L15.02 13.1885C15.0346 13.1962 15.0569 13.2081 15.086 13.2241C15.1442 13.2561 15.229 13.3042 15.3321 13.3667C15.5391 13.492 15.8152 13.6725 16.095 13.8941C16.3765 14.117 16.6502 14.3724 16.8609 14.6452C17.0733 14.9201 17.2016 15.1864 17.2349 15.4346C17.3075 15.9752 17.2543 16.4243 17.1013 16.8152C16.9477 17.2078 16.6819 17.5712 16.2863 17.922C15.7922 18.3602 15.2691 18.5266 14.7364 18.5073C14.1902 18.4875 13.5988 18.2703 12.9984 17.8776C12.6461 17.6472 12.2779 17.1511 11.9783 16.646C11.835 16.4044 11.7181 16.1795 11.6371 16.0149C11.5968 15.9329 11.5656 15.8665 11.5448 15.8212L11.5323 15.7939L11.5216 15.77L11.5162 15.7577L11.515 15.7551L11.515 15.755L11.5149 15.7548C11.5149 15.7548 11.5149 15.7548 11.5144 15.7551L10.5567 15.9605L10.5562 15.9605L10.5562 15.9606L10.5562 15.9616L10.5563 15.9686L10.5562 15.9999C10.5561 16.0282 10.5556 16.0706 10.5541 16.1247C10.5512 16.2331 10.5444 16.3871 10.5289 16.5666C10.4975 16.9316 10.4325 17.3763 10.3045 17.7541C10.094 18.3753 9.92955 18.7552 9.711 19.0162C9.51391 19.2516 9.24156 19.4251 8.7248 19.5377C8.11907 19.6697 7.71099 19.7043 7.38399 19.6231C7.08551 19.5491 6.79106 19.3612 6.4602 18.888C5.97142 18.1889 5.81128 17.6864 5.71324 16.7784C5.64934 16.1866 5.82756 15.3943 6.05196 14.7016C6.1609 14.3653 6.2747 14.0702 6.36124 13.8594C6.40442 13.7542 6.44059 13.6706 6.46566 13.6138C6.47819 13.5855 6.48793 13.5639 6.49437 13.5498L6.50148 13.5343L6.50305 13.5309L6.50324 13.5305L6.50329 13.5304L6.50289 13.5302L5.75196 12.9179C5.75167 12.9175 5.75167 12.9175 5.75168 12.9175L5.75156 12.9176L5.75042 12.9184L5.74306 12.9238L5.71079 12.947C5.6818 12.9676 5.63851 12.9979 5.58366 13.0346C5.47352 13.1084 5.31897 13.2069 5.14157 13.3061C4.7653 13.5164 4.36607 13.6834 4.07928 13.6974C3.61432 13.7202 3.43354 13.7108 3.2408 13.637C3.02943 13.5562 2.77294 13.3852 2.24362 12.9692L2.24344 12.9689C2.21918 12.9337 2.18269 12.8785 2.13866 12.8049C2.05043 12.6573 1.93295 12.4373 1.82282 12.1572C1.60238 11.5966 1.41511 10.8052 1.54025 9.87122C1.58439 9.54177 1.75732 9.33672 2.04189 9.19087C2.35066 9.03261 2.77798 8.95598 3.25122 8.94035C3.71609 8.92501 4.18035 8.96961 4.53322 9.01968C4.70839 9.04453 4.85324 9.07032 4.95337 9.08968C5.00338 9.09935 5.04207 9.10739 5.06763 9.11286L5.09585 9.11902L5.10212 9.12044ZM9.99501 9.70716C10.108 9.61549 10.2078 9.58619 10.3013 9.58377C10.4036 9.58111 10.5319 9.61051 10.6884 9.68966C11.0111 9.85278 11.356 10.1767 11.6661 10.549C12.2025 11.193 12.4175 11.6111 12.2302 12.0966C12.1714 12.249 12.0788 12.328 11.9582 12.3725C11.8214 12.4229 11.6232 12.4355 11.3781 12.3835C10.8776 12.2772 10.3561 11.94 10.0978 11.547C9.87048 11.2009 9.72573 10.8078 9.70606 10.4639C9.68701 10.1309 9.78265 9.87949 9.99501 9.70716ZM12.4344 9.90895C12.094 9.50027 11.6442 9.05234 11.1396 8.79722C10.8825 8.66726 10.589 8.57596 10.2753 8.5841C9.95282 8.59247 9.64239 8.70547 9.36489 8.93067C8.84333 9.35392 8.67516 9.95231 8.70769 10.521C8.7396 11.0787 8.96182 11.6391 9.26207 12.0961C9.68215 12.7355 10.4445 13.2076 11.1705 13.3617C11.5387 13.4398 11.9394 13.4453 12.3043 13.3107C12.6855 13.17 12.9975 12.8859 13.1632 12.4566C13.5783 11.3808 12.9524 10.5308 12.4344 9.90895Z" fill="#787878"/>
+</svg>
diff --git a/src/component/template/TemplateComponent.style.ts b/src/component/template/TemplateComponent.style.ts
index f3493c1..8f6b638 100644
--- a/src/component/template/TemplateComponent.style.ts
+++ b/src/component/template/TemplateComponent.style.ts
@@ -8,7 +8,7 @@ export const container = styled.div<{ $templateFont: LinkMarryFont }>`
     width: 436px;
     align-items: stretch;
 
-    * {
+    *:not(.override-font) {
         ${({$templateFont}) => implementText({
             fontFamily: $templateFont
         })};
diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx
index 2b74498..036b84e 100644
--- a/src/component/template/TemplateComponent.tsx
+++ b/src/component/template/TemplateComponent.tsx
@@ -13,6 +13,9 @@ import PreviewTemplate from "@src/component/template/component/PreviewTemplate";
 import GalleryTemplate, {GallerySlideStyle} from "@src/component/template/component/GalleryTemplate";
 import VideoTemplate from "@src/component/template/component/VideoTemplate";
 import {DDayStyle} from "@src/component/template/component/weddingday/DDay";
+import InvitationLetterTemplate, {
+    InvitationLetterStyle
+} from "@src/component/template/component/InvitationLetterTemplate";
 
 interface Template1Props {
     wedding: Wedding;
@@ -48,6 +51,15 @@ function TemplateComponent(
         템플릿5: 'style2',
         템플릿6: 'style1',
     }
+    
+    const invitationLetterStyle: Record<TemplateName, InvitationLetterStyle> = {
+        템플릿1: 'style1',
+        템플릿2: 'style1',
+        템플릿3: 'style2',
+        템플릿4: 'style3',
+        템플릿5: 'style3',
+        템플릿6: 'style2',
+    }
 
     return (
         <S.container ref={rootRef} $templateFont={templateFont}>
@@ -58,6 +70,11 @@ function TemplateComponent(
                 weddingSchedule={wedding.weddingSchedule}
                 imgList={wedding.imgList}
             />
+            <InvitationLetterTemplate
+                baseInfo={wedding.baseInfo}
+                greeting={wedding.greeting}
+                invitationLetterStyle={invitationLetterStyle[wedding.template.templateName]}
+            />
             <WeddingDayTemplate
                 baseInfo={wedding.baseInfo}
                 weddingSchedule={wedding.weddingSchedule}
diff --git a/src/component/template/component/InvitationLetterTemplate.tsx b/src/component/template/component/InvitationLetterTemplate.tsx
new file mode 100644
index 0000000..dd4ac37
--- /dev/null
+++ b/src/component/template/component/InvitationLetterTemplate.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {Column, Row} from "@designsystem/component/flexLayout";
+import HorizontalDivider from "@designsystem/component/horizontalDivider";
+import colors from "@designsystem/foundation/colors";
+import Text from "@designsystem/component/text";
+import Greeting from "@remote/value/Greeting";
+import BaseInfo from "@remote/value/BaseInfo";
+
+export type InvitationLetterStyle = 'style1' | 'style2' | 'style3';
+
+interface InvitationLetterTemplateProps {
+    baseInfo: BaseInfo;
+    greeting: Greeting;
+    invitationLetterStyle: InvitationLetterStyle;
+}
+
+function InvitationLetterTemplate(
+    {
+        baseInfo,
+        greeting,
+        invitationLetterStyle
+    }: InvitationLetterTemplateProps
+) {
+    return (
+        <Column gap={40} padding={'72px 60px'} background={colors.white} $alignItems={'center'}>
+            {invitationLetterStyle === 'style1' ? (
+                <Text className={'override-font'} weight={300} size={12} font={'Aleo'} color={colors.g300}>
+                    Wedding Invitation
+                </Text>
+            ) : invitationLetterStyle === 'style3' ? (
+                <img src={'/invitationLetterIcon.svg'} width={20} height={20} alt="" color={colors.white}/>
+            ) : (
+                <></>
+            )}
+            <GreetingContent text={greeting.greetingContent}/>
+            <HorizontalDivider style={{width: 140}}/>
+            <Text weight={300} size={14} color={colors.g600}>
+                <Row $alignItems={'center'} gap={8}>
+                    <span>신랑 {baseInfo.groomName}</span><span>•</span><span>신부 {baseInfo.brideName}</span>
+                </Row>
+            </Text>
+        </Column>
+    );
+}
+
+function GreetingContent(props: { text: string }) {
+    return (
+        <Text
+            size={14}
+            color={colors.g600}
+            weight={300}
+            style={{
+                overflow: 'hidden',
+                wordBreak: 'break-all',
+                textAlign: 'center'
+            }}
+        >{props.text}</Text>
+    );
+}
+
+export default InvitationLetterTemplate;
\ No newline at end of file