Merge pull request #85 from sundayTen:feat/click-dashboard

feat: 대시보드 투두리스트 업데이트 쿼리 추가

components/dashboard/aside/InitiativeList/InitiativeItem/index.tsx

@@ -1,21 +1,29 @@
 import CheckBox from '@components/common/checkbox';
 import Radio from '@components/common/radio';
 import Text from '@components/common/text';
+import { ID } from '@type/common';
 import { INITIATIVE_DETAIL } from '@type/initiative';
 import { getElapsedTime } from '@utils/date';
 import React, { useState } from 'react';
 import styles from './InitiativeItem.module.scss';
 
-const InitiativeItem = ({ item }: { item: INITIATIVE_DETAIL }) => {
-  const { dueDate, title, goalMetrics, currentMetrics } = item;
+const InitiativeItem = ({
+  item,
+  onClickItem,
+}: {
+  item: INITIATIVE_DETAIL;
+  onClickItem: (initiativeId: ID) => void;
+}) => {
+  const { id, dueDate, title, goalMetrics, currentMetrics } = item;
   const [isChecked, setIsChecked] = useState(false);
 
-  const onClickItem = () => {
+  const onClick = () => {
+    onClickItem(id);
     setIsChecked(!isChecked);
   };
 
   return (
-    <div className={styles.root} onClick={onClickItem}>
+    <div className={styles.root} onClick={onClick}>
       <div className={styles.titleContainer}>
         <Radio status="checked" />
         <Text variant="LABEL">{title}</Text>

components/dashboard/aside/InitiativeList/index.tsx

@@ -1,17 +1,24 @@
+import { ID } from '@type/common';
 import { INITIATIVE_DETAIL } from '@type/initiative';
 import React from 'react';
 import InitiativeItem from './InitiativeItem';
 import styles from './InitiativeList.module.scss';
 
 const InitiativeList = ({
   initiatives,
+  onClickItem,
 }: {
   initiatives: INITIATIVE_DETAIL[];
+  onClickItem: (initiativeId: ID) => void;
 }) => {
   return (
     <div className={styles.root}>
       {initiatives.map((initiative) => (
-        <InitiativeItem item={initiative} key={initiative.id} />
+        <InitiativeItem
+          item={initiative}
+          key={initiative.id}
+          onClickItem={onClickItem}
+        />
       ))}
     </div>
   );

components/dashboard/aside/KeyResultList/KeyResultItem/index.tsx

@@ -1,5 +1,8 @@
+import { updateInitiativeDone } from '@api/initiatives';
 import ToggleArrow from '@components/common/toggleArrow';
 import CountBall from '@components/goal-management/KeyResultsList/KeyResultsParentItem/CountBall';
+import { useMutation } from '@tanstack/react-query';
+import { ID } from '@type/common';
 import { KEY_RESULT_DETAIL } from '@type/keyResult';
 import React, { useState } from 'react';
 import InitiativeList from '../../InitiativeList';
@@ -11,11 +14,18 @@ interface KeyResultItemProps {
 
 const KeyResultItem = ({ keyResultItem }: KeyResultItemProps) => {
   const [isOpened, setIsOpened] = useState(false);
+  const { mutateAsync } = useMutation(updateInitiativeDone, {});
 
   const onClickItem = () => {
     setIsOpened(!isOpened);
   };
 
+  const onClickInitiative = async (initiativeId: ID) => {
+    try {
+      await mutateAsync(initiativeId);
+    } catch (error) {}
+  };
+
   return (
     <>
       <div className={styles.root} onClick={onClickItem}>
@@ -30,7 +40,10 @@ const KeyResultItem = ({ keyResultItem }: KeyResultItemProps) => {
         </div>
       </div>
       {isOpened && keyResultItem.initiatives.length > 0 && (
-        <InitiativeList initiatives={keyResultItem.initiatives} />
+        <InitiativeList
+          initiatives={keyResultItem.initiatives}
+          onClickItem={onClickInitiative}
+        />
       )}
     </>
   );

components/dashboard/aside/KeyResultList/useGenerateKeyResultsByPeriod.ts

@@ -1,6 +1,6 @@
+import { useEffect, useState } from 'react';
 import { KEY_RESULT_DETAIL } from '@type/keyResult';
-import { OKR, OKR_TYPE } from '@type/okr';
-import React, { useEffect, useState } from 'react';
+import { OKR_TYPE } from '@type/okr';
 
 const useCreateKeyResultsByPeriod = (okr?: OKR_TYPE[]) => {
   const [keyResultsByOkr, setKeyResultsByOkr] = useState<KEY_RESULT_DETAIL[]>(

components/goal-management/keyResultDetail/index.tsx

@@ -7,11 +7,10 @@ import KeyResultDetailInitiatives from './initiatives';
 import { useOverlay } from '@toss/use-overlay';
 import DropKeyResultModal from '@components/shared/dropKeyResultModal';
 import { ID } from '@type/common';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import goalManagementStore from '@store/goal-management';
-import { KEY_RESULT, OKR } from '@api/path';
+import { OKR } from '@api/path';
 import { generatePeriodStartEndDate } from '../KeyResultsList/useFetchKeyResultsWithPeriod';
-import { fetchKeyResult } from '@api/keyResult';
 import CreateInitiative from '@components/shared/createInitiative';
 import { KEY_RESULT_DETAIL } from '@type/keyResult';