From 08de2795b04873dc1b2a889ebf380e23a20279f1 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:05:33 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20=ED=83=9C=EA=B7=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/roadmapCreatePage/tag/tag.styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/components/roadmapCreatePage/tag/tag.styles.ts b/client/src/components/roadmapCreatePage/tag/tag.styles.ts index 77608a0aa..b84a4746b 100644 --- a/client/src/components/roadmapCreatePage/tag/tag.styles.ts +++ b/client/src/components/roadmapCreatePage/tag/tag.styles.ts @@ -18,7 +18,6 @@ export const AddedTagItem = styled.article` justify-content: center; height: 4.7rem; - margin-right: 2rem; padding: 0 1rem; border: 0.2rem solid ${({ theme }) => theme.colors.main_dark}; @@ -32,7 +31,6 @@ export const TagItem = styled.article<{ width: number }>` width: ${({ width }) => (width > 4 ? width * 2 : 10)}rem; height: 4.7rem; - margin-right: 2rem; border: 0.2rem solid ${({ theme }) => theme.colors.main_dark}; border-radius: 100px; @@ -49,3 +47,8 @@ export const AddButton = styled.button` width: 5rem; height: 5rem; `; + +export const DeleteButton = styled.button` + margin-right: 2rem; + color: ${({ theme }) => theme.colors.main_dark}; +`; From 7c2de5e9e8f4843cf3e5f846b973d2891474f6d4 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:06:28 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=ED=83=9C=EA=B7=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1=20&=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20placeholder=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/roadmapCreatePage/tag/Tag.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/client/src/components/roadmapCreatePage/tag/Tag.tsx b/client/src/components/roadmapCreatePage/tag/Tag.tsx index 6086a2cef..84a39c3db 100644 --- a/client/src/components/roadmapCreatePage/tag/Tag.tsx +++ b/client/src/components/roadmapCreatePage/tag/Tag.tsx @@ -9,7 +9,7 @@ type TagProps = { getTags: (tags: string[]) => void; }; const Tag = ({ getTags }: TagProps) => { - const { tags, ref, getAddedTagText, checkIsTagCountMax } = useCreateTag(); + const { tags, ref, getAddedTagText, checkIsTagCountMax, delegeTag } = useCreateTag(); useEffect(() => { getTags(tags); @@ -21,9 +21,14 @@ const Tag = ({ getTags }: TagProps) => { {tags.map((item) => ( - {item} + <> + # {item} + + X + + ))} - + {checkIsTagCountMax() && +} From 9d1b04354e235397bf948491b9a2894fdee1b396 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:07:21 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=ED=83=9C=EA=B7=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/roadmap/useCreateTag.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/client/src/hooks/roadmap/useCreateTag.ts b/client/src/hooks/roadmap/useCreateTag.ts index e3b5aba12..317210e3d 100644 --- a/client/src/hooks/roadmap/useCreateTag.ts +++ b/client/src/hooks/roadmap/useCreateTag.ts @@ -5,8 +5,8 @@ export const useCreateTag = () => { const [tags, setTags] = useState([]); const ref = useRef(null); - const getAddedTagText = (e: React.MouseEvent) => { - e.preventDefault(); + const getAddedTagText = (e?: React.MouseEvent) => { + e?.preventDefault(); if (ref.current === null) return; if (ref.current.value === '') return; @@ -20,5 +20,14 @@ export const useCreateTag = () => { return tags.length < TAG_LIMIT; }; - return { tags, ref, getAddedTagText, checkIsTagCountMax }; + const delegeTag = (e: React.MouseEvent) => { + e.preventDefault(); + + const target = e.target as HTMLButtonElement; + + setTags((prev) => { + return prev.filter((tag) => tag !== target.value); + }); + }; + return { tags, ref, getAddedTagText, checkIsTagCountMax, delegeTag }; }; From cc428bc424fc53b734cefd56356178bfb86e7115 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:22:30 +0900 Subject: [PATCH 4/9] =?UTF-8?q?style:=20=EC=BD=94=EB=93=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/_common/roadmapItem/RoadmapItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/_common/roadmapItem/RoadmapItem.tsx b/client/src/components/_common/roadmapItem/RoadmapItem.tsx index 7fdce7610..499802def 100644 --- a/client/src/components/_common/roadmapItem/RoadmapItem.tsx +++ b/client/src/components/_common/roadmapItem/RoadmapItem.tsx @@ -57,7 +57,6 @@ const RoadmapItem = ({ item, hasBorder = true, roadmapId }: RoadmapItemProps) => {item.tags.map((tag) => { return # {tag.name}; })} - From fad90237d3c60a2a80c4ed515d65d34a4bf15ccf Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:23:08 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20=ED=83=9C=EA=B7=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=99=84=EC=84=B1=ED=95=98=EB=8A=94=20trigger=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20=ED=9B=84=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/roadmapCreatePage/tag/Tag.tsx | 7 ++++--- .../roadmapCreatePage/tag/TagItem.tsx | 9 +++++++-- client/src/hooks/roadmap/useCreateTag.ts | 17 ++++++++++++++--- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/client/src/components/roadmapCreatePage/tag/Tag.tsx b/client/src/components/roadmapCreatePage/tag/Tag.tsx index 84a39c3db..54edb64c2 100644 --- a/client/src/components/roadmapCreatePage/tag/Tag.tsx +++ b/client/src/components/roadmapCreatePage/tag/Tag.tsx @@ -9,7 +9,8 @@ type TagProps = { getTags: (tags: string[]) => void; }; const Tag = ({ getTags }: TagProps) => { - const { tags, ref, getAddedTagText, checkIsTagCountMax, delegeTag } = useCreateTag(); + const { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, delegeTag } = + useCreateTag(); useEffect(() => { getTags(tags); @@ -28,8 +29,8 @@ const Tag = ({ getTags }: TagProps) => { ))} - - {checkIsTagCountMax() && +} + + {checkIsTagCountMax() && +} ); diff --git a/client/src/components/roadmapCreatePage/tag/TagItem.tsx b/client/src/components/roadmapCreatePage/tag/TagItem.tsx index da48ee8d1..c96e3da56 100644 --- a/client/src/components/roadmapCreatePage/tag/TagItem.tsx +++ b/client/src/components/roadmapCreatePage/tag/TagItem.tsx @@ -1,22 +1,27 @@ import { TAG_MAX_LENGTH } from '@/constants/roadmap/regex'; import { TAG_ITEM_MAX_LENGTH } from '@/constants/roadmap/tag'; import { useValidateInput } from '@/hooks/_common/useValidateInput'; -import { forwardRef, InputHTMLAttributes } from 'react'; +import React, { forwardRef, InputHTMLAttributes } from 'react'; import * as S from './tag.styles'; -type TagItemProps = InputHTMLAttributes; +type TagItemProps = { + addTagByEnter: (e: React.KeyboardEvent) => void; +} & InputHTMLAttributes; const TagItem = forwardRef((props, ref) => { + const { addTagByEnter, placeholder } = props; const { handleInputChange, value } = useValidateInput(TAG_MAX_LENGTH); return ( ); diff --git a/client/src/hooks/roadmap/useCreateTag.ts b/client/src/hooks/roadmap/useCreateTag.ts index 317210e3d..085611653 100644 --- a/client/src/hooks/roadmap/useCreateTag.ts +++ b/client/src/hooks/roadmap/useCreateTag.ts @@ -5,8 +5,7 @@ export const useCreateTag = () => { const [tags, setTags] = useState([]); const ref = useRef(null); - const getAddedTagText = (e?: React.MouseEvent) => { - e?.preventDefault(); + const getAddedTagText = () => { if (ref.current === null) return; if (ref.current.value === '') return; @@ -16,6 +15,18 @@ export const useCreateTag = () => { ref.current.value = ''; }; + const addTagByButton = (e: React.MouseEvent) => { + e.preventDefault(); + getAddedTagText(); + }; + + const addTagByEnter = (e: React.KeyboardEvent) => { + if (e.code === 'Enter') { + e.preventDefault(); + getAddedTagText(); + } + }; + const checkIsTagCountMax = () => { return tags.length < TAG_LIMIT; }; @@ -29,5 +40,5 @@ export const useCreateTag = () => { return prev.filter((tag) => tag !== target.value); }); }; - return { tags, ref, getAddedTagText, checkIsTagCountMax, delegeTag }; + return { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, delegeTag }; }; From 2f1a0a644cb3c0c0228ebd35c54b0e757994deae Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 16:06:55 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=EB=A1=9C=EB=93=9C=EB=A7=B5=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EB=B6=80=EB=B6=84=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=EA=B0=80=20=EB=A7=9E=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/roadmapCreatePage/roadmap/RoadmapItem.tsx | 8 +++++--- .../roadmapCreatePage/roadmap/roadmap.styles.ts | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx b/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx index 8bdcff660..555c581b7 100644 --- a/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx +++ b/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent } from 'react'; +import React, { ChangeEvent } from 'react'; import * as S from './roadmap.styles'; type RoadmapItemProps = { @@ -20,8 +20,10 @@ const RoadmapItem = ({ {roadmapNumber} - getRoadmapItemTitle(e, itemId)} + ) => + getRoadmapItemTitle(e, itemId) + } maxLength={40} name='title' /> diff --git a/client/src/components/roadmapCreatePage/roadmap/roadmap.styles.ts b/client/src/components/roadmapCreatePage/roadmap/roadmap.styles.ts index bd3cdb609..e233ef615 100644 --- a/client/src/components/roadmapCreatePage/roadmap/roadmap.styles.ts +++ b/client/src/components/roadmapCreatePage/roadmap/roadmap.styles.ts @@ -45,8 +45,13 @@ export const BodyFieldWrapper = styled.div` border-radius: 2rem; `; +export const NodeTitleInputField = styled.input` + width: 80%; +`; + export const NodeBodyInputField = styled.textarea` width: 80%; + height: 10rem; `; export const AddButton = styled.button` From 846421fe79965467a25d91c11c31e2620916534f Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 17:04:03 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=EC=86=8C=EA=B0=9C=EA=B8=80=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=B0=BD=EC=9D=98=20=EB=86=92=EC=9D=B4?= =?UTF-8?q?=EA=B0=80=20=EB=8A=98=EC=96=B4=EB=82=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roadmapCreatePage/description/Description.tsx | 4 +++- .../description/description.styles.ts | 13 ++++++++++--- .../input/inputField/inputField.styles.ts | 1 + 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/src/components/roadmapCreatePage/description/Description.tsx b/client/src/components/roadmapCreatePage/description/Description.tsx index 4e5e0ed2a..97fb85c36 100644 --- a/client/src/components/roadmapCreatePage/description/Description.tsx +++ b/client/src/components/roadmapCreatePage/description/Description.tsx @@ -22,7 +22,9 @@ const Description = () => { name='introduction' data-valid={validateInput} /> - + + + {errorMessage} diff --git a/client/src/components/roadmapCreatePage/description/description.styles.ts b/client/src/components/roadmapCreatePage/description/description.styles.ts index b3379703d..78b51de4a 100644 --- a/client/src/components/roadmapCreatePage/description/description.styles.ts +++ b/client/src/components/roadmapCreatePage/description/description.styles.ts @@ -6,13 +6,20 @@ export const Container = styled.article` export const FieldWrapper = styled.div` display: flex; + align-items: center; justify-content: space-between; width: 80%; - height: 3rem; - padding-left: 2rem; + height: 10rem; + padding: 2rem; - border-bottom: 0.2rem solid ${({ theme }) => theme.colors.gray300}; + background-color: ${({ theme }) => theme.colors.gray100}; + border-radius: 2rem; +`; + +export const TextCountWrapper = styled.div` + height: 80%; + margin-right: 2rem; `; export const ErrorMessage = styled.div` diff --git a/client/src/components/roadmapCreatePage/input/inputField/inputField.styles.ts b/client/src/components/roadmapCreatePage/input/inputField/inputField.styles.ts index 2c25d5d72..7ee268df5 100644 --- a/client/src/components/roadmapCreatePage/input/inputField/inputField.styles.ts +++ b/client/src/components/roadmapCreatePage/input/inputField/inputField.styles.ts @@ -4,6 +4,7 @@ export const Input = styled.textarea` width: 80%; height: 80%; color: ${({ theme }) => theme.colors.gray300}; + &::placeholder { ${({ theme }) => theme.fonts.description4}; color: ${({ theme }) => theme.colors.gray200}; From 1a50d07c42379194b305bb470ef9c0d0ddf6fe02 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Tue, 8 Aug 2023 17:11:50 +0900 Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=93=9C=EB=A7=B5=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20placeholder=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx b/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx index 555c581b7..b7044c476 100644 --- a/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx +++ b/client/src/components/roadmapCreatePage/roadmap/RoadmapItem.tsx @@ -26,6 +26,7 @@ const RoadmapItem = ({ } maxLength={40} name='title' + placeholder='로드맵의 제목을 입렵해주세요' /> @@ -36,6 +37,7 @@ const RoadmapItem = ({ } maxLength={2000} name='content' + placeholder='로드맵의 본문을 입렵해주세요' /> From 3cc87f7653ecae62f10b011a487a3053841eb79a Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:26:09 +0900 Subject: [PATCH 9/9] =?UTF-8?q?style:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/roadmapCreatePage/tag/Tag.tsx | 4 ++-- client/src/hooks/roadmap/useCreateTag.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/roadmapCreatePage/tag/Tag.tsx b/client/src/components/roadmapCreatePage/tag/Tag.tsx index 54edb64c2..e8339b75d 100644 --- a/client/src/components/roadmapCreatePage/tag/Tag.tsx +++ b/client/src/components/roadmapCreatePage/tag/Tag.tsx @@ -9,7 +9,7 @@ type TagProps = { getTags: (tags: string[]) => void; }; const Tag = ({ getTags }: TagProps) => { - const { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, delegeTag } = + const { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, deleteTag } = useCreateTag(); useEffect(() => { @@ -24,7 +24,7 @@ const Tag = ({ getTags }: TagProps) => { {tags.map((item) => ( <> # {item} - + X diff --git a/client/src/hooks/roadmap/useCreateTag.ts b/client/src/hooks/roadmap/useCreateTag.ts index 085611653..913ec80c8 100644 --- a/client/src/hooks/roadmap/useCreateTag.ts +++ b/client/src/hooks/roadmap/useCreateTag.ts @@ -31,7 +31,7 @@ export const useCreateTag = () => { return tags.length < TAG_LIMIT; }; - const delegeTag = (e: React.MouseEvent) => { + const deleteTag = (e: React.MouseEvent) => { e.preventDefault(); const target = e.target as HTMLButtonElement; @@ -40,5 +40,5 @@ export const useCreateTag = () => { return prev.filter((tag) => tag !== target.value); }); }; - return { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, delegeTag }; + return { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, deleteTag }; };