2024. 09. 03. (팀프로젝트 - startify 03)

오늘은 유튜브 이후의 진행상황은 잠시 미뤄두고 프로젝트를 진행하면서 생겼던 트러블 슈팅에 대해서 이야기 하고자한다.

사건의 발단은 해시테그 부분이였다. 

                   <Hashtags>
                        <label>해시태그 : </label>
                        <input
                            type="text"
                            value={hashtag}
                            onChange={onChangeHashtag}
                            onKeyUp={onKeyUp}
                            placeholder="해시태그 입력 후 ENTER해주세요."
                        />
                        <div className="HashWrapOuter">
                            {hashArr.map((tag, index) => (
                                <Tag key={index} onClick={() => handleTagClick(tag)}>
                                    #{tag}
                                </Tag>
                            ))}
                        </div>
                    </Hashtags>

위에는 해시테그 입력과 관련된 코드인데, 만약 해시테그가 빈 값일 경우 상세페이지가 비어보여서 가수 이름과 노래 제목이 자동으로 해시테그에 들어가도록 하는게 어떻냐는 의견이 나왔다.

그래서 한번 가능하도록 useEffect를 사용하여 아래와 같이 코들르 짜보았다.

1. 해시테그 값이 없고 노래제목과 가수 이름이 작성되어 있을 경우

2. 해시테그에 노래제목과 가수이름이 새로운 값으로 들어가는 것이다.

     useEffect(() => {
         if (hashArr.length === 0 && title && name) {
             const newTags = [];
             if (title) newTags.push(title);
             if (name) newTags.push(name);
             setHashArr((prev) => [...prev, ...newTags]);
         }
     }, [hashArr, title, name]);

 

그러나 위와 같은 코드를 짜자 문제가 생겼는데

1. 게시글은 기본적으로 위애서 아래로 적는데 그러다보니 제일 마지막 칸에 있는 해시태그가 가수명과 노래제목을 적기 전에 비어져 있는 상태이고 자동으로 채워진다.

2. 가수명이나 노래제목이 채워진 상태에서 다른 하나를 적으려고 할때 초성 하나만 채워넣더라도 그 초성값과 이미 채워진 값이 해시테그로 들어가버린다.

 

위와 같은 상황에 처음에는 어떻게 하면 다 작성된 값이 들어갈까 고민을 하다

게시글 등록 완료버튼을 눌렀을 때 해시태그 값이 없다면 가수명과 노래제목을 해시태그값에서 부르자는 아이디어가 떠올랐다.

그래서 아래와 같은 코드로 변경하게 되었다.

// 위 값은 게시글 등록버튼을 눌렀을 때의 코드안에 들어가야한다.
    const handleTagClick = (tagToRemove) => {
        setHashArr((prev) => prev.filter((tag) => tag !== tagToRemove));
    };