From 9f7830d74418790846a91791b467c7843da8ecdd Mon Sep 17 00:00:00 2001 From: hhhello Date: Fri, 17 Jan 2025 09:10:36 +0900 Subject: [PATCH] Template --- public/index.html | 2 +- src/App.tsx | 3 +- src/component/template/TemplateComponent.tsx | 2 +- .../template/component/GalleryTemplate.tsx | 1 + .../component/GuestCommentsTemplate.tsx | 1 - .../template/component/MoneyInfoTemplate.tsx | 2 - .../template/component/PreviewTemplate.tsx | 203 +++++++++++++----- .../template/component/VideoTemplate.tsx | 4 +- .../template/component/weddingday/DDay.tsx | 1 - .../weddingday/WeddingDayTemplate.tsx | 2 +- src/designsystem/component/flexLayout.ts | 4 +- .../dashboard/InvitationDashboard.tsx | 2 +- .../component/DashboardInvitationCell.tsx | 2 +- .../component/OptionSegmentedButton.tsx | 3 - .../design/option/WeddingPlaceOption.tsx | 39 ++-- .../component/StatisticsInvitationCell.tsx | 2 +- src/page/templates/component/TemplateCell.tsx | 2 +- 17 files changed, 189 insertions(+), 86 deletions(-) diff --git a/public/index.html b/public/index.html index 0fd2b8a..b5f448c 100644 --- 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`. --> - 링크매리 + 링크메리 diff --git a/src/App.tsx b/src/App.tsx index f7c9ae7..ef68097 100644 --- 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 index c9d65e3..2b74498 100644 --- a/src/component/template/TemplateComponent.tsx +++ b/src/component/template/TemplateComponent.tsx @@ -52,7 +52,7 @@ function TemplateComponent( 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 index 5cdd5a7..d113d87 100644 --- 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 index bca0dde..ca982c8 100644 --- 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; \ No newline at end of file diff --git a/src/component/template/component/PreviewTemplate.tsx b/src/component/template/component/PreviewTemplate.tsx index 1760a0c..27cf564 100644 --- 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 ( - - - {/**/} - {/**/} - - - {weddingSchedule.weddingDate} - - - {weddingPlace.placeName} - - - - - - - - 신랑 {baseInfo.groomName} - - - - 신부 {baseInfo.brideName} - - - - - ); + switch (template.templateName) { + case '템플릿1': + return ( + + + {/**/} + {/**/} + + {weddingSchedule.weddingDate} + {weddingPlace.placeName}({weddingPlace.floorHall}) + + + + + + 신랑 {baseInfo.groomName} + + 신부 {baseInfo.brideName} + + + + ); + case '템플릿2': + return ( + + + {weddingSchedule.weddingDate} + {weddingPlace.placeName}({weddingPlace.floorHall}) + + + + {baseInfo.groomName} + & + {baseInfo.brideName} + + + ); + case '템플릿3': + return ( + + + {weddingSchedule.weddingDate} + + + 신랑 {baseInfo.groomName} + + 신부 {baseInfo.brideName} + + + + + ); + case '템플릿4': + return ( + + + {baseInfo.groomName} & {baseInfo.brideName} + + {weddingSchedule.weddingDate} {weddingSchedule.weddingTime} + {weddingPlace.placeName} + + + + + ); + case '템플릿5': + return ( + + + + {baseInfo.groomName} + and + {baseInfo.brideName} + + + ); + case '템플릿6': + return ( + + + {weddingSchedule.weddingDate} + + {baseInfo.groomName} + 그리고 + {baseInfo.brideName} + + + + + ); + } } -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; \ No newline at end of file diff --git a/src/component/template/component/VideoTemplate.tsx b/src/component/template/component/VideoTemplate.tsx index aabba35..3887e4b 100644 --- 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( ); diff --git a/src/component/template/component/weddingday/DDay.tsx b/src/component/template/component/weddingday/DDay.tsx index e016ea3..b0324be 100644 --- 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({ days: 0, hours: 0, diff --git a/src/component/template/component/weddingday/WeddingDayTemplate.tsx b/src/component/template/component/weddingday/WeddingDayTemplate.tsx index 4324b6c..7cc96af 100644 --- a/src/component/template/component/weddingday/WeddingDayTemplate.tsx +++ b/src/component/template/component/weddingday/WeddingDayTemplate.tsx @@ -76,7 +76,7 @@ function WeddingDayTemplate( )} diff --git a/src/designsystem/component/flexLayout.ts b/src/designsystem/component/flexLayout.ts index ce5a98e..567a006 100644 --- a/src/designsystem/component/flexLayout.ts +++ b/src/designsystem/component/flexLayout.ts @@ -33,6 +33,7 @@ export interface BaseFlexProps { flex?: CSSProperties['flex']; fill?: string; padding?: CSSProperties["padding"]; + margin?: CSSProperties["margin"]; $wrap?: boolean; background?: CSSProperties['background']; $customStyle?: RuleSet; @@ -40,7 +41,7 @@ export interface BaseFlexProps { export const BaseFlex = styled.div` 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` 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 index efcce4a..743a0f4 100644 --- a/src/page/invitation/dashboard/InvitationDashboard.tsx +++ b/src/page/invitation/dashboard/InvitationDashboard.tsx @@ -58,7 +58,7 @@ function InvitationDashboard() { return ( - + 내 디자인 diff --git a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx index a4136d0..9656484 100644 --- a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx +++ b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx @@ -73,7 +73,7 @@ ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩 - + {weddingInfo.url} diff --git a/src/page/invitation/design/component/OptionSegmentedButton.tsx b/src/page/invitation/design/component/OptionSegmentedButton.tsx index f85b7c4..8f60eb4 100644 --- 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"; diff --git a/src/page/invitation/design/option/WeddingPlaceOption.tsx b/src/page/invitation/design/option/WeddingPlaceOption.tsx index 0b354de..019a2ae 100644 --- a/src/page/invitation/design/option/WeddingPlaceOption.tsx +++ b/src/page/invitation/design/option/WeddingPlaceOption.tsx @@ -26,30 +26,43 @@ function WeddingPlaceOption( - - - - -