TIL)Traviary-태그 만들기

태그 기능 만들기

태그기능 만드는 이유

게시글을 만드는데
사진, 텍스트, 그리고 별점기능 있었는데
추가로 태그기능까지 하나 있으면 더 좋을거 같아서 시작했습니다.

기능 구현

처음에는 태그를 담을 리스트가 있어야 했는데
어차피 문자열들의 배열이기에 type을 string[]식으로 주게 됐습니다.

저는 파이어베이스를 사용하고 있어서 TraviObj라는 객체안에 추가해주고
onSubmit을 통해서 보내주게끔 만들었고,

그 내용은 TraviDB라는 컬렉션안에 들어가게끔 만들었습니다.

TagsSubmit에서는 update된 태그를 변수로 지정하고
태그는 10개까지만 넘어가면 tagBtn은 Disabled되게끔
하고 태그를 추가하면 인풋값은 초기화가 되게끔 만들었습니다.

deleteTag부분이 가장 어려웠는데..

deleteTagItem에서 currentTarget이후 parentElement부터 firstChild
이런부분이 타입에러가 많이나서 고생좀 했습니다. 그리고 innerText를 사용할 생각이였는데 사용이 되질 않아서 전체를 다 불러오게 하는 textContent를 우선 불러왔습니다.

둘의차이첨
은 mdn에서 확인해봅시다!.

아무튼 필터를 이용해서 delete기능이 된 업데이트된 새로운 리스트를 setHashTags라는 해시태그 배열의 상태값을 업데이트 되게 만들었습니다.

 
  const [hashTags, setHashTags] = useState<string[]>([]);
  const [hashTag, setHashTag] = useState<string>("");
 
 
  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();
    let fileAttachURL = "";
    const attachmentRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
    const response = await uploadString(attachmentRef, fileAttach, "data_url");
    fileAttachURL = await getDownloadURL(response.ref);


	/// 게시글 하나에 들어가는 데이터
    const TraviObj = {
      text: postText,
      ratings: {
        tasterating: taste,
        pricerating: price,
        visualrating: visual,
      },
      hashtag: hashTags,// 해시태그
      createAt: Date.now(),
      createdId: userObj.uid,
      fileAttachURL,
    };
    await addDoc(collection(dbService, "TraviDB"), TraviObj);
    setPostText("");
    setFileAttach("");
    setIsModal(prev => !prev);
  };
 
 const tagChange = (
    event: ChangeEvent<HTMLTextAreaElement> | ChangeEvent<HTMLInputElement>
  ) => {
    setHashTag(event.target.value);
  };
  const TagsSubmit = () => {
    let updateTag = [...hashTags];

    if (hashTags.length < 10) {
      updateTag.push(hashTag);
      setHashTags(updateTag);
    } else {
      document.getElementById("tagBtn")?.setAttribute("disabled","disabled");
    }
    setHashTag("");
  };
  const deleteTag = (e: React.MouseEvent<HTMLButtonElement>) => {
    const deleteTagItem =
      e.currentTarget?.parentElement?.firstChild?.textContent?.split("#")[1];
    const filteredTagList = hashTags.filter(
      tagItem => tagItem !== deleteTagItem
    );
    setHashTags(filteredTagList);
  };
  
  return(
         <TagCotainer>
                <HashTags>
                  <div className="add_tag">
                    <input
                      type="text"
                      id="hashtagText"
                      value={hashTag}
                      onChange={tagChange}
                      className="tag_input"
                    />
                    <button
                      type="button"
                      onClick={TagsSubmit}
                      className={"tagBtn"}
                      id={"tagBtn"}
                    >
                      Tag
                    </button>
                  </div>

                  <TagsWrap className={"wrap"}>
                    {hashTags.map((item, index) => {
                      return (
                        <div className="tag_layout">
                          <Tag
                            className="tags"
                            key={`${index}${item}`}
                          >{`#${item}`}</Tag>
                          <button onClick={deleteTag} className="delete_btn">
                            X
                          </button>
                        </div>
                      );
                    })}
                  </TagsWrap>
                </HashTags>
              </TagCotainer>
              
              
  )
            
              
              
  
         
![](https://velog.velcdn.com/images/yangth/post/7355c501-6dc3-4a8f-bed8-216082897a88/image.gif)