[Feature/BAR-244] 끄적이는 페이지 메모 작성시 하단으로 스크롤 이동 및 툴팁 적용 (#76)

* style(global): wordBreak 속성 값 변경 * feat(domain/저장하는): folder 쿼리스트링이 없는 경우, 현재 폴더 위치 표시 * feat(domain/끄적이는): 메모 작성시 스크롤 하단으로 이동 * fix(domain/끄적이는): 히스토리 카드 오래된 순으로 정렬 * refactor: TooltipButton 컴포넌트 적용 * refactor: 공통 Card 컴포넌트 적용 * style(Dropdown): scroll 제거 * style(Tooltip): 화살표 외곽 투명색으로 변경 * style(Folder): padding 값 수정 * style(domain/끄적이는): input maxWidth 수정 * fix(TooltipButton): 중복 button 태그 제거 * refactor(usePosition): useLayoutEffect 적용
YAPP-Github · Feb 21, 2024 · 7c276fc · 7c276fc
1 parent 5e1f243
commit 7c276fc
Show file tree

Hide file tree

Showing 25 changed files with 206 additions and 148 deletions.
diff --git a/pages/main/index.tsx b/pages/main/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import WriteInput from '@components/Input/WriteInput';
 import Layout from '@components/Layout';
@@ -18,19 +18,33 @@ import { COLORS } from '@styles/tokens';
 const MainPage = () => {
   useGetMyProfile();
 
+  const writeContentRef = useRef<HTMLDivElement>(null);
   const writeInput = useInput({ id: 'write-input' });
   const { todayMemos, history } = useGetWriteHistory();
   const { mutate: submitTemporalMemo } = useCreateTemporalMemo();
   const { data: memoFolders } = useGetMemoFolders();
 
   const [selectedTab, setSelectedTab] = useState('끄적이는');
 
+  useEffect(() => {
+    handleScroll();
+  }, [todayMemos]);
+
+  const handleScroll = () => {
+    if (writeContentRef.current) {
+      writeContentRef.current.scrollTop = writeContentRef.current.scrollHeight;
+    }
+  };
+
   const handleTabSelect = (selectedTab: string) => {
     setSelectedTab(selectedTab);
   };
 
   const handleSubmit = () => {
     submitTemporalMemo(writeInput.value);
+    writeInput.reset();
+
+    handleScroll();
   };
 
   const backgroundColor =
@@ -41,7 +55,7 @@ const MainPage = () => {
       <MainPageTab
         write={
           <div className={styles.container}>
-            <div className={styles.content}>
+            <div ref={writeContentRef} className={styles.content}>
               <WriteGuide />
               <TemporalMemoHistoryTable
                 data={history}

diff --git a/src/components/Button/components/TooltipButton/index.tsx b/src/components/Button/components/TooltipButton/index.tsx
@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+
+import Icon from '@components/Icon';
+import Tooltip from '@components/Tooltip';
+import { type Icons } from '@constants/icon';
+import { COLORS } from '@styles/tokens';
+
+import * as styles from './style.css';
+
+interface TooltipButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  isActive?: boolean;
+  icon?: Icons;
+  content: string;
+}
+
+const TooltipButton = ({
+  children,
+  isActive = false,
+  icon,
+  content,
+  ...props
+}: PropsWithChildren<TooltipButtonProps>) => {
+  return (
+    <Tooltip placement="top-center">
+      <Tooltip.Trigger {...props}>
+        {icon ? (
+          <Icon
+            icon={icon}
+            className={styles.hover}
+            color={isActive ? COLORS['Blue/Default'] : COLORS['Grey/300']}
+          />
+        ) : (
+          <>{children}</>
+        )}
+      </Tooltip.Trigger>
+      <Tooltip.Content>{content}</Tooltip.Content>
+    </Tooltip>
+  );
+};
+
+export default TooltipButton;
diff --git a/src/components/Button/components/TooltipButton/style.css.ts b/src/components/Button/components/TooltipButton/style.css.ts
@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+import { COLORS } from '@styles/tokens';
+
+export const hover = style({
+  transition: 'fill 100ms ease-in-out',
+
+  ':hover': {
+    fill: COLORS['Grey/600'],
+  },
+});
diff --git a/src/components/Card/style.css.ts b/src/components/Card/style.css.ts
@@ -57,11 +57,11 @@ export const menu = style({
 export const header = style([
   sprinkles({ typography: '15/Title/Medium' }),
   {
+    position: 'relative',
     display: 'flex',
     gap: '8px',
     color: COLORS['Grey/400'],
     wordBreak: 'keep-all',
-    position: 'relative',
   },
 ]);
 

diff --git a/src/components/Dropdown/FolderDropdown/index.tsx b/src/components/Dropdown/FolderDropdown/index.tsx
@@ -1,5 +1,5 @@
 import { type Folder } from '@api/memoFolder/types';
-import Button from '@components/Button';
+import TooltipButton from '@components/Button/components/TooltipButton';
 import Dropdown from '@components/Dropdown';
 import Icon from '@components/Icon';
 import useGetMyProfile from '@queries/useGetMyProfile';
@@ -12,7 +12,7 @@ interface FolderDropdownProps {
   isArchived: boolean;
   memoFolders: Folder[];
   onClickFolder: (id: Folder['id']) => void;
-  onClickBookmark: () => void;
+  onClickBookmark?: () => void;
 }
 
 const FolderDropdown = ({
@@ -27,20 +27,25 @@ const FolderDropdown = ({
 
   if (isArchived) {
     return (
-      <Button onClick={onClickBookmark}>
-        <Icon icon="bookmark" color={COLORS['Blue/Default']} />
-      </Button>
+      <>
+        {onClickBookmark ? (
+          <TooltipButton
+            isActive
+            icon="bookmark"
+            content="저장 해제"
+            onClick={onClickBookmark}
+          />
+        ) : (
+          <Icon icon="bookmark" color={COLORS['Blue/Default']} />
+        )}
+      </>
     );
   }
 
   return (
     <Dropdown size="medium" placement="bottom-center">
       <Dropdown.Trigger>
-        <Icon
-          icon="bookmark"
-          className={styles.hover}
-          color={COLORS['Grey/300']}
-        />
+        <TooltipButton icon="bookmark" content="저장" />
       </Dropdown.Trigger>
       <Dropdown.List>
         {memoFolders.map(({ id, name }) => (
@@ -65,3 +70,5 @@ const FolderDropdown = ({
 };
 
 export default FolderDropdown;
+
+export type FolderDropdownType = Parameters<typeof FolderDropdown>[0];
diff --git a/src/components/Dropdown/FolderDropdown/style.css.ts b/src/components/Dropdown/FolderDropdown/style.css.ts
@@ -35,10 +35,3 @@ export const icon = style({
   position: 'absolute',
   marginTop: '2px',
 });
-
-export const hover = style({
-  transition: 'fill 100ms ease-in-out',
-  ':hover': {
-    fill: COLORS['Grey/600'],
-  },
-});
diff --git a/src/components/Dropdown/MenuDropdown/index.tsx b/src/components/Dropdown/MenuDropdown/index.tsx
@@ -1,5 +1,4 @@
-import Icon from '@components/Icon';
-import { COLORS } from '@styles/tokens';
+import TooltipButton from '@components/Button/components/TooltipButton';
 
 import Dropdown from '..';
 
@@ -12,7 +11,7 @@ const MenuDropdown = ({ onEdit, onDelete }: MenuDropdownProps) => {
   return (
     <Dropdown size="small" placement="bottom-right">
       <Dropdown.Trigger>
-        <Icon icon="menu" color={COLORS['Grey/300']} />
+        <TooltipButton icon="menu" content="더보기" />
       </Dropdown.Trigger>
       <Dropdown.List>
         {onEdit && <Dropdown.Item onClick={onEdit}>수정하기</Dropdown.Item>}

diff --git a/src/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts
@@ -22,8 +22,6 @@ 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)',

diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts
@@ -11,7 +11,6 @@ export const wrapper = style({
 export const trigger = style({
   width: 'fit-content',
   height: 'fit-content',
-  padding: '4px',
 });
 
 export const top = createVar();
@@ -47,7 +46,7 @@ export const content = recipe({
           position: 'absolute',
           left: '50%',
           transform: 'translateX(-50%)',
-          border: `6px solid ${COLORS['Grey/White']}`,
+          border: `6px solid transparent`,
         },
       },
     },

diff --git a/src/domain/끄적이는/components/Card/History/index.tsx b/src/domain/끄적이는/components/Card/History/index.tsx
@@ -2,17 +2,16 @@ import dayjs from 'dayjs';
 
 import { type Folder } from '@api/memoFolder/types';
 import Button from '@components/Button';
+import TooltipButton from '@components/Button/components/TooltipButton';
 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';
-import { COLORS } from '@styles/tokens';
 
 import EditInput from '../../EditInput';
 import * as styles from './style.css';
@@ -52,34 +51,31 @@ const WriteHistoryCard = ({
     });
   };
 
-  // TODO 밸리데이션 추가
   const handleEditCompleteClick = () => {
-    updateTemporalMemo({ id: id, content: editedInputProps.value });
+    updateTemporalMemo({ id, content: editedInputProps.value });
     setTimeout(() => onEditCompleteClick(), 0);
   };
 
   const handleFolderClick = (memoFolderId: Folder['id']) => {
     saveTemporalMemo({ temporalMemoId: id, memoFolderId });
   };
 
-  const handleBookmarkClick = () => {};
-
   if (isEditMode) {
     return (
-      <li className={styles.container}>
-        <div className={styles.header}>
-          <p className={styles.date}>
-            {dayjs(createdAt).locale('ko').format('a h:mm')}
-          </p>
-          <button
+      <Card color="grey">
+        <Card.Header>
+          {dayjs(createdAt).locale('ko').format('a h:mm')}
+          <Button
+            className={styles.editCompleteButton}
             onClick={handleEditCompleteClick}
-            className={styles.editCompleteBtn}
           >
             완료
-          </button>
-        </div>
-        <EditInput inputProps={editedInputProps} />
-      </li>
+          </Button>
+        </Card.Header>
+        <Card.Body>
+          <EditInput inputProps={editedInputProps} />
+        </Card.Body>
+      </Card>
     );
   }
 
@@ -89,14 +85,11 @@ const WriteHistoryCard = ({
         {dayjs(createdAt).locale('ko').format('a h:mm')}
       </Card.Header>
       <Card.Menu>
-        <Button onClick={handleCopyClick}>
-          <Icon icon="copy" color={COLORS['Grey/300']} />
-        </Button>
+        <TooltipButton icon="copy" content="복사" onClick={handleCopyClick} />
         <FolderDropdown
           isArchived={isArchived}
           memoFolders={memoFolders}
           onClickFolder={handleFolderClick}
-          onClickBookmark={handleBookmarkClick}
         />
         <MenuDropdown
           onEdit={onEditClick}

diff --git a/src/domain/끄적이는/components/Card/History/style.css.ts b/src/domain/끄적이는/components/Card/History/style.css.ts
@@ -45,15 +45,20 @@ export const editTextCurrentCount = style({
   fontWeight: '700',
 });
 
-export const editCompleteBtn = style([
-  sprinkles({
-    typography: '15/Body/Medium',
-  }),
+export const editCompleteButton = style([
+  sprinkles({ typography: '13/Title/Semibold' }),
   {
-    position: 'absolute',
-    top: '20px',
-    right: '32px',
     color: COLORS['Grey/700'],
+    marginLeft: 'auto',
+    position: 'absolute',
+    top: '-6px',
+    right: 0,
+    padding: '6px 12px',
+    borderRadius: '6px',
+
+    ':hover': {
+      backgroundColor: COLORS['Grey/200'],
+    },
   },
 ]);
 
@@ -90,12 +95,3 @@ export const value = style([
     letterSpacing: '-0.2px',
   },
 ]);
-
-export const icon = style({
-  transition: 'fill 100ms ease-in-out',
-  fill: COLORS['Grey/300'],
-
-  ':hover': {
-    fill: COLORS['Grey/900'],
-  },
-});