Skip to content

Commit

Permalink
신부 먼저 표시
Browse files Browse the repository at this point in the history
  • Loading branch information
@hhhello0507
hhhello0507 committed Jan 20, 2025
1 parent 9cc851c commit b651a1a
Show file tree
Hide file tree
Showing 12 changed files with 218 additions and 57 deletions.
4 changes: 4 additions & 0 deletions public/Flower.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/component/template/TemplateComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function TemplateComponent(
weddingPlace={wedding.weddingPlace}
/>
<VideoTemplate video={wedding.video}/>
<MoneyInfoTemplate moneyInfo={wedding.moneyInfo}/>
<MoneyInfoTemplate baseInfo={wedding.baseInfo} moneyInfo={wedding.moneyInfo}/>
<GuestCommentsTemplate
templateColor={templateColor}
url={wedding.url}
Expand Down
35 changes: 27 additions & 8 deletions src/component/template/component/CongratulationsTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import colors from "@designsystem/foundation/colors";
import HorizontalDivider from "@designsystem/component/horizontalDivider";
import Button from "@designsystem/component/button";
import styled from "styled-components";
import BaseInfo from "@remote/value/BaseInfo";
import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";
import ContactingCongratulationDialog from "@src/component/template/dialog/ContactingCongratulationDialog";
import Phone from "@remote/value/Phone";

Expand All @@ -23,37 +23,56 @@ function CongratulationsTemplate(
}: CongratulationsProps
) {
const [showContactingCongratulationDialog, setShowContactingCongratulationDialog] = useState(false);

const {first, second} = getBaseInfoByBrideMarkFirst(baseInfo);

return (
<S.root background={templateColor}>
<Column gap={96} $alignItems={'stretch'}>
<Column gap={40} $alignItems={'center'}>
<Column gap={8} $alignItems={'center'}>
<Text font={'GangwonEduAll'} weight={100} size={24} color={colors.g600}>
{baseInfo.groomFatherName}·{baseInfo.groomMotherName}의 {baseInfo.groomFamilyName}
<Row $alignItems={'center'} gap={4}>
{first.fatherStatus && (
<img src={'/Flower.svg'} alt=""/>
)}
{first.fatherName}·
{first.motherStatus && (
<img src={'/Flower.svg'} alt=""/>
)}
{first.motherName}의 {first.familyName}
</Row>
</Text>
<Row gap={8} $alignItems={'center'}>
<Text font={'GangwonEduAll'} weight={100} size={24}
color={colors.g600}>
신랑&nbsp;
{first.korean}&nbsp;
</Text>
<Text font={'GangwonEduAll'} weight={100} size={24}>
{baseInfo.groomName}
{first.name}
</Text>
</Row>
</Column>
<HorizontalDivider color={colors.g200}/>
<Column gap={8} $alignItems={'center'}>
<Text font={'GangwonEduAll'} weight={100} size={24} color={colors.g600}>
{baseInfo.brideFatherName}·{baseInfo.brideMotherName}의 {baseInfo.brideFamilyName}
<Row $alignItems={'center'} gap={4}>
{second.fatherStatus && (
<img src={'/Flower.svg'} alt=""/>
)}
{second.fatherName}·
{second.motherStatus && (
<img src={'/Flower.svg'} alt=""/>
)}
{second.motherName}의 {second.familyName}
</Row>
</Text>
<Row gap={8} $alignItems={'center'}>
<Text font={'GangwonEduAll'} weight={100} size={24}
color={colors.g600}>
신부&nbsp;
{second.korean}&nbsp;
</Text>
<Text font={'GangwonEduAll'} weight={100} size={24}>
{baseInfo.brideName}
{second.name}
</Text>
</Row>
</Column>
Expand Down
6 changes: 4 additions & 2 deletions src/component/template/component/GuestCommentsTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Design from "@remote/enumeration/Design";
import {trimArray} from "@util/array.util";
import {trimString} from "@util/string.util";
import Button from "@designsystem/component/button";
import BaseInfo from "@remote/value/BaseInfo";
import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";
import GuestComment from "@remote/value/GuestComment";
import RemoveGuestCommentDialog from "@src/component/template/dialog/guestcomment/RemoveGuestCommentDialog";
import GuestCommentsDetailDialog from "@src/component/template/dialog/guestcomment/GuestCommentsDetailDialog";
Expand Down Expand Up @@ -39,14 +39,16 @@ function GuestCommentsTemplate(
const [showCreateGuestCommentDialog, setShowCreateGuestCommentDialog] = useState(false);
const [showRemoveGuestCommentDialog, setShowRemoveGuestCommentDialog] = useState(false);
const [showGuestCommentsDetailDialog, setShowGuestCommentsDetailDialog] = useState(false);

const {first, second} = getBaseInfoByBrideMarkFirst(baseInfo);

return (
<S.root background={templateColor}>
<Column gap={40} $alignItems={'stretch'}>
<Column gap={12} $alignItems={'center'}>
<Text size={20} weight={300} color={colors.g600}>방명록</Text>
<Text size={16} weight={300} color={colors.g600}>
{baseInfo.groomName}, {baseInfo.brideName}에게 하고 싶은 말을 남겨주세요
{first.name}, {second.name}에게 하고 싶은 말을 남겨주세요
</Text>
</Column>
<Column gap={12} $alignItems={'stretch'}>
Expand Down
6 changes: 4 additions & 2 deletions src/component/template/component/InvitationLetterTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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";
import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";

export type InvitationLetterStyle = 'style1' | 'style2' | 'style3';

Expand All @@ -21,6 +21,8 @@ function InvitationLetterTemplate(
invitationLetterStyle
}: InvitationLetterTemplateProps
) {
const {first, second} = getBaseInfoByBrideMarkFirst(baseInfo);

return (
<Column gap={40} padding={'72px 60px'} background={colors.white} $alignItems={'center'}>
{invitationLetterStyle === 'style1' ? (
Expand All @@ -36,7 +38,7 @@ function InvitationLetterTemplate(
<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>
<span>{first.korean} {first.name}</span><span>•</span><span>{second.korean} {second.name}</span>
</Row>
</Text>
</Column>
Expand Down
43 changes: 27 additions & 16 deletions src/component/template/component/MoneyInfoTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,90 @@
import React, {useState} from 'react';
import styled from "styled-components";
import MoneyInfo from "@remote/value/MoneyInfo";
import MoneyInfo, {getMoneyInfoByBrideMarkFirst} from "@remote/value/MoneyInfo";
import colors from "@designsystem/foundation/colors";
import Spacer from "@designsystem/component/spacer";
import Icon, {IconType} from "@designsystem/foundation/icon";
import {Column, Row} from "@designsystem/component/flexLayout";
import Text from "@designsystem/component/text";
import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";

interface MoneyInfoTemplateProps {
baseInfo: BaseInfo;
moneyInfo: MoneyInfo;
}

function MoneyInfoTemplate(
{
baseInfo,
moneyInfo
}: MoneyInfoTemplateProps
) {
return (
<S.root>
<Column gap={40} $alignItems={'center'}>
<Text size={20} weight={300} color={colors.g600}>마음 전하실 곳</Text>
<MoneyInfoComponent moneyInfo={moneyInfo}/>
<MoneyInfoComponent baseInfo={baseInfo} moneyInfo={moneyInfo}/>
</Column>
</S.root>
);
}

interface MoneyInfoProps {
baseInfo: BaseInfo;
moneyInfo: MoneyInfo;
}

function MoneyInfoComponent(
{
baseInfo,
moneyInfo
}: MoneyInfoProps
) {
const [clickedGroom, setClickedGroom] = useState(false);
const [clickedBride, setClickedBride] = useState(false);

const {first: firstBaseInfo, second: secondBaseInfo} = getBaseInfoByBrideMarkFirst(baseInfo);
const {
first: firstMoneyInfo,
second: secondMoneyInfo
} = getMoneyInfoByBrideMarkFirst(moneyInfo, baseInfo.brideMarkFirst);

return (
<S.container>
<div>
<div onClick={() => setClickedGroom(i => !i)}>
<Text type={'p4'} color={colors.g600} weight={'bold'}>신랑측</Text>
<Text type={'p4'} color={colors.g600} weight={'bold'}>{firstBaseInfo.korean}측</Text>
<Spacer/>
<Icon type={IconType.ExpandArrow} tint={colors.g600}
style={{rotate: clickedGroom ? '90deg' : '-90deg'}}/>
</div>
{clickedGroom && (
<>
<MoneyCell name={moneyInfo.groomNameMoneyInfo} bankName={moneyInfo.groomBankName}
bankNumber={moneyInfo.groomBankNumber} isGroom={true}/>
<MoneyCell name={moneyInfo.groomFatherNameMoneyInfo} bankName={moneyInfo.groomFatherBankName}
bankNumber={moneyInfo.groomFatherBankNumber} isGroom={true}/>
<MoneyCell name={moneyInfo.groomMotherNameMoneyInfo} bankName={moneyInfo.groomMotherBankName}
bankNumber={moneyInfo.groomMotherBankNumber} isGroom={true}/>
<MoneyCell name={firstMoneyInfo.nameMoneyInfo} bankName={firstMoneyInfo.bankName}
bankNumber={firstMoneyInfo.bankNumber} isGroom={true}/>
<MoneyCell name={firstMoneyInfo.fatherNameMoneyInfo} bankName={firstMoneyInfo.fatherBankName}
bankNumber={firstMoneyInfo.fatherBankNumber} isGroom={true}/>
<MoneyCell name={firstMoneyInfo.motherNameMoneyInfo} bankName={firstMoneyInfo.motherBankName}
bankNumber={firstMoneyInfo.motherBankNumber} isGroom={true}/>
</>
)}
</div>
<div>
<div onClick={() => setClickedBride(i => !i)}>
<Text type={'p4'} color={colors.p800} weight={'bold'}>신부측</Text>
<Text type={'p4'} color={colors.p800} weight={'bold'}>{secondBaseInfo.korean}측</Text>
<Spacer/>
<Icon type={IconType.ExpandArrow} tint={colors.p800}
style={{rotate: clickedBride ? '90deg' : '-90deg'}}/>
</div>
{clickedBride && (
<>

<MoneyCell name={moneyInfo.brideNameMoneyInfo} bankName={moneyInfo.brideBankName}
bankNumber={moneyInfo.brideBankNumber} isGroom={false}/>
<MoneyCell name={moneyInfo.brideFatherNameMoneyInfo} bankName={moneyInfo.brideFatherBankName}
bankNumber={moneyInfo.brideFatherBankNumber} isGroom={false}/>
<MoneyCell name={moneyInfo.brideMotherNameMoneyInfo} bankName={moneyInfo.brideMotherBankName}
bankNumber={moneyInfo.brideMotherBankNumber} isGroom={false}/>
<MoneyCell name={secondMoneyInfo.nameMoneyInfo} bankName={secondMoneyInfo.bankName}
bankNumber={secondMoneyInfo.bankNumber} isGroom={false}/>
<MoneyCell name={secondMoneyInfo.fatherNameMoneyInfo} bankName={secondMoneyInfo.fatherBankName}
bankNumber={secondMoneyInfo.fatherBankNumber} isGroom={false}/>
<MoneyCell name={secondMoneyInfo.motherNameMoneyInfo} bankName={secondMoneyInfo.motherBankName}
bankNumber={secondMoneyInfo.motherBankNumber} isGroom={false}/>
</>
)}
</div>
Expand Down
Loading

0 comments on commit b651a1a

Please sign in to comment.