[Fix] 인수인계 노트 클릭 가능하도록 변경

Team-Tiki · Jan 16, 2025 · 1b7e69c · 1b7e69c
1 parent f381634
commit 1b7e69c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 31 deletions.
diff --git a/apps/client/src/page/handover/HandoverPage.tsx b/apps/client/src/page/handover/HandoverPage.tsx
@@ -195,6 +195,7 @@ const HandoverPage = () => {
               isSelected={ids.includes(+data.noteId)}
               onSelect={() => handleItemClick(+data.noteId)}
               onNoteCloseClick={handleNoteCloseClick}
+              onClick={() => navigate(`/handover/${+data.noteId}`)}
             />
           ))}
         {isFetching && (

diff --git a/apps/client/src/page/handover/component/NoteItem/NoteItem.tsx b/apps/client/src/page/handover/component/NoteItem/NoteItem.tsx
@@ -1,14 +1,20 @@
 import { IcAvatar, IcClose } from '@tiki/icon';
 import { CheckBox, Divider, Flex, Tag, Text, theme } from '@tiki/ui';
 
-import { closeButtonStyle, containerStyle, profileStyle } from '@/page/handover/component/NoteItem/NoteItem.style';
+import {
+  closeButtonStyle,
+  containerStyle,
+  profileStyle,
+  wrapperStyle,
+} from '@/page/handover/component/NoteItem/NoteItem.style';
 import { NoteType } from '@/page/handover/type';
 
 interface NoteItemProps extends Omit<NoteType, 'lastUpdatedAt'> {
   canSelect: boolean;
   isSelected: boolean;
   onSelect: () => void;
   onNoteCloseClick: (ids: number[]) => void;
+  onClick: () => void;
 }
 
 const formattingDateToKorean = (date: string) => {
@@ -28,42 +34,51 @@ const NoteItem = ({
   isSelected,
   onSelect,
   onNoteCloseClick,
+  onClick,
 }: NoteItemProps) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+
+      onClick();
+    }
+  };
   return (
     <li>
-      <Flex styles={{ align: 'center', justify: 'left' }} css={containerStyle}>
-        <Flex styles={{ align: 'center' }}>
-          {canSelect && (
-            <CheckBox isChecked={isSelected} onChange={() => onSelect?.()} style={{ marginRight: '1.6rem' }} />
-          )}
-          <Text tag="body6" style={{ width: '26rem' }}>
-            {`${formattingDateToKorean(startDate)} - ${formattingDateToKorean(endDate)}`}
-          </Text>
-        </Flex>
+      <div css={wrapperStyle} onClick={onClick} role="button" tabIndex={0} onKeyDown={(e) => handleKeyDown(e)}>
+        <Flex styles={{ align: 'center', justify: 'left' }} css={containerStyle}>
+          <Flex styles={{ align: 'center' }}>
+            {canSelect && (
+              <CheckBox isChecked={isSelected} onChange={() => onSelect?.()} style={{ marginRight: '1.6rem' }} />
+            )}
+            <Text tag="body6" style={{ width: '26rem' }}>
+              {`${formattingDateToKorean(startDate)} - ${formattingDateToKorean(endDate)}`}
+            </Text>
+          </Flex>
 
-        <Text tag="body6" style={{ width: '34rem' }}>
-          {title}
-        </Text>
-        <Flex styles={{ align: 'center', gap: '0.4rem' }}>
-          <IcAvatar css={profileStyle} />
-          <Text tag="body6" style={{ width: '10.4rem' }}>
-            {author}
+          <Text tag="body6" style={{ width: '34rem' }}>
+            {title}
           </Text>
+          <Flex styles={{ align: 'center', gap: '0.4rem' }}>
+            <IcAvatar css={profileStyle} />
+            <Text tag="body6" style={{ width: '10.4rem' }}>
+              {author}
+            </Text>
+          </Flex>
+          <Flex styles={{ align: 'center', gap: complete ? '4.3rem' : '3.3rem' }}>
+            {complete ? (
+              <Tag variant="square" bgColor={theme.colors.key_400}>
+                작성 완료
+              </Tag>
+            ) : (
+              <Tag variant="square" bgColor={theme.colors.gray_300}>
+                작성 미완료
+              </Tag>
+            )}
+            <IcClose width={18} height={18} css={closeButtonStyle} onClick={() => onNoteCloseClick([noteId])} />
+          </Flex>
         </Flex>
-        <Flex styles={{ align: 'center', gap: complete ? '4.3rem' : '3.3rem' }}>
-          {complete ? (
-            <Tag variant="square" bgColor={theme.colors.key_400}>
-              작성 완료
-            </Tag>
-          ) : (
-            <Tag variant="square" bgColor={theme.colors.gray_300}>
-              작성 미완료
-            </Tag>
-          )}
-          <IcClose width={18} height={18} css={closeButtonStyle} onClick={() => onNoteCloseClick([noteId])} />
-        </Flex>
-      </Flex>
-
+      </div>
       <Divider color={theme.colors.gray_300} />
     </li>
   );