Merge pull request #438 from Mile-Writings/fix/#428/moimInfoGet

[Fix/#428] 내 정보 get api 통합 + 링크미리보기 설정
Mile-Writings · Oct 8, 2024 · b04bb98 · b04bb98
2 parents c1c49ce + 1ef1491
commit b04bb98
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 269 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import router from './routers/Router';
-
+import mileLinkImg from '../src/assets/images/mileLinkImg.png';
 import { RouterProvider } from 'react-router-dom';
 import { Suspense } from 'react';
 import Loading from './pages/loading/Loading';
@@ -16,16 +16,28 @@ const App = () => {
     },
   });
   return (
-    <div style={{ fontSize: '16px' }}>
-      <QueryClientProvider client={queryClient}>
-        <DesktopWrapper>
-          <Suspense fallback={<Loading />}>
-            <RouterProvider router={router} />
-          </Suspense>
-        </DesktopWrapper>
-        <ReactQueryDevtools initialIsOpen />
-      </QueryClientProvider>
-    </div>
+    <>
+      <head>
+        <meta property="og:title" content="마일 | 글쓰기 모임 | 블로그" />
+        <meta
+          property="og:description"
+          content="오직 글쓰기 모임을 위한 블로그, 마일에서 모임원들과 함께 글을 쓰며 여러분 만의 공간을 만들어보세요"
+        />
+        <meta property="og:image" content={mileLinkImg} />
+        <meta property="og:url" content="https://www.milewriting.com/" />
+        <meta property="og:type" content="website" />
+      </head>
+      <div style={{ fontSize: '16px' }}>
+        <QueryClientProvider client={queryClient}>
+          <DesktopWrapper>
+            <Suspense fallback={<Loading />}>
+              <RouterProvider router={router} />
+            </Suspense>
+          </DesktopWrapper>
+          <ReactQueryDevtools initialIsOpen />
+        </QueryClientProvider>
+      </div>
+    </>
   );
 };
 

