merge develop

package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@types/react-slick": "^0.23.13",
     "axios": "^1.6.5",
+    "@types/react-slick": "^0.23.13",
     "emotion-reset": "^3.0.1",
     "quill-divider": "^0.2.0",
     "react": "^18.2.0",

src/assets/svgs/index.tsx

@@ -1,5 +1,11 @@
 export { default as EditorTextColorIcnBlackSvg } from './editorTextcolorIcnBlack.svg?react';
 export { default as EditorHorizonIcnUnactiveSvg } from './editorHorizonIcnUnactive.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 GroupTabBtnBaseBeforeIc } from './groupTabBtnBaseBefore.svg?react';
 export { default as GroupTabBtnBaseNextIc } from './groupTabBtnBaseNext.svg?react';
 
@@ -15,6 +21,5 @@ export { default as GroupCuriousProfileOpenIc } from './groupBestProfileIcnOpen.
 export { default as GroupListProfileOpenIc } from './groupListProfileIcnOpen.svg?react';
 
 export { default as HeaderLogoIc } from './headerLogoSvg.svg?react';
-
 export { default as MakeGroupPlusBtn } from './mainMakeGroupBtnEnable.svg?react';
 export { default as MakeGroupPlusHoverBtn } from './mainMakeGroupBtnHover.svg?react';

src/components/commons/Footer.tsx

@@ -2,7 +2,9 @@ import styled from '@emotion/styled';
 
 import Spacing from './Spacing';
 import { FooterInstaIc, FooterKakaoIc, FooterLogoIc, FooterMailIc } from '../../assets/svgs';
+
 import theme from '../../styles/theme';
+import Spacing from '../commons/Spacing';
 
 const Footer = () => {
   return (

src/pages/main/components/Carousel.tsx

@@ -3,7 +3,12 @@ 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 = {
@@ -14,34 +19,49 @@ const Carousel = () => {
     slidesToShow: 1,
     slidesToScroll: 1,
   };
+
   return (
-    <CarouselLayout>
-      <CarouselContainer {...settings}>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-        <CarouselBox>
-          <GroupContent />
-        </CarouselBox>
-      </CarouselContainer>
-    </CarouselLayout>
+    <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>
+      </CarouselWithButtonLayout>
+    </CarouselContentWithSummaryWrapper>
+
   );
 };
 
 export default Carousel;
 
-const CarouselLayout = styled.div`
+const CarouselContentWithSummaryWrapper = styled.div``;
+
+const CarouselWithButtonLayout = styled.section`
+  margin-left: 21.8rem;
+  width: 100%;
+  margin-right: 21.8rem;
+`;
+
+const CarouselContainer = styled.div`
   display: flex;
-  justify-content: center;
 `;
 
-const CarouselContainer = styled(Slider)`
+const CarouselBox = styled(Slider)`
   width: 93rem;
   height: 24rem;
 
@@ -50,5 +70,3 @@ const CarouselContainer = styled(Slider)`
     height: 24rem;
   }
 `;
-
-const CarouselBox = styled.li``;

src/pages/main/components/Curious.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+import { MainGroupRoutingBtn as MainGroupRoutingBtnIcon } from '../../../assets/svgs';
+import Spacing from '../../../components/commons/Spacing';
+
+const Curious = () => {
+  const handleOnClick = () => {
+    alert('Button Clicked!');
+  };
+
+  return (
+    <CuriousContentContainer>
+      <CuriousGroupText>
+        이 모임에 대해서
+        <br /> 더 궁금하신가요?
+      </CuriousGroupText>
+      <Spacing marginBottom="1.6" />
+      <GroupRoutingBtnBox>
+        <MainGroupRoutingBtnIcon onClick={handleOnClick} />
+      </GroupRoutingBtnBox>
+    </CuriousContentContainer>
+  );
+};
+
+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`
+  &:hover {
+    path {
+      fill: ${({ theme }) => theme.colors.mileViolet};
+    }
+  }
+`;

src/pages/main/components/GroupContent.tsx

@@ -1,31 +1,38 @@
 import styled from '@emotion/styled';
 
-import Spacing from '../../../components/commons/Spacing';
+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 = () => {
+    return image !== null;
+  };
 
-const GroupContent = () => {
   return (
-    <ContentBox>
-      <Topic>글쓰기 주제가 입력될 공간</Topic>
-      <MainText>작성된 글의 제목이 들어갈 공간입니다.</MainText>
-      <Spacing marginBottom="3.2" />
-      <SubText>
-        텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가
-        들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈
-        공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 공간입니다. 텍스트가 들어갈 ...
-      </SubText>
-    </ContentBox>
+    <ContentLayout>
+      <TextContainer>
+        <Topic>{topic}</Topic>
+        <MainText>{maintext}</MainText>
+        <Spacing marginBottom="3.2" />
+        <SubText isImage={hasImage()} isLast={isLast}>
+          {subtext}
+        </SubText>
+      </TextContainer>
+      {image && <Image src={image} isLast={isLast} alt="group-content-image" />}
+      {isLast && <Curious />}
+    </ContentLayout>
+
   );
 };
 
 export default GroupContent;
 
-const ContentBox = styled.div`
+const ContentLayout = styled.div`
   display: flex;
-  flex-direction: column;
   padding: 3.6rem;
+  gap: 3.6rem;
+
 `;
 
 const Topic = styled.div`
@@ -37,7 +44,29 @@ const MainText = styled.div`
   ${({ theme }) => theme.fonts.title10};
 `;
 
-const SubText = styled.div`
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+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;
+
   color: ${({ theme }) => theme.colors.gray80};
   ${({ theme }) => theme.fonts.body3};
 `;
+
+const Image = styled.img<{ isLast: boolean }>`
+  width: ${({ isLast }) => (isLast ? '16.8rem' : '22.4rem')};
+  height: 16.8rem;
+`;
+

src/pages/main/components/GroupNameButton.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import { MainIcnArrowPurple as MainIcnArrowPurpleIcon } from '../../../assets/svgs';
+
+const GroupNameBtn = () => {
+  return (
+    <GroupNameButtonBox>
+      글 모임 이름
+      <MainIcnArrowPurpleIcon />
+    </GroupNameButtonBox>
+  );
+};
+
+export default GroupNameBtn;
+
+const GroupNameButtonBox = styled.button`
+  display: flex;
+  gap: 0.8rem;
+  padding: 0.6rem 1rem;
+  align-items: center;
+  border-radius: 0.8rem;
+  justify-content: flex-start;
+
+  border: 1px solid ${({ theme }) => theme.colors.mainViolet};
+  color: ${({ theme }) => theme.colors.mainViolet};
+  ${({ theme }) => theme.fonts.subtitle2};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.mileViolet};
+  }
+`;

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};
+`;