InvitationLetter 추가

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
         })};

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}

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;