From 97bd3e6a59aaccc861663864e2dca6209dbe8916 Mon Sep 17 00:00:00 2001
From: Soyeon Choe <77609591+soi-ha@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:23:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
 =?UTF-8?q?=EB=90=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=A4=EB=81=84?=
 =?UTF-8?q?=EB=9F=BD=EA=B2=8C=20=EC=97=B0=EA=B2=B0=20(#114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 디자인시스템 업데이트 반영

* feat: fixed button 클릭시 router 반영

* feat: 총 지출 금액 추가 및 StepList 연결
---
 client/package-lock.json             |  8 ++++----
 client/package.json                  |  2 +-
 client/src/constants/routerUrls.ts   |  2 +-
 client/src/pages/Create/Complete.tsx |  2 +-
 client/src/pages/Create/Name.tsx     |  2 +-
 client/src/pages/Event/Event.tsx     | 24 ++++++++++--------------
 6 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 4ee33aaae..8bc10061f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,7 +12,7 @@
         "@emotion/react": "^11.11.4",
         "@types/dotenv-webpack": "^7.0.7",
         "dotenv-webpack": "^8.1.0",
-        "haengdong-design": "^0.1.28",
+        "haengdong-design": "^0.1.29",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.24.1"
@@ -6274,9 +6274,9 @@
       "dev": true
     },
     "node_modules/haengdong-design": {
-      "version": "0.1.28",
-      "resolved": "https://registry.npmjs.org/haengdong-design/-/haengdong-design-0.1.28.tgz",
-      "integrity": "sha512-czidJMyGWLbdfrabj3SARWMS3fB26c1Fg43XxS7ognTc3mG37BqRe6coPKueU0onB4IoB+xhYZcmHJKIZwukLw==",
+      "version": "0.1.29",
+      "resolved": "https://registry.npmjs.org/haengdong-design/-/haengdong-design-0.1.29.tgz",
+      "integrity": "sha512-yBxmS8PBYOMG6scumzeey2LQMSvlB5kqyd/pIP/ID4WRkvwVo8ScFYO6iV8odFINt4I1Dx2aC/itdk74Pyvv4A==",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@svgr/webpack": "^8.1.0",
diff --git a/client/package.json b/client/package.json
index 350a884ed..fed2f5249 100644
--- a/client/package.json
+++ b/client/package.json
@@ -47,7 +47,7 @@
     "@emotion/react": "^11.11.4",
     "@types/dotenv-webpack": "^7.0.7",
     "dotenv-webpack": "^8.1.0",
-    "haengdong-design": "^0.1.28",
+    "haengdong-design": "^0.1.29",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1"
diff --git a/client/src/constants/routerUrls.ts b/client/src/constants/routerUrls.ts
index f0a910d5b..228e25c7c 100644
--- a/client/src/constants/routerUrls.ts
+++ b/client/src/constants/routerUrls.ts
@@ -3,6 +3,6 @@ export const ROUTER_URLS = {
   eventCreateName: '/event/create/name',
   eventCreateComplete: '/event/create/complete',
   event: '/event',
-  eventManage: '/event/:eventId',
+  eventManage: '/event/:eventId/admin',
   home: '/event/:eventId/home',
 };
diff --git a/client/src/pages/Create/Complete.tsx b/client/src/pages/Create/Complete.tsx
index c2f499cb6..b4496d0cd 100644
--- a/client/src/pages/Create/Complete.tsx
+++ b/client/src/pages/Create/Complete.tsx
@@ -29,7 +29,7 @@ const CompleteCreateEvent = () => {
         description="행사가 성공적으로 개시됐어요 :) 행사 링크를 통해서 참여자 관리가 가능해요. 관리를 위해서 행사 관리 링크를 보관해
         주세요."
       />
-      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${url}`)}>관리 페이지로 이동</FixedButton>
+      <FixedButton onClick={() => navigate(`${ROUTER_URLS.event}/${url}/admin`)}>관리 페이지로 이동</FixedButton>
     </MainLayout>
   );
 };
diff --git a/client/src/pages/Create/Name.tsx b/client/src/pages/Create/Name.tsx
index ee847e258..8a1261662 100644
--- a/client/src/pages/Create/Name.tsx
+++ b/client/src/pages/Create/Name.tsx
@@ -27,7 +27,7 @@ const CreateEvent = () => {
           onChange={event => setEventTitle(event.target.value)}
           placeholder="ex) 행동대장 야유회"
         />
-        <FixedButton>행동 개시!</FixedButton>
+        <FixedButton onClick={() => navigate(ROUTER_URLS.eventCreateComplete)}>행동 개시!</FixedButton>
       </form>
     </MainLayout>
   );
diff --git a/client/src/pages/Event/Event.tsx b/client/src/pages/Event/Event.tsx
index edc95d5b4..79c1f9950 100644
--- a/client/src/pages/Event/Event.tsx
+++ b/client/src/pages/Event/Event.tsx
@@ -1,6 +1,10 @@
 import {useState} from 'react';
 import {TopNav, Title, FixedButton, StepItem, InOutItem, MainLayout} from 'haengdong-design';
 
+import StepList from '@components/StepList/StepList';
+import {useStepList} from '@hooks/useStepList/useStepList';
+import {StepListProvider} from '@hooks/useStepList/useStepList';
+
 import {SetActionModalContent, SetInitialParticipants} from '@components/Modal';
 
 import {ReceiptStyle} from './Event.style';
@@ -60,30 +64,22 @@ const Event = () => {
   const [participants, setParticipants] = useState<string[]>([]);
   const [order, setOrder] = useState<number>(0);
 
+  const {getTotalPrice} = useStepList();
+
   return (
     <MainLayout backgroundColor="gray">
       <TopNav navType={'home'} />
       <Title
         title="행동대장 야유회"
         description="“초기인원 설정하기” 버튼을 눌러서 행사 초기 인원을 설정해 주세요."
-        // TODO: (@soha) price 생성시 총 가격 생기기
-        price={20000}
+        price={getTotalPrice()}
       />
       <section css={ReceiptStyle}>
         {order > 0 && (
-          // TODO: (@soha) StepList로 변경하기
           //  TODO: (@soha) order가 0일때 기본 Step 뜨기
-          <>
-            <StepItem
-              name={`${order}차`}
-              personCount={participants.length}
-              bills={[
-                {name: 'QWER', price: 12000, hasDragHandle: true},
-                {name: '배고파요', price: 12000, hasDragHandle: true},
-              ]}
-            />
-            <InOutItem names={['감자', '고구마']} inOutType={'OUT'} hasDragHandle={true} />
-          </>
+          <StepListProvider>
+            <StepList />
+          </StepListProvider>
         )}
         {/* TODO: (@soha) 추후 버튼 width 화면에 맞게 수정 */}
         <FixedButton