feat: History API 연동작업

Ocean-Portfolio · Mar 12, 2024 · d52bc25 · d52bc25
1 parent c6461ea
commit d52bc25
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 21 deletions.
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.context.ts b/src/components/Card/History/Detail/HistoryDetailCard.context.ts
@@ -4,8 +4,8 @@ export interface HistoryDetailContextProps {
   sizeToken?: 'LARGE' | 'SMALL';
   title: string;
   period: string;
-  position: string;
-  content: string;
+  position: string | null | undefined;
+  content: string | null | undefined;
 }
 
 const StaticContextHistoryDetailCard =

diff --git a/src/components/Card/History/Detail/HistoryDetailCard.tsx b/src/components/Card/History/Detail/HistoryDetailCard.tsx
@@ -107,7 +107,7 @@ const Content = () => {
         sizeToken ? contentVariants[sizeToken] : contentStyle,
         contentSelector,
       )}
-      value={content}
+      value={content || ''}
     />
   );
 };

diff --git a/src/components/Card/History/Impact/HistoryImpactCard.context.ts b/src/components/Card/History/Impact/HistoryImpactCard.context.ts
@@ -4,15 +4,13 @@ export interface HistoryImpactContextProps {
   sizeToken?: 'LARGE' | 'SMALL';
   before: string;
   after: string;
-  unitWord: string;
-  content: string;
+  content: string | null | undefined;
 }
 
 export const StaticContextHistoryImpactCard =
   createStaticContext<HistoryImpactContextProps>({
     sizeToken: 'LARGE',
     before: '',
     after: '',
-    unitWord: '',
     content: '',
   });
diff --git a/src/components/Card/History/Impact/HistoryImpactCard.tsx b/src/components/Card/History/Impact/HistoryImpactCard.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import { StaticContextPageInfo } from '@/app/context';
 import CommonIcon from '@/composable/Icon/CommonIcon';
+import { useUserInfo } from '@/hook/useUserInfo';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import calcRemToPxNumber from '@/utils/style/calcRemToPxNumber';
 import CommonCard from '../../Common/CommonCard';
