첫 커밋

src/pages/settlement/calendar/calendar-page.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { SettlementTab } from '@/entities/settlement/ui/settlement-tab';
+import { CalendarWrap } from '@/entities/settlement/ui/calandar-wrap';
+import { SettlementTabKeys } from '@/entities/settlement/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const CalendarPage = () => {
+  const { navigate } = useNavigate();
+  
+  const [activeTab, setActiveTab] = useState<SettlementTabKeys>(SettlementTabKeys.Calendar);
+
+  useSetHeaderTitle('정산조회');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <SettlementTab activeTab={ activeTab }></SettlementTab>
+            <CalendarWrap></CalendarWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/settlement/list/detail-page.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { DetailAmountInfo } from '@/entities/settlement/ui/detail-amount-info';
+import { DetailSettlementInfo } from '@/entities/settlement/ui/detail-settlement-info';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  SettlementDetailParams,
+  DetailResponse,
+  DetailAmountInfoProps,
+  DetailSettlementInfoProps,
+} from '@/entities/settlement/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const DetailPage = () => {
+  const { navigate } = useNavigate();
+  const { tid } = useParams();
+
+  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
+  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
+  const [showAmount, setShowAmount] = useState<boolean>(false);
+  const [showSettlement, setShowSettlement] = useState<boolean>(false);
+
+  useSetHeaderTitle('정산내역 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.settlement.list);
+  });
+  useSetFooterMode(false);
+
+  const onClickToShowInfo = (info: string) => {
+    if(info === 'amount'){
+      setShowAmount(!showAmount);
+    }
+    else if(info === 'settlement'){
+      setShowSettlement(!showSettlement);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <div className="option-list">
+              <div className="txn-detail">
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">63,736,320<span className="unit">원</span></div>
+                    {/*
+                    <button className="chip-btn" type="button">금액상세 <img src="../images/select_arrow.svg" alt="펼치기"/></button>
+                    */}
+                  </div>
+                  <div className="txn-date">2025.06.08</div>
+                </div>
+                <div className="txn-divider minus"></div>
+                <DetailAmountInfo
+                  amountInfo={ amountInfo }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailAmountInfo>
+                <div className="txn-divider"></div>
+                <DetailSettlementInfo
+                  settlementInfo={ settlementInfo }
+                  show={ showSettlement }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailSettlementInfo>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button className="btn-50 btn-blue flex-1">거래 취소</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/settlement/list/list-page.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { SettlementTab } from '@/entities/settlement/ui/settlement-tab';
+import { ListWrap } from '@/entities/settlement/ui/list-wrap';
+import { SettlementTabKeys } from '@/entities/settlement/model/types'; 
+import { FooterItemActiveKey } from '@/entities/common/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetFooterCurrentPage,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const ListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<SettlementTabKeys>(SettlementTabKeys.List);
+
+  useSetHeaderTitle('정산조회');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetFooterCurrentPage(FooterItemActiveKey.Settlement);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+  
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <SettlementTab activeTab={ activeTab }></SettlementTab>
+            <ListWrap></ListWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/settlement/settlement-pages.tsx

@@ -0,0 +1,16 @@
+import { Route } from 'react-router-dom';
+import { SentryRoutes } from '@/shared/configs/sentry';
+import { ROUTE_NAMES } from '@/shared/constants/route-names';
+import { CalendarPage } from './calendar/calendar-page';
+import { ListPage } from './list/list-page';
+
+export const SettlementPages = () => {
+  return (
+    <>
+      <SentryRoutes>
+        <Route path={ROUTE_NAMES.settlement.calendar} element={<CalendarPage />} />
+        <Route path={ROUTE_NAMES.settlement.list} element={<ListPage />} />
+      </SentryRoutes>
+    </>
+  );
+};