feat: homeSection 7 수정, 8,9,10,11 구현

SOPT-all · Nov 26, 2024 · 1140176 · 1140176
1 parent ce402f0
commit 1140176
Show file tree

Hide file tree

Showing 11 changed files with 438 additions and 103 deletions.
diff --git a/public/svgs/ic_audio.svg b/public/svgs/ic_audio.svg
diff --git a/src/assets/svgs/IcAudio.tsx b/src/assets/svgs/IcAudio.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcAudio = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={44}
+    height={44}
+    fill="none"
+    {...props}
+  >
+    <circle cx={22} cy={22} r={22} fill="#6358FA" />
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M15.362 22.532c-.088-1.726.317-3.67 1.377-5.158 1.036-1.454 2.738-2.537 5.42-2.537v-1.535c-3.165 0-5.338 1.313-6.67 3.182-1.1 1.543-1.596 3.423-1.665 5.162-.545-.05-1.156-.023-1.725.173-.497.17-.98.475-1.334.979-.353.502-.533 1.14-.533 1.899 0 1.713.561 3.887 1.623 5.253.539.692 1.28 1.267 2.224 1.34.952.073 1.89-.382 2.777-1.269a.77.77 0 0 0 .154-.864l-.003-.006-.01-.024-.046-.103q-.06-.14-.168-.406a22 22 0 0 1-.53-1.484c-.395-1.244-.805-2.902-.891-4.602m-2.765.739c.38-.13.848-.135 1.273-.074.148 1.663.547 3.226.921 4.402.21.66.414 1.206.567 1.588l.035.089c-.519.415-.917.505-1.196.483-.352-.026-.739-.248-1.13-.751-.798-1.026-1.3-2.837-1.3-4.311 0-.516.12-.827.254-1.017.133-.19.324-.323.576-.41m15.827-.739c.09-1.767-.2-3.714-1.136-5.193-.903-1.427-2.456-2.502-5.13-2.502v-1.535c3.171 0 5.228 1.32 6.427 3.217.979 1.547 1.35 3.417 1.386 5.127.542-.05 1.15-.021 1.715.173.497.17.98.475 1.334.979.353.502.533 1.14.533 1.899 0 1.713-.56 3.887-1.623 5.253-.538.692-1.28 1.267-2.224 1.34-.952.073-1.89-.382-2.777-1.269a.77.77 0 0 1-.154-.864l.003-.006.01-.024.046-.103q.061-.14.168-.406c.142-.354.333-.864.53-1.484.395-1.244.805-2.902.892-4.602m2.764.739c-.379-.13-.847-.135-1.272-.074-.148 1.663-.547 3.226-.922 4.402-.21.66-.414 1.206-.566 1.588l-.036.089c.52.415.918.505 1.196.483.352-.026.74-.248 1.13-.751.798-1.026 1.3-2.837 1.3-4.311 0-.516-.12-.827-.254-1.017a1.1 1.1 0 0 0-.576-.41"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgIcAudio;
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
@@ -5,6 +5,7 @@ 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 IcAudio } from './IcAudio';
 export { default as IcCheckbox } from './IcCheckbox';
 export { default as IcChevronSmallRight } from './IcChevronSmallRight';
 export { default as IcLocation } from './IcLocation';

