From a89296281609123b68f301949f4e217f27a10718 Mon Sep 17 00:00:00 2001
From: ljh0608 <m98m@naver.com>
Date: Mon, 29 Jul 2024 00:57:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=A0=95=EB=B3=B4=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=94=84=EB=A1=9C=EA=B7=B8=EB=A0=88=EC=8A=A4?=
 =?UTF-8?q?=EB=B0=94=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/createMeeting/CreateMeeting.tsx          | 14 +++++++++++++-
 .../components/ReturnBodyComponent.tsx             |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx
index 5c9563c5..e39eae53 100644
--- a/src/pages/createMeeting/CreateMeeting.tsx
+++ b/src/pages/createMeeting/CreateMeeting.tsx
@@ -29,6 +29,9 @@ function CreateMeeting() {
     <>
       <CreateMeetingWrapper>
         <Header position={'createMeeting'} setFunnelStep={setStep} />
+        <ProgressBar>
+          <StepBar step={step + 1} />
+        </ProgressBar>
         <ReturnTitleComponent step={currentStep} />
         <ReturnBodyComponent
           currentStep={currentStep}
@@ -42,7 +45,16 @@ function CreateMeeting() {
 }
 
 export default CreateMeeting;
-
+const StepBar = styled.div<{ step: number }>`
+  width: ${({ step }) => `calc(100%* ${step}/6)`};
+  height: 0.3rem;
+  background-color: ${({ theme }) => theme.colors.main1};
+`;
+const ProgressBar = styled.div`
+  width: 100%;
+  height: 0.3rem;
+  background-color: ${({ theme }) => theme.colors.grey6};
+`;
 const CreateMeetingWrapper = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/createMeeting/components/ReturnBodyComponent.tsx b/src/pages/createMeeting/components/ReturnBodyComponent.tsx
index 8bab5abe..261d3182 100644
--- a/src/pages/createMeeting/components/ReturnBodyComponent.tsx
+++ b/src/pages/createMeeting/components/ReturnBodyComponent.tsx
@@ -9,6 +9,7 @@ import SetHostInfo from './useFunnel/SetHostInfo';
 import SetPlace from './useFunnel/SetPlace';
 import SetTimes from './useFunnel/SetTimes';
 import SetTitle from './useFunnel/SetTitle';
+
 import { MeetingInfo } from '../types/useFunnelInterface';
 
 interface BodyProps {