From e1fd12c51e061f8b0eaf998b7b235767259bcbed Mon Sep 17 00:00:00 2001 From: wonjin-dev Date: Wed, 14 Feb 2024 22:42:00 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=20=ED=94=8C=EB=A1=9C=EC=9A=B0=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Card/History/index.tsx" | 41 ++++++++++++++++++- .../components/Card/History/style.css.ts" | 7 ++++ .../components/History/Column/index.tsx" | 18 +++++++- .../components/History/index.tsx" | 15 ++++++- 4 files changed, 76 insertions(+), 5 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 875b597c..84c0428d 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" @@ -3,6 +3,7 @@ import dayjs from 'dayjs'; import Icon from '@components/Icon'; import useDeleteTemporalMemo from '@domain/끄적이는/mutations/useDeleteTemporalMemo'; import { type TemporalMemo } from '@domain/끄적이는/types'; +import { useInput } from '@hooks/useInput'; import useModal from '@hooks/useModal'; import { useToastStore } from '@stores/toast'; import { COLORS } from '@styles/tokens'; @@ -10,9 +11,26 @@ import { COLORS } from '@styles/tokens'; import SettingDialog from '../components/SettingDialog'; import * as styles from './style.css'; -const WriteHistoryCard = ({ id, createdAt, content }: TemporalMemo) => { +interface WriteHistoryCardProps extends TemporalMemo { + isEditMode: boolean; + onEditClick: VoidFunction; + onEditCompleteClick: VoidFunction; +} + +const WriteHistoryCard = ({ + id, + createdAt, + content, + isEditMode, + onEditClick, + onEditCompleteClick, +}: WriteHistoryCardProps) => { const { showToast } = useToastStore(); const { mutate: deleteTemporalMemo } = useDeleteTemporalMemo(); + const editedInputProps = useInput({ + id: 'edit-input', + defaultValue: content, + }); const { isOpen: settingModalOpen, @@ -27,6 +45,25 @@ const WriteHistoryCard = ({ id, createdAt, content }: TemporalMemo) => { }); }; + // TODO 밸리데이션 추가 + const handleEditCompleteClick = () => { + onEditCompleteClick(); + }; + + if (isEditMode) { + return ( +
  • +
    +

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

    + +
    + +
    • + ); + } + return (
  • @@ -66,7 +103,7 @@ const WriteHistoryCard = ({ id, createdAt, content }: TemporalMemo) => { {settingModalOpen && ( {}} + onEditClick={onEditClick} onDeleteClick={() => deleteTemporalMemo(id)} /> )} 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 95cf7c8e..bce43be8 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" @@ -11,6 +11,13 @@ export const container = style({ position: 'relative', }); +export const editInput = style({ + backgroundColor: 'white', + width: '100%', + padding: '12px 16px', + borderRadius: '8px', +}); + export const header = style({ display: 'flex', justifyContent: 'space-between', diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/Column/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/Column/index.tsx" index b03d75ea..1d89551a 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/Column/index.tsx" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/Column/index.tsx" @@ -5,9 +5,17 @@ import * as styles from './style.css'; interface ColumnProps { list: TemporalMemo[] | undefined; + editModeCardId: number | null; + resetEditModeCardId: VoidFunction; + onEditClick: (id: number) => void; } -const Column = ({ list }: ColumnProps) => { +const Column = ({ + list, + editModeCardId, + resetEditModeCardId, + onEditClick, +}: ColumnProps) => { if (!list) { return null; } @@ -15,7 +23,13 @@ const Column = ({ list }: ColumnProps) => { return (
      {list.map((el) => ( - + onEditClick(el.id)} + onEditCompleteClick={resetEditModeCardId} + /> ))}
    ); diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/index.tsx" index 45350bf0..5aad787e 100644 --- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/index.tsx" +++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/History/index.tsx" @@ -1,3 +1,4 @@ +import { useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; @@ -32,6 +33,8 @@ const parser = (arr: TemporalMemo[]): TemporalMemo[][] => { }; const TemporalMemoHistoryTable = ({ data }: TemporalMemoHistoryTableProps) => { + const [editModeCardId, setEditModeCardId] = useState(null); + return (
    {data.map((hisotry, i) => { @@ -50,7 +53,17 @@ const TemporalMemoHistoryTable = ({ data }: TemporalMemoHistoryTableProps) => {
    {parser(temporalMemos).map((list, i) => { - return ; + return ( + { + setEditModeCardId(id); + }} + resetEditModeCardId={() => setEditModeCardId(null)} + /> + ); })}
    From c09415dfb54293f376bb5aaab6d630c5887fbc5e Mon Sep 17 00:00:00 2001 From: wonjin-dev Date: Thu, 15 Feb 2024 00:25:10 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Card/History/index.tsx" | 72 ++++++++++++++++++- .../components/Card/History/style.css.ts" | 41 ++++++++++- 2 files changed, 110 insertions(+), 3 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 84c0428d..442b5987 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" @@ -1,3 +1,4 @@ +import { type ChangeEvent, type KeyboardEvent, useRef, useState } from 'react'; import dayjs from 'dayjs'; import Icon from '@components/Icon'; @@ -38,6 +39,51 @@ const WriteHistoryCard = ({ handleClose: hideSettingModal, } = useModal(); + const inputRef = useRef(null); + + const [textareaHeight, setTextareaHeight] = useState<{ + row: number; + lineBreak: Record; + }>({ + row: 1, + lineBreak: {}, + }); + + const handleResize = (e: ChangeEvent) => { + const { scrollHeight, clientHeight, value } = e.target; + + if (value.length === 0) { + setTextareaHeight((prev) => ({ + row: 1, + lineBreak: { ...prev.lineBreak, [e.target.value.length]: false }, + })); + } + + if (scrollHeight > clientHeight) { + setTextareaHeight((prev) => ({ + row: prev.row + 1, + lineBreak: { ...prev.lineBreak, [value.length - 1]: true }, + })); + } + + if (textareaHeight.lineBreak[value.length]) { + setTextareaHeight((prev) => ({ + row: prev.row - 1, + lineBreak: { ...prev.lineBreak, [value.length]: false }, + })); + } + }; + + const handleKeydownEnter = (e: KeyboardEvent) => { + if (e.code === 'Enter') { + setTextareaHeight((prev) => ({ + row: prev.row + 1, + lineBreak: { ...prev.lineBreak, [editedInputProps.value.length]: true }, + })); + return; + } + }; + const handleCopyClick = () => { navigator.clipboard.writeText(content); showToast({ @@ -57,9 +103,31 @@ const WriteHistoryCard = ({

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

    - + +
    +
    +