[Feat/#102] curious api

.eslintrc.json

@@ -47,8 +47,8 @@
         "groups": [["builtin", "external"], "internal", ["parent", "sibling"], "index"], //import 순서를 고정. builtin- 외부- 내부
         "pathGroups": [
           // react 컴포넌트가 builtin 뒤에 (external import 앞에 나오도록 설정)
-          { "pattern": "react", "group": "builtin", "position": "after" },
-          { "pattern": "react-dom", "group": "builtin", "position": "after" },
+          // { "pattern": "react", "group": "builtin", "position": "after" },
+          // { "pattern": "react-dom", "group": "builtin", "position": "after" },
           { "pattern": "./**", "group": "internal" }, // './'로 시작하는 상대 경로 파일은 internal 그룹에 속하도록 설정
           { "pattern": "../**", "group": "parent", "position": "before" } // '../'로 시작하는 상위 경로 파일은 parent 그룹에 속하도록 설정
         ],

src/assets/svgs/index.tsx

@@ -1,12 +1,14 @@
-export { default as EditorHorizonIcnUnactiveSvg } from './editorHorizonIcnUnactive.svg?react';
-export { default as EditorTextColorIcnBlackSvg } from './editorTextcolorIcnBlack.svg?react';
 export { default as DefaultProfileIc } from './defaultProfileIc.svg?react';
 export { default as DetailCommentMeatBallIc } from './detailCommentMeatBallIc.svg?react';
+export { default as EditorHorizonIcnUnactiveSvg } from './editorHorizonIcnUnactive.svg?react';
+export { default as EditorTextColorIcnBlackSvg } from './editorTextcolorIcnBlack.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 DetailPurpleFavoriteIc } from './detailPurplefavorite.svg?react';
+export { default as DetailWhiteFavoriteIc } from './detailWhitefavorite.svg?react';
 export { default as GroupTabBtnBaseBeforeIc } from './groupTabBtnBaseBefore.svg?react';
 export { default as GroupTabBtnBaseNextIc } from './groupTabBtnBaseNext.svg?react';
 
@@ -50,4 +52,3 @@ export { default as QuestioHoverIc } from './questionHoverIc.svg?react';
 export { default as EditorDropIcnActiveIc } from './editorDropIcnActive.svg?react';
 export { default as EditorDropIcnActiveOpenIc } from './editorDropIcnActiveopen.svg?react';
 export { default as GroupThumnailImgIc } from './groupThumnailImg.svg?react';
-

src/pages/login/RedirectLogin.tsx

@@ -1,11 +1,15 @@
+import { useEffect } from 'react';
+
 import useLoginService from './hooks/useLoginService';
 
 const RedirectLogin = () => {
   const code: string = new URL(window.location.href).searchParams.get('code') || '';
 
   const { mutate } = useLoginService({ code, socialType: 'KAKAO' });
-  mutate();
 
+  useEffect(() => {
+    mutate();
+  }, [mutate]);
   return <div>loading...</div>;
 };
 

src/pages/login/apis/loginService.ts

@@ -6,8 +6,6 @@ const loginService = async (code: string, socialType: string) => {
       socialType,
     });
 
