feat: homeSection4,5 구현

src/assets/svgs/IcAdd.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcAdd = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcCheckbox.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcCheckbox = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcLocation.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcLocation = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/IcRemove.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcRemove = (props: SVGProps<SVGSVGElement>) => (
   <svg

src/assets/svgs/index.ts

@@ -1,5 +1,35 @@
+export { default as AladinLogo } from './AladinLogo';
 export { default as BtnFFloating } from './BtnFFloating';
+export { default as BtnFloating } from './BtnFloating';
+export { default as Hihi } from './Hihi';
+export { default as HomeSection2Indicator } from './HomeSection2Indicator';
+export { default as IcAdd } from './IcAdd';
+export { default as IcArrowSaleBefore } from './IcArrowSaleBefore';
+export { default as IcCheckbox } from './IcCheckbox';
+export { default as IcChevronSmallRight } from './IcChevronSmallRight';
+export { default as IcLocation } from './IcLocation';
+export { default as IcMenuSmallGray } from './IcMenuSmallGray';
+export { default as IcMypageGray } from './IcMypageGray';
+export { default as IcPick } from './IcPick';
+export { default as IcRemove } from './IcRemove';
 export { default as IcRightarrowMediumTextgray40 } from './IcRightarrowMediumTextgray40';
+export { default as IcRightarrowSmall } from './IcRightarrowSmall';
+export { default as IcSearch } from './IcSearch';
+export { default as IcShoppingcartGray } from './IcShoppingcartGray';
+export { default as Img11 } from './Img11';
+export { default as Img12 } from './Img12';
+export { default as Img13 } from './Img13';
+export { default as Img14 } from './Img14';
+export { default as Img41 } from './Img41';
+export { default as Img42 } from './Img42';
+export { default as Img43 } from './Img43';
+export { default as Img44 } from './Img44';
+export { default as Img45 } from './Img45';
+export { default as Img51 } from './Img51';
+export { default as Img52 } from './Img52';
+export { default as Img53 } from './Img53';
+export { default as Img54 } from './Img54';
+export { default as Img55 } from './Img55';
 export { default as Img61 } from './Img61';
 export { default as Img62 } from './Img62';
 export { default as Img63 } from './Img63';
@@ -9,25 +39,12 @@ export { default as Img66 } from './Img66';
 export { default as Img67 } from './Img67';
 export { default as Img68 } from './Img68';
 export { default as Img69 } from './Img69';
-export { default as AladinLogo } from './AladinLogo';
-export { default as BtnFloating } from './BtnFloating';
-export { default as Hihi } from './Hihi';
-export { default as IcArrowSaleBefore } from './IcArrowSaleBefore';
-export { default as IcRightarrowSmall } from './IcRightarrowSmall';
-export { default as Img11 } from './Img11';
-export { default as Img12 } from './Img12';
-export { default as Img13 } from './Img13';
-export { default as Img14 } from './Img14';
+export { default as Img71 } from './Img71';
+export { default as Img72 } from './Img72';
+export { default as Img73 } from './Img73';
+export { default as Img74 } from './Img74';
+export { default as Img75 } from './Img75';
 export { default as Playno } from './Playno';
 export { default as Playyes } from './Playyes';
-export { default as IcChevronSmallRight } from './IcChevronSmallRight';
-export { default as IcMenuSmallGray } from './IcMenuSmallGray';
-export { default as IcMypageGray } from './IcMypageGray';
-export { default as IcSearch } from './IcSearch';
-export { default as IcShoppingcartGray } from './IcShoppingcartGray';
 export { default as SerachUnder } from './SerachUnder';
 export { default as XGroup2 } from './XGroup2';
-export { default as IcAdd } from './IcAdd';
-export { default as IcCheckbox } from './IcCheckbox';
-export { default as IcLocation } from './IcLocation';
-export { default as IcRemove } from './IcRemove';

src/components/Nobel/Nobel.styled.ts

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+const commonFlexCenter = `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const NobelWrapper = styled.div`
+  ${commonFlexCenter}
+  width: 100vw;
+  height: 46rem;
+  flex-shrink: 0;
+  cursor: default;
+`;
+
+export const NobelContainer = styled.div`
+  width: 103rem;
+  flex-shrink: 0;
+`;
+
+export const NobelTitle = styled.div`
+  width: 27.8rem;
+  flex-shrink: 0;
+  margin-bottom: 2.6rem;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.head_b_24};
+  font-size: 2.3rem;
+`;
+
+export const BookList = styled.div`
+  display: flex;
+  width: 1030px;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const BookItem = styled.div``;
+
+export const BookTitle = styled.p`
+  margin-top: 2rem;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.title2_b_17};
+  text-align: left;
+`;

src/components/Nobel/Nobel.tsx

@@ -0,0 +1,27 @@
+import * as S from './Nobel.styled';
+import { IcRightarrowMediumTextgray40 } from '@assets/svgs';
+import { NobelBookList } from '../../constants/nobel';
+
+const Nobel = () => {
+  return (
+    <S.NobelWrapper>
+      <S.NobelContainer>
+        <S.NobelTitle>
+          한강 2024 노벨문학상 수상
+          <IcRightarrowMediumTextgray40 />
+        </S.NobelTitle>
+
+        <S.BookList>
+          {NobelBookList.map((book) => (
+            <S.BookItem key={book.id}>
+              <book.image />
+              <S.BookTitle>{book.title}</S.BookTitle>
+            </S.BookItem>
+          ))}
+        </S.BookList>
+      </S.NobelContainer>
+    </S.NobelWrapper>
+  );
+};
+
+export default Nobel;

