템플릿

LinkMarry · Jan 15, 2025 · 9615318 · 9615318
1 parent 109a8ec
commit 9615318
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,10 +14,11 @@ import FoundationDemo from "@designsystem/demo/foundation.demo";
 import NotificationPage from "@page/notification/NotificationPage";
 import NotificationDetailPage from "@page/notification/detail/NotificationDetailPage";
 import InvitationDashboardGuestComment from "@page/invitation/dashboard/guestComment/InvitationDashboardGuestComment";
-import Template1 from "@src/component/template/Template1";
+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;
 
@@ -40,8 +41,8 @@ function App() {
                     <Route path={'dashboard'}>
                         <Route index={true} element={<InvitationDashboard/>}/>
                         <Route path={'guest-comment'} element={<InvitationDashboardGuestComment/>}/>
+                        <Route path={'design'} element={<InvitationDesign/>}/>
                     </Route>
-                    <Route path={'design'} element={<InvitationDesign/>}/>
                     <Route path={'statistics'}>
                         <Route index={true} element={<InvitationStatistics/>}/>
                         <Route path={'detail'} element={<InvitationStatisticsDetail/>}/>
@@ -62,7 +63,7 @@ function App() {
                 {/*temp*/}
                 <Route path={'template1'} element={(
                     <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <Template1 wedding={dummyWedding}/>
+                        <TemplateComponent wedding={dummyWedding}/>
                     </div>
                 )}/>
             </Routes>

diff --git a/src/component/template/Template1.style.ts → ...onent/template/TemplateComponent.style.ts b/src/component/template/Template1.style.ts → ...onent/template/TemplateComponent.style.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import colors from "@designsystem/foundation/colors";
 import {LinkMarryFont} from "@designsystem/foundation/text/textType";
 import {implementText} from "@designsystem/foundation/text/textProperties";
 
@@ -14,5 +13,4 @@ export const container = styled.div<{ $templateFont: LinkMarryFont }>`
             fontFamily: $templateFont
         })};
     }
-`;
-
+`;
diff --git a/src/component/template/Template1.tsx → src/component/template/TemplateComponent.tsx b/src/component/template/Template1.tsx → src/component/template/TemplateComponent.tsx
@@ -1,23 +1,24 @@
 import React, {useRef} from 'react';
 import Wedding from "@remote/value/Wedding";
-import * as S from '@src/component/template/Template1.style';
+import * as S from '@src/component/template/TemplateComponent.style';
 import MoneyInfoTemplate from "@src/component/template/component/MoneyInfoTemplate";
 import FooterTemplate from "@src/component/template/component/FooterTemplate";
-import {templateFontSizeRecord} from "@remote/value/Template";
+import {templateFontSizeRecord, TemplateName} from "@remote/value/Template";
 import GuestCommentsTemplate from "@src/component/template/component/GuestCommentsTemplate";
 import {increaseFontSize} from "@util/html.util";
 import CongratulationsTemplate from "@src/component/template/component/CongratulationsTemplate";
 import WeddingDayTemplate from "@src/component/template/component/weddingday/WeddingDayTemplate";
 import LocationTemplate from "@src/component/template/component/LocationTemplate";
 import PreviewTemplate from "@src/component/template/component/PreviewTemplate";
-import GalleryTemplate from "@src/component/template/component/GalleryTemplate";
+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";
 
 interface Template1Props {
     wedding: Wedding;
 }
 
-function Template1(
+function TemplateComponent(
     {
         wedding
     }: Template1Props
@@ -30,6 +31,24 @@ function Template1(
         increaseFontSize(rootRef, addFontSize);
     })();
 
+    const slideStyle: Record<TemplateName, GallerySlideStyle | undefined> = {
+        템플릿1: 'style1',
+        템플릿2: 'style2',
+        템플릿3: 'style1',
+        템플릿4: 'style2',
+        템플릿5: undefined,
+        템플릿6: 'style1',
+    };
+
+    const dDayStyle: Record<TemplateName, DDayStyle> = {
+        템플릿1: 'style1',
+        템플릿2: 'style2',
+        템플릿3: 'style1',
+        템플릿4: 'style2',
+        템플릿5: 'style2',
+        템플릿6: 'style1',
+    }
+
     return (
         <S.container ref={rootRef} $templateFont={templateFont}>
             <PreviewTemplate
@@ -42,6 +61,7 @@ function Template1(
             <WeddingDayTemplate
                 baseInfo={wedding.baseInfo}
                 weddingSchedule={wedding.weddingSchedule}
+                dDayStyle={dDayStyle[wedding.template.templateName]}
             />
             <CongratulationsTemplate
                 baseInfo={wedding.baseInfo}
@@ -52,7 +72,7 @@ function Template1(
                 rootRef={rootRef}
                 imgDesign={wedding.imgDesign}
                 imgList={wedding.imgList}
-                slideStyle={'style1'}
+                slideStyle={slideStyle[wedding.template.templateName]}
             />
             <LocationTemplate
                 templateColor={templateColor}
@@ -73,4 +93,4 @@ function Template1(
 }
 
 
-export default Template1;
+export default TemplateComponent;
diff --git a/src/component/template/component/weddingday/WeddingDayTemplate.tsx b/src/component/template/component/weddingday/WeddingDayTemplate.tsx
@@ -6,17 +6,19 @@ import HorizontalDivider from "@designsystem/component/horizontalDivider";
 import styled from "styled-components";
 import WeddingSchedule from "@remote/value/WeddingSchedule";
 import BaseInfo from "@remote/value/BaseInfo";
-import DDay from "@src/component/template/component/weddingday/DDay";
+import DDay, {DDayStyle} from "@src/component/template/component/weddingday/DDay";
 
 interface WeddingDayProps {
     baseInfo: BaseInfo;
     weddingSchedule: WeddingSchedule;
+    dDayStyle: DDayStyle;
 }
 
 function WeddingDayTemplate(
     {
         baseInfo,
         weddingSchedule,
+        dDayStyle
     }: WeddingDayProps
 ) {
     const weddingDate = weddingSchedule.weddingDate;

diff --git a/src/designsystem/component/segmentedButton.ts b/src/designsystem/component/segmentedButton.ts
@@ -0,0 +1,23 @@
+import styled, {css} from "styled-components";
+import colors from "@designsystem/foundation/colors";
+import makeText from "@designsystem/foundation/text/textType";
+
+
+const SegmentedButton = styled.button<{ selected: boolean; }>`
+    height: 44px;
+    border-radius: 8px;
+    background: ${colors.white};
+    cursor: pointer;
+    flex: 1;
+    ${({selected}) => selected ? css`
+        border: 2px solid ${colors.p800};
+        color: ${colors.p800};
+        ${makeText('p4')};
+    ` : css`
+        border: 2px solid ${colors.g200};
+        color: ${colors.g400};
+        ${makeText('p5')};
+    `}
+`;
+
+export default SegmentedButton;
diff --git a/src/page/invitation/InvitationLayout.tsx b/src/page/invitation/InvitationLayout.tsx
@@ -8,8 +8,6 @@ import {InvitationSideBarType} from "@page/invitation/component/InvitationSideBa
 function getSelectedSideBarType(pathname: string): InvitationSideBarType | null {
     if (pathname.startsWith('/invitation/dashboard')) {
         return 'dashboard';
-    } else if (pathname.startsWith('/invitation/design')) {
-        return 'design';
     } else if (pathname.startsWith('/invitation/statistics')) {
         return 'statistics';
     } else {

diff --git a/src/page/invitation/component/InvitationSideBar.tsx b/src/page/invitation/component/InvitationSideBar.tsx
@@ -11,7 +11,7 @@ interface InvitationSideBarProps {
     onChange: (item: InvitationSideBarType) => void;
 }
 
-const items: InvitationSideBarType[] = ['dashboard', 'design', 'statistics'];
+const items: InvitationSideBarType[] = ['dashboard', 'statistics'];
 
 function InvitationSideBar(
     {

diff --git a/src/page/invitation/component/InvitationSideBarType.ts b/src/page/invitation/component/InvitationSideBarType.ts
@@ -1,6 +1,6 @@
 import {IconType} from "@designsystem/foundation/icon";
 
-export type InvitationSideBarType = 'dashboard' | 'design' | 'statistics';
+export type InvitationSideBarType = 'dashboard' | 'statistics';
 export const invitationSideBarRecords: Record<InvitationSideBarType, {
     title: string;
     icon: IconType;
@@ -9,10 +9,6 @@ export const invitationSideBarRecords: Record<InvitationSideBarType, {
         title: '대쉬보드',
         icon: IconType.Manage
     },
-    design: {
-        title: '디자인',
-        icon: IconType.Star
-    },
     statistics: {
         title: '통계',
         icon: IconType.ArcticonsSpotistats

diff --git a/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx b/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx
@@ -36,7 +36,7 @@ function CreateDesignDialog(
 
         try {
             await weddingApi.checkUrlConflict(url);
-            navigate(`/invitation/design?url=${url}`);
+            navigate(`/invitation/dashboard/design?url=${url}`);
         } catch (error) {
             console.error(error);
             setIsError(true);

diff --git a/src/page/invitation/design/InvitationDesign.tsx b/src/page/invitation/design/InvitationDesign.tsx
@@ -32,7 +32,7 @@ import MoneyInfo, {defaultMoneyInfo} from "@remote/value/MoneyInfo";
 import Phone, {defaultPhone} from "@remote/value/Phone";
 import Rsvp, {defaultRsvp} from "@remote/value/Rsvp";
 import Wedding from "@remote/value/Wedding";
-import Template1 from "@src/component/template/Template1";
+import TemplateComponent from "@src/component/template/TemplateComponent";
 import LinkShare, {defaultLinkShare} from "@remote/value/LinkShare";
 import BaseMusic, {defaultBaseMusic} from "@remote/value/BaseMusic";
 import Video, {defaultVideo} from "@remote/value/Video";
@@ -471,7 +471,7 @@ function InvitationDesign() {
             <S.preview>
                 <S.previewScrollableContent>
                     <S.previewContent>
-                        <Template1 wedding={wedding}/>
+                        <TemplateComponent wedding={wedding}/>
                     </S.previewContent>
                 </S.previewScrollableContent>
             </S.preview>

diff --git a/src/page/invitation/design/component/OptionSegmentedButton.tsx b/src/page/invitation/design/component/OptionSegmentedButton.tsx
@@ -3,6 +3,7 @@ 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";
 
 interface OptionSegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     selectedIndex?: number;
@@ -21,31 +22,16 @@ function OptionSegmentedButton(
     return (
         <Row gap={8} {...props}>
             {items.map((item, index) => (
-                <S.segmentedButton key={index} onClick={() => {
-                    onClickItem(index);
-                }} selected={index === selectedIndex}>{item}</S.segmentedButton>
+                <SegmentedButton
+                    key={index}
+                    onClick={() => {
+                        onClickItem(index);
+                    }} 
+                    selected={index === selectedIndex}
+                >{item}</SegmentedButton>
             ))}
         </Row>
     );
 }
 
-const S = {
-    segmentedButton: styled.button<{ selected: boolean; }>`
-        height: 44px;
-        border-radius: 8px;
-        background: ${colors.white};
-        cursor: pointer;
-        flex: 1;
-        ${({selected}) => selected ? css`
-            border: 2px solid ${colors.p800};
-            color: ${colors.p800};
-            ${makeText('p4')};
-        ` : css`
-            border: 2px solid ${colors.g200};
-            color: ${colors.g400};
-            ${makeText('p5')};
-        `}
-    `,
-}
-
 export default OptionSegmentedButton;
diff --git a/src/page/invitation/design/option/TemplateOption.tsx b/src/page/invitation/design/option/TemplateOption.tsx
@@ -9,9 +9,10 @@ import Template, {
     templateColors,
     TemplateFontSize,
     templateFontSizeRecord,
-    templateFontSizes
+    templateFontSizes, templateNames
 } from "@remote/value/Template";
 import {LinkMarryFont, linkMarryFonts} from "@designsystem/foundation/text/textType";
+import SegmentedButton from "@designsystem/component/segmentedButton";
 
 interface TemplateOptionProps {
     template: Template;
@@ -28,7 +29,16 @@ function TemplateOption(
         <S.container>
             <Column gap={32} flex={1}>
                 <Row gap={12}>
-                    <OptionLabel label={'디자인'}/>
+                    <OptionLabel label={'디자인'} style={{alignSelf: 'flex-start'}}/>
+                    <S.designWrapper>
+                        {templateNames.map(templateName => (
+                            <SegmentedButton selected={templateName === template.templateName} style={{width: 126}} onClick={() => {
+                                onChange({...template, templateName});
+                            }}>
+                                {templateName}
+                            </SegmentedButton>
+                        ))}
+                    </S.designWrapper>
                 </Row>
                 <HorizontalDivider/>
                 <Row gap={12}>
@@ -83,6 +93,11 @@ const S = {
         display: flex;
         padding: 36px;
     `,
+    designWrapper: styled.div`
+        display: grid;
+        grid-template-columns: repeat(2, 1fr); /* 가로로 2개의 열 */
+        gap: 12px;
+    `,
     backgroundColor: {
         container: styled.div`
             display: grid;

diff --git a/src/remote/value/Template.ts b/src/remote/value/Template.ts
@@ -1,5 +1,14 @@
 import {LinkMarryFont} from "@designsystem/foundation/text/textType";
 
+export type TemplateName =
+    '템플릿1'
+    | '템플릿2'
+    | '템플릿3'
+    | '템플릿4'
+    | '템플릿5'
+    | '템플릿6'
+export const templateNames: TemplateName[] = ['템플릿1', '템플릿2', '템플릿3', '템플릿4', '템플릿5', '템플릿6'];
+
 export type TemplateColor =
     '#F7F7F2'
     | '#FBF2F2'
@@ -36,7 +45,7 @@ export const templateFontSizeRecord: Record<TemplateFontSize, {
 
 export default interface Template {
     // 선택한 템플릿 이름
-    templateName: string;
+    templateName: TemplateName;
 
     // 선택한 템플릿 색
     templateColor: TemplateColor;