💄 feat: step indicator 컴포넌트 구현 #5

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/src/pages/Test

src/components/Information/StepIndicator.tsx

@@ -0,0 +1,41 @@
+const StepIndicator = ({ currentStep }: { currentStep: number }) => {
+  return (
+    <div className="relative w-full flex flex-row items-center justify-center text-center text-xs text-[#bdbdbd] font-[Pretendard]">
+      <div
+        className={`relative flex items-center justify-center w-[1.5rem] h-[1.5rem] ${currentStep === 1 && 'text-[#464646]'}`}
+      >
+        <div
+          className={`flex items-center justify-center w-[1.25rem] h-[1.25rem] rounded-full ${currentStep === 1 ? 'bg-[#FEF387]' : 'border border-[#F4F4F9] bg-white'}`}
+        >
+          1
+        </div>
+      </div>
+      <div
+        className={`relative w-[1rem] h-[0.125rem] ${currentStep !== 1 ? 'bg-[#FEF387]' : 'bg-[#F4F4F9]'}`}
+      />
+      <div
+        className={`relative flex items-center justify-center w-[1.5rem] h-[1.5rem] ${currentStep === 2 && 'text-[#464646]'}`}
+      >
+        <div
+          className={`flex items-center justify-center w-[1.25rem] h-[1.25rem] rounded-full ${currentStep === 2 ? 'bg-[#FEF387]' : 'border border-[#F4F4F9] bg-white'}`}
+        >
+          2
+        </div>
+      </div>
+      <div
+        className={`relative w-[1rem] h-[0.125rem] ${currentStep === 3 ? 'bg-[#FEF387]' : 'bg-[#F4F4F9]'}`}
+      />
+      <div
+        className={`relative flex items-center justify-center w-[1.5rem] h-[1.5rem] ${currentStep === 3 && 'text-[#464646]'}`}
+      >
+        <div
+          className={`flex items-center justify-center w-[1.25rem] h-[1.25rem] rounded-full ${currentStep === 3 ? 'bg-[#FEF387]' : 'border border-[#F4F4F9] bg-white'}`}
+        >
+          3
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepIndicator;

src/pages/Information/InformationPage.tsx

@@ -0,0 +1,18 @@
+import StepIndicator from '@/components/Information/StepIndicator';
+import { useState } from 'react';
+
+const InformationPage = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  return (
+    <div className="m-auto max-w-[500px] h-screen flex flex-col items-center justify-start border border-black">
+      <div className="w-full flex flex-row items-center justify-between">
+        <div className="relative w-full flex items-center justify-center text-[1.75rem] tracking-[-0.01em] leading-9 font-semibold font-[Pretendard] text-[#1e1926] text-left" onClick={() => setCurrentStep(currentStep + 1)}>
+          Information
+        </div>
+        <StepIndicator currentStep={currentStep} />
+      </div>
+    </div>
+  );
+};
+
+export default InformationPage;

src/router.tsx

@@ -1,11 +1,13 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import HomePage from '@/pages/Home/HomePage';
+import InformationPage from './pages/Information/InformationPage';
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/information" element={<InformationPage />} />
       </Routes>
     </BrowserRouter>
   );