From a556e6f5757dab0b28ce0b5f12ebcf3fbd57ddcd Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 1 Nov 2023 19:38:41 +0900
Subject: [PATCH] style: Add icons to header menu

---
 src/Router.jsx                     |  4 ++--
 src/components/Layout/AuthMenu.jsx | 22 ++++++++++++++++++++--
 src/components/Layout/Nav.jsx      |  5 -----
 src/styles/Layout.styles.js        | 18 ++++++++++++++----
 4 files changed, 36 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/Layout/Nav.jsx

diff --git a/src/Router.jsx b/src/Router.jsx
index e1876b7..f868e55 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -72,11 +72,11 @@ const Router = () => (
         />
         <Route
           path={URL.write}
-          element={<Write />}
+          element={<WriteSteps />}
         />
         <Route
           path={URL.write2}
-          element={<WriteSteps />}
+          element={<Write />}
         />
       </Route>
       <Route
diff --git a/src/components/Layout/AuthMenu.jsx b/src/components/Layout/AuthMenu.jsx
index 4bd5df5..c50e852 100644
--- a/src/components/Layout/AuthMenu.jsx
+++ b/src/components/Layout/AuthMenu.jsx
@@ -15,8 +15,26 @@ const AuthMenu = () => {
 
   return (
     <div className="right">
-      <S.NavItem to={URL.write}>글쓰기</S.NavItem>
-      <S.NavItem to={URL.myPage}>마이페이지</S.NavItem>
+      <S.NavItem to={URL.write}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 -960 960 960"
+          width="24"
+        >
+          <path d="M560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v640h240v80H240Zm280-400Zm241 199-19-18 37 37-18-19Z" />
+        </svg>
+      </S.NavItem>
+      <S.NavItem to={URL.myPage}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 -960 960 960"
+          width="24"
+        >
+          <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Z" />
+        </svg>
+      </S.NavItem>
     </div>
   );
 };
diff --git a/src/components/Layout/Nav.jsx b/src/components/Layout/Nav.jsx
deleted file mode 100644
index de17769..0000000
--- a/src/components/Layout/Nav.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Nav() {
-  return (  );
-}
-
-export default Nav;
diff --git a/src/styles/Layout.styles.js b/src/styles/Layout.styles.js
index c7f02f7..a9c3c4e 100644
--- a/src/styles/Layout.styles.js
+++ b/src/styles/Layout.styles.js
@@ -18,9 +18,9 @@ export const Header = styled.header`
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
-    gap: 32px;
+    gap: 16px;
     align-items: center;
-    padding: 0 32px;
+    padding: 0 16px;
     height: 100%;
   }
 `;
@@ -38,6 +38,7 @@ export const Logo = styled(Link)`
 export const Nav = styled.nav`
   display: flex;
   flex-direction: row;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -47,14 +48,19 @@ export const Nav = styled.nav`
   top: 0;
   z-index: 9998;
 
-  > .left,
-  > .right {
+  & > .left,
+  & > .right {
     display: flex;
+  }
+
+  & > .left {
     gap: 8px;
   }
 `;
 
 export const NavItem = styled(Link)`
+  display: flex;
+  align-items: center;
   color: ${({ theme }) => theme.colors.gray700};
   font-size: 16px;
   text-decoration: none;
@@ -66,6 +72,10 @@ export const NavItem = styled(Link)`
   &:hover {
     background-color: ${({ theme }) => theme.colors.gray200};
   }
+
+  & > svg {
+    fill: ${({ theme }) => theme.colors.gray700};
+  }
 `;
 
 export const Main = styled.main`