리스트아이템 눌렀을 때 key-result 상세가 나오도록 수정

sundayTen · Jul 12, 2023 · f8843b5 · f8843b5
1 parent 9b7ab91
commit f8843b5
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 82 deletions.
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -4,8 +4,8 @@ import { fetchOkrYears } from '@api/okr';
 import { getObjectives } from '@api/objectives';
 
 const Page = async () => {
-  // const years = await fetchOkrYears();
-  // const objectiveList = await getObjectives(years?.[0]);
+  const years = await fetchOkrYears();
+  const objectiveList = await getObjectives(years?.[0]);
 
   return <DashBoard />;
 };

diff --git a/components/goal-management/KeyResultsList/KeyResultsParentItem/index.tsx b/components/goal-management/KeyResultsList/KeyResultsParentItem/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styles from './KeyResultsParentItem.module.scss';
 import KeyResultsListItem from '../KeyResultsListItem';
 import LabelsHeader from '../labelHeader';
@@ -10,6 +10,8 @@ import ToggleArrow from '@components/common/toggleArrow';
 import AddListItemButton from '../addListItemButton';
 import { KEY_RESULT_DETAIL } from '@type/keyResult';
 import { ID } from '@type/common';
+import { useOverlay } from '@toss/use-overlay';
+import KeyResultDetail from '@components/goal-management/keyResultDetail';
 
 interface KeyResultsParentItemProps {
   keyResultItem: KEY_RESULT_DETAIL;
@@ -24,6 +26,14 @@ const KeyResultsParentItem = ({
   onClick,
   onClickAddInitiative,
 }: KeyResultsParentItemProps) => {
+  const { open } = useOverlay();
+
+  const onClickInitiativeItem = () => {
+    open(({ exit }) => (
+      <KeyResultDetail keyResultId={keyResultItem.id} close={exit} />
+    ));
+  };
+
   return (
     <div className={styles.root}>
       <div className={styles.colorBlock} />
@@ -51,7 +61,7 @@ const KeyResultsParentItem = ({
             {keyResultItem.initiatives.map((initiative) => (
               <KeyResultsListItem
                 initiativeItem={initiative}
-                onClick={() => {}}
+                onClick={onClickInitiativeItem}
                 key={initiative.id}
               />
             ))}

diff --git a/components/goal-management/index.tsx b/components/goal-management/index.tsx
@@ -52,7 +52,6 @@ const GoalManagement = () => {
       <SuspenseComponent>
         <KeyResultsList />
       </SuspenseComponent>
-      <KeyResultDetail ref={detailRef} />
     </div>
   );
 };

diff --git a/components/goal-management/keyResultDetail/KeyResultDetail.module.scss b/components/goal-management/keyResultDetail/KeyResultDetail.module.scss
@@ -3,14 +3,7 @@
   top: 68px;
   height: calc(100vh - 68px);
   z-index: 999;
-
-  &.show {
-    animation: slideIn 0.3s ease-in-out;
-  }
-
-  &.close {
-    animation: slideOut 0.3s ease-in-out forwards;
-  }
+  animation: slideIn 0.3s ease-in-out;
 
   .content {
     @apply p-6;
@@ -25,12 +18,3 @@
     transform: translateX(0);
   }
 }
-
-@keyframes slideOut {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
diff --git a/components/goal-management/keyResultDetail/index.tsx b/components/goal-management/keyResultDetail/index.tsx
@@ -2,6 +2,7 @@ import OutsideClickDetector from '@components/common/outsideClickDetector';
 import React, {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useState,
 } from 'react';
@@ -12,70 +13,39 @@ import KeyResultDetailSummary from './summary';
 import KeyResultDetailInitiatives from './initiatives';
 import { useOverlay } from '@toss/use-overlay';
 import DropKeyResultModal from '@components/shared/dropKeyResultModal';
+import { ID } from '@type/common';
 
-interface KeyResultDetailProps {}
-export interface KeyResultDetailRef {
-  open: () => void;
+interface KeyResultDetailProps {
+  keyResultId: ID;
   close: () => void;
 }
+const KeyResultDetail = ({ keyResultId, close }: KeyResultDetailProps) => {
+  const { open: openModal } = useOverlay();
+
+  const dropKeyResult = () => {
+    openModal(({ exit }) => {
+      return <DropKeyResultModal close={exit} />;
+    });
+  };
+
+  return (
+    <OutsideClickDetector onOutsideClick={close}>
+      <aside className={styles.root}>
+        <KeyResultDetailHeader
+          status={'달성완료'}
+          onClickClose={close}
+          onClickDrop={dropKeyResult}
+          onClickWrite={close}
+        />
+        <div className={styles.content}>
+          <KeyResultDetailSummary />
+          <KeyResultDetailInitiatives />
+        </div>
+      </aside>
+    </OutsideClickDetector>
+  );
+};
 
-const KeyResultDetail = forwardRef<KeyResultDetailRef, KeyResultDetailProps>(
-  (props, ref) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const { open: openModal } = useOverlay();
-
-    const open = useCallback(() => {
-      setTimeout(() => {
-        setIsVisible(true);
-      }, 0);
-    }, []);
-
-    const close = useCallback(() => {
-      setIsVisible(false);
-    }, []);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        open,
-        close,
-      }),
-      [open, close],
-    );
-
-    const dropKeyResult = () => {
-      openModal(({ exit }) => {
-        return <DropKeyResultModal close={exit} />;
-      });
-    };
-
-    if (!isVisible) {
-      return <></>;
-    }
-
-    return (
-      <OutsideClickDetector onOutsideClick={close}>
-        <aside
-          className={cn(styles.root, {
-            [styles.show]: isVisible,
-            [styles.close]: !isVisible,
-          })}
-        >
-          <KeyResultDetailHeader
-            status={'달성완료'}
-            onClickClose={close}
-            onClickDrop={dropKeyResult}
-            onClickWrite={close}
-          />
-          <div className={styles.content}>
-            <KeyResultDetailSummary />
-            <KeyResultDetailInitiatives />
-          </div>
-        </aside>
-      </OutsideClickDetector>
-    );
-  },
-);
 export default KeyResultDetail;
 
 KeyResultDetail.displayName = 'KeyResultDetail';