통계 디테일 뷰 추가

src/App.tsx

@@ -1,12 +1,16 @@
 import React, {useEffect} from 'react';
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
 import FoundationDemo from "./designsystem/demo/foundation.demo";
 import ComponentDemo from "./designsystem/demo/component.demo";
 import RegisterPage from "./page/RegisterPage";
 import config from "./config/config";
 import KakaoRedirectPage from "./page/KakaoRedirectPage";
-import InvitationPage from "./page/invitation/InvitationPage";
+import InvitationLayout from "./page/invitation/InvitationLayout";
 import HomePage from "./page/home/HomePage";
+import InvitationDashboard from "./page/invitation/dashboard/InvitationDashboard";
+import InvitationStatistics from "./page/invitation/statistics/InvitationStatistics";
+import InvitationDesign from "./page/invitation/design/InvitationDesign";
+import InvitationStatisticsDetail from "./page/invitation/statistics/detail/InvitationStatisticsDetail";
 
 const {Kakao} = window as any;
 
@@ -22,17 +26,24 @@ function App() {
         <Router>
             <Routes>
                 {/*service*/}
-                <Route path={'/register'} element={<RegisterPage/>}/>
-                <Route path={'/login/oauth2/code/kakao'} element={<KakaoRedirectPage/>}/>
-                <Route path={'/'} element={<HomePage/>}/>
-                <Route path={'/create-invitation'} element={<InvitationPage/>}/>
+                <Route path={'register'} element={<RegisterPage/>}/>
+                <Route path={'login/oauth2/code/kakao'} element={<KakaoRedirectPage/>}/>
+                <Route path={''} element={<HomePage/>}/>
+                <Route path={'invitation'} element={<InvitationLayout/>}>
+                    <Route path={'dashboard'} element={<InvitationDashboard/>}/>
+                    <Route path={'design'} element={<InvitationDesign/>}/>
+                    <Route path={'statistics'}>
+                        <Route index={true} element={<InvitationStatistics/>}/>
+                        <Route path={'detail'} element={<InvitationStatisticsDetail/>}/>
+                    </Route>
+                </Route>
 
                 {/*design-system*/}
-                <Route path={'/design-system/foundation'} element={<FoundationDemo/>}/>
-                <Route path={'/design-system/component'} element={<ComponentDemo/>}/>
+                <Route path={'design-system/foundation'} element={<FoundationDemo/>}/>
+                <Route path={'design-system/component'} element={<ComponentDemo/>}/>
 
                 {/*not found*/}
-                <Route path={'*'} element={<div>404</div>}/>
+                <Route path={'*'} element={<Navigate to={'/'}/>}/>
             </Routes>
         </Router>
     );

src/page/invitation/InvitationLayout.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import S from './InvitationPage.style';
+import InvitationSideBar from "./component/InvitationSideBar";
+import HasHeader from "../../designsystem/component/header/hasHeader";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
+import {InvitationSideBarType} from "./component/InvitationSideBarType";
+
+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 {
+        return null;
+    }
+}
+
+function InvitationLayout() {
+    const {pathname} = useLocation();
+    const navigate = useNavigate();
+    const sideBarType = getSelectedSideBarType(pathname);
+
+    if (['/invitation', '/invitation/'].includes(pathname)) {
+        window.location.href = '/invitation/dashboard';
+        return <></>;
+    }
+
+    return (
+        <HasHeader>
+            <S.container>
+                <InvitationSideBar selected={sideBarType!!} onChange={item => {
+                    navigate(item);
+                }}/>
+                <Outlet/>
+            </S.container>
+        </HasHeader>
+    );
+}
+
+export default InvitationLayout;

src/page/invitation/component/InvitationSideBar.tsx

