mission-6 완료

Author: 임재은

src/assets/closeBtn.png

@@ -1,11 +1,12 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import logoImg from '../assets/logo.png';
 import moLogoImg from '../assets/mo_logo.png';
 import profileImg from '../assets/profileIcon.png';
 
 function Navigation() {
+  const location = useLocation();
   return (
     <NavWrap>
       <Logo>
@@ -18,8 +19,10 @@ function Navigation() {
         </a>
       </Logo>
       <Nav>
-        <Link to='/freeboard'>자유게시판</Link>
-        <Link to='/items'>중고마켓</Link>
+        <StyledLink to='/freeboard'>자유게시판</StyledLink>
+        <StyledLink to='/items' $isActive={location.pathname === '/addItem'}>
+          중고마켓
+        </StyledLink>
       </Nav>
       <Profile>
         <a href='#'>
@@ -38,16 +41,6 @@ const NavWrap = styled.div`
   width: 100%;
   padding: 0 16px;
   border-bottom: 1px solid #dfdfdf;
-  a {
-    text-decoration: none;
-    color: #4b5563;
-    font-weight: 600;
-    font-size: 16px;
-    flex-shrink: 0;
-    img {
-      vertical-align: middle;
-    }
-  }
 `;
 const Nav = styled.div`
   display: flex;
@@ -74,4 +67,14 @@ const Profile = styled.div`
     width: 100%;
   l}
 `;
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: ${props => (props.$isActive ? '#3692ff' : '#4b5563')};
+  font-weight: 600;
+  font-size: 16px;
+  flex-shrink: 0;
+  img {
+    vertical-align: middle;
+  }
+`;
 export default Navigation;

src/assets/imageUpload.svg

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+import closeBtn from '../assets/closeBtn.png';
+export default function Tag({ children, id, deleteTagHandler }) {
+  const onDeleteTag = () => {
+    deleteTagHandler(id);
+  };
+  return (
+    <TagWrapper id={id}>
+      #{children}
+      <DelBtn onClick={onDeleteTag} src={closeBtn} />
+    </TagWrapper>
+  );
+}
+const TagWrapper = styled.div`
+  display: flex;
+  height: 36px;
+  border-radius: 26px;
+  background-color: #f3f4f6;
+  font-size: 16px;
+  padding: 5px 12px 5px 16px;
+  align-items: center;
+`;
+const DelBtn = styled.img`
+  width: 22px;
+  height: 24px;
+  margin-left: 8px;
+`;

src/components/Header.jsx

@@ -108,7 +108,7 @@ section {
   display: block;
 }
 body {
-  font-family: "Pretendard", sans-serif;
+  font-family: 'Pretendard', sans-serif;
   line-height: 1;
 }
 ol,
@@ -123,7 +123,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: "";
+  content: '';
   content: none;
 }
 table {