feat: 방 정보입력 프로그레스바 구현

ASAP-as-soon-as-possible · Jul 28, 2024 · a892962 · a892962
1 parent 334b346
commit a892962
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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 {