diff --git a/src/views/MainPage/MainPage.tsx b/src/views/MainPage/MainPage.tsx index be9f00e1..79a3666c 100644 --- 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() { + ); } diff --git a/src/views/MainPage/components/PartConfig/index.tsx b/src/views/MainPage/components/PartConfig/index.tsx index ea001cee..755043ee 100644 --- 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 ( - - - - {carouselList.map(({ label }, index) => ( - - ))} - - - - {infiniteCarouselList.map(({ value }, index) => ( - + + + + + + {carouselList.map(({ label }, index) => ( + ))} - - - - 필요 역량이 궁금하다면? - + + + + {infiniteCarouselList.map(({ value }, index) => ( + + ))} + + + + 필요 역량이 궁금하다면? + + ); } diff --git a/src/views/MainPage/components/PartConfig/style.ts b/src/views/MainPage/components/PartConfig/style.ts index 8e3542a6..9866d656 100644 --- 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;