-    console.log(data);
-
     return data.data;
   } catch (e) {
     console.error(e);

src/pages/login/hooks/useLoginService.ts

@@ -13,11 +13,13 @@ import { LoginProps } from '../types/loginType';
 // }
 export const useLoginService = ({ code, socialType }: LoginProps) => {
   const navigate = useNavigate();
+  // const queryClient = useQueryClient();
   return useMutation({
     mutationFn: () => loginService(code, socialType),
     mutationKey: ['login'],
     onSuccess: (data) => {
       console.log('success');
+      // queryClient.invalidateQueries({ queryKey: ['products'] });
       localStorage.setItem('accessToken', data.accessToken);
       navigate('/');
     },

src/pages/main/components/Carousel.tsx

@@ -1,20 +1,16 @@
-import { useEffect, useState } from 'react';
-
 import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
 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';
+import { getGroupContent } from './../apis/getGroupContent';
+import { MoimPropTypes } from './../types/moimPost';
 
 const Carousel = () => {
   const [groupData, setGroupData] = useState<MoimPropTypes[]>([]);
@@ -51,7 +47,7 @@ const Carousel = () => {
               <GroupNameButton buttonName={moim.moimName} />
               <Spacing marginBottom="1.6" />
               <CarouselContainer>
-                <CarouselBox {...settings}>
+                <CarouselBox {...settings} className="main">
                   {moim.moimPosts.map((post, index) => (
                     <GroupContent
                       key={index}

src/pages/postDetail/PostDetail.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import Comment from './components/Comment';
 import CuriousBtn from './components/CuriousBtn';
-import { useGetCuriousInfo, useGetPostDetail } from './hooks/queries';
+import { useGetPostDetail } from './hooks/queries';
 
 import MakeGroupBtn from '../groupFeed/components/MakeGroupBtn';
 import MyGroupBtn from '../groupFeed/components/MyGroupBtn';
@@ -12,14 +12,14 @@ import { CheckboxIc, DefaultProfileIc, HeaderLogoIc } from './../../assets/svgs'
 import Button from './../../components/commons/Button';
 import LogInOutBtn from './../../components/commons/LogInOutBtn';
 import Spacing from './../../components/commons/Spacing';
+import logout from './../../utils/logout';
 
 const PostDetail = () => {
   const navigate = useNavigate();
   const { postId } = useParams();
 
   const { data, isError, isLoading } = useGetPostDetail(postId || '');
-  const { data1, isError1, isLoading1 } = useGetCuriousInfo(postId || '');
-  console.log(data1);
+
   const postData = data?.data;
   if (isError) {
     navigate('/error');
@@ -47,7 +47,7 @@ const PostDetail = () => {
           <MyGroupBtn />
           <CommonBtnLayout>
             <MakeGroupBtn />
-            <LogInOutBtn>로그아웃</LogInOutBtn>
+            <LogInOutBtn onClick={logout}>로그아웃</LogInOutBtn>
           </CommonBtnLayout>
         </HeaderBtnLayout>
       </PostHeader>
@@ -79,10 +79,10 @@ const PostDetail = () => {
                 <WriterInfoText>{postData?.writerName}</WriterInfoText>
                 <GroupInfoText>{postData?.moimName}</GroupInfoText>
               </WriterInfoBox>
-              <WriterDesc>{postData?.writerInfo}</WriterDesc>
+              <WriterDesc>{postData?.writerInfo && '아직 작가소개를 작성하지 않았어요'}</WriterDesc>
             </InfoWrapper>
           </WriterInfoContainer>
-          <CuriousBtn curiousNum={4}></CuriousBtn>
+          <CuriousBtn />
         </WriterInfoWrapper>
 
         <Comment />

src/pages/postDetail/apis/createPostCurious.ts

@@ -0,0 +1,28 @@
+import { client } from '../../../utils/apis/axios';
+
+interface PostCuriousResponseType {
+  status: string;
+  message: string;
+  data: {
+    isCurious: boolean;
+  };
+}
+
+const createPostCurious = async (postId: string) => {
+  try {
+    const token = localStorage.getItem('accessToken');
+    const { data } = await client.post<PostCuriousResponseType>(
+      `api/post/${postId}/curious`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    return data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+export default createPostCurious;

src/pages/postDetail/apis/fetchCuriousInfo.ts

@@ -1,6 +1,6 @@
 import { client } from '../../../utils/apis/axios';
 
-interface GetCuriousInfo {
+interface GetCuriousInfoResponseTypes {
   status: string;
   message: string;
   data: {
@@ -12,12 +12,16 @@ interface GetCuriousInfo {
 const fetchCuriousInfo = async (postId: string) => {
   try {
     const token = localStorage.getItem('accessToken');
-    const { data } = await client.get<GetCuriousInfo>(`/api/post/${postId}/cusiousInfo`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
+
+    const { data } = await client.get<GetCuriousInfoResponseTypes>(
+      `/api/post/${postId}/curiousInfo`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-    });
-    console.log(data);
+    );
+    return data;
   } catch (err) {
     console.log(err);
   }

src/pages/postDetail/components/CuriousBtn.tsx

@@ -1,28 +1,30 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-
 import { useState } from 'react';
+import { useParams } from 'react-router-dom';
 
-import { QuestioHoverIc, QuestionDefaultIc } from './../../../assets/svgs';
+import { useGetCuriousInfo, usePostCurious } from '../hooks/queries';
 
-interface Curious {
-  curiousNum: number;
-}
-const CuriousBtn = ({ curiousNum }: Curious) => {
-  const [isClick, setIsClick] = useState(false);
+import { DetailPurpleFavoriteIc, DetailWhiteFavoriteIc } from './../../../assets/svgs';
 
-  const handleIsClick = () => {
+const CuriousBtn = () => {
+  const [isClick, setIsClick] = useState(false);
+  const { postId } = useParams();
+  const { data } = useGetCuriousInfo(postId || '');
+  const { mutate: postCurious } = usePostCurious(postId || '');
+  const handleBtnClick = () => {
     setIsClick((prev) => !prev);
+    postCurious();
   };
   return (
     <>
-      <CuriousBtnWrapper onClick={handleIsClick} $isClick={isClick}>
+      <CuriousBtnWrapper onClick={handleBtnClick} $isClick={isClick}>
         <CuriousTextWrapper>
           <CuriousTextContainer>
-            {isClick ? <QuestioHoverIc /> : <QuestionDefaultIc />}
+            {isClick ? <DetailWhiteFavoriteIc /> : <DetailPurpleFavoriteIc />}
             궁금해요
           </CuriousTextContainer>
-          <CuriousTextWrapper>{curiousNum}</CuriousTextWrapper>
+          <CuriousTextWrapper>{data?.data?.curiousCount}</CuriousTextWrapper>
         </CuriousTextWrapper>
       </CuriousBtnWrapper>
     </>
@@ -63,6 +65,7 @@ const CuriousTextWrapper = styled.div`
 
 const CuriousTextContainer = styled.div`
   display: flex;
+  gap: 0.2rem;
   align-items: center;
   justify-content: center;
 `;

src/pages/postDetail/hooks/queries.ts

@@ -1,9 +1,11 @@
 //한 파일에서 사용하는 쿼리키를 모아두고 쿼리를 선언해주세요
 
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
+import createPostCurious from '../apis/createPostCurious';
 import fetchCuriousInfo from '../apis/fetchCuriousInfo';
 import fetchPostDetail from '../apis/fetchPostDetail';
+
 //쿼리키를 이렇게 두는 이유는 겹치지 않기위해 + 객체로 생성하여 자동완성 하기 위해
 export const QUERY_KEY_POST_DETAIL = {
   getPostDetail: 'getPostDetail',
@@ -17,6 +19,7 @@ export const QUERY_KEY_POST_DETAIL = {
   getCurious: 'getCurious',
 };
 
+// 글정보 조회 get api
 export const useGetPostDetail = (postId: string) => {
   const data = useQuery({
     queryKey: [QUERY_KEY_POST_DETAIL.getPostDetail],
@@ -26,10 +29,23 @@ export const useGetPostDetail = (postId: string) => {
   return data;
 };
 
+//궁금해요 여부개수 get api
 export const useGetCuriousInfo = (postId: string) => {
   const data = useQuery({
     queryKey: [QUERY_KEY_POST_DETAIL.getCurious],
     queryFn: () => fetchCuriousInfo(postId),
   });
   return data;
 };
+
+//궁금해요 생성 api
+export const usePostCurious = (postId: string) => {
+  const data = useMutation({
+    mutationKey: [QUERY_KEY_POST_DETAIL.postCurious],
+    mutationFn: () => createPostCurious(postId),
+    onSuccess: () => {
+      console.log('post curious Success');
+    },
+  });
+  return data;
+};

src/pages/postPage/PostPage.tsx

@@ -1,17 +1,12 @@
 import styled from '@emotion/styled';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useState, useReducer } from 'react';
-
 import DropDown from './components/DropDown';
 import Editor from './components/Editor';
-import Spacing from '../../components/commons/Spacing';
 
-import {
-  EditorEditHeader, // 수정하기 -> 헤더
-  EditorTempNotExistHeader, // 임시저장 글 없음 -> 헤더
-  EditorTempExistHeader, // 임시저장 글 있음 -> 헤더
-} from '../../components/commons/Header';
+import { EditorTempExistHeader, EditorTempNotExistHeader } from '../../components/commons/Header';
+import Spacing from '../../components/commons/Spacing';
 
 const PostPage = () => {
   // 에디터 제목, 내용 저장 함수
@@ -63,7 +58,7 @@ export default PostPage;
 const PostPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
   width: 100%;
-  align-items: center;
 `;