[Feature/BAR-243] 끄적이는 페이지 상단 탭 툴팁 노출 및 폴더 기능 추가 (#73)

* feat: 상단 탭 툴팁 노출 * style(domain/끄적이는): 레이아웃 수정 * feat(domain/끄적이는): 히스토리 메모의 폴더 저장 기능 추가 * refactor(domain/참고하는): 공통 컴포넌트 FolderDropdown 적용 * feat(domain/끄적이는): 오늘 메모의 폴더 저장 기능 추가 * refactor(domain/끄적이는): 공통 컴포넌트 Card 적용 * feat(domain/저장하는): 기본 폴더 구분 * style(SpellCheckNotice): 수정 내용이 없는 경우 marginTop 추가
YAPP-Github · Feb 19, 2024 · 8fb9b58 · 8fb9b58
1 parent 99530f2
commit 8fb9b58
Show file tree

Hide file tree

Showing 27 changed files with 358 additions and 282 deletions.
diff --git a/pages/main/index.tsx b/pages/main/index.tsx
@@ -11,6 +11,7 @@ import useGetWriteHistory from '@domain/끄적이는/queries/useGetHistory';
 import * as styles from '@domain/끄적이는/style.css';
 import 참고하는TabContent from '@domain/참고하는/components';
 import { useInput } from '@hooks/useInput';
+import useGetMemoFolders from '@queries/useGetMemoFolders';
 import useGetMyProfile from '@queries/useGetMyProfile';
 import { COLORS } from '@styles/tokens';
 
@@ -20,13 +21,18 @@ const MainPage = () => {
   const writeInput = useInput({ id: 'write-input' });
   const { todayMemos, history } = useGetWriteHistory();
   const { mutate: submitTemporalMemo } = useCreateTemporalMemo();
+  const { data: memoFolders } = useGetMemoFolders();
 
   const [selectedTab, setSelectedTab] = useState('끄적이는');
 
   const handleTabSelect = (selectedTab: string) => {
     setSelectedTab(selectedTab);
   };
 
+  const handleSubmit = () => {
+    submitTemporalMemo(writeInput.value);
+  };
+
   const backgroundColor =
     selectedTab === '참고하는' ? COLORS['Grey/100'] : undefined;
 
@@ -37,13 +43,16 @@ const MainPage = () => {
           <div className={styles.container}>
             <div className={styles.content}>
               <WriteGuide />
-              <TemporalMemoHistoryTable data={history} />
-              <TodayTemoralMemos memos={todayMemos[0]?.temporalMemos} />
+              <TemporalMemoHistoryTable
+                data={history}
+                memoFolders={memoFolders}
+              />
+              <TodayTemoralMemos
+                memos={todayMemos[0]?.temporalMemos}
+                memoFolders={memoFolders}
+              />
               <div className={styles.inputWrapper}>
-                <WriteInput
-                  inputProps={writeInput}
-                  onSubmit={() => submitTemporalMemo(writeInput.value)}
-                />
+                <WriteInput inputProps={writeInput} onSubmit={handleSubmit} />
               </div>
             </div>
           </div>

diff --git a/src/components/Dropdown/FolderDropdown/index.tsx b/src/components/Dropdown/FolderDropdown/index.tsx
@@ -0,0 +1,67 @@
+import { type Folder } from '@api/memoFolder/types';
+import Button from '@components/Button';
+import Dropdown from '@components/Dropdown';
+import Icon from '@components/Icon';
+import useGetMyProfile from '@queries/useGetMyProfile';
+import { useModalStore } from '@stores/modal';
+import { COLORS } from '@styles/tokens';
+
+import * as styles from './style.css';
+
+interface FolderDropdownProps {
+  isArchived: boolean;
+  memoFolders: Folder[];
+  onClickFolder: (id: Folder['id']) => void;
+  onClickBookmark: () => void;
+}
+
+const FolderDropdown = ({
+  isArchived,
+  memoFolders,
+  onClickFolder,
+  onClickBookmark,
+}: FolderDropdownProps) => {
+  const { openModal } = useModalStore();
+
+  const { data } = useGetMyProfile();
+
+  if (isArchived) {
+    return (
+      <Button onClick={onClickBookmark}>
+        <Icon icon="bookmark" color={COLORS['Blue/Default']} />
+      </Button>
+    );
+  }
+
+  return (
+    <Dropdown size="medium" placement="bottom-center">
+      <Dropdown.Trigger>
+        <Icon
+          icon="bookmark"
+          className={styles.hover}
+          color={COLORS['Grey/300']}
+        />
+      </Dropdown.Trigger>
+      <Dropdown.List>
+        {memoFolders.map(({ id, name }) => (
+          <Dropdown.Item key={id} onClick={() => onClickFolder(id)}>
+            {name === '기본' ? (
+              <span>
+                {data?.nickname}님의 폴더
+                <span className={styles.badge}>기본</span>
+              </span>
+            ) : (
+              <span>{name}</span>
+            )}
+          </Dropdown.Item>
+        ))}
+        <Dropdown.Item onClick={() => openModal('makeFolder')}>
+          <Icon icon="add" width={20} height={20} />
+          <span className={styles.iconMediumText}>새 폴더 만들기</span>
+        </Dropdown.Item>
+      </Dropdown.List>
+    </Dropdown>
+  );
+};
+
+export default FolderDropdown;
diff --git a/...omain/참고하는/components/FolderDialog.css.ts → ...ents/Dropdown/FolderDropdown/style.css.ts b/...omain/참고하는/components/FolderDialog.css.ts → ...ents/Dropdown/FolderDropdown/style.css.ts
@@ -27,7 +27,7 @@ export const iconMediumText = style([
   }),
   {
     color: COLORS['Grey/400'],
-    marginLeft: '28px',
+    marginLeft: '4px',
   },
 ]);
 
@@ -42,10 +42,3 @@ export const hover = style({
     fill: COLORS['Grey/600'],
   },
 });
