Style: 상단 네비게이션 메뉴에 Divider 추가 및 프로젝트섹션 내 셀렉터 id 수정

APPS-sookmyung · Nov 19, 2023 · 5ace0e3 · 5ace0e3
1 parent 832e436
commit 5ace0e3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -27,6 +27,7 @@ const Header = () => {
         <S.Nav>
           <S.NavItem onClick={() => scrollToSection('aboutApps')}>APPS 소개</S.NavItem>
           <S.NavItem onClick={() => scrollToSection('projectsSection')}>프로젝트 소개</S.NavItem>
+          <S.NavDivider>|</S.NavDivider>
           <S.NavItem onClick={handleGitHubClick}>깃허브</S.NavItem>
         </S.Nav>
       </S.Inner>

diff --git a/src/components/Header/Header.style.jsx b/src/components/Header/Header.style.jsx
@@ -47,3 +47,5 @@ export const NavItem = styled.a`
     color: white;
   }
 `;
+
+export const NavDivider = styled.text``;
diff --git a/src/components/ProjectsSection/ProjectsSection.jsx b/src/components/ProjectsSection/ProjectsSection.jsx
@@ -106,10 +106,10 @@ const PROJECT_CATEGORY_LIST = [
 const ProjectsSection = () => {
   return (
     <S.Section>
-      <S.TopBackground />
+      <S.TopBackground id="projectsSection" />
       <S.BottomBackground />
       <S.SectionInner>
-        <S.SectionTitle id="projectsSection">프로젝트 소개</S.SectionTitle>
+        <S.SectionTitle>프로젝트 소개</S.SectionTitle>
         <S.SectionNav>
           {PROJECT_CATEGORY_LIST.map(({ id, title }) => (
             <S.SectionNavItem key={id} href={`#${id}`}>

diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
@@ -37,10 +37,10 @@ const HomePage = () => {
           </S.MessageSectionInner>
         </S.MessageSection>
 
-        <S.AboutAppsSection>
+        <S.AboutAppsSection id="aboutApps">
           <S.AboutAppsSectionInner>
             <AnimationOnScroll animateIn="animate__fadeInUp" animateOnce={true}>
-              <S.SectionTitle id="aboutApps">{'APPS 소개'}</S.SectionTitle>
+              <S.SectionTitle>{'APPS 소개'}</S.SectionTitle>
               <S.SectionDescription>
                 APPS는 모바일 앱&웹 프로그래밍 동아리로,
                 <br /> 기술과 아이디어를 통해 프로젝트를 진행하며
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,3 +47,5 @@ export const NavItem = styled.a` @@
         color: white;
       }
     `;
+    export const NavDivider = styled.text``;