[feat/CK-142] 로드맵 생성페이지 버그를 해결한다 (#101)

* design: 태그 삭제버튼 생성 * feat: 태그 삭제버튼 생성 & 태그 placeholder적용 * feat: 태그를 삭제하는 로직 구현 * style: 코드 스타일 정리 * refactor: 태그를 완성하는 trigger 분리 후 적용 * fix: 로드맵 입력부분 크기가 맞지 않는 오류 해결 * fix: 소개글 입력창의 높이가 늘어나지 않는 오류 해결 * refactor: 로드맵 입력 placeholder추가 * style: 오타 수정
woowacourse-teams · Aug 9, 2023 · dacedba · dacedba
1 parent 3a293f4
commit dacedba
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 18 deletions.
diff --git 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}
         />
-        <TextCount maxCount={150} currentCount={value.length} />
+        <S.TextCountWrapper>
+          <TextCount maxCount={150} currentCount={value.length} />
+        </S.TextCountWrapper>
       </S.FieldWrapper>
       <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
     </S.Container>

diff --git 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
@@ -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};

diff --git 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,10 +20,13 @@ const RoadmapItem = ({
       <S.TitleWrapper>
         <S.RoadmapNumber>{roadmapNumber}</S.RoadmapNumber>
         <S.TitleFieldWrapper>
-          <input
-            onChange={(e) => getRoadmapItemTitle<HTMLInputElement>(e, itemId)}
+          <S.NodeTitleInputField
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              getRoadmapItemTitle<HTMLInputElement>(e, itemId)
+            }
             maxLength={40}
             name='title'
+            placeholder='로드맵의 제목을 입렵해주세요'
           />
         </S.TitleFieldWrapper>
       </S.TitleWrapper>
@@ -34,6 +37,7 @@ const RoadmapItem = ({
           }
           maxLength={2000}
           name='content'
+          placeholder='로드맵의 본문을 입렵해주세요'
         />
       </S.BodyFieldWrapper>
     </>

diff --git 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`

diff --git 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 } = useCreateTag();
+  const { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, deleteTag } =
+    useCreateTag();
 
   useEffect(() => {
     getTags(tags);
@@ -21,10 +22,15 @@ const Tag = ({ getTags }: TagProps) => {
       <InputDescription text='컨텐츠와 어울리는 태그를 작성해주세요' />
       <S.TagWrapper>
         {tags.map((item) => (
-          <S.AddedTagItem key={item}>{item}</S.AddedTagItem>
+          <>
+            <S.AddedTagItem key={item}># {item}</S.AddedTagItem>
+            <S.DeleteButton value={item} onClick={deleteTag}>
+              X
+            </S.DeleteButton>
+          </>
         ))}
-        <TagItem ref={ref} />
-        {checkIsTagCountMax() && <S.AddButton onClick={getAddedTagText}>+</S.AddButton>}
+        <TagItem ref={ref} addTagByEnter={addTagByEnter} placeholder='# 태그명' />
+        {checkIsTagCountMax() && <S.AddButton onClick={addTagByButton}>+</S.AddButton>}
       </S.TagWrapper>
     </S.Container>
   );

diff --git 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<HTMLInputElement>;
+type TagItemProps = {
+  addTagByEnter: (e: React.KeyboardEvent) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
 
 const TagItem = forwardRef<HTMLInputElement, TagItemProps>((props, ref) => {
+  const { addTagByEnter, placeholder } = props;
   const { handleInputChange, value } = useValidateInput(TAG_MAX_LENGTH);
 
   return (
     <S.TagItem width={props.readOnly ? String(props.value).length : value.length}>
       <S.TagInputField
         onChange={handleInputChange}
+        onKeyPress={addTagByEnter}
         maxLength={TAG_ITEM_MAX_LENGTH}
         value={props.value}
         ref={ref}
         readOnly={props.readOnly}
+        placeholder={placeholder}
       />
     </S.TagItem>
   );

diff --git 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};
+`;
diff --git 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<string[]>([]);
   const ref = useRef<HTMLInputElement | null>(null);
 
-  const getAddedTagText = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+  const getAddedTagText = () => {
     if (ref.current === null) return;
     if (ref.current.value === '') return;
 
@@ -16,9 +15,30 @@ export const useCreateTag = () => {
     ref.current.value = '';
   };
 
+  const addTagByButton = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    getAddedTagText();
+  };
+
+  const addTagByEnter = (e: React.KeyboardEvent) => {
+    if (e.code === 'Enter') {
+      e.preventDefault();
+      getAddedTagText();
+    }
+  };
+
   const checkIsTagCountMax = () => {
     return tags.length < TAG_LIMIT;
   };
 
-  return { tags, ref, getAddedTagText, checkIsTagCountMax };
+  const deleteTag = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    const target = e.target as HTMLButtonElement;
+
+    setTags((prev) => {
+      return prev.filter((tag) => tag !== target.value);
+    });
+  };
+  return { tags, ref, addTagByButton, addTagByEnter, checkIsTagCountMax, deleteTag };
 };