diff --git a/src/components/Main/HomeSection10/HomeSection10.styled.ts b/src/components/Main/HomeSection10/HomeSection10.styled.ts
@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+
+export const HomeSection10 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 0 9.9rem;
+  gap: 1.3rem;
+`;
+
+export const Section10 = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+`;
+
+export const Section10Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Section10Title = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;
+
+export const Title = styled.p`
+  ${({ theme }) => theme.fonts.head_b_24};
+  color: ${({ theme }) => theme.colors.text_gray40};
+`;
+
+export const Section10Layer = styled.div`
+  display: flex;
+`;
+
+export const Section10Container = styled.div`
+  display: flex;
+  gap: 4.125rem;
+  position: relative;
+`;
+
+export const Section10Map = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem 0;
+`;
+
+export const IcAudio = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: 4.3rem;
+  left: 15.3rem;
+  gap: 17.025rem;
+`;
+
+export const CardName = styled.p`
+  ${({ theme }) => theme.fonts.title2_b_17};
+  color: ${({ theme }) => theme.colors.text_gray40};
+`;
diff --git a/src/components/Main/HomeSection10/HomeSection10.tsx b/src/components/Main/HomeSection10/HomeSection10.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import * as S from './HomeSection10.styled';
+import {
+  IcAudio,
+  IcRightarrowMediumTextgray40,
+  Img101,
+  Img102,
+  Img103,
+  Img104,
+  Img105,
+} from '@assets/svgs';
+import SvgHomeSection2Indicator from '@assets/svgs/HomeSection2Indicator';
+import ArrowLeftButton from '@components/common/Button/ArrowLeftButton/ArrowLeftButton';
+import ArrowRightButton from '@components/common/Button/ArrowRightButton/ArrowRightButton';
+
+const HomeSection10 = () => {
+  const cardData = [
+    {
+      id: 1,
+      img: <Img101 />,
+      name: '참을 수 없는 존재의 MBTI',
+      label: <IcAudio />,
+    },
+    {
+      id: 2,
+      img: <Img102 />,
+      name: '씨 유 어게인',
+      label: <IcAudio />,
+    },
+    {
+      id: 3,
+      img: <Img103 />,
+      name: '시티-뷰',
+      label: <IcAudio />,
+    },
+    {
+      id: 4,
+      img: <Img104 />,
+      name: '완벽한 행운',
+      label: <IcAudio />,
+    },
+    {
+      id: 5,
+      img: <Img105 />,
+      name: '공자의 말들',
+      label: <IcAudio />,
+    },
+  ];
+  return (
+    <S.HomeSection10>
+      <S.Section10>
+        <ArrowLeftButton />
+        <S.Section10Wrapper>
+          <S.Section10Title>
+            <S.Title>알라딘 오디오 북</S.Title>
+            <IcRightarrowMediumTextgray40 />
+          </S.Section10Title>
+          <S.Section10Layer>
+            <S.Section10Container>
+              {cardData.map((card, id) => (
+                <S.Section10Map key={id}>
+                  {card.img}
+                  <S.CardName>{card.name}</S.CardName>
+                </S.Section10Map>
+              ))}
+              <S.IcAudio>
+                <IcAudio />
+                <IcAudio />
+                <IcAudio />
+                <IcAudio />
+                <IcAudio />
+              </S.IcAudio>
+            </S.Section10Container>
+          </S.Section10Layer>
+        </S.Section10Wrapper>
+        <ArrowRightButton />
+      </S.Section10>
+      <SvgHomeSection2Indicator />
+    </S.HomeSection10>
+  );
+};
+
+export default HomeSection10;
+
+//17.025
diff --git a/src/components/Main/HomeSection11/HomeSection11.styled.ts b/src/components/Main/HomeSection11/HomeSection11.styled.ts
@@ -0,0 +1,111 @@
+import styled from '@emotion/styled';
+
+export const Section11Main = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 0 0 11.9rem;
+`;
+
+export const Section11 = styled.div`
+  display: flex;
+  gap: 4.5rem;
+`;
+
+export const Wrapper1 = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.3rem;
+`;
+
+export const Layer1 = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;
+
+export const Title1 = styled.div`
+  ${({ theme }) => theme.fonts.head_b_24};
+  color: ${({ theme }) => theme.colors.text_gray40};
+`;
+
+export const Container1 = styled.div`
+  display: flex;
+  gap: 0.9rem;
+`;
+export const Map1 = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+  width: 100%;
+`;
+export const CardHeader = styled.div`
+  width: 20rem;
+  height: 11.2rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const CardFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+`;
+export const CardName = styled.div`
+  overflow: hidden;
+  max-width: 20rem;
+  word-wrap: break-word;
+
+  ${({ theme }) => theme.fonts.body2_b_14};
+  color: ${({ theme }) => theme.colors.text_gray40};
+  white-space: normal;
+`;
+export const CardTag = styled.div`
+  ${({ theme }) => theme.fonts.body7_sb_12};
+  color: ${({ theme }) => theme.colors.purple50};
+`;
+export const CardView = styled.div`
+  ${({ theme }) => theme.fonts.body7_sb_12};
+  color: ${({ theme }) => theme.colors.text_gray30};
+`;
+
+export const Wrapper2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+export const Layer2 = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+`;
+export const Title2 = styled.div`
+  ${({ theme }) => theme.fonts.head_b_24};
+  color: ${({ theme }) => theme.colors.text_gray40};
+`;
+export const Container2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+`;
+export const Map2 = styled.div`
+  display: flex;
+  gap: 1.7rem;
+  align-items: center;
+`;
+export const TalkFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 2rem 0;
+`;
+export const TalkTitle = styled.div`
+  ${({ theme }) => theme.fonts.body2_b_14};
+  color: ${({ theme }) => theme.colors.text_gray30};
+`;
+export const TalkDate = styled.div`
+  ${({ theme }) => theme.fonts.body7_r_12};
+  color: ${({ theme }) => theme.colors.text_gray10};
+`;
diff --git a/src/components/Main/HomeSection11/HomeSection11.tsx b/src/components/Main/HomeSection11/HomeSection11.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import * as S from './HomeSection11.styled';
+import {
+  IcRightarrowMediumTextgray40,
+  Img111,
+  Img112,
+  Img113,
+  Img114,
+  Img115,
+} from '@assets/svgs';
+
+const HomeSection11 = () => {
+  const cardData = [
+    {
+      id: 1,
+      img: <Img113 />,
+      name: '너무나 정치적인 시골살이 양미X한디디X이라영',
+      tag: '#라이브북토크',
+      view: '라이브북토크 조회수 938',
+    },
+    {
+      id: 2,
+      img: <Img114 />,
+      name: '10월, 가을에 읽는 개그만화 한국만화가협회X우동이즘 작가',
+      tag: '#라이브북토크',
+      view: '라이브북토크 조회수 1,454',
+    },
+    {
+      id: 3,
+      img: <Img115 />,
+      name: '언어의 요가 요가 디렉터 김서진X버터북스 이승희',
+      tag: '#라이브북토크',
+      view: '라이브북토크 조회수 859',
+    },
+  ];
+
+  const talkData = [
+    {
+      id: 4,
+      img: <Img111 />,
+      title: '<미야자키 히야오와 일상의 애니미즘>오선민 작가 북토크',
+      date: '12월 11일(수) 오후 7시',
+    },
+    {
+      id: 5,
+      img: <Img112 />,
+      title: '<미야자키 히야오와 일상의 애니미즘>오선민 작가 북토크',
+      date: '12월 11일(수) 오후 7시',
+    },
+  ];
+
+  return (
+    <S.Section11Main>
+      <S.Section11>
+        <S.Wrapper1>
+          <S.Layer1>
+            <S.Title1>알라디너 TV</S.Title1>
+            <IcRightarrowMediumTextgray40 />
+          </S.Layer1>
+          <S.Container1>
+            {cardData.map((card) => (
+              <S.Map1 key={card.id}>
+                <S.CardHeader>{card.img}</S.CardHeader>
+                <S.CardFooter>
+                  <S.CardName>{card.name}</S.CardName>
+                  <S.CardTag>{card.tag}</S.CardTag>
+                  <S.CardView>{card.view}</S.CardView>
+                </S.CardFooter>
+              </S.Map1>
+            ))}
+          </S.Container1>
+        </S.Wrapper1>
+        <S.Wrapper2>
+          <S.Layer2>
+            <S.Title2>작가와의 만남</S.Title2>
+            <IcRightarrowMediumTextgray40 />
+          </S.Layer2>
+          <S.Container2>
+            {talkData.map((talk) => (
+              <S.Map2 key={talk.id}>
+                {talk.img}
+                <S.TalkFooter>
+                  <S.TalkTitle>{talk.title}</S.TalkTitle>
+                  <S.TalkDate>{talk.date}</S.TalkDate>
+                </S.TalkFooter>
+              </S.Map2>
+            ))}
+          </S.Container2>
+        </S.Wrapper2>
+      </S.Section11>
+    </S.Section11Main>
+  );
+};
+
+export default HomeSection11;