style: Add icons to header menu

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

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.write}>
-      <S.NavItem to={URL.myPage}>마이페이지</S.NavItem>
+        <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>
   );
 };

src/components/Layout/Nav.jsx

@@ -1,5 +0,0 @@
-function Nav() {
-  return (  );
-}
-
-export default Nav;

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,
+  & > .left,
-  > .right {
+  & > .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`