[Feat/#83] 오늘의 글감 API GET

[Feat/#83] 오늘의 글감 API GET

package.json

@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
-    "@tanstack/react-query-devtools": "^5.17.9",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.16.0",

src/components/commons/Footer.tsx

@@ -1,8 +1,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 './Spacing';
 
 const Footer = () => {
   return (

src/components/commons/Header.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
 
-import { HeaderLogoIc } from './../../assets/svgs';
 import Button from './Button';
 import LogInOutBtn from './LogInOutBtn';
+
+import { HeaderLogoIc } from './../../assets/svgs';
 import MakeGroupBtn from '../../pages/groupFeed/components/MakeGroupBtn';
 import MyGroupBtn from '../../pages/groupFeed/components/MyGroupBtn';
 

src/pages/groupFeed/GroupFeed.tsx

@@ -12,7 +12,6 @@ import GroupSideHeader from './components/GroupSideHeader';
 import GroupTodayWriteStyle from './components/GroupTodayWriteStyle';
 import { useGroupFeedAuth, useGroupInfo } from './hooks/queries';
 
-
 import GroupFloatingBtn from '../../assets/svgs/groupFloatingBtn.svg';
 import GroupFloatingBtnHover from '../../assets/svgs/groupFloatingBtnHover.svg';
 import GroupThumbnailImg from '../../assets/svgs/groupThumnailImg.svg';
@@ -50,7 +49,7 @@ const GroupFeed = () => {
       <GroupInfoWrapper>
         {groupInfoData && <GroupSideHeader groupInfoData={groupInfoData} />}
         <GroupInfo>
-          <GroupTodayWriteStyle isMember={isMember} />
+          <GroupTodayWriteStyle isMember={isMember} groupId={groupId} />
           <Spacing marginBottom="6.4" />
           <GroupCuriousTitle
             mainText="궁금해요 버튼이 많은 2명의 프로필"

src/pages/groupFeed/apis/fetchGroupFeed.ts

@@ -44,3 +44,12 @@ export const fetchGroupInfo = async (groupId: string) => {
     console.error('에러:', error);
   }
 };
+
+export const fetchTodayWritingStyle = async (groupId: string) => {
+  try {
+    const response = await client.get(`/api/moim/${groupId}/topic`);
+    return response.data;
+  } catch (error) {
+    console.error('에러:', error);
+  }
+};

src/pages/groupFeed/carousel/Carousel.tsx

@@ -1,17 +1,19 @@
-import { Dispatch, SetStateAction } from 'react';
-
 import styled from '@emotion/styled';
 import Slider from 'react-slick';
 
+import { Dispatch, SetStateAction } from 'react';
+
 import './slick-theme.css';
 import './slick.css';
 import CarouselContainer from './CarouselContainer';
+
+import { CAROUSEL_CATEGORY } from '../constants/CAROUSEL_DATA';
+
 import { GroupTabBtnBaseBeforeIc, GroupTabBtnBaseNextIc } from '../../../assets/svgs';
 import BeforeBtn from '../../../assets/svgs/groupTabBeforeBtnEnable.svg';
 import BeforeBtnHover from '../../../assets/svgs/groupTabBeforeBtnHover.svg';
 import NextBtn from '../../../assets/svgs/groupTabNextBtnEnable.svg';
 import NextBtnHover from '../../../assets/svgs/groupTabNextBtnHover.svg';
-import { CAROUSEL_CATEGORY } from '../constants/CAROUSEL_DATA';
 
 interface CategoryIdPropTypes {
   activeCategoryId: number;

src/pages/groupFeed/carousel/CarouselContainer.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-
 import styled from '@emotion/styled';
 
+import { ReactNode } from 'react';
+
 interface CarouselPropTypes {
   isActive: boolean;
   onClick: () => void;

src/pages/groupFeed/components/GroupInfoBox.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-
 import styled from '@emotion/styled';
 
+import { ReactNode } from 'react';
+
 interface GroupInfoPropTypes {
   icon: ReactNode;
   title: string;

src/pages/groupFeed/components/GroupSideHeader.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import GroupInfoBox from './GroupInfoBox';
+
 import { GroupDateIc, GroupLeaderIc, GroupMemberIc } from '../../../assets/svgs';
 import Spacing from '../../../components/commons/Spacing';
 

src/pages/groupFeed/components/GroupTodayWriteStyle.tsx

@@ -1,22 +1,33 @@
 import styled from '@emotion/styled';
 
+import { useTodayWritingStyle } from '../hooks/queries';
+
 import Button from '../../../components/commons/Button';
 
 interface GroupTodayWriteStylePropTypes {
-  isMember: boolean | undefined;
+  isMember: boolean | undefined; //나의 글 작성하기 권한 확인
+  groupId: string | undefined; //오늘의 주제
 }
 
 const GroupTodayWriteStyle = (props: GroupTodayWriteStylePropTypes) => {
-  const { isMember } = props;
+  const { isMember, groupId } = props;
+  const { content, isLoading, isError, error } = useTodayWritingStyle(groupId || '');
   const onHandleSubmit = () => {
     // console.log('submit');
   };
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isError) {
+    return <div>Error fetching data..{error?.message}</div>;
+  }
   return (
     <TodayWriteStyleWrapper>
       <TextLayout>
         <MainText>글감 카테고리 자리</MainText>
         <SubText>
-          오늘의 주제는 <SubBoldText>글감자리</SubBoldText> 입니다.
+          오늘의 주제는 <SubBoldText>{content}</SubBoldText> 입니다.
         </SubText>
       </TextLayout>
       {isMember && (
@@ -55,9 +66,11 @@ const MainText = styled.div`
 const SubText = styled.div`
   color: ${({ theme }) => theme.colors.gray80};
 
-  ${({ theme }) => theme.fonts.title8};
+  ${({ theme }) => theme.fonts.subtitle4};
 `;
 
 const SubBoldText = styled.span`
   color: ${({ theme }) => theme.colors.gray90};
+
+  ${({ theme }) => theme.fonts.title8};
 `;

src/pages/groupFeed/hooks/queries.ts

@@ -1,6 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchGroupFeedAuth, fetchGroupInfo } from '../apis/fetchGroupFeed';
+import { fetchGroupFeedAuth, fetchTodayWritingStyle, fetchGroupInfo } from '../apis/fetchGroupFeed';
+
+export const QUERY_KEY_GROUPFEED = {
+  getGroupFeedAuth: 'getGroupFeedAuth',
+  getTodayWritingStyle: 'getTodayWritingStyle',
+};
 
 interface GroupFeedAuthQueryResult {
   isMember: boolean | undefined;
@@ -11,7 +16,7 @@ interface GroupFeedAuthQueryResult {
 
 export const useGroupFeedAuth = (groupId: string): GroupFeedAuthQueryResult => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: ['groupFeed_Auth_moimId', groupId],
+    queryKey: [QUERY_KEY_GROUPFEED.getGroupFeedAuth, groupId],
     queryFn: () => fetchGroupFeedAuth(groupId),
   });
 
@@ -29,6 +34,7 @@ interface GroupInfoQueryResult {
     writerCount: number;
     description: string | undefined;
   };
+
   isLoading: boolean;
   isError: boolean;
   error: Error | null;
@@ -44,3 +50,20 @@ export const useGroupInfo = (groupId: string): GroupInfoQueryResult => {
 
   return { groupInfoData, isLoading, isError, error };
 };
+
+interface WritingStyleQueryResult {
+  content: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+}
+
+export const useTodayWritingStyle = (groupId: string): WritingStyleQueryResult => {
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: [QUERY_KEY_GROUPFEED.getTodayWritingStyle, groupId],
+    queryFn: () => fetchTodayWritingStyle(groupId),
+  });
+
+  const content = data && data.data.content;
+  return { content, isLoading, isError, error };
+};

src/pages/main/Main.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-import Footer from './../../components/commons/Footer';
-import Spacing from './../../components/commons/Spacing';
 import Carousel from './components/Carousel';
 import FaqDropdown from './components/FaqDropdown';
 import FaqTitle from './components/FaqTitle';
@@ -13,6 +11,9 @@ import OnBoarding from './components/OnBoarding';
 import Ruler from './components/Ruler';
 import { FAQ_DATA } from './constants/faqData';
 
+import Footer from './../../components/commons/Footer';
+import Spacing from './../../components/commons/Spacing';
+
 const Main = () => {
   return (
     <MainPageWrapper>

src/pages/main/components/Carousel.tsx

@@ -5,12 +5,17 @@ import Slider from 'react-slick';
 
 import '../style/slick-theme.css';
 import '../style/slick.css';
+
 import Spacing from './../../../components/commons/Spacing';
 import { getGroupContent } from './../apis/getGroupContent';
 import { MoimPropTypes } from './../types/moimPost';
+
 import GroupContent from './GroupContent';
 import GroupNameButton from './GroupNameButton';
 
+import Spacing from './../../../components/commons/Spacing';
+import GROUP_CONTENT, { groupContentypes } from './../constants/constants';
+
 const Carousel = () => {
   const [groupData, setGroupData] = useState<MoimPropTypes[]>([]);
 

src/pages/main/style/slick-theme.css

@@ -48,11 +48,11 @@
   outline: none;
   background: transparent;
 }
-.slick-prev:hover:before {
+.main .slick-prev:hover:before {
   display: block;
   content: url('../../../src/assets/svgs/mainBtnBeforeHover.svg');
 }
-.slick-next:hover:before {
+.main .slick-next:hover:before {
   display: block;
   content: url('../../../src/assets/svgs/mainBtnNextHover.svg');
 }
@@ -61,8 +61,8 @@
   display: none;
 }
 
-.slick-prev:before,
-.slick-next:before {
+.main .slick-prev:before,
+.main .slick-next:before {
   font-family: 'slick';
   font-size: 20px;
   line-height: 1;
@@ -83,7 +83,7 @@
   right: -25px;
   left: auto;
 }
-.slick-prev:before {
+.main .slick-prev:before {
   display: block;
   content: url('../../../src/assets/svgs/mainBtnBefore.svg');
 }
@@ -101,7 +101,7 @@
   right: auto;
   left: -25px;
 }
-.slick-next:before {
+.main .slick-next:before {
   display: block;
   content: url(../../../src/assets/svgs/mainBtnNext.svg);
 }