feat: 퍼블리싱된 페이지 매끄럽게 연결 (#114)

* chore: 디자인시스템 업데이트 반영 * feat: fixed button 클릭시 router 반영 * feat: 총 지출 금액 추가 및 StepList 연결
woowacourse-teams · Jul 25, 2024 · 97bd3e6 · 97bd3e6
1 parent c85f71e
commit 97bd3e6
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 22 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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