From d8bf5c5b8ca3d3bbfaac61b17bdcca27f49695b4 Mon Sep 17 00:00:00 2001
From: kimmoonju-102 <kimmun3549@naver.com>
Date: Thu, 5 Oct 2023 23:59:00 +0900
Subject: [PATCH] =?UTF-8?q?Refactor=20|=20NavBar=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20#8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/NavBar/index.jsx | 51 ++++++++++++++------------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/common/NavBar/index.jsx b/src/components/common/NavBar/index.jsx
index e12fc63..6380ec9 100644
--- 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;