@@ -33,7 +36,6 @@ const HistoryImpactCard = ({
   sizeToken,
   before,
   after,
-  unitWord,
   content,
 }: PropsWithChildren<HistoryImpactCardProps>) => {
   return (
@@ -42,7 +44,6 @@ const HistoryImpactCard = ({
         sizeToken,
         before,
         after,
-        unitWord,
         content,
       }}
     >
@@ -60,28 +61,25 @@ const HistoryImpactCard = ({
 };
 
 const Headline = () => {
-  const { sizeToken, before, after, unitWord } = getStaticContext(
+  const { sizeToken, before, after } = getStaticContext(
     StaticContextHistoryImpactCard,
   );
 
-  const { userInfo } = getStaticContext(StaticContextPageInfo);
+  const userInfo = useUserInfo();
 
   return (
     <h3
       className={classNames(
         sizeToken ? headlineStyleVariants[sizeToken] : headlineStyle,
       )}
     >
-      <span>
-        {before}
-        {unitWord}
-      </span>
+      <span>{before}</span>
       <CommonIcon
         className={classNames(
           sizeToken ? iconStyleVariants[sizeToken] : iconStyle,
         )}
         variant="LEFT_ARROW_SECONDARY_VARIANT"
-        userToken={userInfo.token}
+        userToken={userInfo.name as UserNameToken}
         width={calcRemToPxNumber('1.5rem')}
         height={calcRemToPxNumber('1.5rem')}
       />
@@ -93,7 +91,6 @@ const Headline = () => {
         >
           {after}
         </strong>
-        {unitWord}
       </span>
     </h3>
   );

diff --git a/src/components/History/Carousel/HistoryCarousel.tsx b/src/components/History/Carousel/HistoryCarousel.tsx
@@ -64,7 +64,6 @@ const HistoryCarousel = ({ data }: Props) => {
                   className={impactStyle}
                   before={impact.before}
                   after={impact.after}
-                  unitWord={impact.unitWord}
                   content={impact.content}
                 >
                   <HistoryImpactCard.Headline />

diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
@@ -1,9 +1,15 @@
 'use client';
 
-import { useQuery, useSuspenseQuery } from '@apollo/client';
+import { useSuspenseQuery } from '@apollo/client';
 import React, { useContext, useState } from 'react';
 import { GET_HISTORY_ITEM_BY_HISTORY_ID } from '@/gql/queries/history_item';
+import { useUserInfo } from '@/hook/useUserInfo';
+import {
+  GetHistoryItemByHistoryIdQuery,
+  GetHistoryItemByHistoryIdQueryVariables,
+} from '@/types/graphql';
 import { getStaticContext } from '@/utils/context/StaticContext';
+import { getPeriod } from '@/utils/date/getPeriod';
 import HistoryCarousel from './Carousel/HistoryCarousel';
 import {
   DispatcherContextHistory,
@@ -97,13 +103,38 @@ const Carousel = () => {
     });
   };
 
-  const { data } = useSuspenseQuery(GET_HISTORY_ITEM_BY_HISTORY_ID, {
+  const historyItemQuery = useSuspenseQuery<
+    GetHistoryItemByHistoryIdQuery,
+    GetHistoryItemByHistoryIdQueryVariables
+  >(GET_HISTORY_ITEM_BY_HISTORY_ID, {
     variables: {
       history_id: Number(selectInfo.id),
     },
   });
 
-  console.log(data);
+  const data = historyItemQuery.data.getHistoryItemByHistoryId.map(
+    (historyItem) => {
+      return {
+        detail: {
+          title: historyItem.title,
+          period: getPeriod(
+            Number(historyItem.start_date),
+            Number(historyItem.end_date),
+          ),
+          position: historyItem.position,
+          content: historyItem.content,
+        },
+        impact: historyItem.impacts.map((impact) => {
+          return {
+            before: impact.before,
+            after: impact.after,
+            content: impact.content,
+          };
+        }),
+      };
+    },
+  );
+
   return (
     <>
       <HistorySummary
@@ -112,7 +143,7 @@ const Carousel = () => {
         data={selectedSummary.histories}
         handleClick={handleClick}
       />
-      {/* <HistoryCarousel /> */}
+      <HistoryCarousel data={data} />
     </>
   );
 };

diff --git a/src/gql/queries/history_item.ts b/src/gql/queries/history_item.ts
@@ -11,6 +11,14 @@ export const GET_HISTORY_ITEM_BY_HISTORY_ID = gql`
       date_type
       start_date
       end_date
+      impacts {
+        id
+        sort_order
+        before
+        after
+        content
+        visible_status
+      }
       visible_status
     }
   }

diff --git a/src/helper/getUserNameWithURL.ts b/src/helper/getUserNameWithURL.ts
@@ -0,0 +1,12 @@
+export const getUserNameWithURL = (pathname: string) => {
+  switch (pathname) {
+    case '/sungyeon':
+      return '윤성연';
+    case '/yeji':
+      return '최예지';
+    case '/jaeyoon':
+      return '안재윤';
+    default:
+      return '';
+  }
+};
diff --git a/src/hook/useUserInfo.ts b/src/hook/useUserInfo.ts
@@ -0,0 +1,24 @@
+// GET_USER_BY_NAME
+
+import { useSuspenseQuery } from '@apollo/client';
+import { usePathname } from 'next/navigation';
+import { GET_USER_BY_NAME } from '@/gql/queries/user';
+import { getUserNameWithURL } from '@/helper/getUserNameWithURL';
+import {
+  GetUserByNameQuery,
+  GetUserByNameQueryVariables,
+} from '@/types/graphql';
+
+export const useUserInfo = () => {
+  const pathname = usePathname();
+  const { data } = useSuspenseQuery<
+    GetUserByNameQuery,
+    GetUserByNameQueryVariables
+  >(GET_USER_BY_NAME, {
+    variables: {
+      name: getUserNameWithURL(pathname),
+    },
+  });
+
+  return data.getUserByName;
+};
diff --git a/src/types/graphql.d.ts b/src/types/graphql.d.ts
@@ -58,6 +58,19 @@ export type ContactTable = {
   visible_status: Scalars['String']['output'];
 };
 
+export type HistoryImpactTable = {
+  __typename?: 'HistoryImpactTable';
+  after: Scalars['String']['output'];
+  before: Scalars['String']['output'];
+  content?: Maybe<Scalars['String']['output']>;
+  created_at: Scalars['String']['output'];
+  history_item_id: Scalars['Float']['output'];
+  id: Scalars['ID']['output'];
+  sort_order: Scalars['Float']['output'];
+  updated_at: Scalars['String']['output'];
+  visible_status: Scalars['String']['output'];
+};
+
 export type HistoryItemTable = {
   __typename?: 'HistoryItemTable';
   content?: Maybe<Scalars['String']['output']>;
@@ -66,6 +79,7 @@ export type HistoryItemTable = {
   end_date?: Maybe<Scalars['String']['output']>;
   history_id: Scalars['Float']['output'];
   id: Scalars['ID']['output'];
+  impacts: Array<HistoryImpactTable>;
   position?: Maybe<Scalars['String']['output']>;
   sort_order: Scalars['Float']['output'];
   start_date?: Maybe<Scalars['String']['output']>;
@@ -158,6 +172,9 @@ export type Query = {
   getHistoriesByCategoryId: Array<HistoryTable>;
   getHistoriesByTitle: Array<HistoryTable>;
   getHistoryById: HistoryTable;
+  getHistoryImpact: Array<HistoryImpactTable>;
+  getHistoryImpactByHistoryItemId: Array<HistoryImpactTable>;
+  getHistoryImpactById: HistoryImpactTable;
   getHistoryItem: Array<HistoryItemTable>;
   getHistoryItemByHistoryId: Array<HistoryItemTable>;
   getHistoryItemById: HistoryItemTable;
@@ -233,6 +250,14 @@ export type QueryGetHistoryByIdArgs = {
   id: Scalars['Float']['input'];
 };
 
+export type QueryGetHistoryImpactByHistoryItemIdArgs = {
+  history_item_id: Scalars['Float']['input'];
+};
+
+export type QueryGetHistoryImpactByIdArgs = {
+  id: Scalars['Float']['input'];
+};
+
 export type QueryGetHistoryItemByHistoryIdArgs = {
   history_id: Scalars['Float']['input'];
 };
@@ -442,6 +467,15 @@ export type GetHistoryItemByHistoryIdQuery = {
     start_date?: string | null;
     end_date?: string | null;
     visible_status: string;
+    impacts: Array<{
+      __typename?: 'HistoryImpactTable';
+      id: string;
+      sort_order: number;
+      before: string;
+      after: string;
+      content?: string | null;
+      visible_status: string;
+    }>;
   }>;
 };