feat: 섹션 설명 추가

sopt-makers · Dec 10, 2023 · 2b8b5b0 · 2b8b5b0
1 parent 6b7a591
commit 2b8b5b0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 22 deletions.
diff --git a/src/views/MainPage/MainPage.tsx b/src/views/MainPage/MainPage.tsx
@@ -1,5 +1,6 @@
 import PageLayout from '@src/components/common/PageLayout';
 import IntroSection from '@src/views/MainPage/components/IntroSection';
+import PartConfig from '@src/views/MainPage/components/PartConfig';
 import Activity from './components/Activity';
 import Banner from './components/Banner';
 import Introduce from './components/Introduce';
@@ -13,6 +14,7 @@ function MainPage() {
       <IntroSection />
       <ScrollInteractiveLogo />
       <Activity />
+      <PartConfig />
     </PageLayout>
   );
 }

diff --git a/src/views/MainPage/components/PartConfig/index.tsx b/src/views/MainPage/components/PartConfig/index.tsx
@@ -4,6 +4,7 @@ import { tabs as carouselList } from '@src/lib/constants/tabs';
 import { TabType } from '@src/lib/types/universal';
 import PartButton from '@src/views/MainPage/components/PartConfig/PartButton.tsx';
 import PartSlide from '@src/views/MainPage/components/PartConfig/PartSlide';
+import Tab from '@src/views/MainPage/components/Tab';
 import * as S from './style';
 
 export default function PartConfig() {
@@ -30,28 +31,37 @@ export default function PartConfig() {
   };
 
   return (
-    <S.Wrapper>
-      <S.PartConfig>
-        <S.PartButtonList>
-          {carouselList.map(({ label }, index) => (
-            <PartButton
-              key={index}
-              index={index}
-              label={label}
-              isSelected={index === partIndex}
-              handleSelectPart={handleSelectPart}
-            />
-          ))}
-        </S.PartButtonList>
-        <S.CarouselWrapper>
-          <S.Carousel ref={carouselRef}>
-            {infiniteCarouselList.map(({ value }, index) => (
-              <PartSlide key={index} part={value} handleCarouselSwipe={handleCarouselSwipe} />
+    <S.Background>
+      <Tab
+        tab={'(2) 파트 구성'}
+        title={'6개의 파트로 이루어져 있어요.'}
+        description={
+          'SOPT에서는 기획, 디자인, 개발 등 여러 파트원들이 한 프로젝트에 참여하며\n협업하는 경험을 배울 수 있습니다. 부족해도 괜찮아요, 함께 배우면 되니까요!'
+        }
+      />
+      <S.Wrapper>
+        <S.PartConfig>
+          <S.PartButtonList>
+            {carouselList.map(({ label }, index) => (
+              <PartButton
+                key={index}
+                index={index}
+                label={label}
+                isSelected={index === partIndex}
+                handleSelectPart={handleSelectPart}
+              />
             ))}
-          </S.Carousel>
-        </S.CarouselWrapper>
-      </S.PartConfig>
-      <S.RequiredAbility href="/recruit#chapter-info">필요 역량이 궁금하다면?</S.RequiredAbility>
-    </S.Wrapper>
+          </S.PartButtonList>
+          <S.CarouselWrapper>
+            <S.Carousel ref={carouselRef}>
+              {infiniteCarouselList.map(({ value }, index) => (
+                <PartSlide key={index} part={value} handleCarouselSwipe={handleCarouselSwipe} />
+              ))}
+            </S.Carousel>
+          </S.CarouselWrapper>
+        </S.PartConfig>
+        <S.RequiredAbility href="/recruit#chapter-info">필요 역량이 궁금하다면?</S.RequiredAbility>
+      </S.Wrapper>
+    </S.Background>
   );
 }
diff --git a/src/views/MainPage/components/PartConfig/style.ts b/src/views/MainPage/components/PartConfig/style.ts
@@ -1,6 +1,11 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 
+export const Background = styled.section`
+  background-color: ${colors.white};
+`;
+
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;