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 = () => (
/>
}
+ element={}
/>
}
+ element={}
/>
{
return (
-
글쓰기
-
마이페이지
+
+
+
+
+
+
);
};
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`