From 0987a3ce96700fe5e547de0863d76ef0d3ae3f82 Mon Sep 17 00:00:00 2001
From: hhhello <hhhello0507@dgsw.hs.kr>
Date: Mon, 20 Jan 2025 19:23:38 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=A9=EB=AA=85=EB=A1=9D=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/InvitationStatisticsDetail.tsx     | 335 +++++++++---------
 1 file changed, 173 insertions(+), 162 deletions(-)

diff --git a/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx b/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx
index 88a97e9..ace36c1 100644
--- a/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx
+++ b/src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx
@@ -15,6 +15,8 @@ import Wedding from "@remote/value/Wedding";
 import OptionTextField from "@page/invitation/design/component/OptionTextField";
 import GuestType, {guestTypeRecord} from "@remote/enumeration/GuestType";
 import WeddingStatisticsInfo from "@remote/value/WeddingStatisticsInfo";
+import Button from "@designsystem/component/button";
+import Spacer from "@designsystem/component/spacer";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement, Tooltip, Legend);
 
@@ -100,186 +102,195 @@ function InvitationStatisticsDetail() {
 
     return (
         <Column
-            gap={44}
             flex={1}
             background={colors.white}
-            style={{width: 867, paddingTop: 64, paddingBottom: 120, paddingLeft: 64, overflowY: 'scroll'}}
+            style={{paddingTop: 64, paddingBottom: 120, paddingLeft: 64, overflowY: 'scroll'}}
         >
-            <Icon
-                type={IconType.NormalArrow}
-                tint={colors.g400}
-                size={24}
-                style={{cursor: 'pointer'}}
-                onClick={() => {
-                    navigate('/statistics');
-                }}
-            />
-            {weddingStatistics && wedding && (
-                <>
-                    <Column gap={8}>
-                        <Text type={'h5'}>https://linkmarry-web/{wedding.url}</Text>
-                        <Text type={'p3'} color={colors.g500}>2024.02.01 작성</Text>{/*TODO: DUMMY*/}
-                    </Column>
-                    <Column gap={60} $alignItems={'stretch'}>
-                        <Column gap={32} $alignItems={'stretch'}>
-                            <Column gap={8} $alignItems={'stretch'}>
-                                <Text type={'p2'}>방문자 통계</Text>
-                                <Column gap={8}
-                                        style={{padding: 20, borderRadius: 12, border: `1px solid ${colors.g200}`}}>
-                                    <Row gap={20}>
-                                        <Column gap={4}>
-                                            <Text type={'p4'} color={colors.g600}>방문자
-                                                수 {weddingStatistics.totalVisitorCnt}</Text>
-                                            <HorizontalDivider color={colors.g400}/>
-                                        </Column>
-                                        <Column gap={4}>
-                                            <Text type={'p4'} color={colors.g600}>링크 공유
-                                                수 {weddingStatistics.totalLinkShareCnt}</Text>
-                                            <HorizontalDivider color={colors.p800}/>
-                                        </Column>
-                                    </Row>
-                                    <Line data={makeData(weddingStatistics.weddingStatisticsInfos)} options={options}/>
+            <Column gap={44} style={{width: 867}}>
+                <Icon
+                    type={IconType.NormalArrow}
+                    tint={colors.g400}
+                    size={24}
+                    style={{cursor: 'pointer'}}
+                    onClick={() => {
+                        navigate('/statistics');
+                    }}
+                />
+                {weddingStatistics && wedding && (
+                    <>
+                        <Column gap={8} $alignSelf={'stretch'}>
+                            <Row $alignSelf={'stretch'}>
+                                <Text type={'h5'}>https://linkmarry-web/{wedding.url}</Text>
+                                <Spacer/>
+                                <Button text={'방명록 보기'} role={'assistive'} size={'medium'} onClick={() => {
+                                    navigate(`/dashboard/guest-comment/${wedding.url}`);
+                                }}/>
+                            </Row>
+                            <Text type={'p3'} color={colors.g500}>2024.02.01 작성</Text>{/*TODO: DUMMY*/}
+                        </Column>
+                        <Column gap={60} $alignItems={'stretch'}>
+                            <Column gap={32} $alignItems={'stretch'}>
+                                <Column gap={8} $alignItems={'stretch'}>
+                                    <Text type={'p2'}>방문자 통계</Text>
+                                    <Column gap={8}
+                                            style={{padding: 20, borderRadius: 12, border: `1px solid ${colors.g200}`}}>
+                                        <Row gap={20}>
+                                            <Column gap={4}>
+                                                <Text type={'p4'} color={colors.g600}>방문자
+                                                    수 {weddingStatistics.totalVisitorCnt}</Text>
+                                                <HorizontalDivider color={colors.g400}/>
+                                            </Column>
+                                            <Column gap={4}>
+                                                <Text type={'p4'} color={colors.g600}>링크 공유
+                                                    수 {weddingStatistics.totalLinkShareCnt}</Text>
+                                                <HorizontalDivider color={colors.p800}/>
+                                            </Column>
+                                        </Row>
+                                        <Line data={makeData(weddingStatistics.weddingStatisticsInfos)}
+                                              options={options}/>
+                                    </Column>
                                 </Column>
-                            </Column>
-                            <Column gap={8} $alignItems={'stretch'}>
-                                <Row gap={12} $alignItems={'center'}>
-                                    <Text type={'p2'}>하객 통계</Text>
-                                    <Text type={'btn1'} color={colors.g300}>동행 인원을 포함한 수치입니다.</Text>
-                                </Row>
-                                <Row gap={12}>
-                                    <StatisticsValueCell
-                                        label={'총 참석 가능 인원'}
-                                        value={weddingStatistics.totalVisitorCnt}
-                                        filtered={false}
-                                    />
-                                    <StatisticsValueCell
-                                        label={'신랑측'}
-                                        value={weddingStatistics.rsvpInfos.filter(w => w.guestType === GuestType.GROOM).length}
-                                        filtered={selectedGuestType === GuestType.GROOM}
-                                        onClick={() => {
-                                            if (selectedGuestType === GuestType.GROOM) {
-                                                setSelectedGuestType(undefined);
+                                <Column gap={8} $alignItems={'stretch'}>
+                                    <Row gap={12} $alignItems={'center'}>
+                                        <Text type={'p2'}>하객 통계</Text>
+                                        <Text type={'btn1'} color={colors.g300}>동행 인원을 포함한 수치입니다.</Text>
+                                    </Row>
+                                    <Row gap={12}>
+                                        <StatisticsValueCell
+                                            label={'총 참석 가능 인원'}
+                                            value={weddingStatistics.totalVisitorCnt}
+                                            filtered={false}
+                                        />
+                                        <StatisticsValueCell
+                                            label={'신랑측'}
+                                            value={weddingStatistics.rsvpInfos.filter(w => w.guestType === GuestType.GROOM).length}
+                                            filtered={selectedGuestType === GuestType.GROOM}
+                                            onClick={() => {
+                                                if (selectedGuestType === GuestType.GROOM) {
+                                                    setSelectedGuestType(undefined);
 
-                                            } else {
-                                                setSelectedGuestType(GuestType.GROOM);
-                                            }
-                                        }}
-                                        style={{cursor: 'pointer'}}
-                                    />
-                                    <StatisticsValueCell
-                                        label={'신부측'}
-                                        value={weddingStatistics.rsvpInfos.filter(w => w.guestType === GuestType.BRIDE).length}
-                                        filtered={selectedGuestType === GuestType.BRIDE}
-                                        onClick={() => {
-                                            if (selectedGuestType === GuestType.BRIDE) {
-                                                setSelectedGuestType(undefined);
-                                            } else {
-                                                setSelectedGuestType(GuestType.BRIDE);
-                                            }
-                                        }}
-                                        style={{cursor: 'pointer'}}
-                                    />
-                                </Row>
-                            </Column>
-                            <Column gap={8} $alignItems={'stretch'}>
-                                <Row gap={12} $alignItems={'center'}>
-                                    <Text type={'p2'}>식사 여부</Text>
-                                    <Text type={'btn1'} color={colors.g300}>동행 인원을 포함한 수치입니다.</Text>
-                                </Row>
-                                {wedding.rsvp.attendMealStatus ? (
+                                                } else {
+                                                    setSelectedGuestType(GuestType.GROOM);
+                                                }
+                                            }}
+                                            style={{cursor: 'pointer'}}
+                                        />
+                                        <StatisticsValueCell
+                                            label={'신부측'}
+                                            value={weddingStatistics.rsvpInfos.filter(w => w.guestType === GuestType.BRIDE).length}
+                                            filtered={selectedGuestType === GuestType.BRIDE}
+                                            onClick={() => {
+                                                if (selectedGuestType === GuestType.BRIDE) {
+                                                    setSelectedGuestType(undefined);
+                                                } else {
+                                                    setSelectedGuestType(GuestType.BRIDE);
+                                                }
+                                            }}
+                                            style={{cursor: 'pointer'}}
+                                        />
+                                    </Row>
+                                </Column>
+                                <Column gap={8} $alignItems={'stretch'}>
+                                    <Row gap={12} $alignItems={'center'}>
+                                        <Text type={'p2'}>식사 여부</Text>
+                                        <Text type={'btn1'} color={colors.g300}>동행 인원을 포함한 수치입니다.</Text>
+                                    </Row>
+                                    {wedding.rsvp.attendMealStatus ? (
+                                        <Row gap={12}>
+                                            <StatisticsValueCell
+                                                label={'식사함'}
+                                                value={weddingStatistics.rsvpInfos.filter(w => w.isMeal).length}
+                                                filtered={false}
+                                            />
+                                            <StatisticsValueCell
+                                                label={'식사안함'}
+                                                value={weddingStatistics.rsvpInfos.filter(w => !w.isMeal).length}
+                                                filtered={false}
+                                            />
+                                        </Row>
+                                    ) : (
+                                        <Row $alignItems={'center'} $justifyContent={'center'} gap={8}
+                                             padding={'48px 0'}
+                                             style={{
+                                                 border: `1px solid ${colors.g200}`,
+                                                 borderRadius: 12
+                                             }}
+                                        >
+                                            <Text type={'p1'} color={colors.g600}>식사 정보가 집계되지 않았습니다</Text>
+                                            <Text
+                                                style={{
+                                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                                    width: 20, height: 20,
+                                                    border: `1.5px solid ${colors.g400}`, borderRadius: 10,
+                                                    cursor: 'pointer'
+                                                }}
+                                                type={'p4'}
+                                                color={colors.g400}
+                                            >?</Text>
+                                        </Row>
+                                    )}
+                                </Column>
+                                <Column gap={8} $alignItems={'stretch'}>
+                                    <Text type={'p2'}>디바이스 접속</Text>
                                     <Row gap={12}>
                                         <StatisticsValueCell
-                                            label={'식사함'}
-                                            value={weddingStatistics.rsvpInfos.filter(w => w.isMeal).length}
+                                            label={'모바일 접속'}
+                                            value={weddingStatistics.mobileCnt}
                                             filtered={false}
                                         />
                                         <StatisticsValueCell
-                                            label={'식사안함'}
-                                            value={weddingStatistics.rsvpInfos.filter(w => !w.isMeal).length}
+                                            label={'데스크탑 접속'}
+                                            value={weddingStatistics.desktopCnt}
                                             filtered={false}
                                         />
                                     </Row>
-                                ) : (
-                                    <Row $alignItems={'center'} $justifyContent={'center'} gap={8} padding={'48px 0'}
-                                         style={{
-                                             border: `1px solid ${colors.g200}`,
-                                             borderRadius: 12
-                                         }}
-                                    >
-                                        <Text type={'p1'} color={colors.g600}>식사 정보가 집계되지 않았습니다</Text>
-                                        <Text
-                                            style={{
-                                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                                width: 20, height: 20,
-                                                border: `1.5px solid ${colors.g400}`, borderRadius: 10,
-                                                cursor: 'pointer'
-                                            }}
-                                            type={'p4'}
-                                            color={colors.g400}
-                                        >?</Text>
-                                    </Row>
-                                )}
-                            </Column>
-                            <Column gap={8} $alignItems={'stretch'}>
-                                <Text type={'p2'}>디바이스 접속</Text>
-                                <Row gap={12}>
-                                    <StatisticsValueCell
-                                        label={'모바일 접속'}
-                                        value={weddingStatistics.mobileCnt}
-                                        filtered={false}
-                                    />
-                                    <StatisticsValueCell
-                                        label={'데스크탑 접속'}
-                                        value={weddingStatistics.desktopCnt}
-                                        filtered={false}
-                                    />
-                                </Row>
+                                </Column>
                             </Column>
-                        </Column>
-                        <HorizontalDivider/>
-                        <Column gap={20} $alignItems={'stretch'}>
-                            <OptionTextField
-                                leadingContent={
-                                    <Icon type={IconType.Search} size={24}/>
-                                }
-                                width={264}
-                                style={{alignSelf: 'flex-end'}}
-                            />
-                            <Column gap={28} $alignItems={'center'}>
-                                <Column>
-                                    <S.rsvp.headerRow>
-                                        <S.rsvp.cell width={146}>작성일</S.rsvp.cell>
-                                        <S.rsvp.cell width={106}>참석인</S.rsvp.cell>
-                                        <S.rsvp.cell width={106}>참석여부</S.rsvp.cell>
-                                        <S.rsvp.cell width={106}>식사여부</S.rsvp.cell>
-                                        <S.rsvp.contentCell>전달사항</S.rsvp.contentCell>
-                                        <S.rsvp.cell width={200}>전화번호</S.rsvp.cell>
-                                    </S.rsvp.headerRow>
-                                    {weddingStatistics.rsvpInfos
-                                        .filter(w => {
-                                            if (selectedGuestType === undefined) return true;
-                                            return w.guestType === selectedGuestType;
-                                        })
-                                        .map(rsvp => (
-                                            <S.rsvp.bodyRow>
-                                                <S.rsvp.cell width={146}>TODO</S.rsvp.cell>
-                                                <S.rsvp.cell width={106}>{rsvp.guestName}</S.rsvp.cell>
-                                                <S.rsvp.cell
-                                                    width={106}>{rsvp.isAttend ? (`${guestTypeRecord[rsvp.guestType].korean}측`) : '미참석'}</S.rsvp.cell>
-                                                <S.rsvp.cell
-                                                    width={106}>{wedding.rsvp.attendMealStatus ? (rsvp.isMeal ? '식사함' : '식사안함') : '-'}</S.rsvp.cell>
-                                                <S.rsvp.contentCell>{wedding.rsvp.attendEtcStatus ? (rsvp.guestComment ?? '-') : '-'}</S.rsvp.contentCell>
-                                                <S.rsvp.cell
-                                                    width={200}>{wedding.rsvp.attendPhoneStatus ? (rsvp.guestPhone ?? '-') : '-'}</S.rsvp.cell>
-                                            </S.rsvp.bodyRow>
-                                        ))
+                            <HorizontalDivider/>
+                            <Column gap={20} $alignItems={'stretch'}>
+                                <OptionTextField
+                                    leadingContent={
+                                        <Icon type={IconType.Search} size={24}/>
                                     }
+                                    width={264}
+                                    style={{alignSelf: 'flex-end'}}
+                                />
+                                <Column gap={28} $alignItems={'center'}>
+                                    <Column>
+                                        <S.rsvp.headerRow>
+                                            <S.rsvp.cell width={146}>작성일</S.rsvp.cell>
+                                            <S.rsvp.cell width={106}>참석인</S.rsvp.cell>
+                                            <S.rsvp.cell width={106}>참석여부</S.rsvp.cell>
+                                            <S.rsvp.cell width={106}>식사여부</S.rsvp.cell>
+                                            <S.rsvp.contentCell>전달사항</S.rsvp.contentCell>
+                                            <S.rsvp.cell width={200}>전화번호</S.rsvp.cell>
+                                        </S.rsvp.headerRow>
+                                        {weddingStatistics.rsvpInfos
+                                            .filter(w => {
+                                                if (selectedGuestType === undefined) return true;
+                                                return w.guestType === selectedGuestType;
+                                            })
+                                            .map(rsvp => (
+                                                <S.rsvp.bodyRow>
+                                                    <S.rsvp.cell width={146}>TODO</S.rsvp.cell>
+                                                    <S.rsvp.cell width={106}>{rsvp.guestName}</S.rsvp.cell>
+                                                    <S.rsvp.cell
+                                                        width={106}>{rsvp.isAttend ? (`${guestTypeRecord[rsvp.guestType].korean}측`) : '미참석'}</S.rsvp.cell>
+                                                    <S.rsvp.cell
+                                                        width={106}>{wedding.rsvp.attendMealStatus ? (rsvp.isMeal ? '식사함' : '식사안함') : '-'}</S.rsvp.cell>
+                                                    <S.rsvp.contentCell>{wedding.rsvp.attendEtcStatus ? (rsvp.guestComment ?? '-') : '-'}</S.rsvp.contentCell>
+                                                    <S.rsvp.cell
+                                                        width={200}>{wedding.rsvp.attendPhoneStatus ? (rsvp.guestPhone ?? '-') : '-'}</S.rsvp.cell>
+                                                </S.rsvp.bodyRow>
+                                            ))
+                                        }
+                                    </Column>
                                 </Column>
                             </Column>
                         </Column>
-                    </Column>
-                </>
-            )}
+                    </>
+                )}
+            </Column>
         </Column>
     );
 }