From 2b9fe9e1b201cab4fe7b31e985dcb81f979eafcb Mon Sep 17 00:00:00 2001 From: hojunin Date: Thu, 13 Jul 2023 14:23:04 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?= =?UTF-8?q?=ED=88=AC=EB=91=90=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=BF=BC=EB=A6=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InitiativeList/InitiativeItem/index.tsx | 16 ++++++++++++---- .../dashboard/aside/InitiativeList/index.tsx | 9 ++++++++- .../aside/KeyResultList/KeyResultItem/index.tsx | 15 ++++++++++++++- .../useGenerateKeyResultsByPeriod.ts | 4 ++-- .../goal-management/keyResultDetail/index.tsx | 5 ++--- 5 files changed, 38 insertions(+), 11 deletions(-) diff --git a/components/dashboard/aside/InitiativeList/InitiativeItem/index.tsx b/components/dashboard/aside/InitiativeList/InitiativeItem/index.tsx index e83c83a..00b9c28 100644 --- a/components/dashboard/aside/InitiativeList/InitiativeItem/index.tsx +++ b/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 ( -
+
{title} diff --git a/components/dashboard/aside/InitiativeList/index.tsx b/components/dashboard/aside/InitiativeList/index.tsx index 07f0113..0ee1dcb 100644 --- a/components/dashboard/aside/InitiativeList/index.tsx +++ b/components/dashboard/aside/InitiativeList/index.tsx @@ -1,3 +1,4 @@ +import { ID } from '@type/common'; import { INITIATIVE_DETAIL } from '@type/initiative'; import React from 'react'; import InitiativeItem from './InitiativeItem'; @@ -5,13 +6,19 @@ import styles from './InitiativeList.module.scss'; const InitiativeList = ({ initiatives, + onClickItem, }: { initiatives: INITIATIVE_DETAIL[]; + onClickItem: (initiativeId: ID) => void; }) => { return (
{initiatives.map((initiative) => ( - + ))}
); diff --git a/components/dashboard/aside/KeyResultList/KeyResultItem/index.tsx b/components/dashboard/aside/KeyResultList/KeyResultItem/index.tsx index 91a3e5a..fd4dbb6 100644 --- a/components/dashboard/aside/KeyResultList/KeyResultItem/index.tsx +++ b/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 ( <>
@@ -30,7 +40,10 @@ const KeyResultItem = ({ keyResultItem }: KeyResultItemProps) => {
{isOpened && keyResultItem.initiatives.length > 0 && ( - + )} ); diff --git a/components/dashboard/aside/KeyResultList/useGenerateKeyResultsByPeriod.ts b/components/dashboard/aside/KeyResultList/useGenerateKeyResultsByPeriod.ts index 6504b54..8e4f6dd 100644 --- a/components/dashboard/aside/KeyResultList/useGenerateKeyResultsByPeriod.ts +++ b/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( diff --git a/components/goal-management/keyResultDetail/index.tsx b/components/goal-management/keyResultDetail/index.tsx index e6bc435..f7cc1f8 100644 --- a/components/goal-management/keyResultDetail/index.tsx +++ b/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';