From 38a92bfcc552eabd3090bdf980e73fedef62711e Mon Sep 17 00:00:00 2001 From: cje Date: Wed, 21 Feb 2024 04:32:01 +0900 Subject: [PATCH 01/12] =?UTF-8?q?style(global):=20wordBreak=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EA=B0=92=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css.ts b/src/styles/global.css.ts index a1717d5..967893e 100644 --- a/src/styles/global.css.ts +++ b/src/styles/global.css.ts @@ -26,7 +26,7 @@ globalStyle('body', { }); globalStyle('h1, h2, h3, h4, h5, h6, p', { - wordBreak: 'keep-all', + wordBreak: 'break-word', whiteSpace: 'pre-wrap', }); From 567cd1b04e2844545168f04cd22b0f017aa8c292 Mon Sep 17 00:00:00 2001 From: cje Date: Wed, 21 Feb 2024 04:39:57 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat(domain/=EC=A0=80=EC=9E=A5=ED=95=98?= =?UTF-8?q?=EB=8A=94):=20folder=20=EC=BF=BC=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A7=81=EC=9D=B4=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0,?= =?UTF-8?q?=20=ED=98=84=EC=9E=AC=20=ED=8F=B4=EB=8D=94=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ArchiveFolder/index.tsx" | 1 + .../components/ArchiveFolder/style.css.ts" | 5 +++++ 2 files changed, 6 insertions(+) diff --git "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/index.tsx" "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/index.tsx" index cb28b5a..8180208 100644 --- "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/index.tsx" +++ "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/index.tsx" @@ -30,6 +30,7 @@ const ArchiveFolder = ({ folders }: ArchiveFolderProps) => { href={`${ROUTES.ARCHIVE}?folder=${folder.id}`} className={styles.userFolder({ isActive: + router.asPath === `${ROUTES.ARCHIVE}` || router.asPath === `${ROUTES.ARCHIVE}?folder=${folder.id}`, })} > diff --git "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/style.css.ts" "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/style.css.ts" index 4e4aca5..5369db4 100644 --- "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/style.css.ts" +++ "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchiveFolder/style.css.ts" @@ -22,6 +22,11 @@ export const userFolder = recipe({ gap: '5px', padding: '8px 20px', borderRadius: '8px', + transition: 'all 100ms ease-in-out', + + ':hover': { + backgroundColor: COLORS['Grey/100'], + }, }, ], variants: { From c48414192af37f4844e174254d5af95d1a98a976 Mon Sep 17 00:00:00 2001 From: cje Date: Wed, 21 Feb 2024 04:41:01 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat(domain/=EB=81=84=EC=A0=81=EC=9D=B4?= =?UTF-8?q?=EB=8A=94):=20=EB=A9=94=EB=AA=A8=20=EC=9E=91=EC=84=B1=EC=8B=9C?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=ED=95=98=EB=8B=A8=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/main/index.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/pages/main/index.tsx b/pages/main/index.tsx index be3868e..d077fcb 100644 --- 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,6 +18,7 @@ import { COLORS } from '@styles/tokens'; const MainPage = () => { useGetMyProfile(); + const writeContentRef = useRef(null); const writeInput = useInput({ id: 'write-input' }); const { todayMemos, history } = useGetWriteHistory(); const { mutate: submitTemporalMemo } = useCreateTemporalMemo(); @@ -25,12 +26,25 @@ const MainPage = () => { 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 = () => { -
+
Date: Thu, 22 Feb 2024 03:36:57 +0900 Subject: [PATCH 04/12] =?UTF-8?q?fix(domain/=EB=81=84=EC=A0=81=EC=9D=B4?= =?UTF-8?q?=EB=8A=94):=20=ED=9E=88=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=98=A4=EB=9E=98=EB=90=9C=20=EC=88=9C=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../queries/useGetHistory.ts" | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/queries/useGetHistory.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/queries/useGetHistory.ts" index a798b39..9788e05 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/queries/useGetHistory.ts" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/queries/useGetHistory.ts" @@ -34,11 +34,13 @@ const useGetWriteHistory = () => { dayjs(history.createdAt).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD'), ), - history: data.filter( - (history) => - dayjs(history.createdAt).format('YYYY-MM-DD') !== - dayjs().format('YYYY-MM-DD'), - ), + history: data + .filter( + (history) => + dayjs(history.createdAt).format('YYYY-MM-DD') !== + dayjs().format('YYYY-MM-DD'), + ) + .reverse(), }; }, }); From b8ea8fe45f208f25c7b2fb99924d52d21da425f5 Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 03:42:44 +0900 Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20TooltipButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Button/components/TooltipButton/index.tsx | 44 +++++++++++++++++++ .../components/TooltipButton/style.css.ts | 11 +++++ src/components/Card/style.css.ts | 2 +- .../Dropdown/FolderDropdown/index.tsx | 27 +++++++----- .../Dropdown/FolderDropdown/style.css.ts | 7 --- .../Dropdown/MenuDropdown/index.tsx | 5 +-- .../components/Card/History/style.css.ts" | 28 +++++------- .../components/Card/Today/index.tsx" | 26 ++++++----- .../components/Card/Today/style.css.ts" | 26 +++++------ .../components/SpellCheckCard/index.tsx" | 44 +++++++++++++------ .../components/SpellCheckCard/style.css.ts" | 9 ---- .../components/ArchivedCard/index.tsx" | 19 ++++---- ...55\225\230\353\212\224TemplateCard.css.ts" | 8 ---- ...0\355\225\230\353\212\224TemplateCard.tsx" | 12 +---- 14 files changed, 158 insertions(+), 110 deletions(-) create mode 100644 src/components/Button/components/TooltipButton/index.tsx create mode 100644 src/components/Button/components/TooltipButton/style.css.ts diff --git a/src/components/Button/components/TooltipButton/index.tsx b/src/components/Button/components/TooltipButton/index.tsx new file mode 100644 index 0000000..075cd36 --- /dev/null +++ b/src/components/Button/components/TooltipButton/index.tsx @@ -0,0 +1,44 @@ +import { type HTMLAttributes, type PropsWithChildren } from 'react'; + +import Button from '@components/Button'; +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 { + isActive?: boolean; + icon?: Icons; + content: string; +} + +const TooltipButton = ({ + children, + isActive = false, + icon, + content, + ...props +}: PropsWithChildren) => { + return ( + + + + + {content} + + ); +}; + +export default TooltipButton; diff --git a/src/components/Button/components/TooltipButton/style.css.ts b/src/components/Button/components/TooltipButton/style.css.ts new file mode 100644 index 0000000..452021a --- /dev/null +++ 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 index 348d507..d7fe30b 100644 --- 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 index 2ec4a12..b15d8b2 100644 --- 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 ( - + <> + {onClickBookmark ? ( + + ) : ( + + )} + ); } return ( - + {memoFolders.map(({ id, name }) => ( @@ -65,3 +70,5 @@ const FolderDropdown = ({ }; export default FolderDropdown; + +export type FolderDropdownType = Parameters[0]; diff --git a/src/components/Dropdown/FolderDropdown/style.css.ts b/src/components/Dropdown/FolderDropdown/style.css.ts index e486128..900459f 100644 --- 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 index 024df4d..6b7ec87 100644 --- 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 ( - + {onEdit && 수정하기} diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/style.css.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/style.css.ts" index 77b4fc2..7299a79 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/style.css.ts" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/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'], - }, -}); diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx" index 4012bb4..77ccda1 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx" @@ -4,10 +4,10 @@ import dayjs from 'dayjs'; import { type Folder } from '@api/memoFolder/types'; import { type SpellCheckResponse } from '@api/spell/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 SkeletonContent from '@components/Loading/Skeleton/SkeletonContent'; import useDeleteTemporalMemo from '@domain/끄적이는/mutations/useDeleteTemporalMemo'; import useEditTemporalMemo from '@domain/끄적이는/mutations/useEditTemporalMemo'; @@ -84,9 +84,9 @@ const WriteTodayCard = ({ {dayjs(memo.createdAt).locale('ko').format('a h:mm')} - + @@ -99,17 +99,16 @@ const WriteTodayCard = ({ {!isSuccessSpellCheck && ( - - + + {}} /> onEditClick(memo.id)} @@ -131,7 +130,12 @@ const WriteTodayCard = ({
)} {spellCheckResult && ( - + )} diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/style.css.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/style.css.ts" index 56dbe26..668f20b 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/style.css.ts" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/style.css.ts" @@ -3,15 +3,6 @@ import { style } from '@vanilla-extract/css'; import { sprinkles } from '@styles/sprinkles.css'; import { COLORS } from '@styles/tokens'; -export const icon = style({ - transition: 'fill 100ms ease-in-out', - fill: COLORS['Grey/300'], - - ':hover': { - fill: COLORS['Grey/900'], - }, -}); - export const skeletonCard = style({ marginTop: '18px', }); @@ -23,12 +14,19 @@ export const skeletonSuggestion = style({ backgroundColor: COLORS['Grey/White'], }); -export const editCompleteBtn = style([ - sprinkles({ typography: '16/Body/Medium' }), +export const editCompleteButton = style([ + sprinkles({ typography: '13/Title/Semibold' }), { - position: 'absolute', - top: '-2px', - right: '0', color: COLORS['Grey/700'], + marginLeft: 'auto', + position: 'absolute', + top: '-6px', + right: 0, + padding: '6px 12px', + borderRadius: '6px', + + ':hover': { + backgroundColor: COLORS['Grey/200'], + }, }, ]); diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/index.tsx" index c77e716..4f437c2 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/index.tsx" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/index.tsx" @@ -1,9 +1,12 @@ import { type PropsWithChildren } from 'react'; import { type SpellCheckResult } from '@api/spell/types'; -import Button from '@components/Button'; -import Icon from '@components/Icon'; +import TooltipButton from '@components/Button/components/TooltipButton'; +import FolderDropdown, { + type FolderDropdownType, +} from '@components/Dropdown/FolderDropdown'; import { type SPELLCHECK_TYPE } from '@constants/spellCheck'; +import { useToastStore } from '@stores/toast'; import SpellCheckNotice from '../SpellCheckNotice'; import SpellTypeBox from '../SpellTypeBox'; @@ -40,7 +43,7 @@ interface StyledSuggestionProps { type: keyof typeof SPELLCHECK_TYPE; } -interface SpellCheckCardProps { +interface SpellCheckCardProps extends FolderDropdownType { spellCheckResult: SpellCheckResult; } @@ -51,7 +54,21 @@ const StyledSuggestion = ({ return {children}; }; -const SpellCheckCard = ({ spellCheckResult }: SpellCheckCardProps) => { +const SpellCheckCard = ({ + spellCheckResult, + isArchived, + memoFolders, + onClickFolder, +}: SpellCheckCardProps) => { + const { showToast } = useToastStore(); + + const handleCopyClick = () => { + navigator.clipboard.writeText(spellCheckResult.correction); + showToast({ + message: '문장이 복사되었어요. 원하는 곳에 붙여넣기(Ctrl+V)를 해주세요!', + }); + }; + return ( <> {spellCheckResult.suggestions.length > 0 ? ( @@ -65,15 +82,16 @@ const SpellCheckCard = ({ spellCheckResult }: SpellCheckCardProps) => {
- - - + +
diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/style.css.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/style.css.ts" index c97fac1..b1361f8 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/style.css.ts" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Today/components/SpellCheckCard/style.css.ts" @@ -39,12 +39,3 @@ export const buttonGroup = style({ display: 'flex', gap: '16px', }); - -export const icon = style({ - transition: 'fill 100ms ease-in-out', - fill: COLORS['Grey/300'], - - ':hover': { - fill: COLORS['Grey/900'], - }, -}); diff --git "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchivedCard/index.tsx" "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchivedCard/index.tsx" index ed872ef..a8a9517 100644 --- "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchivedCard/index.tsx" +++ "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/ArchivedCard/index.tsx" @@ -2,9 +2,9 @@ import { useState } from 'react'; import Badge from '@components/Badge'; import Button from '@components/Button'; +import TooltipButton from '@components/Button/components/TooltipButton'; import Card from '@components/Card'; import MenuDropdown from '@components/Dropdown/MenuDropdown'; -import Icon from '@components/Icon'; import { CATEGORY_COLOR } from '@constants/config'; import EditInput from '@domain/끄적이는/components/EditInput'; import useDeleteArchives from '@domain/저장하는/mutations/useDeleteArchives'; @@ -12,7 +12,6 @@ import useUpdateArchives from '@domain/저장하는/mutations/useUpdateArchives' import { getNumToK } from '@domain/참고하는/utils'; import { useInput } from '@hooks/useInput'; import { useToastStore } from '@stores/toast'; -import { COLORS } from '@styles/tokens'; import { type ArchiveCard, type Folder } from '../../types'; import * as styles from './style.css'; @@ -60,9 +59,11 @@ const ArchivedCard = ({ folderId, card }: ArchivedCardProps) => { return ( - + handleCopyClick(card.content)} + /> @@ -101,9 +102,11 @@ const ArchivedCard = ({ folderId, card }: ArchivedCardProps) => { return ( - + handleCopyClick(card.content)} + /> setIsEditMode(true)} onDelete={handleDeleteClick} diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" index 94f93f0..004a97b 100644 --- "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" @@ -1,7 +1,6 @@ import { style } from '@vanilla-extract/css'; import { sprinkles } from '@styles/sprinkles.css'; -import { COLORS } from '@styles/tokens'; export const wrapper = style([ sprinkles({ @@ -16,10 +15,3 @@ export const wrapper = style([ padding: '28px 32px 20px', }, ]); - -export const hover = style({ - transition: 'fill 100ms ease-in-out', - ':hover': { - fill: COLORS['Grey/600'], - }, -}); diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" index cc38588..f7af29a 100644 --- "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" @@ -2,17 +2,15 @@ import { useQueryClient } from '@tanstack/react-query'; import { type Folder } from '@api/memoFolder/types'; import Badge from '@components/Badge'; -import Button from '@components/Button'; +import TooltipButton from '@components/Button/components/TooltipButton'; import Card from '@components/Card'; import FolderDropdown from '@components/Dropdown/FolderDropdown'; -import Icon from '@components/Icon'; import { CATEGORY_COLOR } from '@constants/config'; import * as styles from '@domain/참고하는/components/참고하는TemplateCard.css'; import { CATEGORY } from '@domain/참고하는/models'; import { type ReferContent } from '@domain/참고하는/types'; import { getNumToK } from '@domain/참고하는/utils'; import { useToastStore } from '@stores/toast'; -import { COLORS } from '@styles/tokens'; import useCopyTemplate from '../queries/useCopyTemplate'; import useDeleteTemplate from '../queries/useDeleteTemplate'; @@ -72,13 +70,7 @@ const 참고하는TemplateCard = ({ return ( - + Date: Thu, 22 Feb 2024 03:43:31 +0900 Subject: [PATCH 06/12] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20Card=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Card/History/index.tsx" | 35 ++++++++----------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/index.tsx" index b44b7db..0a392bd 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/History/index.tsx" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/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,9 +51,8 @@ const WriteHistoryCard = ({ }); }; - // TODO 밸리데이션 추가 const handleEditCompleteClick = () => { - updateTemporalMemo({ id: id, content: editedInputProps.value }); + updateTemporalMemo({ id, content: editedInputProps.value }); setTimeout(() => onEditCompleteClick(), 0); }; @@ -62,24 +60,22 @@ const WriteHistoryCard = ({ saveTemporalMemo({ temporalMemoId: id, memoFolderId }); }; - const handleBookmarkClick = () => {}; - if (isEditMode) { return ( -
  • -
    -

    - {dayjs(createdAt).locale('ko').format('a h:mm')} -

    - -
    - -
    • + +     + + + +     ); } @@ -89,14 +85,11 @@ const WriteHistoryCard = ({ {dayjs(createdAt).locale('ko').format('a h:mm')} - + Date: Thu, 22 Feb 2024 03:53:11 +0900 Subject: [PATCH 07/12] =?UTF-8?q?style(Dropdown):=20scroll=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dropdown/style.css.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts index c06f8c8..363ca11 100644 --- 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)', From 0d6c0051815ba4fbc16062ae3b2e0e7cfe4fc2d4 Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 03:53:49 +0900 Subject: [PATCH 08/12] =?UTF-8?q?style(Tooltip):=20=ED=99=94=EC=82=B4?= =?UTF-8?q?=ED=91=9C=20=EC=99=B8=EA=B3=BD=20=ED=88=AC=EB=AA=85=EC=83=89?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tooltip/style.css.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts index 46dbd4c..fa87947 100644 --- 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`, }, }, }, From bd2ab89f9379bb3ffa1002793d610b43a3a9a6a8 Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 03:56:02 +0900 Subject: [PATCH 09/12] =?UTF-8?q?style(Folder):=20padding=20=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Folder/style.css.ts" | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/Folder/style.css.ts" "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/Folder/style.css.ts" index 9366fc1..e43e0a0 100644 --- "a/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/Folder/style.css.ts" +++ "b/src/domain/\354\240\200\354\236\245\355\225\230\353\212\224/components/Folder/style.css.ts" @@ -13,9 +13,9 @@ export const folderButton = recipe({ width: '100%', display: 'flex', justifyContent: 'space-between', - padding: '8px 12px 8px 20px', borderRadius: '8px', transition: 'all 100ms ease-in-out', + paddingRight: '8px', ':hover': { backgroundColor: COLORS['Grey/100'], @@ -37,4 +37,5 @@ export const folderButton = recipe({ export const folderName = style({ display: 'inline-block', width: '100%', + padding: '11px 0 11px 20px', }); From 724f40af05b0284b52cc6a9d821a67182f1a73dd Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 03:58:41 +0900 Subject: [PATCH 10/12] =?UTF-8?q?style(domain/=EB=81=84=EC=A0=81=EC=9D=B4?= =?UTF-8?q?=EB=8A=94):=20input=20maxWidth=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style.css.ts" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/style.css.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/style.css.ts" index 4b01b23..59235b6 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/style.css.ts" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/style.css.ts" @@ -5,8 +5,8 @@ export const container = style({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', - marginBottom: '56px', padding: '0 40px', + marginBottom: '64px', }); export const content = style({ @@ -24,7 +24,7 @@ export const inputWrapper = style({ bottom: '56px', width: '100%', transform: 'translateX(-50%)', - maxWidth: '1140px', + maxWidth: '1120px', '@media': { 'screen and (max-width: 1200px)': { From 23e4e1cb79cb72083de256f87601e96177426f18 Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 04:07:44 +0900 Subject: [PATCH 11/12] =?UTF-8?q?fix(TooltipButton):=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=20button=20=ED=83=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Button/components/TooltipButton/index.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/Button/components/TooltipButton/index.tsx b/src/components/Button/components/TooltipButton/index.tsx index 075cd36..59da95b 100644 --- a/src/components/Button/components/TooltipButton/index.tsx +++ b/src/components/Button/components/TooltipButton/index.tsx @@ -1,6 +1,5 @@ import { type HTMLAttributes, type PropsWithChildren } from 'react'; -import Button from '@components/Button'; import Icon from '@components/Icon'; import Tooltip from '@components/Tooltip'; import { type Icons } from '@constants/icon'; @@ -23,18 +22,16 @@ const TooltipButton = ({ }: PropsWithChildren) => { return ( - - + + {icon ? ( + + ) : ( + <>{children} + )} {content} From 0dbc975d45b558cba32d77bae4dac2de77ef18e8 Mon Sep 17 00:00:00 2001 From: cje Date: Thu, 22 Feb 2024 04:08:16 +0900 Subject: [PATCH 12/12] =?UTF-8?q?refactor(usePosition):=20useLayoutEffect?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePosition.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/usePosition.ts b/src/hooks/usePosition.ts index c09a5b2..90f66b0 100644 --- a/src/hooks/usePosition.ts +++ b/src/hooks/usePosition.ts @@ -1,4 +1,4 @@ -import { type RefObject, useEffect, useRef, useState } from 'react'; +import { type RefObject, useLayoutEffect, useRef, useState } from 'react'; const POSITION = { top: 0, left: 0 }; @@ -28,7 +28,7 @@ const usePosition = < const [position, setPosition] = useState(POSITION); - useEffect(() => { + useLayoutEffect(() => { if (!triggerRef.current || !targetRef.current || !isOpen) { return; }