[wsc-017] 로그인 정보 바탕으로 함께해요 글쓰기 작업

[junh0328]

📄 이슈 내용

• 백엔드 서버에서 넘겨받는 소셜 로그인 정보(토큰)를 저장합니다
• 함께해요 페이지의 글쓰기 기능을 구현합니다
• 글쓴 내용을 바탕으로 백엔드서버에 요청을 보내고 결과를 확인합니다

📝 상세 내용

• 함께해요 예상 흐름도 (분석)

• 해시태그 부분 (분석)

2021-08-29.7.58.56.mov

1. todolist 처럼 enter key event를 바탕으로 태그 생성
2. 클릭시 해당 태그 삭제

2021-08-30.1.34.02.mov

3. div 태그 내부에서 input 입력받음
4. onsubmit이 아닌, onKeydown 과 이벤트를 사용하여 엔터키를 입력시, 태그 생성
5. css는 미리 지정해준 것으로 보임

✔ 체크리스트

• 요구사항에 따른 상세내용에 적힌 기능 구현

결과물 (1차)

1.mov

태그 1개 이상 작성할 시, 로직 구조에 따라 unshift()로 들어가게 됨

  const onKeyUp = useCallback(
    (e) => {
      if (process.browser) {
        // 부모 div
        const $HashWrapParent = document.querySelector('.HashWrap')
        // 해시태그가 될 div
        const $HashWrap = document.createElement('div')
        // HashWrapInner에 대한 스타일은 사전에 emotion을 통해 지정한다
        $HashWrap.className = 'HashWrapInner'
        /* 클릭시 부모 div에서 해당 요소 삭제*/
        $HashWrap.addEventListener('click', () => $HashWrapParent?.removeChild($HashWrap))

        /* enter 키 코드 :13 */
        if (e.keyCode === 13 && e.target.value.trim() !== '') {
          console.log('Enter Key 입력됨!', e.target.value)
          $HashWrap.innerHTML = '#' + e.target.value
          $HashWrapParent?.insertBefore($HashWrap, $HashWrapParent.firstChild)
          setHashArr((hashArr) => [...hashArr, hashtag])
          setHashtag('')
        }
      }
    },
    [hashtag]
  )

구조가

          <div className="HashWrap" css={hashDivrap}>
            <input
              className="HashInput"
              type="text"
              value={hashtag}
              onChange={onChangeHashtag}
              onKeyUp={onKeyUp}
              placeholder="해시태그 입력"
            />
         </div>

로 되어 있기 때문, 추가적으로 공부하여 velog 처럼 구현될 수 있도록 수정이 필요함

결과물 (2차)

2021-08-31.9.28.44.mov

feat: 클릭 이벤트 발생 시 배열 state 관리/ onSubmit 성공시 해시태그 제거 완료