diff --git a/src/assets/images/defaultSeaImage.png b/src/assets/images/defaultSeaImage.png
diff --git a/src/assets/images/image_area.png b/src/assets/images/image_area.png
diff --git a/src/assets/images/mileLinkImg.png b/src/assets/images/mileLinkImg.png
diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx
@@ -20,7 +20,7 @@ const Admin = () => {
   const navigate = useNavigate();
 
   const { invitationCode } = useFetchInvitationLink(groupId);
-  const { groupInfoData } = useGroupInfo(groupId || '');
+  const { infoResponse } = useGroupInfo(groupId || '');
 
   const handleCopyLink = (invitationCode: string) => {
     copyLink(import.meta.env.VITE_INVITE_URL + `group/${invitationCode}/groupInvite`);
@@ -45,7 +45,7 @@ const Admin = () => {
               <AdminHomeIc />
               Home
             </HomeBtn>
-            <GroupName>{groupInfoData?.moimName}</GroupName>
+            <GroupName>{infoResponse?.moimName}</GroupName>
           </AdminGroupInfo>
           <Spacing marginBottom="2.4" />
           <AdminMenu>

diff --git a/src/pages/groupFeed/GroupFeed.tsx b/src/pages/groupFeed/GroupFeed.tsx
@@ -18,10 +18,11 @@ import GroupCuriousTitle from './components/GroupCuriousTitle';
 import GroupSideHeader from './components/GroupSideHeader';
 import GroupTodayWriteStyle from './components/GroupTodayWriteStyle';
 import {
-  useFetchWriterNameOnly,
+  useFetchWriterInfo,
   useGroupFeedAuth,
   useGroupFeedPublicStatus,
   useGroupInfo,
+  useTopicList,
 } from './hooks/queries';
 
 const GroupFeed = () => {
@@ -47,11 +48,19 @@ const GroupFeed = () => {
     sessionStorage.setItem('activeCategoryId', String(activeCategoryId));
   }, [activeCategoryId]);
 
-  const { groupInfoData } = useGroupInfo(groupId || '');
-  const { writerName, writerNameId } = useFetchWriterNameOnly(groupId || '', isMember, isOwner);
+  const { infoResponse, mostCuriousPost, mostCuriousWriter } = useGroupInfo(groupId || '');
+  const { writerName, writerNameId, writerDescription } = useFetchWriterInfo(
+    groupId || '',
+    isMember,
+    isOwner,
+  );
+  const { groupFeedCategoryData, isLoading } = useTopicList(groupId || '');
 
   const navigate = useNavigate();
 
+  const todayTopic = groupFeedCategoryData && groupFeedCategoryData[0].topicName;
+  //const { name, description } = useFetchWriterInfo(writerNameId);
+
   //접속시 권한확인
   useEffect(() => {
     if (!isPublicLoading && !isAuthLoading) {
@@ -69,7 +78,7 @@ const GroupFeed = () => {
     }
   }, [isPublic, isMember, isOwner]);
 
-  if (isAuthLoading) {
+  if (isAuthLoading || isLoading) {
     return <Loading />;
   }
 
@@ -81,36 +90,36 @@ const GroupFeed = () => {
     <GroupFeedWrapper>
       {accessToken ? <AuthorizationHeader /> : <UnAuthorizationHeader />}
       <Spacing marginBottom="6.4" />
-      <GroupFeedThumnail imageUrl={groupInfoData?.imageUrl} />
+      <GroupFeedThumnail imageUrl={infoResponse?.imageUrl} />
       <Spacing marginBottom="6" />
       <GroupInfoWrapper>
-        {groupInfoData && (
+        {infoResponse && (
           <GroupSideHeader
-            groupInfoData={groupInfoData}
+            groupInfoData={infoResponse}
             isMember={isMember}
             isOwner={isOwner}
             setShowEditProfileModal={setShowEditProfileModal}
             writerName={writerName}
           />
         )}
         <GroupInfo>
-          <GroupTodayWriteStyle isMember={isMember} groupId={groupId} />
+          <GroupTodayWriteStyle todayTopic={todayTopic} isMember={isMember} groupId={groupId} />
           <Spacing marginBottom="6.4" />
           <GroupCuriousTitle
             mainText="우리 모임에서 궁금한 글쓴이에요"
             subText="매주 월요일마다 업데이트 됩니다"
           />
           <Spacing marginBottom="2" />
-          <CuriousProfile groupId={groupId} />
+          <CuriousProfile mostCuriousWriter={mostCuriousWriter} />
           <Spacing marginBottom="6.4" />
           <GroupCuriousTitle
             mainText="우리 모임에서 인기 있는 글이에요"
             subText="매주 월요일마다 업데이트 됩니다"
           />
           <Spacing marginBottom="2" />
-          <CuriousArticle groupId={groupId} />
+          <CuriousArticle groupId={groupId} mostCuriousPost={mostCuriousPost} />
           <Spacing marginBottom="6.4" />
-          <Carousel />
+          <Carousel categoryData={groupFeedCategoryData || []} isLoading={isLoading} />
         </GroupInfo>
       </GroupInfoWrapper>
       <Spacing marginBottom="14" />
@@ -122,6 +131,8 @@ const GroupFeed = () => {
         <EditProfileModal
           setShowEditProfileModal={setShowEditProfileModal}
           writerNameId={writerNameId}
+          name={writerName || ''}
+          description={writerDescription || ''}
         />
       )}
     </GroupFeedWrapper>

diff --git a/src/pages/groupFeed/apis/fetchGroupFeed.ts b/src/pages/groupFeed/apis/fetchGroupFeed.ts
@@ -22,22 +22,45 @@ export const fetchGroupFeedAuth = async (groupId: string) => {
   }
 };
 
+interface InfoResPropTypes {
+  imageUrl: string;
+  moimName: string;
+  ownerName: string;
+  startDate: string;
+  writerCount: number;
+  description: string;
+}
+
+interface CuriousWriterPropTypes {
+  writerName: string;
+}
+
+interface CuriousPostPropTypes {
+  postId: string;
+  imageUrl: string;
+  topic: string;
+  title: string;
+  content: string;
+  isContainPhoto: boolean;
+}
+
 interface GroupInfoPropTypes {
   data: {
-    imageUrl: string;
-    moimName: string;
-    ownerName: string;
-    startDate: string;
-    writerCount: number;
-    description: string;
+    infoResponse: InfoResPropTypes;
+    mostCuriousPost: {
+      postList: CuriousPostPropTypes[];
+    };
+    mostCuriousWriter: {
+      popularWriters: CuriousWriterPropTypes[];
+    };
   };
   status: number;
   message: string;
 }
-
+//[GET] 글모임 통합 정보 GET
 export const fetchGroupInfo = async (groupId: string) => {
   try {
-    const response = await client.get<GroupInfoPropTypes>(`/api/moim/${groupId}/info`);
+    const response = await client.get<GroupInfoPropTypes>(`/api/moim/${groupId}/information`);
     return response.data;
   } catch (error) {
     console.error('에러:', error);
@@ -64,45 +87,6 @@ export const fetchGroupPublicStatus = async (groupId: string) => {
   }
 };
 
-interface TodayTopicPropTypes {
-  data: {
-    content: string;
-  };
-  status: number;
-  message: string;
-}
-
-export const fetchTodayTopic = async (groupId: string) => {
-  try {
-    const response = await client.get<TodayTopicPropTypes>(`/api/moim/${groupId}/topic/today`);
-    return response.data;
-  } catch (error) {
-    console.error('에러:', error);
-  }
-};
-
-interface CuriousWriterPropTypes {
-  data: {
-    popularWriters: {
-      writerName: string;
-      information: string;
-    }[];
-  };
-  status: number;
-  message: string;
-}
-
-export const fetchCuriousWriters = async (groupId: string) => {
-  try {
-    const response = await client.get<CuriousWriterPropTypes>(
-      `/api/moim/${groupId}/writers/top-rank`,
-    );
-    return response.data;
-  } catch (error) {
-    console.error('에러:', error);
-  }
-};
-
 interface TopicListPropTypes {
   data: {
     topicList: {
@@ -113,7 +97,7 @@ interface TopicListPropTypes {
   status: number;
   message: string;
 }
-
+//[GET] 글모임별 글감 카테고리
 export const fetchTopicList = async (groupId: string) => {
   try {
     const response = await client.get<TopicListPropTypes>(`/api/moim/${groupId}/topics`);
@@ -123,30 +107,6 @@ export const fetchTopicList = async (groupId: string) => {
   }
 };
 
-interface CuriousPostPropTypes {
-  data: {
-    postList: {
-      postId: string;
-      imageUrl: string;
-      topic: string;
-      title: string;
-      content: string;
-      isContainPhoto: boolean;
-    }[];
-  };
-  status: number;
-  message: string;
-}
-
-export const fetchCuriousPost = async (groupId: string) => {
-  try {
-    const response = await client.get<CuriousPostPropTypes>(`/api/moim/${groupId}/posts/top-rank`);
-    return response.data;
-  } catch (error) {
-    console.error('에러:', error);
-  }
-};
-
 interface ArticleListPropTypes {
   data: {
     hasNext: boolean;
@@ -183,16 +143,17 @@ export const fetchArticleList = async (topicId: string, pageParam: string | null
   }
 };
 
-//[GET] 필명만 GET
+//[GET] 필명 + 프로필 설명 GET
 interface WriterNamePropTypes {
   status: number;
   message: string;
   data: {
     writerName: string;
     writerNameId: number;
+    description: string;
   };
 }
-export const fetchWriterNameOnly = async (groupId: string) => {
+export const fetchWriterInfo = async (groupId: string) => {
   if (checkAuthenticate()) {
     const response = await authClient.get<WriterNamePropTypes>(`/api/moim/${groupId}/writername`);
     return response.data;
@@ -202,27 +163,6 @@ export const fetchWriterNameOnly = async (groupId: string) => {
   }
 };
 
-//[GET] 필명 + 프로필 설명 GET
-interface WriterInfoPropTypes {
-  status: number;
-  message: string;
-  data: {
-    name: string;
-    description: string;
-  };
-}
-export const fetchWriterInfo = async (writerNameId: number | undefined) => {
-  try {
-    const response = await authClient.get<WriterInfoPropTypes>(
-      `/api/writername/${writerNameId}/profile`,
-    );
-
-    return response.data;
-  } catch (error) {
-    console.error('에러:', error);
-  }
-};
-
 //[PATCH] 필명 소개글 수정
 interface WriterIntroPropTypes {
   status: number;