src/components/Recommend/Recommend.styled.ts

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+
+const commonFlexCenter = `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const RecommendWrapper = styled.div`
+  ${commonFlexCenter}
+  width: 100vw;
+  height: 46rem;
+  flex-shrink: 0;
+  cursor: default;
+`;
+
+export const RecommendContainer = styled.div`
+  width: 103rem;
+  flex-shrink: 0;
+`;
+
+export const RecommendTitle = styled.div`
+  width: 27.8rem;
+  flex-shrink: 0;
+  margin-bottom: 1rem;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.head_b_24};
+  font-size: 2.3rem;
+`;
+
+export const BookList = styled.div`
+  display: flex;
+  width: 1030px;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const BookItem = styled.div`
+  height: 25rem;
+`;
+
+export const BookTitle = styled.p`
+  width: 17.3rem;
+  margin-top: 2rem;
+
+  color: ${({ theme }) => theme.colors.text_gray40};
+  ${({ theme }) => theme.fonts.title2_b_17};
+  text-align: left;
+  overflow-wrap: break-word;
+`;
+
+export const RecommendLogin = styled.p`
+  margin-bottom: 1.9rem;
+
+  color: ${({ theme }) => theme.colors.text_gray20};
+  ${({ theme }) => theme.fonts.body12_sb_13};
+
+  span {
+    margin-left: 0.8rem;
+
+    color: ${({ theme }) => theme.colors.purple50};
+    ${({ theme }) => theme.fonts.body5_b_13};
+  }
+`;

src/components/Recommend/Recommend.tsx

@@ -0,0 +1,31 @@
+import * as S from './Recommend.styled';
+import { IcRightarrowMediumTextgray40 } from '@assets/svgs';
+import { RecommendbookList } from '../../constants/recommend';
+
+const Recommend = () => {
+  return (
+    <S.RecommendWrapper>
+      <S.RecommendContainer>
+        <S.RecommendTitle>
+          추천마법사의 선택
+          <IcRightarrowMediumTextgray40 />
+        </S.RecommendTitle>
+        <S.RecommendLogin>
+          지금 로그인하시면 추천마법사가 선택한 책을 보여드려요{' '}
+          <span>로그인하기</span>
+        </S.RecommendLogin>
+
+        <S.BookList>
+          {RecommendbookList.map((book) => (
+            <S.BookItem key={book.id}>
+              <book.image />
+              <S.BookTitle>{book.title}</S.BookTitle>
+            </S.BookItem>
+          ))}
+        </S.BookList>
+      </S.RecommendContainer>
+    </S.RecommendWrapper>
+  );
+};
+
+export default Recommend;

src/constants/nobel.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Img41, Img42, Img43, Img44, Img45 } from '@assets/svgs';
+
+export interface Nobel {
+  id: number;
+  title: string;
+  image: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+export const NobelBookList: Nobel[] = [
+  {
+    id: 1,
+    title: '소년이 온다',
+    image: Img41,
+  },
+  {
+    id: 2,
+    title: '작별하지 않는다',
+    image: Img42,
+  },
+  {
+    id: 3,
+    title: '채식주의자',
+    image: Img43,
+  },
+  {
+    id: 4,
+    title: '흰',
+    image: Img44,
+  },
+  {
+    id: 5,
+    title: '서랍에 저녁을 넣어 두었다',
+    image: Img45,
+  },
+];

src/constants/recommend.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Img51, Img52, Img53, Img54, Img55 } from '@assets/svgs';
+
+export interface Recommend {
+  id: number;
+  title: string;
+  image: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+export const RecommendbookList: Recommend[] = [
+  {
+    id: 1,
+    title: '어떤 어른',
+    image: Img51,
+  },
+  {
+    id: 2,
+    title: '어떤 비밀',
+    image: Img52,
+  },
+  {
+    id: 3,
+    title: '진짜 하루만에 이해하는 제약바이오 산업',
+    image: Img53,
+  },
+  {
+    id: 4,
+    title: '흰',
+    image: Img54,
+  },
+  {
+    id: 5,
+    title: '서랍에 저녁을 넣어 두었다',
+    image: Img55,
+  },
+];

src/pages/Main/Main.tsx

@@ -3,11 +3,15 @@ import Section6Card from '@components/HomeSection6Scroll/Section6Card';
 import * as S from './Main.styled';
 import HomeSection1 from '@components/homeSection1/homeSection1';
 import HomeSection7 from '@components/Main/Section7/HomeSection7';
+import Nobel from '@components/Nobel/Nobel';
+import Recommend from '@components/Recommend/Recommend';
 
 const Main = () => {
   return (
     <S.MainWrapper>
       <HomeSection1 />
+      <Nobel />
+      <Recommend />
       <Section6Card />
       <HomeSection7 />
     </S.MainWrapper>