From 518dd1c51ad21c3509a6af51eeec77b548e88a5a Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Wed, 10 Jan 2024 04:42:57 +0900
Subject: [PATCH 01/23] =?UTF-8?q?chore:=20import=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/commons/Footer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/commons/Footer.tsx b/src/components/commons/Footer.tsx
index 17229bfe..661493d6 100644
--- a/src/components/commons/Footer.tsx
+++ b/src/components/commons/Footer.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import Spacing from './Spacing';
-import { FooterLogoSvg, FooterInstaSvg, FooterKakaoSvg, FooterMailSvg } from '../../assets/svgs';
+import { FooterInstaSvg, FooterKakaoSvg, FooterLogoSvg, FooterMailSvg } from '../../assets/svgs';
 import theme from '../../styles/theme';
+import Spacing from '../commons/Spacing';
 
 const Footer = () => {
   return (

From d52614ddcef8938c06677903bb2007cf282b7451 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Wed, 10 Jan 2024 04:43:11 +0900
Subject: [PATCH 02/23] =?UTF-8?q?feat:=20=EB=8D=94=EB=AF=B8=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/constants/constants.ts | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/pages/main/constants/constants.ts

diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
new file mode 100644
index 00000000..35c7597e
--- /dev/null
+++ b/src/pages/main/constants/constants.ts
@@ -0,0 +1,39 @@
+import mainImgHotwriteLong from '../../../assets/images/mainImgHotwriteLong.png';
+
+interface groupContentypes {
+  topic: string;
+  maintext: string;
+  subtext: string;
+  image?: string;
+}
+
+const GROUP_CONTENT: groupContentypes[] = [
+  {
+    topic: '글쓰기 주제가 입력될 공간',
+    maintext: '작성된 글의 제목이 들어갈 공간입니다.',
+    subtext:
+      '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+    image: mainImgHotwriteLong,
+  },
+  {
+    topic: '글쓰기 주제가 입력될 공간',
+    maintext: '작성된 글의 제목이 들어갈 공간입니다.',
+    subtext:
+      '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+  },
+  {
+    topic: '글쓰기 주제가 입력될 공간',
+    maintext: '작성된 글의 제목이 들어갈 공간입니다.',
+    subtext:
+      '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+    image: mainImgHotwriteLong,
+  },
+  {
+    topic: '글쓰기 주제가 입력될 공간',
+    maintext: '작성된 글의 제목이 들어갈 공간입니다.',
+    subtext:
+      '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+  },
+];
+
+export default GROUP_CONTENT;

From 34668e26e81fc14ec77319fca74f1c552246a83d Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 00:02:42 +0900
Subject: [PATCH 03/23] =?UTF-8?q?feat:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20GroupContent=EC=97=90=EC=84=9C=20=EB=B6=88?=
 =?UTF-8?q?=EB=9F=AC=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Carousel.tsx | 28 ++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 83f25ec5..7974b3ce 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -3,11 +3,12 @@ import Slider from 'react-slick';
 
 import '../style/slick-theme.css';
 import '../style/slick.css';
+import GROUP_CONTENT, { groupContentypes } from './../constants/constants';
 import GroupContent from './GroupContent';
 
 const Carousel = () => {
   const settings = {
-    arrow: false,
+    arrows: true,
     dots: false,
     infinite: false,
     speed: 500,
@@ -17,18 +18,16 @@ const Carousel = () => {
   return (
     <CarouselLayout>
       <CarouselContainer {...settings}>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
+        {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
+          <GroupContent
+            key={id}
+            id={id}
+            topic={topic}
+            maintext={maintext}
+            subtext={subtext}
+            image={image}
+          />
+        ))}
       </CarouselContainer>
     </CarouselLayout>
   );
@@ -44,11 +43,10 @@ const CarouselLayout = styled.div`
 const CarouselContainer = styled(Slider)`
   width: 93rem;
   height: 24rem;
+  border: 1px solid ${({ theme }) => theme.colors.black};
 
   .slick-slide.slick-active:last-of-type {
     width: 75.4rem !important;
     height: 24rem;
   }
 `;
-
-const CarouselBox = styled.li``;

From 7fb799d8cb9a52a8d558bdf6e328d4eb7179933d Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 00:10:47 +0900
Subject: [PATCH 04/23] =?UTF-8?q?feat:=20=EA=B0=9D=EC=B2=B4=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EA=B0=92=20=EA=B0=80=EC=A0=B8=EC=99=80=EC=84=9C=20?=
 =?UTF-8?q?=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 50 +++++++++++++++-------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index acdc6ece..eba285bf 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -1,28 +1,35 @@
 import styled from '@emotion/styled';
 
 import Spacing from '../../../components/commons/Spacing';
+import { groupContentypes } from '../constants/constants';
+
+const GroupContent = ({ topic, maintext, subtext, image }: groupContentypes) => {
+  const hasImage = () => {
+    return image !== null;
+  };
 
-const GroupContent = () => {
   return (
-    <ContentBox>
-      <Topic>글쓰기 주제가 입력될 공간</Topic>
-      <MainText>작성된 글의 제목이 들어갈 공간입니다.</MainText>
+    <ContentContainer>
+      <Topic>{topic}</Topic>
+      <MainText>{maintext}</MainText>
       <Spacing marginBottom="3.2" />
-      <SubText>
-        텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가
-        들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...
-      </SubText>
-    </ContentBox>
+      <TextImageBox>
+        <SubText isImage={hasImage()}>{subtext}</SubText>
+        {image !== null ? (
+          <Image src={image} alt="group-content-image" />
+        ) : (
+          image !== null && (
+            <Image src={image} alt="group-content-image" style={{ display: 'none' }} />
+          )
+        )}
+      </TextImageBox>
+    </ContentContainer>
   );
 };
 
 export default GroupContent;
 
-const ContentBox = styled.div`
+const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: 3.6rem;
@@ -37,7 +44,20 @@ const MainText = styled.div`
   ${({ theme }) => theme.fonts.title10};
 `;
 
-const SubText = styled.div`
+const TextImageBox = styled.div``;
+
+const SubText = styled.div<{ isImage: boolean }>`
+  width: ${({ isImage }) => (isImage ? '59.8rem' : '85.8rem')};
+  height: 8.4rem;
+
   color: ${({ theme }) => theme.colors.gray80};
   ${({ theme }) => theme.fonts.body3};
 `;
+
+const Image = styled.img`
+  width: 22.4rem;
+  height: 16.8rem;
+  position: absolute;
+  top: 5rem;
+  left: 66rem;
+`;

From d1b46750f852b6bf57960356713a45a83bcbf9f7 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 00:11:54 +0900
Subject: [PATCH 05/23] =?UTF-8?q?chore:=20=EB=84=98=EC=B9=98=EB=8A=94=20su?=
 =?UTF-8?q?btext=20=EB=82=B4=EC=9A=A9=20=EC=9E=90=EB=A5=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index eba285bf..a5279d32 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -49,6 +49,7 @@ const TextImageBox = styled.div``;
 const SubText = styled.div<{ isImage: boolean }>`
   width: ${({ isImage }) => (isImage ? '59.8rem' : '85.8rem')};
   height: 8.4rem;
+  overflow: hidden;
 
   color: ${({ theme }) => theme.colors.gray80};
   ${({ theme }) => theme.fonts.body3};

From d05e42941ab6741bf502a5f89845d19fd1a3ae3a Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 00:13:10 +0900
Subject: [PATCH 06/23] =?UTF-8?q?chore:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index a5279d32..7259c331 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -60,5 +60,5 @@ const Image = styled.img`
   height: 16.8rem;
   position: absolute;
   top: 5rem;
-  left: 66rem;
+  left: 66.5rem;
 `;

From 6a916b9333fef687e3dc88e9fae0b48f9cc68612 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 00:27:13 +0900
Subject: [PATCH 07/23] =?UTF-8?q?feat:=20=EC=9E=91=EC=9D=80=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/mainImgHotwriteShort.png | Bin 0 -> 833 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/assets/images/mainImgHotwriteShort.png

diff --git a/src/assets/images/mainImgHotwriteShort.png b/src/assets/images/mainImgHotwriteShort.png
new file mode 100644
index 0000000000000000000000000000000000000000..a080add1ef939df13b2e920b35105262b6b1f759
GIT binary patch
literal 833
zcmeAS@N?(olHy`uVBq!ia0vp^D?pfo4M>)FFWmy9I14-?iy0WWg+Z8+Vb&Z8pde#$
zkh>GZx^prwfgF}}M_)$<hK>E)e-c?47?`ekx;TbZFuuKe+c(-##NndhA_gx7Q3uWd
z#wnBdoUA;o7BXuz0vQXK(~nsQ3GEL*wQbWhlSBRTuQTo^A7n2#x7$7QdELC-m3r<+
z>h{YoPuPCDH&|fy^V1(|=6|mK`{UU0%(ye3bLXvB_E>P6>-^{A75rawZGT#y6@7l$
z=DM=ig4<o^i*qmE7JYg1W9wGS&4r)tN9wLq<Cp$YG%sHH9NXP%oo7Cm<z8rK^!=`V
zVKt*~`Rm^=RLb_Q|B*ZQl+Agz7S1Uqjg!;@F0pvca_|(^$YfIWU9f~=!7auAqpG8y
z?bMZ~iSbySyrp#a#>qQOXIbyaeI4>Fvzhw7!fGv0u<RXQ-fg4vxi_g0a#-!yBKqPz
zqp!a9h2ubS_usmDV|kli3-iDmpx8Zq^Us3wpAVjA)Lnh@`r%ZQ^}o75?sHx5K81JJ
z+8;LY&vwpz{`N!kpFbP&kBjF7{o8u=f#SKZPcEmLm>+oh=cB>B?Juu(Y;fEzI{W!A
i?@NzA+SJ!P<~L|eIrXz^(sy8rXYh3Ob6Mw<&;$U)_fsSQ

literal 0
HcmV?d00001


From bec32326efb60783d348b17e5d3390ab7d88e1aa Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 01:03:59 +0900
Subject: [PATCH 08/23] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20null?=
 =?UTF-8?q?=EC=9D=B4=EB=A9=B4=20=EB=B9=88=20=ED=83=9C=EA=B7=B8=20=EB=B0=98?=
 =?UTF-8?q?=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index 7259c331..607ec8a6 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -9,27 +9,21 @@ const GroupContent = ({ topic, maintext, subtext, image }: groupContentypes) =>
   };
 
   return (
-    <ContentContainer>
+    <TextContainer>
       <Topic>{topic}</Topic>
       <MainText>{maintext}</MainText>
       <Spacing marginBottom="3.2" />
-      <TextImageBox>
+      <ImageWithTextBox>
         <SubText isImage={hasImage()}>{subtext}</SubText>
-        {image !== null ? (
-          <Image src={image} alt="group-content-image" />
-        ) : (
-          image !== null && (
-            <Image src={image} alt="group-content-image" style={{ display: 'none' }} />
-          )
-        )}
-      </TextImageBox>
-    </ContentContainer>
+        {image !== null ? <Image src={image} alt="group-content-image" /> : <></>}
+      </ImageWithTextBox>
+    </TextContainer>
   );
 };
 
 export default GroupContent;
 
-const ContentContainer = styled.div`
+const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: 3.6rem;
@@ -44,7 +38,7 @@ const MainText = styled.div`
   ${({ theme }) => theme.fonts.title10};
 `;
 
-const TextImageBox = styled.div``;
+const ImageWithTextBox = styled.div``;
 
 const SubText = styled.div<{ isImage: boolean }>`
   width: ${({ isImage }) => (isImage ? '59.8rem' : '85.8rem')};

From eb8bdba5b2762976e5081dddcadd99a817c9a66a Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 01:04:39 +0900
Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EB=A7=88=EC=A7=80=EB=A7=89=20?=
 =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=EC=9D=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Carousel.tsx |  4 +++-
 src/pages/main/constants/constants.ts  | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 7974b3ce..402315e5 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -15,6 +15,7 @@ const Carousel = () => {
     slidesToShow: 1,
     slidesToScroll: 1,
   };
+
   return (
     <CarouselLayout>
       <CarouselContainer {...settings}>
@@ -26,6 +27,7 @@ const Carousel = () => {
             maintext={maintext}
             subtext={subtext}
             image={image}
+            isLast={id === GROUP_CONTENT.length}
           />
         ))}
       </CarouselContainer>
@@ -44,9 +46,9 @@ const CarouselContainer = styled(Slider)`
   width: 93rem;
   height: 24rem;
   border: 1px solid ${({ theme }) => theme.colors.black};
-
   .slick-slide.slick-active:last-of-type {
     width: 75.4rem !important;
     height: 24rem;
+    border: 1px solid ${({ theme }) => theme.colors.black};
   }
 `;
diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
index 35c7597e..09410f1c 100644
--- a/src/pages/main/constants/constants.ts
+++ b/src/pages/main/constants/constants.ts
@@ -1,38 +1,50 @@
 import mainImgHotwriteLong from '../../../assets/images/mainImgHotwriteLong.png';
 
-interface groupContentypes {
+export interface groupContentypes {
+  id: number;
   topic: string;
   maintext: string;
   subtext: string;
-  image?: string;
+  image: string | null;
+  isLast: boolean;
 }
 
 const GROUP_CONTENT: groupContentypes[] = [
   {
+    id: 1,
     topic: '글쓰기 주제가 입력될 공간',
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
     image: mainImgHotwriteLong,
+    isLast: false,
   },
   {
+    id: 2,
     topic: '글쓰기 주제가 입력될 공간',
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+    image: null,
+    isLast: false,
   },
   {
+    id: 3,
     topic: '글쓰기 주제가 입력될 공간',
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
-    image: mainImgHotwriteLong,
+    image: null,
+    isLast: false,
   },
   {
+    id: 4,
     topic: '글쓰기 주제가 입력될 공간',
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
+    image: mainImgHotwriteLong,
+    isLast: true,
   },
 ];
 

From b335f8bc9061f168af42a34d105992b1b9685276 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 03:39:41 +0900
Subject: [PATCH 10/23] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/mainGroupRoutingBtn.svg      | 11 +++++++++++
 src/assets/svgs/mainGroupRoutingBtnHover.svg | 11 +++++++++++
 src/pages/main/components/Curious.tsx        | 14 ++++++++++++++
 src/pages/main/components/GroupContent.tsx   | 16 ++++++++++------
 4 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/svgs/mainGroupRoutingBtn.svg
 create mode 100644 src/assets/svgs/mainGroupRoutingBtnHover.svg
 create mode 100644 src/pages/main/components/Curious.tsx

diff --git a/src/assets/svgs/mainGroupRoutingBtn.svg b/src/assets/svgs/mainGroupRoutingBtn.svg
new file mode 100644
index 00000000..4f519db7
--- /dev/null
+++ b/src/assets/svgs/mainGroupRoutingBtn.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_786_1371)">
+<path d="M18 35.5C27.665 35.5 35.5 27.665 35.5 18C35.5 8.33502 27.665 0.5 18 0.5C8.33502 0.5 0.5 8.33502 0.5 18C0.5 27.665 8.33502 35.5 18 35.5Z" fill="white" stroke="#6139D1"/>
+<path d="M18 23.25L23.25 18M23.25 18L18 12.75M23.25 18H12.75" stroke="#6139D1" stroke-width="1.3125" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_786_1371">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/mainGroupRoutingBtnHover.svg b/src/assets/svgs/mainGroupRoutingBtnHover.svg
new file mode 100644
index 00000000..632e2292
--- /dev/null
+++ b/src/assets/svgs/mainGroupRoutingBtnHover.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_786_1368)">
+<path d="M18 35.625C27.734 35.625 35.625 27.734 35.625 18C35.625 8.26598 27.734 0.375 18 0.375C8.26598 0.375 0.375 8.26598 0.375 18C0.375 27.734 8.26598 35.625 18 35.625Z" fill="#E9E3F8" stroke="#6139D1" stroke-width="0.75"/>
+<path d="M18 23.25L23.25 18M23.25 18L18 12.75M23.25 18H12.75" stroke="#6139D1" stroke-width="1.3125" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_786_1368">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/main/components/Curious.tsx b/src/pages/main/components/Curious.tsx
new file mode 100644
index 00000000..3709aa00
--- /dev/null
+++ b/src/pages/main/components/Curious.tsx
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled/macro';
+
+const Curious = () => {
+  return (
+    <CuriousGroupText>
+      이 모임에 대해서
+      <br /> 더 궁금하신가요?
+    </CuriousGroupText>
+  );
+};
+
+export default Curious;
+
+const CuriousGroupText = styled.div``;
diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index 607ec8a6..e0e1a4b6 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import Spacing from '../../../components/commons/Spacing';
 import { groupContentypes } from '../constants/constants';
 
-const GroupContent = ({ topic, maintext, subtext, image }: groupContentypes) => {
+const GroupContent = ({ topic, maintext, subtext, image, isLast }: groupContentypes) => {
   const hasImage = () => {
     return image !== null;
   };
@@ -15,7 +15,8 @@ const GroupContent = ({ topic, maintext, subtext, image }: groupContentypes) =>
       <Spacing marginBottom="3.2" />
       <ImageWithTextBox>
         <SubText isImage={hasImage()}>{subtext}</SubText>
-        {image !== null ? <Image src={image} alt="group-content-image" /> : <></>}
+        {image !== null ? <Image src={image} isLast={isLast} alt="group-content-image" /> : <></>}
+        {isLast === true ? <Curious /> : <></>}
       </ImageWithTextBox>
     </TextContainer>
   );
@@ -49,10 +50,13 @@ const SubText = styled.div<{ isImage: boolean }>`
   ${({ theme }) => theme.fonts.body3};
 `;
 
-const Image = styled.img`
-  width: 22.4rem;
+const Image = styled.img<{ isLast: boolean }>`
+  width: ${({ isLast }) => (isLast ? '16.8rem' : '22.4rem')};
   height: 16.8rem;
   position: absolute;
-  top: 5rem;
-  left: 66.5rem;
+  top: ${({ isLast }) => (isLast ? '5rem' : '5rem')};
+  left: ${({ isLast }) => (isLast ? '50rem' : '66.5rem')};
+  z-index: 1;
 `;
+
+const Curious = styled.div``;

From cc1e4bed29d9888f655b67eec5f550f63c5d3b55 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 07:24:32 +0900
Subject: [PATCH 11/23] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 33 ++++++++++++----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index e0e1a4b6..16ea12a6 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -9,25 +9,25 @@ const GroupContent = ({ topic, maintext, subtext, image, isLast }: groupContenty
   };
 
   return (
-    <TextContainer>
-      <Topic>{topic}</Topic>
-      <MainText>{maintext}</MainText>
-      <Spacing marginBottom="3.2" />
-      <ImageWithTextBox>
+    <ContentLayout>
+      <TextContainer>
+        <Topic>{topic}</Topic>
+        <MainText>{maintext}</MainText>
+        <Spacing marginBottom="3.2" />
         <SubText isImage={hasImage()}>{subtext}</SubText>
-        {image !== null ? <Image src={image} isLast={isLast} alt="group-content-image" /> : <></>}
-        {isLast === true ? <Curious /> : <></>}
-      </ImageWithTextBox>
-    </TextContainer>
+      </TextContainer>
+      {image !== null ? <Image src={image} isLast={isLast} alt="group-content-image" /> : <></>}
+      {isLast === true ? <Curious /> : <></>}
+    </ContentLayout>
   );
 };
 
 export default GroupContent;
 
-const TextContainer = styled.div`
+const ContentLayout = styled.div`
   display: flex;
-  flex-direction: column;
   padding: 3.6rem;
+  gap: 3.6rem;
 `;
 
 const Topic = styled.div`
@@ -39,7 +39,10 @@ const MainText = styled.div`
   ${({ theme }) => theme.fonts.title10};
 `;
 
-const ImageWithTextBox = styled.div``;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const SubText = styled.div<{ isImage: boolean }>`
   width: ${({ isImage }) => (isImage ? '59.8rem' : '85.8rem')};
@@ -53,9 +56,9 @@ const SubText = styled.div<{ isImage: boolean }>`
 const Image = styled.img<{ isLast: boolean }>`
   width: ${({ isLast }) => (isLast ? '16.8rem' : '22.4rem')};
   height: 16.8rem;
-  position: absolute;
-  top: ${({ isLast }) => (isLast ? '5rem' : '5rem')};
-  left: ${({ isLast }) => (isLast ? '50rem' : '66.5rem')};
+  /* position: absolute; */
+  /* top: ${({ isLast }) => (isLast ? '5rem' : '5rem')};
+  left: ${({ isLast }) => (isLast ? '50rem' : '66.5rem')}; */
   z-index: 1;
 `;
 

From 88f50bf3aa39e058e12f8a7f0eb785820e6ad39b Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 07:58:15 +0900
Subject: [PATCH 12/23] =?UTF-8?q?feat:=20=EB=8D=94=20=EA=B6=81=EA=B8=88?=
 =?UTF-8?q?=ED=95=9C=20=EB=AA=A8=EC=9E=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Curious.tsx | 36 ++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/pages/main/components/Curious.tsx b/src/pages/main/components/Curious.tsx
index 3709aa00..44ce3e26 100644
--- a/src/pages/main/components/Curious.tsx
+++ b/src/pages/main/components/Curious.tsx
@@ -1,14 +1,38 @@
-import styled from '@emotion/styled/macro';
+import styled from '@emotion/styled';
+
+import { MainGroupRoutingBtn } from '../../../assets/svgs';
+import Spacing from '../../../components/commons/Spacing';
 
 const Curious = () => {
   return (
-    <CuriousGroupText>
-      이 모임에 대해서
-      <br /> 더 궁금하신가요?
-    </CuriousGroupText>
+    <CuriousContentContainer>
+      <CuriousGroupText>
+        이 모임에 대해서
+        <br /> 더 궁금하신가요?
+      </CuriousGroupText>
+      <Spacing marginBottom="1.6" />
+      <GroupRoutingBtnBox>
+        <MainGroupRoutingBtn />
+      </GroupRoutingBtnBox>
+    </CuriousContentContainer>
   );
 };
 
 export default Curious;
 
-const CuriousGroupText = styled.div``;
+const CuriousContentContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+`;
+
+const CuriousGroupText = styled.p`
+  color: ${({ theme }) => theme.colors.mainViolet};
+  ${({ theme }) => theme.fonts.title8};
+`;
+
+const GroupRoutingBtnBox = styled.div`
+  & > MainGroupRoutingBtn:hover {
+    fill: ${({ theme }) => theme.colors.mileGreen};
+  }
+`;

From c05428f69a1dbe2b07d81c7b82b9237deac38415 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:28:30 +0900
Subject: [PATCH 13/23] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Curious.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/main/components/Curious.tsx b/src/pages/main/components/Curious.tsx
index 44ce3e26..4fb5c728 100644
--- a/src/pages/main/components/Curious.tsx
+++ b/src/pages/main/components/Curious.tsx
@@ -1,9 +1,13 @@
 import styled from '@emotion/styled';
 
-import { MainGroupRoutingBtn } from '../../../assets/svgs';
+import { MainGroupRoutingBtn as MainGroupRoutingBtnIcon } from '../../../assets/svgs';
 import Spacing from '../../../components/commons/Spacing';
 
 const Curious = () => {
+  const handleOnClick = () => {
+    alert('Button Clicked!');
+  };
+
   return (
     <CuriousContentContainer>
       <CuriousGroupText>
@@ -12,7 +16,7 @@ const Curious = () => {
       </CuriousGroupText>
       <Spacing marginBottom="1.6" />
       <GroupRoutingBtnBox>
-        <MainGroupRoutingBtn />
+        <MainGroupRoutingBtnIcon onClick={handleOnClick} />
       </GroupRoutingBtnBox>
     </CuriousContentContainer>
   );
@@ -22,17 +26,22 @@ export default Curious;
 
 const CuriousContentContainer = styled.section`
   display: flex;
+  padding-left: 4.2rem;
   flex-direction: column;
   text-align: center;
+  justify-content: center;
 `;
 
 const CuriousGroupText = styled.p`
+  width: 12.3rem;
   color: ${({ theme }) => theme.colors.mainViolet};
   ${({ theme }) => theme.fonts.title8};
 `;
 
 const GroupRoutingBtnBox = styled.div`
-  & > MainGroupRoutingBtn:hover {
-    fill: ${({ theme }) => theme.colors.mileGreen};
+  &:hover {
+    path {
+      fill: ${({ theme }) => theme.colors.mileViolet};
+    }
   }
 `;

From 3e7ffe4ca758e611a5f542f9d7ee9c25c01be43b Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:28:54 +0900
Subject: [PATCH 14/23] =?UTF-8?q?feat:=20svg=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index 98da2d16..4fad100a 100644
--- a/src/assets/svgs/index.tsx
+++ b/src/assets/svgs/index.tsx
@@ -1,8 +1,10 @@
 export { default as Rect } from './Rectangle 17.svg?react';
-export { default as HeaderLogoSvg } from './headerLogoSvg.svg?react';
 export { default as FooterInstaSvg } from './footerInstaSvg.svg?react';
 export { default as FooterKakaoSvg } from './footerKakaoSvg.svg?react';
-export { default as FooterMailSvg } from './footerMailSvg.svg?react';
 export { default as FooterLogoSvg } from './footerLogoSvg.svg?react';
+export { default as FooterMailSvg } from './footerMailSvg.svg?react';
+export { default as HeaderLogoSvg } from './headerLogoSvg.svg?react';
+export { default as MainGroupRoutingBtn } from './mainGroupRoutingBtn.svg?react';
+export { default as MainGroupRoutingBtnHover } from './mainGroupRoutingBtnHover.svg?react';
 export { default as MakeGroupPlusBtn } from './mainMakeGroupBtnEnable.svg?react';
 export { default as MakeGroupPlusHoverBtn } from './mainMakeGroupBtnHover.svg?react';

From 7e796accf6402993e1778e424f3d251a523a8c2d Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:30:56 +0900
Subject: [PATCH 15/23] =?UTF-8?q?test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Carousel.tsx | 2 --
 src/pages/main/constants/constants.ts  | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 402315e5..18f49aaf 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -45,10 +45,8 @@ const CarouselLayout = styled.div`
 const CarouselContainer = styled(Slider)`
   width: 93rem;
   height: 24rem;
-  border: 1px solid ${({ theme }) => theme.colors.black};
   .slick-slide.slick-active:last-of-type {
     width: 75.4rem !important;
     height: 24rem;
-    border: 1px solid ${({ theme }) => theme.colors.black};
   }
 `;
diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
index 09410f1c..a960d72b 100644
--- a/src/pages/main/constants/constants.ts
+++ b/src/pages/main/constants/constants.ts
@@ -43,8 +43,8 @@ const GROUP_CONTENT: groupContentypes[] = [
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
-    image: mainImgHotwriteLong,
-    isLast: true,
+    image: null,
+    isLast: false,
   },
 ];
 

From 779567415b2f21fd22e96a237f04c07652231d66 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:31:26 +0900
Subject: [PATCH 16/23] =?UTF-8?q?refactor:=20=EC=82=BC=ED=95=AD=EC=97=B0?=
 =?UTF-8?q?=EC=82=B0=EC=9E=90=20&&=EC=97=B0=EC=82=B0=EC=9E=90=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/GroupContent.tsx | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/pages/main/components/GroupContent.tsx b/src/pages/main/components/GroupContent.tsx
index 16ea12a6..a82e3fdb 100644
--- a/src/pages/main/components/GroupContent.tsx
+++ b/src/pages/main/components/GroupContent.tsx
@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 
-import Spacing from '../../../components/commons/Spacing';
-import { groupContentypes } from '../constants/constants';
+import Spacing from './.././../../components/commons/Spacing';
+import { groupContentypes } from './../constants/constants';
+import Curious from './Curious';
 
 const GroupContent = ({ topic, maintext, subtext, image, isLast }: groupContentypes) => {
   const hasImage = () => {
@@ -14,10 +15,12 @@ const GroupContent = ({ topic, maintext, subtext, image, isLast }: groupContenty
         <Topic>{topic}</Topic>
         <MainText>{maintext}</MainText>
         <Spacing marginBottom="3.2" />
-        <SubText isImage={hasImage()}>{subtext}</SubText>
+        <SubText isImage={hasImage()} isLast={isLast}>
+          {subtext}
+        </SubText>
       </TextContainer>
-      {image !== null ? <Image src={image} isLast={isLast} alt="group-content-image" /> : <></>}
-      {isLast === true ? <Curious /> : <></>}
+      {image && <Image src={image} isLast={isLast} alt="group-content-image" />}
+      {isLast && <Curious />}
     </ContentLayout>
   );
 };
@@ -44,8 +47,15 @@ const TextContainer = styled.div`
   flex-direction: column;
 `;
 
-const SubText = styled.div<{ isImage: boolean }>`
-  width: ${({ isImage }) => (isImage ? '59.8rem' : '85.8rem')};
+const SubText = styled.div<{ isImage: boolean; isLast: boolean }>`
+  width: ${({ isImage, isLast }) =>
+    isImage && isLast
+      ? '47.8rem'
+      : isImage && !isLast
+        ? '59.8rem'
+        : !isImage && isLast
+          ? '68.2rem'
+          : '85.8rem'};
   height: 8.4rem;
   overflow: hidden;
 
@@ -56,10 +66,4 @@ const SubText = styled.div<{ isImage: boolean }>`
 const Image = styled.img<{ isLast: boolean }>`
   width: ${({ isLast }) => (isLast ? '16.8rem' : '22.4rem')};
   height: 16.8rem;
-  /* position: absolute; */
-  /* top: ${({ isLast }) => (isLast ? '5rem' : '5rem')};
-  left: ${({ isLast }) => (isLast ? '50rem' : '66.5rem')}; */
-  z-index: 1;
 `;
-
-const Curious = styled.div``;

From 0417ac61da26c44d8637c1879b316e0045aca487 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:35:06 +0900
Subject: [PATCH 17/23] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../svgs/{mainGroupRoutingBtn.svg => mainBtnLetsgogroup.svg}  | 0
 ...inGroupRoutingBtnHover.svg => mainBtnLetsgogroupHover.svg} | 0
 src/pages/main/constants/constants.ts                         | 4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/assets/svgs/{mainGroupRoutingBtn.svg => mainBtnLetsgogroup.svg} (100%)
 rename src/assets/svgs/{mainGroupRoutingBtnHover.svg => mainBtnLetsgogroupHover.svg} (100%)

diff --git a/src/assets/svgs/mainGroupRoutingBtn.svg b/src/assets/svgs/mainBtnLetsgogroup.svg
similarity index 100%
rename from src/assets/svgs/mainGroupRoutingBtn.svg
rename to src/assets/svgs/mainBtnLetsgogroup.svg
diff --git a/src/assets/svgs/mainGroupRoutingBtnHover.svg b/src/assets/svgs/mainBtnLetsgogroupHover.svg
similarity index 100%
rename from src/assets/svgs/mainGroupRoutingBtnHover.svg
rename to src/assets/svgs/mainBtnLetsgogroupHover.svg
diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
index a960d72b..09410f1c 100644
--- a/src/pages/main/constants/constants.ts
+++ b/src/pages/main/constants/constants.ts
@@ -43,8 +43,8 @@ const GROUP_CONTENT: groupContentypes[] = [
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
-    image: null,
-    isLast: false,
+    image: mainImgHotwriteLong,
+    isLast: true,
   },
 ];
 

From 49e2630ce2287fdf3fcc3d8cdc55f9039029ee28 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 08:36:46 +0900
Subject: [PATCH 18/23] =?UTF-8?q?Revert=20"chore:=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 0417ac61da26c44d8637c1879b316e0045aca487.
---
 .../svgs/{mainBtnLetsgogroup.svg => mainGroupRoutingBtn.svg}  | 0
 ...inBtnLetsgogroupHover.svg => mainGroupRoutingBtnHover.svg} | 0
 src/pages/main/constants/constants.ts                         | 4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/assets/svgs/{mainBtnLetsgogroup.svg => mainGroupRoutingBtn.svg} (100%)
 rename src/assets/svgs/{mainBtnLetsgogroupHover.svg => mainGroupRoutingBtnHover.svg} (100%)

diff --git a/src/assets/svgs/mainBtnLetsgogroup.svg b/src/assets/svgs/mainGroupRoutingBtn.svg
similarity index 100%
rename from src/assets/svgs/mainBtnLetsgogroup.svg
rename to src/assets/svgs/mainGroupRoutingBtn.svg
diff --git a/src/assets/svgs/mainBtnLetsgogroupHover.svg b/src/assets/svgs/mainGroupRoutingBtnHover.svg
similarity index 100%
rename from src/assets/svgs/mainBtnLetsgogroupHover.svg
rename to src/assets/svgs/mainGroupRoutingBtnHover.svg
diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
index 09410f1c..a960d72b 100644
--- a/src/pages/main/constants/constants.ts
+++ b/src/pages/main/constants/constants.ts
@@ -43,8 +43,8 @@ const GROUP_CONTENT: groupContentypes[] = [
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
-    image: mainImgHotwriteLong,
-    isLast: true,
+    image: null,
+    isLast: false,
   },
 ];
 

From 12136c65177851a773e670000d495f83a923998e Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 16:30:28 +0900
Subject: [PATCH 19/23] =?UTF-8?q?init:=20=EA=B5=AC=EC=A1=B0=20=EC=84=B8?=
 =?UTF-8?q?=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Carousel.tsx     | 39 +++++++++++++---------
 src/pages/main/components/GroupNameBtn.tsx |  9 +++++
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/main/components/GroupNameBtn.tsx

diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 18f49aaf..9e65e87d 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -5,6 +5,7 @@ import '../style/slick-theme.css';
 import '../style/slick.css';
 import GROUP_CONTENT, { groupContentypes } from './../constants/constants';
 import GroupContent from './GroupContent';
+import GroupNameBtn from './GroupNameBtn';
 
 const Carousel = () => {
   const settings = {
@@ -17,26 +18,34 @@ const Carousel = () => {
   };
 
   return (
-    <CarouselLayout>
-      <CarouselContainer {...settings}>
-        {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
-          <GroupContent
-            key={id}
-            id={id}
-            topic={topic}
-            maintext={maintext}
-            subtext={subtext}
-            image={image}
-            isLast={id === GROUP_CONTENT.length}
-          />
-        ))}
-      </CarouselContainer>
-    </CarouselLayout>
+    <CarouselWithButtonWrapper>
+      <GroupNameBtn />
+      <CarouselLayout>
+        <CarouselContainer {...settings}>
+          {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
+            <GroupContent
+              key={id}
+              id={id}
+              topic={topic}
+              maintext={maintext}
+              subtext={subtext}
+              image={image}
+              isLast={id === GROUP_CONTENT.length}
+            />
+          ))}
+        </CarouselContainer>
+      </CarouselLayout>
+    </CarouselWithButtonWrapper>
   );
 };
 
 export default Carousel;
 
+const CarouselWithButtonWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+`;
+
 const CarouselLayout = styled.div`
   display: flex;
   justify-content: center;
diff --git a/src/pages/main/components/GroupNameBtn.tsx b/src/pages/main/components/GroupNameBtn.tsx
new file mode 100644
index 00000000..d18d6591
--- /dev/null
+++ b/src/pages/main/components/GroupNameBtn.tsx
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const GroupNameBtn = () => {
+  return <GroupNameButton />;
+};
+
+export default GroupNameBtn;
+
+const GroupNameButton = styled.button``;

From ae37bc0d46d5161324559aed10be28f3e5ebdaeb Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 17:30:24 +0900
Subject: [PATCH 20/23] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/mainIcnArrowPurple.svg     | 21 ++++++++++++++++
 src/pages/main/components/GroupNameBtn.tsx | 28 ++++++++++++++++++++--
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/svgs/mainIcnArrowPurple.svg

diff --git a/src/assets/svgs/mainIcnArrowPurple.svg b/src/assets/svgs/mainIcnArrowPurple.svg
new file mode 100644
index 00000000..6834be4c
--- /dev/null
+++ b/src/assets/svgs/mainIcnArrowPurple.svg
@@ -0,0 +1,21 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mainIcnArrowPurple" clip-path="url(#clip0_786_1461)">
+<g id="Clip path group">
+<mask id="mask0_786_1461" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="7" height="12">
+<g id="clip0_786_1459">
+<path id="Vector" d="M7 0H0V12H7V0Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_786_1461)">
+<g id="Group">
+<path id="Vector_2" d="M1 11L6 6L1 1" stroke="#6139D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_786_1461">
+<rect width="7" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/main/components/GroupNameBtn.tsx b/src/pages/main/components/GroupNameBtn.tsx
index d18d6591..509e5ff5 100644
--- a/src/pages/main/components/GroupNameBtn.tsx
+++ b/src/pages/main/components/GroupNameBtn.tsx
@@ -1,9 +1,33 @@
 import styled from '@emotion/styled';
 
+import { MainIcnArrowPurple } from '../../../assets/svgs';
+
 const GroupNameBtn = () => {
-  return <GroupNameButton />;
+  return (
+    <GroupNameButtonBox>
+      글 모임 이름
+      <MainIcnArrowPurple />
+    </GroupNameButtonBox>
+  );
 };
 
 export default GroupNameBtn;
 
-const GroupNameButton = styled.button``;
+const GroupNameButtonBox = styled.button`
+  display: flex;
+  gap: 0.8rem;
+  padding: 0.6rem 1rem;
+  align-items: center;
+  border-radius: 0.8rem;
+  /* margin-left: 21.8rem; */
+
+  border: 1px solid ${({ theme }) => theme.colors.mainViolet};
+  color: ${({ theme }) => theme.colors.mainViolet};
+  ${({ theme }) => theme.fonts.subtitle2};
+
+  &:hover > MainIcnArrowPurple {
+    path {
+      fill: ${({ theme }) => theme.colors.mileViolet};
+    }
+  }
+`;

From b397acf42be2fdade1f454480e89bb8ae0f7df06 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 17:42:25 +0900
Subject: [PATCH 21/23] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/index.tsx              |  1 +
 src/pages/main/components/Carousel.tsx | 10 +++++-----
 src/pages/main/constants/constants.ts  |  4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index 4fad100a..2bf44cee 100644
--- a/src/assets/svgs/index.tsx
+++ b/src/assets/svgs/index.tsx
@@ -6,5 +6,6 @@ export { default as FooterMailSvg } from './footerMailSvg.svg?react';
 export { default as HeaderLogoSvg } from './headerLogoSvg.svg?react';
 export { default as MainGroupRoutingBtn } from './mainGroupRoutingBtn.svg?react';
 export { default as MainGroupRoutingBtnHover } from './mainGroupRoutingBtnHover.svg?react';
+export { default as MainIcnArrowPurple } from './mainIcnArrowPurple.svg?react';
 export { default as MakeGroupPlusBtn } from './mainMakeGroupBtnEnable.svg?react';
 export { default as MakeGroupPlusHoverBtn } from './mainMakeGroupBtnHover.svg?react';
diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 9e65e87d..6319e868 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -5,7 +5,7 @@ import '../style/slick-theme.css';
 import '../style/slick.css';
 import GROUP_CONTENT, { groupContentypes } from './../constants/constants';
 import GroupContent from './GroupContent';
-import GroupNameBtn from './GroupNameBtn';
+import GroupNameButton from './GroupNameButton';
 
 const Carousel = () => {
   const settings = {
@@ -19,7 +19,7 @@ const Carousel = () => {
 
   return (
     <CarouselWithButtonWrapper>
-      <GroupNameBtn />
+      <GroupNameButton />
       <CarouselLayout>
         <CarouselContainer {...settings}>
           {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
@@ -42,13 +42,13 @@ const Carousel = () => {
 export default Carousel;
 
 const CarouselWithButtonWrapper = styled.section`
-  display: flex;
-  flex-direction: column;
+  margin-left: 21.8rem;
+  width: 100%;
+  margin-right: 21.8rem;
 `;
 
 const CarouselLayout = styled.div`
   display: flex;
-  justify-content: center;
 `;
 
 const CarouselContainer = styled(Slider)`
diff --git a/src/pages/main/constants/constants.ts b/src/pages/main/constants/constants.ts
index a960d72b..09410f1c 100644
--- a/src/pages/main/constants/constants.ts
+++ b/src/pages/main/constants/constants.ts
@@ -43,8 +43,8 @@ const GROUP_CONTENT: groupContentypes[] = [
     maintext: '작성된 글의 제목이 들어갈 공간입니다.',
     subtext:
       '텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...',
-    image: null,
-    isLast: false,
+    image: mainImgHotwriteLong,
+    isLast: true,
   },
 ];
 

From 3ab6d63d8e4bd01298155a1095b1692c47e08c33 Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 17:42:53 +0900
Subject: [PATCH 22/23] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=ED=98=B8?=
 =?UTF-8?q?=EB=B2=84=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{GroupNameBtn.tsx => GroupNameButton.tsx}        | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)
 rename src/pages/main/components/{GroupNameBtn.tsx => GroupNameButton.tsx} (69%)

diff --git a/src/pages/main/components/GroupNameBtn.tsx b/src/pages/main/components/GroupNameButton.tsx
similarity index 69%
rename from src/pages/main/components/GroupNameBtn.tsx
rename to src/pages/main/components/GroupNameButton.tsx
index 509e5ff5..2a973cea 100644
--- a/src/pages/main/components/GroupNameBtn.tsx
+++ b/src/pages/main/components/GroupNameButton.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
-import { MainIcnArrowPurple } from '../../../assets/svgs';
+import { MainIcnArrowPurple as MainIcnArrowPurpleIcon } from '../../../assets/svgs';
 
 const GroupNameBtn = () => {
   return (
     <GroupNameButtonBox>
       글 모임 이름
-      <MainIcnArrowPurple />
+      <MainIcnArrowPurpleIcon />
     </GroupNameButtonBox>
   );
 };
@@ -19,15 +19,13 @@ const GroupNameButtonBox = styled.button`
   padding: 0.6rem 1rem;
   align-items: center;
   border-radius: 0.8rem;
-  /* margin-left: 21.8rem; */
+  justify-content: flex-start;
 
   border: 1px solid ${({ theme }) => theme.colors.mainViolet};
   color: ${({ theme }) => theme.colors.mainViolet};
   ${({ theme }) => theme.fonts.subtitle2};
 
-  &:hover > MainIcnArrowPurple {
-    path {
-      fill: ${({ theme }) => theme.colors.mileViolet};
-    }
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.mileViolet};
   }
 `;

From 1551118abceb18494385ede0526cc6a0c886108a Mon Sep 17 00:00:00 2001
From: namdaeun <nde40345@gmail.com>
Date: Thu, 11 Jan 2024 17:53:07 +0900
Subject: [PATCH 23/23] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=ED=8B=80=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/Carousel.tsx | 48 +++++++++++++++-----------
 src/pages/main/components/Summary.tsx  | 13 +++++++
 2 files changed, 41 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/main/components/Summary.tsx

diff --git a/src/pages/main/components/Carousel.tsx b/src/pages/main/components/Carousel.tsx
index 6319e868..47bb993a 100644
--- a/src/pages/main/components/Carousel.tsx
+++ b/src/pages/main/components/Carousel.tsx
@@ -3,9 +3,11 @@ import Slider from 'react-slick';
 
 import '../style/slick-theme.css';
 import '../style/slick.css';
+import Spacing from './../../../components/commons/Spacing';
 import GROUP_CONTENT, { groupContentypes } from './../constants/constants';
 import GroupContent from './GroupContent';
 import GroupNameButton from './GroupNameButton';
+import Summary from './Summary';
 
 const Carousel = () => {
   const settings = {
@@ -18,40 +20,46 @@ const Carousel = () => {
   };
 
   return (
-    <CarouselWithButtonWrapper>
-      <GroupNameButton />
-      <CarouselLayout>
-        <CarouselContainer {...settings}>
-          {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
-            <GroupContent
-              key={id}
-              id={id}
-              topic={topic}
-              maintext={maintext}
-              subtext={subtext}
-              image={image}
-              isLast={id === GROUP_CONTENT.length}
-            />
-          ))}
+    <CarouselContentWithSummaryWrapper>
+      <Summary />
+      <Spacing marginBottom="3.6" />
+      <CarouselWithButtonLayout>
+        <GroupNameButton />
+        <CarouselContainer>
+          <CarouselBox {...settings}>
+            {GROUP_CONTENT.map(({ id, topic, maintext, subtext, image }: groupContentypes) => (
+              <GroupContent
+                key={id}
+                id={id}
+                topic={topic}
+                maintext={maintext}
+                subtext={subtext}
+                image={image}
+                isLast={id === GROUP_CONTENT.length}
+              />
+            ))}
+          </CarouselBox>
         </CarouselContainer>
-      </CarouselLayout>
-    </CarouselWithButtonWrapper>
+      </CarouselWithButtonLayout>
+    </CarouselContentWithSummaryWrapper>
   );
 };
 
 export default Carousel;
 
-const CarouselWithButtonWrapper = styled.section`
+const CarouselContentWithSummaryWrapper = styled.div``;
+
+const CarouselWithButtonLayout = styled.section`
   margin-left: 21.8rem;
   width: 100%;
   margin-right: 21.8rem;
 `;
 
-const CarouselLayout = styled.div`
+const CarouselContainer = styled.div`
   display: flex;
 `;
 
-const CarouselContainer = styled(Slider)`
+const CarouselBox = styled(Slider)`
   width: 93rem;
   height: 24rem;
   .slick-slide.slick-active:last-of-type {
diff --git a/src/pages/main/components/Summary.tsx b/src/pages/main/components/Summary.tsx
new file mode 100644
index 00000000..e16b06f4
--- /dev/null
+++ b/src/pages/main/components/Summary.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const Summary = () => {
+  return <TextBox>베스트 활동 모임 3개와 글 각 4개</TextBox>;
+};
+
+export default Summary;
+
+const TextBox = styled.div`
+  margin-top: 7.2rem;
+  margin-left: 21.8rem;
+  ${({ theme }) => theme.fonts.title3};
+`;