[Feat/#91] 캐러셀 라우팅 및 자잘한 변경

src/pages/main/apis/getGroupContent.ts

@@ -1,9 +1,25 @@
+import { moimPostTypes } from '../components/Carousel';
+
 import { client } from '../../../utils/apis/axios';
 
+interface groupPropTypes {
+  moimId: number;
+  moimName: string;
+  moimPosts: moimPostTypes[];
+}
+
+interface getGroupContentResponseTypes {
+  status: number;
+  message: string;
+  data: {
+    moim: groupPropTypes[];
+  };
+}
+
 export const getGroupContent = async () => {
   try {
-    const { data } = await client.get('/api/moim/best');
-    return { data: data.data };
+    const { data } = await client.get<getGroupContentResponseTypes>('/api/moim/best');
+    return data.data.moim;
   } catch (error) {
     console.error(error);
   }

src/pages/main/components/Carousel.tsx

@@ -11,11 +11,22 @@ import GroupNameButton from './GroupNameButton';
 
 import Spacing from './../../../components/commons/Spacing';
 import { getGroupContent } from './../apis/getGroupContent';
-import { MoimPropTypes } from './../types/moimPost';
 
-const Carousel = () => {
-  const [groupData, setGroupData] = useState<MoimPropTypes[]>([]);
+interface groupPropTypes {
+  moimId: number;
+  moimName: string;
+  moimPosts: groupPostTypes[];
+}
+
+export interface groupPostTypes {
+  topicName: string;
+  imageUrl: string;
+  postTitle: string;
+  postContent: string;
+}
 
+const Carousel = () => {
+  const [groupData, setGroupData] = useState<groupPropTypes[]>();
   const settings = {
     arrow: false,
     dots: false,
@@ -29,7 +40,7 @@ const Carousel = () => {
     const getData = async () => {
       try {
         const response = await getGroupContent();
-        setGroupData(response?.data?.moim);
+        setGroupData(response);
       } catch (error) {
         console.log(error);
       }
@@ -42,26 +53,29 @@ const Carousel = () => {
       <Spacing marginBottom="3.6" />
       {groupData && (
         <section>
-          {groupData.map((moim) => (
-            <CarouselWithButtonLayout key={moim.moimId}>
-              <GroupNameButton buttonName={moim.moimName} />
-              <Spacing marginBottom="1.6" />
-              <CarouselContainer>
-                <CarouselBox {...settings} className="main">
-                  {moim.moimPosts.map((post, index) => (
-                    <GroupContent
-                      key={index}
-                      topicName={post.topicName}
-                      imageUrl={post.imageUrl}
-                      postTitle={post.postTitle}
-                      postContent={post.postContent}
-                      isLast={index === moim.moimPosts.length - 1}
-                    />
-                  ))}
-                </CarouselBox>
-              </CarouselContainer>
-            </CarouselWithButtonLayout>
-          ))}
+          {groupData
+            .sort((previous, current) => previous.moimId - current.moimId)
+            .map((moim) => (
+              <CarouselWithButtonLayout key={moim.moimId}>
+                <GroupNameButton groupName={moim.moimName} groupId={moim.moimId} />
+                <Spacing marginBottom="1.6" />
+                <CarouselContainer>
+                  <CarouselBox {...settings} className="main">
+                    {moim.moimPosts.map((post, index) => (
+                      <GroupContent
+                        key={index}
+                        topicName={post.topicName}
+                        imageUrl={post.imageUrl}
+                        postTitle={post.postTitle}
+                        postContent={post.postContent}
+                        groupId={moim.moimId}
+                        isLast={index === moim.moimPosts.length - 1}
+                      />
+                    ))}
+                  </CarouselBox>
+                </CarouselContainer>
+              </CarouselWithButtonLayout>
+            ))}
         </section>
       )}
     </CarouselWrapper>

src/pages/main/components/CuriousGroup.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+
+import { groupContentPropTypes } from './GroupContent';
 
 import { MainGroupRoutingBtn as MainGroupRoutingBtnIcon } from '../../../assets/svgs';
 import Spacing from '../../../components/commons/Spacing';
 
-const Curious = () => {
+const CuriousGroup = ({ groupId }: groupContentPropTypes) => {
+  const navigate = useNavigate();
   const handleOnClick = () => {
-    alert('Button Clicked!');
+    navigate(`/group/${groupId}`);
   };
 
   return (
@@ -22,7 +26,7 @@ const Curious = () => {
   );
 };
 
-export default Curious;
+export default CuriousGroup;
 
 const CuriousContentContainer = styled.section`
   display: flex;

src/pages/main/components/FaqDropdown.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-
 import styled from '@emotion/styled';
 
+import React, { useState } from 'react';
+
 import { MainToggleArrowOpenedIc, MainTogglearrowClosedIc } from './../../../assets/svgs';
 import { faqDataPropTypes } from './../constants/faqData';
 

src/pages/main/components/GroupContent.tsx

@@ -1,16 +1,26 @@
 import styled from '@emotion/styled';
 
+import CuriousGroup from './CuriousGroup';
+
 import Spacing from './.././../../components/commons/Spacing';
-import { MoimPostPropTypes } from './../constants/constants';
-import Curious from './CuriousGroup';
+
+export interface groupContentPropTypes {
+  topicName: string;
+  imageUrl: string | null;
+  postTitle: string;
+  postContent: string;
+  groupId: number;
+  isLast: boolean;
+}
 
 const GroupContent = ({
   topicName,
   imageUrl,
   postTitle,
   postContent,
+  groupId,
   isLast,
-}: MoimPostPropTypes & { isLast: boolean }) => {
+}: groupContentPropTypes) => {
   const hasImage = () => {
     return imageUrl !== null;
   };
@@ -26,7 +36,16 @@ const GroupContent = ({
         </SubText>
       </TextContainer>
       {imageUrl && <Image src={imageUrl} isLast={isLast} alt="group-content-image" />}
-      {isLast && <Curious />}
+      {isLast && (
+        <CuriousGroup
+          groupId={groupId}
+          topicName={topicName}
+          imageUrl={imageUrl}
+          postTitle={postTitle}
+          postContent={postContent}
+          isLast={isLast}
+        />
+      )}
     </ContentLayout>
   );
 };
@@ -57,7 +76,7 @@ const TextContainer = styled.div`
 `;
 
 const SubText = styled.p<{ isImage: boolean; isLast: boolean }>`
-  flex-shrink: 0;
+  display: -webkit-box;
   width: ${({ isImage, isLast }) =>
     isImage && isLast
       ? '47.8rem'
@@ -71,10 +90,17 @@ const SubText = styled.p<{ isImage: boolean; isLast: boolean }>`
 
   color: ${({ theme }) => theme.colors.gray80};
   text-overflow: ellipsis;
+
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+
   ${({ theme }) => theme.fonts.body3};
 `;
 
 const Image = styled.img<{ isLast: boolean }>`
   width: ${({ isLast }) => (isLast ? '16.8rem' : '22.4rem')};
   height: 16.8rem;
+  object-fit: cover;
+
+  border-radius: 8px;
 `;

src/pages/main/components/GroupNameButton.tsx

@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
 
 import { MainIcnArrowPurple as MainIcnArrowPurpleIcon } from '../../../assets/svgs';
 
 interface ButtonPropTypes {
-  buttonName: string;
+  groupName: string;
+  groupId: number;
 }
-const GroupNameButton = ({ buttonName }: ButtonPropTypes) => {
+const GroupNameButton = ({ groupId, groupName }: ButtonPropTypes) => {
+  const navigate = useNavigate();
   const handleButtonOnClick = () => {
-    alert('button clicked');
+    navigate(`/group/${groupId}`);
   };
 
   return (
     <GroupNameButtonWrapper onClick={handleButtonOnClick}>
-      {buttonName}
+      {groupName}
       <MainIcnArrowPurpleIcon />
     </GroupNameButtonWrapper>
   );

src/pages/main/components/Introduction.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { INTRODUCTION_DATA } from '../constants/introductionData';
+
 import {
   MainIcnArrowWhite as MainArrowWhiteIc,
   MainGraphicLogo as MainGraphicLogoIc,
@@ -21,23 +23,19 @@ const Introduction = () => {
           마일 메이커들의 에피소드
         </MainText>
         <Spacing marginBottom="0.8" />
-        <SubText>메이커들의 글 모임에서 확인해 보세요</SubText>
+        <SubText>{INTRODUCTION_DATA[0].subText}</SubText>
         <Spacing marginBottom="8" />
         <GroupRoutingButtonBox onClick={handleOnClick}>
           마일 글 모임 바로가기
           <MainArrowWhiteIc />
         </GroupRoutingButtonBox>
       </MileMakersTextLayout>
       <IntroduceZakmiBox>
-        <HookText>마일의 첫 번째 에피소드</HookText>
+        <HookText>{INTRODUCTION_DATA[0].hookText}</HookText>
         <Spacing marginBottom="0.4" />
-        <GreetingText>우리가 글쓰기 모임에 주목한 이유</GreetingText>
+        <GreetingText>{INTRODUCTION_DATA[0].greetingText}</GreetingText>
         <Spacing marginBottom="3" />
-        <DiscriptionText>
-          “체취가 느껴지는 글은 오랜만에 읽어보는 것 같아. 솔직담백해서 좋다!” 내가 처음으로 올린
-          블로그 글에 친구가 달아준 댓글이었다. 사실 글쓰기에 중요한 건, ‘잘’ 쓰는 것이 아니라 그냥
-          내 마음을 담아 쓰는 것이라는 걸 알게 됐었다. 그리고 그렇게 마음을 담은 글...
-        </DiscriptionText>
+        <DiscriptionText>{INTRODUCTION_DATA[0].discriptionText}</DiscriptionText>
       </IntroduceZakmiBox>
     </IntroductionWrapper>
   );

src/pages/main/components/MainHeader.tsx

@@ -1,37 +1,39 @@
 import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
 
 import { HeaderLogoIc } from '../../../assets/svgs';
 import LogInOutBtn from '../../../components/commons/LogInOutBtn';
 import theme from '../../../styles/theme';
+import logout from '../../../utils/logout';
 import MakeGroupBtn from '../../groupFeed/components/MakeGroupBtn';
 import MyGroupBtn from '../../groupFeed/components/MyGroupBtn';
 
-interface OnClickProps {
-  onClick: () => void;
-}
-
 // 메인 페이지 헤더
-export const MainHeader = ({ onClick }: OnClickProps) => {
+export const MainHeader = () => {
   return (
     <HeaderWrapper>
       <HeaderLogoIc />
       <HeaderBtnLayout>
         <MyGroupBtn />
         <CommonBtnLayout>
           <MakeGroupBtn />
-          <LogInOutBtn onClick={onClick}>로그아웃</LogInOutBtn>
+          <LogInOutBtn onClick={logout}>로그아웃</LogInOutBtn>
         </CommonBtnLayout>
       </HeaderBtnLayout>
     </HeaderWrapper>
   );
 };
 
 //아직 로그인을 하지 않았을 때 헤더
-export const LogOutHeader = ({ onClick }: OnClickProps) => {
+export const LogOutHeader = () => {
+  const navigate = useNavigate();
+  const handleLogIn = () => {
+    navigate(`/login`);
+  };
   return (
     <HeaderWrapper>
       <HeaderLogoIc />
-      <LogInOutBtn onClick={onClick}>로그인</LogInOutBtn>
+      <LogInOutBtn onClick={handleLogIn}>로그인</LogInOutBtn>
     </HeaderWrapper>
   );
 };

src/pages/main/components/Ruler.tsx

@@ -1,11 +1,12 @@
+import styled from '@emotion/styled';
+
 import { useEffect, useState } from 'react';
 
-import styled from '@emotion/styled';
+import { getRecommendTopic } from '../apis/getRecommendTopic';
+import { recommendPropsTypes } from '../types/recommendTopic';
 
 import { MainGraphicGradationIc } from '../../../assets/svgs';
 import Spacing from '../../../components/commons/Spacing';
-import { getRecommendTopic } from '../apis/getRecommendTopic';
-import { recommendPropsTypes } from '../types/recommendTopic';
 
 const Ruler = () => {
   const [recommendTopicData, setRecommendTopicData] = useState<recommendPropsTypes>();
@@ -78,7 +79,9 @@ const RulerContentBox = styled.div`
 `;
 
 const TodayKeyWord = styled.span`
-  width: 30rem;
+  width: fit-content;
+
+  white-space: nowrap;
 `;
 
 const Pipe = styled.div`

src/pages/main/constants/introductionData.ts

@@ -0,0 +1,16 @@
+interface introductionPropTypes {
+  subText: string;
+  hookText: string;
+  greetingText: string;
+  discriptionText: string;
+}
+
+export const INTRODUCTION_DATA: introductionPropTypes[] = [
+  {
+    subText: '메이커들의 글 모임에서 확인해 보세요',
+    hookText: '마일의 첫 번째 에피소드',
+    greetingText: '우리가 글쓰기 모임에 주목한 이유',
+    discriptionText:
+      '“체취가 느껴지는 글은 오랜만에 읽어보는 것 같아. 솔직담백해서 좋다!” 내가 처음으로 올린 블로그 글에 친구가 달아준 댓글이었다. 사실 글쓰기에 중요한 건, ‘잘’ 쓰는 것이 아니라 그냥 내 마음을 담아 쓰는 것이라는 걸 알게 됐었다. 그리고 그렇게 마음을 담은 글...',
+  },
+];