From 35a9798b12288f9e2ffc514bb5f28996b73f6572 Mon Sep 17 00:00:00 2001 From: nocheol Date: Fri, 19 Jan 2024 15:19:05 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20:=20#413=20-=20=EC=B7=A8?= =?UTF-8?q?=EC=86=8C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icon/Icon.tsx | 1 + src/types/IconName.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 51f5e294..852f53e1 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -39,6 +39,7 @@ const ICON_NAME_MAP = { ARROW_UP: 'arrow_upward', COPY: 'content_copy', ARROW_RIGHT: 'subdirectory_arrow_right', + CANCEL: 'cancel', }; interface IconProps { diff --git a/src/types/IconName.ts b/src/types/IconName.ts index 7d1528e0..226b7609 100644 --- a/src/types/IconName.ts +++ b/src/types/IconName.ts @@ -35,4 +35,5 @@ export type IconName = | 'ARROW_UP' | 'COPY' | 'HELP' - | 'ARROW_RIGHT'; + | 'ARROW_RIGHT' + | 'CANCEL'; From af2628ac9d21365f32ad69519411359a7f989f70 Mon Sep 17 00:00:00 2001 From: nocheol Date: Fri, 19 Jan 2024 16:05:36 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20:=20#413=20-=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=88=98=EC=A0=95=EC=8B=9C=20=EB=B9=88=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20return?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useWritablePlan.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/hooks/useWritablePlan.ts b/src/hooks/useWritablePlan.ts index 97921a10..17b345b8 100644 --- a/src/hooks/useWritablePlan.ts +++ b/src/hooks/useWritablePlan.ts @@ -34,7 +34,11 @@ export const useWritablePlan = (planData: PlanData) => { const handleAddTag = (text: string) => { const trimedTags = text.trim(); - if (planContent.tags.includes(trimedTags) || planContent.tags.length >= 5) { + if ( + planContent.tags.includes(trimedTags) || + planContent.tags.length >= 5 || + trimedTags.length === 0 + ) { return; } const newTagList = [...planContent.tags, trimedTags]; From 768aadf034d1fd3c7b6b112f19bcf5b2a9288967 Mon Sep 17 00:00:00 2001 From: nocheol Date: Fri, 19 Jan 2024 16:08:57 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#413=20-=20?= =?UTF-8?q?=EA=B3=84=ED=9A=8D=20=EC=9E=91=EC=84=B1=20=EB=B9=88=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20return?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CreatePlanContent/CreatePlanContent.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/CreatePlanContent/CreatePlanContent.tsx b/src/components/CreatePlanContent/CreatePlanContent.tsx index c11aa4a3..59f11590 100644 --- a/src/components/CreatePlanContent/CreatePlanContent.tsx +++ b/src/components/CreatePlanContent/CreatePlanContent.tsx @@ -63,7 +63,11 @@ export default function CreatePlanContent({ const handleAddTag = (text: string) => { const trimedTags = text.trim(); - if (planContent.tags.includes(trimedTags) || planContent.tags.length >= 5) { + if ( + planContent.tags.includes(trimedTags) || + planContent.tags.length >= 5 || + trimedTags.length === 0 + ) { return; } const newTagList = [...planContent.tags, trimedTags]; From 5d8a84fbb6a75fc360c6502f4cf532f02d112691 Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 20 Jan 2024 14:36:40 +0900 Subject: [PATCH 04/10] =?UTF-8?q?=E2=9C=A8=20:=20#413=20-=20DeletableTag?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DeletableTag/DeletableTag.tsx | 24 ++++++++++++++++++++ src/components/DeletableTag/index.scss | 12 ++++++++++ src/components/index.ts | 1 + 3 files changed, 37 insertions(+) create mode 100644 src/components/DeletableTag/DeletableTag.tsx create mode 100644 src/components/DeletableTag/index.scss diff --git a/src/components/DeletableTag/DeletableTag.tsx b/src/components/DeletableTag/DeletableTag.tsx new file mode 100644 index 00000000..507cf7d4 --- /dev/null +++ b/src/components/DeletableTag/DeletableTag.tsx @@ -0,0 +1,24 @@ +import { Icon, Tag } from '@/components/'; +import classNames from 'classnames'; +import './index.scss'; + +interface DeletableTagProps extends React.HTMLAttributes { + children: React.ReactNode; + classNameList?: string[]; +} +export default function DeletableTag({ + children, + onClick, + classNameList = [], +}: DeletableTagProps) { + return ( + + <> + {children} + + + + ); +} diff --git a/src/components/DeletableTag/index.scss b/src/components/DeletableTag/index.scss new file mode 100644 index 00000000..4bc0c891 --- /dev/null +++ b/src/components/DeletableTag/index.scss @@ -0,0 +1,12 @@ +.deletableTag { + cursor: pointer; + position: relative; + display: inline-block; + padding-right: 0.5rem; + + & .icon { + position: absolute; + top: 0; + right: 0; + } +} diff --git a/src/components/index.ts b/src/components/index.ts index 46656b97..7e3f3fa9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -27,3 +27,4 @@ export { default as WritableRemindItem } from '@components/RemindItem/WritableRe export { default as ReadOnlyPlan } from '@components/ReadOnlyPlan/ReadOnlyPlan'; export { default as ErrorToast } from '@components/Svg/ErrorToast'; export { default as SuccessToast } from '@components/Svg/SuccessToast'; +export { default as DeletableTag } from '@components/DeletableTag/DeletableTag'; From 017b509a9f0628ff9127534f95db72cff149505a Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 20 Jan 2024 14:38:16 +0900 Subject: [PATCH 05/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#413=20-=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(header)/plans/edit/[planId]/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(header)/plans/edit/[planId]/page.tsx b/src/app/(header)/plans/edit/[planId]/page.tsx index b0c2be80..1b17a46d 100644 --- a/src/app/(header)/plans/edit/[planId]/page.tsx +++ b/src/app/(header)/plans/edit/[planId]/page.tsx @@ -3,12 +3,12 @@ import { AjajaButton, Button, + DeletableTag, IconSwitchButton, InputTag, Modal, ModalSelectIcon, PlanInput, - Tag, } from '@/components'; import HelpButton from '@/components/HelpButton/HelpButton'; import { ajajaToast } from '@/components/Toaster/customToast'; @@ -116,13 +116,13 @@ export default function EditPage({ params }: { params: { planId: string } }) {
{planContent.tags.map((tag, index) => ( - { handleRemoveTag(tag); }}> {tag} - + ))}
Date: Sat, 20 Jan 2024 14:52:16 +0900 Subject: [PATCH 06/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#413=20-=20?= =?UTF-8?q?=EA=B3=84=ED=9A=8D=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=83=9C=EA=B7=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CreatePlanContent/CreatePlanContent.tsx | 6 +++--- src/components/DeletableTag/index.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CreatePlanContent/CreatePlanContent.tsx b/src/components/CreatePlanContent/CreatePlanContent.tsx index 59f11590..53af0d45 100644 --- a/src/components/CreatePlanContent/CreatePlanContent.tsx +++ b/src/components/CreatePlanContent/CreatePlanContent.tsx @@ -5,7 +5,7 @@ import { useScroll } from '@/hooks/useScroll'; import { PlanContentType } from '@/types/Plan'; import classNames from 'classnames'; import { useEffect, useRef } from 'react'; -import { IconSwitchButton, InputTag, PlanInput, Tag } from '..'; +import { DeletableTag, IconSwitchButton, InputTag, PlanInput } from '..'; import HelpButton from '../HelpButton/HelpButton'; import { useSessionStorage } from './../../hooks/useSessionStorage'; import './index.scss'; @@ -113,13 +113,13 @@ export default function CreatePlanContent({
{planContent.tags.map((tag, index) => ( - { handleRemoveTag(tag); }}> {tag} - + ))}
diff --git a/src/components/DeletableTag/index.scss b/src/components/DeletableTag/index.scss index 4bc0c891..28c0d472 100644 --- a/src/components/DeletableTag/index.scss +++ b/src/components/DeletableTag/index.scss @@ -2,7 +2,7 @@ cursor: pointer; position: relative; display: inline-block; - padding-right: 0.5rem; + padding-right: 0.75rem; & .icon { position: absolute; From f4e516d348a82a7a92baee21495442bc4683b02f Mon Sep 17 00:00:00 2001 From: nocheol Date: Sat, 20 Jan 2024 22:02:24 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=E2=9C=A8=20:=20#413=20-=20tagInput=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TagInput/TagInput.tsx | 49 +++++++++++++++++++ src/components/TagInput/index.scss | 70 ++++++++++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 src/components/TagInput/TagInput.tsx create mode 100644 src/components/TagInput/index.scss diff --git a/src/components/TagInput/TagInput.tsx b/src/components/TagInput/TagInput.tsx new file mode 100644 index 00000000..640842ac --- /dev/null +++ b/src/components/TagInput/TagInput.tsx @@ -0,0 +1,49 @@ +import classNames from 'classnames'; +import { FormEvent, useState } from 'react'; +import './index.scss'; + +interface TagInputProps { + onSubmit: (text: string) => void; + classNameList?: string[]; + placeholder?: string; +} +export default function TagInput({ + onSubmit, + classNameList = [], + placeholder = '', +}: TagInputProps) { + const [inputValue, setInputValue] = useState(''); + const handleChangeValue = (event: React.ChangeEvent) => { + if (event.target.value.length > 10) return; + setInputValue(event.target.value); + }; + const handleInputSubmit = (event: FormEvent) => { + event.preventDefault(); + const trimed = inputValue.trim(); + onSubmit(trimed); + setInputValue(''); + }; + + return ( +
+ + {placeholder && ( + + )} +
+ ); +} diff --git a/src/components/TagInput/index.scss b/src/components/TagInput/index.scss new file mode 100644 index 00000000..76b04e15 --- /dev/null +++ b/src/components/TagInput/index.scss @@ -0,0 +1,70 @@ +.tagInput { + position: relative; + + &__input:not(:placeholder-shown) + &__label { + top: 0; + font-size: 0.75rem; + & .tagInput__label--focus { + display: inline; + } + } + + &:focus-within { + & > label { + top: 0; + font-size: 0.75rem; + & .tagInput__label--focus { + display: inline; + } + } + &::after { + content: '엔터 입력시 태그를 등록 할 수 있습니다.'; + position: absolute; + color: var(--origin-white-200); + white-space: pre; + background-color: var(--origin-gray-200); + line-height: 1.5rem; + left: 0; + bottom: 3rem; + display: block; + border-radius: var(--border-radius); + padding: 0.25rem 0.875rem; + z-index: 1; + } + } + &__input { + padding: 0.25rem 0.875rem; + vertical-align: middle; + margin: 0; + width: 50%; + display: inline-block; + border: 1px solid var(--origin-primary); + border-radius: var(--border-radius); + + &:focus { + outline: none; + overflow: visible; + border: 2px solid var(--origin-primary); + } + } + &__label { + position: absolute; + left: 1rem; + max-width: calc(100% - 2rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transform: translateY(-50%); + font-size: 1rem; + color: var(--origin-gray-100); + letter-spacing: 1px; + transition: 0.3s; + pointer-events: none; + top: 50%; + background-color: var(--origin-white-200); + + &--focus { + display: none; + } + } +} From 56810a02d662054ecb48b28bc59c5ac1a2c7df43 Mon Sep 17 00:00:00 2001 From: nocheol Date: Sun, 21 Jan 2024 11:59:56 +0900 Subject: [PATCH 08/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#413=20-=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=ED=8E=98=EC=9D=B4=EC=A7=80=20tagInput=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(header)/plans/edit/[planId]/index.scss | 11 +++++++++++ src/app/(header)/plans/edit/[planId]/page.tsx | 17 +++++++++++++++-- src/components/TagInput/TagInput.tsx | 15 +++++++++++++-- src/components/TagInput/index.scss | 10 ++++------ 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/app/(header)/plans/edit/[planId]/index.scss b/src/app/(header)/plans/edit/[planId]/index.scss index 42f3df98..69d0a1a5 100644 --- a/src/app/(header)/plans/edit/[planId]/index.scss +++ b/src/app/(header)/plans/edit/[planId]/index.scss @@ -36,6 +36,17 @@ display: flex; flex-direction: column; gap: 0.5em; + &--input { + .tagInput { + display: inline-block; + width: 50%; + } + & .counter { + margin-left: 0.5rem; + vertical-align: bottom; + } + } + &--tags { display: flex; gap: 0.5rem; diff --git a/src/app/(header)/plans/edit/[planId]/page.tsx b/src/app/(header)/plans/edit/[planId]/page.tsx index 1b17a46d..b765e2e4 100644 --- a/src/app/(header)/plans/edit/[planId]/page.tsx +++ b/src/app/(header)/plans/edit/[planId]/page.tsx @@ -5,12 +5,12 @@ import { Button, DeletableTag, IconSwitchButton, - InputTag, Modal, ModalSelectIcon, PlanInput, } from '@/components'; import HelpButton from '@/components/HelpButton/HelpButton'; +import TagInput from '@/components/TagInput/TagInput'; import { ajajaToast } from '@/components/Toaster/customToast'; import { planIcons } from '@/constants/planIcons'; import { useEditPlanMutation } from '@/hooks/apis/useEditPlanMutation'; @@ -113,7 +113,20 @@ export default function EditPage({ params }: { params: { planId: string } }) {
- +
+ + {`(${planContent.tags.length}/5)`} +
+
{planContent.tags.map((tag, index) => ( void; + disabled?: boolean; classNameList?: string[]; placeholder?: string; } @@ -11,6 +12,7 @@ export default function TagInput({ onSubmit, classNameList = [], placeholder = '', + disabled = false, }: TagInputProps) { const [inputValue, setInputValue] = useState(''); const handleChangeValue = (event: React.ChangeEvent) => { @@ -33,13 +35,22 @@ export default function TagInput({ className="tagInput__input font-size-sm" value={inputValue} placeholder="" + disabled={disabled} onChange={handleChangeValue} maxLength={10} /> {placeholder && ( -