-
-export const hoverBlue = style({
-  transition: 'fill 100ms ease-in-out',
-  ':hover': {
-    fill: COLORS['Blue/Default'],
-  },
-});
diff --git a/src/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts
@@ -22,11 +22,13 @@ export const menuList = recipe({
     position: 'absolute',
     top,
     left,
+    maxHeight: '136px',
+    overflowY: 'scroll',
     marginTop: '4px',
     borderRadius: '12px',
     boxShadow: '0px 8px 15px 0px rgba(28, 28, 28, 0.08)',
     backgroundColor: COLORS['Grey/White'],
-    zIndex: 50,
+    zIndex: 80,
   },
   variants: {
     size: {

diff --git a/src/components/Layout/MainPageTab.tsx b/src/components/Layout/MainPageTab.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 
 import Tabs from '@components/Tabs';
+import Tooltip from '@components/Tooltip';
 
 import * as styles from './style.css';
 
@@ -25,18 +26,28 @@ const MainPageTab = ({
     >
       <div className={styles.tab}>
         <Tabs.List>
-          <Tabs.Trigger
-            value="끄적이는"
-            icon={{ default: 'pencilDefault', active: 'pencilActive' }}
-          >
-            끄적이는
-          </Tabs.Trigger>
-          <Tabs.Trigger
-            value="참고하는"
-            icon={{ default: 'templateDefault', active: 'templateActive' }}
-          >
-            참고하는
-          </Tabs.Trigger>
+          <Tooltip hasArrow>
+            <Tooltip.Trigger>
+              <Tabs.Trigger
+                value="끄적이는"
+                icon={{ default: 'pencilDefault', active: 'pencilActive' }}
+              >
+                끄적이는
+              </Tabs.Trigger>
+            </Tooltip.Trigger>
+            <Tooltip.Content>문장을 끄적이고 검사해봐요</Tooltip.Content>
+          </Tooltip>
+          <Tooltip hasArrow>
+            <Tooltip.Trigger>
+              <Tabs.Trigger
+                value="참고하는"
+                icon={{ default: 'templateDefault', active: 'templateActive' }}
+              >
+                참고하는
+              </Tabs.Trigger>
+            </Tooltip.Trigger>
+            <Tooltip.Content>문장 템플릿을 찾아봐요</Tooltip.Content>
+          </Tooltip>
         </Tabs.List>
       </div>
 

diff --git a/src/components/Responsive/index.tsx b/src/components/Responsive/index.tsx
@@ -10,7 +10,7 @@ interface ResponsiveProps {
 const Responsive = ({
   children,
   className,
-  columnsCountBreakPoints = { 768: 2, 1080: 3 },
+  columnsCountBreakPoints = { 0: 1, 768: 2, 1080: 3 },
 }: PropsWithChildren<ResponsiveProps>) => {
   return (
     <ResponsiveMasonry

diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts
@@ -55,7 +55,7 @@ export const content = recipe({
 });
 
 export const topArrow = style({
-  marginTop: '10px',
+  marginTop: '13px',
 
   '::before': {
     top: '-11.5px',

diff --git a/src/domain/끄적이는/components/Card/History/index.tsx b/src/domain/끄적이는/components/Card/History/index.tsx
@@ -1,9 +1,14 @@
 import dayjs from 'dayjs';
 
+import { type Folder } from '@api/memoFolder/types';
+import Button from '@components/Button';
+import Card from '@components/Card';
+import FolderDropdown from '@components/Dropdown/FolderDropdown';
 import MenuDropdown from '@components/Dropdown/MenuDropdown';
 import Icon from '@components/Icon';
 import useDeleteTemporalMemo from '@domain/끄적이는/mutations/useDeleteTemporalMemo';
 import useEditTemporalMemo from '@domain/끄적이는/mutations/useEditTemporalMemo';
+import useSaveTemporalMemo from '@domain/끄적이는/mutations/useSaveTemporalMemo';
 import { type TemporalMemo } from '@domain/끄적이는/types';
 import { useInput } from '@hooks/useInput';
 import { useToastStore } from '@stores/toast';
@@ -14,6 +19,7 @@ import * as styles from './style.css';
 
 interface WriteHistoryCardProps extends TemporalMemo {
   isEditMode: boolean;
+  memoFolders: Folder[];
   onEditClick: VoidFunction;
   onEditCompleteClick: VoidFunction;
 }
@@ -22,13 +28,18 @@ const WriteHistoryCard = ({
   id,
   createdAt,
   content,
+  isArchived,
   isEditMode,
+  memoFolders,
   onEditClick,
   onEditCompleteClick,
 }: WriteHistoryCardProps) => {
   const { showToast } = useToastStore();
+
   const { mutate: updateTemporalMemo } = useEditTemporalMemo();
   const { mutate: deleteTemporalMemo } = useDeleteTemporalMemo();
+  const { mutate: saveTemporalMemo } = useSaveTemporalMemo();
+
   const editedInputProps = useInput({
     id: 'edit-input',
     defaultValue: content,
@@ -47,6 +58,12 @@ const WriteHistoryCard = ({
     setTimeout(() => onEditCompleteClick(), 0);
   };
 
+  const handleFolderClick = (memoFolderId: Folder['id']) => {
+    saveTemporalMemo({ temporalMemoId: id, memoFolderId });
+  };
+
+  const handleBookmarkClick = () => {};
+
   if (isEditMode) {
     return (
       <li className={styles.container}>
@@ -67,36 +84,27 @@ const WriteHistoryCard = ({
   }
 
   return (
-    <li className={styles.container}>
-      <div className={styles.header}>
-        <p className={styles.date}>
-          {dayjs(createdAt).locale('ko').format('a h:mm')}
-        </p>
-        <div className={styles.ctaWrapper}>
-          <button onClick={handleCopyClick}>
-            <Icon
-              icon={'copy'}
-              width={24}
-              height={24}
-              color={COLORS['Grey/300']}
-              className={styles.icon}
-            />
-          </button>
-          <button>
-            <Icon
-              icon="bookmark"
-              color={COLORS['Grey/300']}
-              className={styles.icon}
-            />
-          </button>
-          <MenuDropdown
-            onEdit={onEditClick}
-            onDelete={() => deleteTemporalMemo(id)}
-          />
-        </div>
-      </div>
-      <p className={styles.value}>{content}</p>
-    </li>
+    <Card color="grey">
+      <Card.Header>
+        {dayjs(createdAt).locale('ko').format('a h:mm')}
+      </Card.Header>
+      <Card.Menu>
+        <Button onClick={handleCopyClick}>
+          <Icon icon="copy" color={COLORS['Grey/300']} />
+        </Button>
+        <FolderDropdown
+          isArchived={isArchived}
+          memoFolders={memoFolders}
+          onClickFolder={handleFolderClick}
+          onClickBookmark={handleBookmarkClick}
+        />
+        <MenuDropdown
+          onEdit={onEditClick}
+          onDelete={() => deleteTemporalMemo(id)}
+        />
+      </Card.Menu>
+      <Card.Body>{content}</Card.Body>
+    </Card>
   );
 };