@@ -19,7 +19,6 @@ function InvitationSideBar(
         onChange
     }: InvitationSideBarProps
 ) {
-
     return (
         <S.container>
             <Spacer style={{

src/page/invitation/statistics/InvitationStatistics.tsx

@@ -6,8 +6,11 @@ import {TextType} from "../../../designsystem/foundation/text/textType";
 import colors from "../../../designsystem/foundation/colors";
 import {dummyWeddingDashboard} from "../../../remote/value/WeddingDashboard";
 import StatisticsInvitationCell from "./component/StatisticsInvitationCell";
+import {useNavigate} from "react-router-dom";
 
 function InvitationStatistics() {
+    const navigate = useNavigate();
+
     return (
         <S.container>
             <Column gap={44} style={{marginLeft: 64}} flex={1}>
@@ -17,7 +20,13 @@ function InvitationStatistics() {
                 </Column>
                 <S.items>
                     {dummyWeddingDashboard.map((weddingDashboard, index) =>
-                        <StatisticsInvitationCell key={index} weddingDashboard={weddingDashboard}/>
+                        <StatisticsInvitationCell
+                            key={index}
+                            weddingDashboard={weddingDashboard}
+                            onClick={() => {
+                                navigate(`detail?url=wow`) // TODO: DUMMY
+                            }}
+                        />
                     )}
                 </S.items>
             </Column>

src/page/invitation/statistics/component/StatisticsInvitationCell.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
+import React, {HTMLAttributes} from 'react';
 import WeddingDashboard from "../../../../remote/value/WeddingDashboard";
 import styled from "styled-components";
 import colors from "../../../../designsystem/foundation/colors";
 import {Column, Row} from "../../../../designsystem/component/flexLayout";
-import Button from "../../../../designsystem/component/button";
 import makeText, {TextType} from "../../../../designsystem/foundation/text/textType";
 import Icon, {IconType} from "../../../../designsystem/foundation/icon";
 import Spacer from "../../../../designsystem/component/spacer";
 import Text from "../../../../designsystem/component/text";
 
-interface InvitationCellProps {
+interface InvitationCellProps extends HTMLAttributes<HTMLDivElement> {
     weddingDashboard: WeddingDashboard;
 }
 
 function StatisticsInvitationCell(
     {
-        weddingDashboard
+        weddingDashboard,
+        ...props
     }: InvitationCellProps
 ) {
     return (
-        <S.container>
+        <S.container {...props}>
             <S.image src={weddingDashboard.weddingInfo[0].img} alt=""/>
             <Column gap={4} $alignItems={'stretch'} style={{padding: '20px 20px 32px 20px', background: colors.g100}}>
                 <Row gap={8}>
@@ -53,6 +53,7 @@ const S = {
         border-radius: 12px;
         overflow: hidden;
         break-inside: avoid-column; // column 잘림 방지
+        cursor: pointer;
     `,
     image: styled.img`
         display: flex;

src/page/invitation/statistics/detail/InvitationStatisticsDetail.style.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import colors from "../../../../designsystem/foundation/colors";
+
+const S = {
+    container: styled.div`
+        display: flex;
+        flex: 1;
+        overflow-y: scroll;
+        background: ${colors.white};
+    `,
+};
+
+export default S;

src/page/invitation/statistics/detail/InvitationStatisticsDetail.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import S from './InvitationStatisticsDetail.style';
+import {useNavigate, useSearchParams} from "react-router-dom";
+import {Column, Row} from "../../../../designsystem/component/flexLayout";
+import Icon, {IconType} from "../../../../designsystem/foundation/icon";
+import colors from "../../../../designsystem/foundation/colors";
+import Text from "../../../../designsystem/component/text";
+import {TextType} from "../../../../designsystem/foundation/text/textType";
+import HorizontalDivider from "../../../../designsystem/component/horizontalDivider";
+import StatisticsValueCell from "./component/StatisticsValueCell";
+
+function InvitationStatisticsDetail() {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const url = searchParams.get('url') ?? '';
+
+    return (
+        <S.container>
+            <Column gap={44} style={{width: 867, paddingTop: 64, marginLeft: 64}} $alignItems={'stretch'}>
+                <Icon
+                    type={IconType.NormalArrow}
+                    tint={colors.g400}
+                    size={24}
+                    style={{cursor: 'pointer'}}
+                    onClick={() => {
+                        navigate('/invitation/statistics')
+                    }}
+                />
+                <Column gap={8}>
+                    <Text text={'https://linkmarry-web/sss'} type={TextType.h5}/>{/*TODO: DUMMY*/}
+                    <Text text={'2024.02.01 작성'} type={TextType.p3} color={colors.g500}/>{/*TODO: DUMMY*/}
+                </Column>
+                <Column gap={60} $alignItems={'stretch'}>
+                    <Column gap={32} $alignItems={'stretch'}>
+                        <Column gap={8} $alignItems={'stretch'}>
+                            <Row gap={12} $alignItems={'center'}>
+                                <Text text={'하객 통계'} type={TextType.p2}/>
+                                <Text text={'동행 인원을 포함한 수치입니다.'} type={TextType.btn1} color={colors.g300}/>
+                            </Row>
+                            <Row gap={12}>
+                                <StatisticsValueCell label={'총 참석 가능 인원'} value={8} filtered={false}/>
+                                <StatisticsValueCell label={'신랑측'} value={8} filtered={false}/>
+                                <StatisticsValueCell label={'신부측'} value={8} filtered={true}/>
+                            </Row>
+                        </Column>
+                        <Column gap={8} $alignItems={'stretch'}>
+                            <Row gap={12} $alignItems={'center'}>
+                                <Text text={'식사 여부'} type={TextType.p2}/>
+                                <Text text={'동행 인원을 포함한 수치입니다.'} type={TextType.btn1} color={colors.g300}/>
+                            </Row>
+                            <Row gap={12}>
+                                <StatisticsValueCell label={'식사함'} value={8} filtered={false}/>
+                                <StatisticsValueCell label={'식사안함'} value={8} filtered={false}/>
+                            </Row>
+                        </Column>
+                        <Column gap={8} $alignItems={'stretch'}>
+                            <Text text={'디바이스 접속'} type={TextType.p2}/>
+                            <Row gap={12}>
+                                <StatisticsValueCell label={'모바일 접속'} value={8} filtered={false}/>
+                                <StatisticsValueCell label={'데스크탑 접속'} value={8} filtered={false}/>
+                            </Row>
+                        </Column>
+                    </Column>
+                    <HorizontalDivider/>
+                    <Column gap={20}>
+
+                    </Column>
+                </Column>
+            </Column>
+        </S.container>
+    );
+}
+
+export default InvitationStatisticsDetail;

src/page/invitation/statistics/detail/component/StatisticsValueCell.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from "styled-components";
+import Text from "../../../../../designsystem/component/text";
+import {TextType} from "../../../../../designsystem/foundation/text/textType";
+import colors from "../../../../../designsystem/foundation/colors";
+
+interface StatisticsValueCell {
+    label: string;
+    value: number;
+    filtered: boolean;
+}
+
+function StatisticsValueCell(
+    {
+        label,
+        value,
+        filtered
+    }: StatisticsValueCell
+) {
+    return (
+        <S.container style={{background: filtered ? colors.g100 : colors.white}}>
+            <Text text={label} type={TextType.p5}/>
+            <Text text={`${value}`} type={TextType.h2}/>
+        </S.container>
+    );
+}
+
+const S = {
+    container: styled.div`
+        display: flex;
+        width: 281px;
+        flex-direction: column;
+        padding: 24px 20px;
+        gap: 8px;
+        border: 1px solid ${colors.g200};
+        border-radius: 12px;
+    `
+}
+
+export default StatisticsValueCell;