Merge pull request #67 from Jigeum-lab/style/#66

style: 디자인 오류 수정

src/components/common/Header.tsx

@@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import * as s from '@/style/common/HeaderStyle';
 import { Icon } from '@/components/common/Icon';
-import React, { SetStateAction } from 'react';
+import React, { SetStateAction, useState } from 'react';
 
 export default function Header({ setShowModal }: { setShowModal: React.Dispatch<SetStateAction<boolean>> }) {
+  const [currentPage, setCurrentPage] = useState('projects');
   const navigate = useNavigate();
 
   function handleModal() {
@@ -21,15 +22,23 @@ export default function Header({ setShowModal }: { setShowModal: React.Dispatch<
         />
         <s.Nav>
           <s.IconBox
-            color="#69ACFF"
+            $color={currentPage === 'projects' ? '#69ACFF' : '#47484c'}
             onClick={() => {
+              setCurrentPage('projects');
               navigate('/');
             }}
           >
             <Icon name="SmallProjectIcon" fill="#69ACFF" />
             <p>프로젝트</p>
           </s.IconBox>
-          <s.Article onClick={handleModal}>아티클</s.Article>
+          <s.Article
+            $color={currentPage === 'article' ? '#69ACFF' : '#47484c'}
+            onClick={() => {
+              handleModal();
+            }}
+          >
+            아티클
+          </s.Article>
         </s.Nav>
       </s.NavigationBox>
       <s.NavigationBox width={243}>

src/style/common/HeaderStyle.tsx

@@ -32,13 +32,15 @@ export const Nav = styled.nav`
   gap: 40px;
 `;
 
-export const IconBox = styled.div<{ color: string }>`
+export const IconBox = styled.div<{ $color: string }>`
   width: 79px;
   font-size: 15px;
   display: flex;
   align-items: center;
   cursor: pointer;
   gap: 4px;
+  color: ${({ $color }) => $color};
+  font-size: 15px;
 `;
 
 export const RegisterButton = styled.button`
@@ -64,7 +66,7 @@ export const RegisterButton = styled.button`
   }
 `;
 
-export const Article = styled.p`
-  color: #47484c;
+export const Article = styled.p<{ $color: string }>`
+  color: ${({ $color }) => $color};
   font-size: 15px;
 `;

src/style/projectDetail/ProjectInfoStyle.tsx

@@ -43,6 +43,10 @@ export const ProjectInformation = styled(ReactMarkdown)`
     line-height: 144.5%;
     letter-spacing: -0.004px;
   }
+  ul {
+    padding: 0 20px;
+    box-sizing: border-box;
+  }
   li {
     color: #47484c;
     font-size: 16px;