Merge pull request #32 from beomgye/feat/navbar

Refactor | NavBar 컴포넌트 레이아웃 수정 #8
beomgye · Oct 5, 2023 · 5283995 · 5283995
2 parents 89b3f3a + d8bf5c5
commit 5283995
Showing 1 changed file with 28 additions and 23 deletions.
diff --git a/src/components/common/NavBar/index.jsx b/src/components/common/NavBar/index.jsx
@@ -1,44 +1,49 @@
-import { styled } from 'styled-components'
+import styled from 'styled-components';
+
+const NavBar = ({ current, text }) => {
+  const steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
 
-const NavBar = ({ index, name }) => {
   return (
     <StyledNavBar>
       <ul className="stepContainer">
-        <li className="step">
-          <div className="circle">{index + 1}</div>
-          <div className="stepDetails">
-            <div className="stepText">
-              Step
-              {index + 1}
-            </div>
-            <div className="stepName">
-              text
-              {name}
+        {steps.map((step, index) => (
+          <li className={step === steps[current] ? 'active' : ''} key={step}>
+            <div className="circle">{index + 1}</div>
+            <div className="stepDetails">
+              <div className="stepText">
+                Step
+                {index + 1}
+              </div>
+              <div className="stepName">{text}</div>
             </div>
-          </div>
-        </li>
+          </li>
+        ))}
       </ul>
     </StyledNavBar>
-  )
-}
+  );
+};
 
 const StyledNavBar = styled.nav`
-  display: flex;
+  position: absolute;
   justify-content: flex-start;
-  min-height: 568px;
-  width: 274px;
+  min-height: 504px;
+  width: 226px;
   border-radius: 8px;
-  padding: 40px 32px;
+  padding: 32px 24px;
+  margin: 16px;
   background-color: #483eff;
 
   & .stepContainer {
+    display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
     gap: 32px;
+    padding: 0;
+    margin: 0;
   }
 
-  & .step {
+  & li {
     display: flex;
     align-items: center;
     gap: 16px;
@@ -80,6 +85,6 @@ const StyledNavBar = styled.nav`
     letter-spacing: 1px;
     color: #ffff;
   }
-`
+`;
 
-export default NavBar
+export default NavBar;