Template

LinkMarry · Jan 17, 2025 · 9f7830d · 9f7830d
1 parent 9615318
commit 9f7830d
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 86 deletions.
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>링크매리</title>
+    <title>링크메리</title>
     <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <script type="text/javascript"
             src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_JAVASCRIPT_KEY%&libraries=services,clusterer,drawing"></script>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
 import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
 import config from "@config/config";
 import KakaoRedirectPage from "@page/KakaoRedirectPage";
@@ -18,7 +18,6 @@ import TemplateComponent from "@src/component/template/TemplateComponent";
 import {dummyWedding} from "@remote/value/Wedding";
 import TemplatesPage from "@page/templates/TemplatesPage";
 import GlobalStyle from "@src/GlobalStyle";
-import Cookies from "js-cookie";
 
 const {Kakao} = window as any;
 

diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx
@@ -52,7 +52,7 @@ function TemplateComponent(
     return (
         <S.container ref={rootRef} $templateFont={templateFont}>
             <PreviewTemplate
-                templateColor={templateColor}
+                template={wedding.template}
                 baseInfo={wedding.baseInfo}
                 weddingPlace={wedding.weddingPlace}
                 weddingSchedule={wedding.weddingSchedule}

diff --git a/src/component/template/component/GalleryTemplate.tsx b/src/component/template/component/GalleryTemplate.tsx
@@ -84,6 +84,7 @@ function GallerySlide(
         return () => {
             container?.removeEventListener('scroll', handleScroll);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

diff --git a/src/component/template/component/GuestCommentsTemplate.tsx b/src/component/template/component/GuestCommentsTemplate.tsx
@@ -1,6 +1,5 @@
 import React, {HTMLAttributes, useState} from 'react';
 import styled, {CSSProperties} from "styled-components";
-import {LinkMarryFont} from "@designsystem/foundation/text/textType";
 import Comment from "@remote/value/Comment";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";

diff --git a/src/component/template/component/MoneyInfoTemplate.tsx b/src/component/template/component/MoneyInfoTemplate.tsx
@@ -161,6 +161,4 @@ function MoneyCell(props: {
     );
 }
 
-const MoneyCellStyle = {};
-
 export default MoneyInfoTemplate;
diff --git a/src/component/template/component/PreviewTemplate.tsx b/src/component/template/component/PreviewTemplate.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
+import React, {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 from "styled-components";
+import styled, {CSSProperties} 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";
 
 interface PreviewTemplateProps {
-    templateColor: string;
+    template: Template;
     baseInfo: BaseInfo;
     weddingPlace: WeddingPlace;
     weddingSchedule: WeddingSchedule;
@@ -18,71 +20,121 @@ interface PreviewTemplateProps {
 
 function PreviewTemplate(
     {
-        templateColor,
+        template,
         baseInfo,
         weddingPlace,
         weddingSchedule,
         imgList
     }: PreviewTemplateProps
 ) {
-    return (
-        <S.root background={templateColor}>
-            <S.titleWrapper>
-                {/*<Text text={'MIN라인LINE Seed*@ HYOLYN & TAFYANG'} font={'LINESeedKR'} weight={400}/>*/}
-                {/*<HorizontalDivider color={colors.black}/>*/}
-                <S.descriptionWrapper>
-                    <Text size={18} weight={300}>
-                        {weddingSchedule.weddingDate}
-                    </Text>
-                    <Text size={18} weight={300}>
-                        {weddingPlace.placeName}
-                    </Text>
-                </S.descriptionWrapper>
-            </S.titleWrapper>
-            <Column gap={44} $alignItems={'center'}>
-                <S.img src={imgList[0]}/>
-                <Row gap={8} $alignItems={'center'}>
-                    <Text size={16} weight={300}>
-                        신랑 {baseInfo.groomName}
-                    </Text>
-                    <Icon type={IconType.HeartFill} size={16} color={colors.white}/>
-                    <Text size={16} weight={300}>
-                        신부 {baseInfo.brideName}
-                    </Text>
-                </Row>
-            </Column>
-        </S.root>
-    );
+    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}>{weddingPlace.placeName}({weddingPlace.floorHall})</Text>
+                        </Column>
+                    </Column>
+                    <Column gap={44} $alignItems={'center'}>
+                        <S1.Img src={imgList[0]}/>
+                        <Row gap={8} $alignItems={'center'}>
+                            <Text size={16} weight={300}>신랑 {baseInfo.groomName}</Text>
+                            <Icon type={IconType.HeartFill} size={16} color={colors.white}/>
+                            <Text size={16} weight={300}>신부 {baseInfo.brideName}</Text>
+                        </Row>
+                    </Column>
+                </S1.Root>
+            );
+        case '템플릿2':
+            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={18} weight={300}>{weddingPlace.placeName}({weddingPlace.floorHall})</Text>
+                    </Column>
+                    <S2.Img src={imgList[0]}/>
+                    <Row gap={12} $alignItems={'center'} $justifyContent={'center'} padding={'72px 0'}>
+                        <Text size={20} weight={300}>{baseInfo.groomName}</Text>
+                        <Text size={20} weight={300}>&</Text>
+                        <Text size={20} weight={300}>{baseInfo.brideName}</Text>
+                    </Row>
+                </Column>
+            );
+        case '템플릿3':
+            return (
+                <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>
+                        <Spacer/>
+                        <Row>
+                            <Text size={16} weight={100} color={colors.white}>신랑 {baseInfo.groomName}</Text>
+                            <Spacer/>
+                            <Text size={16} weight={100} color={colors.white}>신부 {baseInfo.brideName}</Text>
+                        </Row>
+                    </Column>
+                    <S3.Img src={imgList[0]}/>
+                </S3.Root>
+            );
+        case '템플릿4':
+            return (
+                <Column $alignItems={'stretch'} background={colors.white}>
+                    <Column gap={16} $alignItems={'center'} padding={'52px 0'}>
+                        <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>
+                            <Text
+                                size={14}
+                                weight={300}
+                            >{weddingPlace.placeName}</Text>
+                        </Column>
+                    </Column>
+                    <S4.Img src={imgList[0]}/>
+                </Column>
+            );
+        case '템플릿5':
+            return (
+                <Column $alignItems={'stretch'} background={colors.white}>
+                    <S5.Img src={imgList[0]}/>
+                    <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>
+                        <Text size={24} weight={300}>{baseInfo.brideName}</Text>
+                    </Row>
+                </Column>
+            );
+        case '템플릿6':
+            return (
+                <Column background={template.templateColor} $alignItems={'stretch'}>
+                    <Column gap={12} $alignItems={'center'} margin={'40px 0'}>
+                        <Text size={40} weight={100}>{weddingSchedule.weddingDate}</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]}/>
+                </Column>
+            );
+    }
 }
 
-const S = {
-    root: styled.div<{ background: string }>`
+const S1 = {
+    Root: styled.div<{ background: string }>`
         display: flex;
         flex-direction: column;
         padding: 44px 30px;
         background: ${({background}) => background};
         align-items: stretch;
     `,
-    titleWrapper: styled.div`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 23px 44px 23px;
-        gap: 36px;
-    `,
-    title: styled.span`
-        color: ${colors.black};
-        font-family: LINESeedKR-Bd, serif !important;
-        font-size: 20px;
-    `,
-    descriptionWrapper: styled.span`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 12px;
-        color: ${colors.black};
-    `,
-    img: styled.img`
+    Img: styled.img`
         display: flex;
         width: 100%;
         height: 512px;
@@ -92,5 +144,48 @@ const S = {
         outline: none;
     `
 };
+const S2 = {
+    Img: styled.img`
+        display: flex;
+        padding: 0 32px;
+        object-fit: cover;
+    `
+};
+const S3 = {
+    Root: styled.div`
+        display: flex;
+        position: relative;
+        align-items: stretch;
+        justify-content: stretch;
+        background: ${colors.white};
+    `,
+    Img: styled.img`
+        display: flex;
+        object-fit: cover;
+        width: 100%;
+    `
+};
+const S4 = {
+    Img: styled.img`
+        display: flex;
+        width: 100%;
+        object-fit: cover;
+    `
+};
+const S5 = {
+    Img: styled.img`
+        display: flex;
+        width: 100%;
+        object-fit: cover;
+        margin: 48px 28px;
+    `
+};
+const S6 = {
+    Img: styled.img`
+        display: flex;
+        width: 100%;
+        object-fit: cover;
+    `
+}
 
 export default PreviewTemplate;
diff --git a/src/component/template/component/VideoTemplate.tsx b/src/component/template/component/VideoTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React from 'react';
 import Video from "@remote/value/Video";
 import {Column} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";
@@ -22,7 +22,7 @@ function VideoTemplate(
             </Column>
             <S.iframe
                 height={250} title={video.videoTitle}
-                src={'https://www.youtube.com/embed/le4s2kMQWP4'}
+                // src={'https://www.youtube.com/embed/le4s2kMQWP4'}
             ></S.iframe>
         </S.container>
     );

diff --git a/src/component/template/component/weddingday/DDay.tsx b/src/component/template/component/weddingday/DDay.tsx
@@ -28,7 +28,6 @@ function DDay(
         dDayStyle
     }: DDayProps
 ) {
-
     const [remainingTime, setRemainingTime] = useState<RemainTime>({
         days: 0,
         hours: 0,

diff --git a/src/component/template/component/weddingday/WeddingDayTemplate.tsx b/src/component/template/component/weddingday/WeddingDayTemplate.tsx
@@ -76,7 +76,7 @@ function WeddingDayTemplate(
                 <DDay
                     baseInfo={baseInfo}
                     weddingSchedule={weddingSchedule}
-                    dDayStyle={'style1'}
+                    dDayStyle={dDayStyle}
                 />
             )}
         </S.root>

diff --git a/src/designsystem/component/flexLayout.ts b/src/designsystem/component/flexLayout.ts
@@ -33,14 +33,15 @@ export interface BaseFlexProps {
     flex?: CSSProperties['flex'];
     fill?: string;
     padding?: CSSProperties["padding"];
+    margin?: CSSProperties["margin"];
     $wrap?: boolean;
     background?: CSSProperties['background'];
     $customStyle?: RuleSet;
 }
 
 export const BaseFlex = styled.div<BaseFlexProps>`
     display: flex;
-    ${({gap, rowGap, columnGap, $alignItems, $alignSelf, $justifyContent, flex, fill, padding, $wrap, background, $customStyle}) => css`
+    ${({gap, rowGap, columnGap, $alignItems, $alignSelf, $justifyContent, flex, fill, padding, margin, $wrap, background, $customStyle}) => css`
         ${gap !== undefined ? css`gap: ${gap}px;` : undefined}
         ${rowGap !== undefined ? css`row-gap: ${rowGap}px;` : undefined}
         ${columnGap !== undefined ? css`column-gap: ${columnGap}px;` : undefined}
@@ -52,6 +53,7 @@ export const BaseFlex = styled.div<BaseFlexProps>`
         width: ${fill || 'auto'};
         background: ${background || 'transparent'};
         padding: ${padding};
+        margin: ${margin};
         ${$customStyle};
     `}}
 `;

diff --git a/src/page/invitation/dashboard/InvitationDashboard.tsx b/src/page/invitation/dashboard/InvitationDashboard.tsx
@@ -58,7 +58,7 @@ function InvitationDashboard() {
 
     return (
         <S.container>
-            <Column gap={44} style={{marginLeft: 64}} $alignItems={'stretch'}>
+            <Column gap={44} margin={'0 0 0 64px'} $alignItems={'stretch'}>
                 <Row style={{marginTop: 64}}>
                     <Column gap={8}>
                         <Text type={'h5'} color={colors.black}>내 디자인</Text>

diff --git a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx
@@ -73,7 +73,7 @@ ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩
         <S.container>
             <S.content>
                 <S.image src={weddingInfo.img} alt=""/>
-                <Column gap={12} $alignItems={'stretch'} style={{padding: 20, background: colors.g100}}>
+                <Column gap={12} $alignItems={'stretch'} padding={20} background={colors.g100}>
                     <Column gap={4} $alignItems={'stretch'}>
                         <Row gap={8}>
                             <S.urlLabel>{weddingInfo.url}</S.urlLabel>

diff --git a/src/page/invitation/design/component/OptionSegmentedButton.tsx b/src/page/invitation/design/component/OptionSegmentedButton.tsx
@@ -1,7 +1,4 @@
 import React, {HTMLAttributes} from 'react';
-import styled, {css} from "styled-components";
-import colors from "@designsystem/foundation/colors";
-import makeText from "@designsystem/foundation/text/textType";
 import {Row} from "@designsystem/component/flexLayout";
 import SegmentedButton from "@designsystem/component/segmentedButton";
-Original file line number
+Diff line change
@@ Expand Up / @@ -161,6 +161,4 @@ function MoneyCell(props: { @@
         );
     }
-    const MoneyCellStyle = {};
     export default MoneyInfoTemplate;