diff --git a/pages/main/index.tsx b/pages/main/index.tsx index be3868e0..d077fcbb 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 = () => { -
+
{ + isActive?: boolean; + icon?: Icons; + content: string; +} + +const TooltipButton = ({ + children, + isActive = false, + icon, + content, + ...props +}: PropsWithChildren) => { + return ( + + + {icon ? ( + + ) : ( + <>{children} + )} + + {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 00000000..452021a0 --- /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 348d5070..d7fe30ba 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 2ec4a123..b15d8b26 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 e486128f..900459fd 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 024df4de..6b7ec87a 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/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts index c06f8c83..363ca11b 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)', diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts index 46dbd4c7..fa879470 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`, }, }, }, 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 b44b7db6..0a392bdd 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')} - + {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 56dbe261..668f20b3 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 c77e7163..4f437c2a 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 c97fac19..b1361f8c 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/\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 a798b391..9788e05f 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(), }; }, }); 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 4b01b23e..59235b6d 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)': { 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 cb28b5a2..8180208c 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 4e4aca51..5369db4c 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: { 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 ed872efe..a8a9517d 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\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 9366fc1a..e43e0a0f 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', }); 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 94f93f03..004a97bb 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 cc385889..f7af29af 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 ( - + { + useLayoutEffect(() => { if (!triggerRef.current || !targetRef.current || !isOpen) { return; } diff --git a/src/styles/global.css.ts b/src/styles/global.css.ts index a1717d59..967893e4 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', });