[#16] 질문 작성 페이지 제작

[intersoom]

Summary

질문 작성 페이지를 제작하였습니다

Description

• 이슈 넘버: [#16] 질문 작성 페이지 제작 #16
• 피그마:

• 관련 문서:
  • 검색 섹션 관련 문서
    https://velog.io/@gbwlxhd97/%EA%B2%80%EC%83%89%EC%B0%BD-%EC%9E%90%EB%8F%99%EC%99%84%EC%84%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0-featreact
    https://curryyou.tistory.com/493
  • toasetUI/editor import 관련 문서
    https://velog.io/@hmds1606/%ED%8C%80%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0220713

Details

질문 가이드 / 제목

• 중복되는 제목 부부만 QuestionTitle이라는 컴포넌트로 묶어서 재사용 가능하게 제작함
• 제작된 input 태그 활용

본문

• toast ui-editor 활용하였음
• 해당 라이브러리는 ssr을 지원하지 않아서 Next에서는 이를 dynamic import를 활용해서 ssr: off 해준 상태로 import해서 사용해야함
• 로딩하는데 시간이 좀 걸리기 때문에 스켈레톤을 활용해서 사이즈가 밀리지 않도록 하였음 (없으면, 페이지 크기 자체가 움직이기 때문에)
• 디자이너 분 의견 반영해서 기존 기본 형태인, vertical 형태 -> tabbar 형태로 수정함
  • 공식 문서에서 다양한 형태의 에디터 볼 수 있음https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic

분야

• 1~3개까지 클릭 가능
• 3개 초과 클릭 시도시, alert를 통해서 알림
• 클릭한 내역은 object의 형태로 recoil을 통해서 관리

  {
   PM: true,
   DESIGN: true,
   MOBILE: true,
   BE: true,
   FE: true,
   SCHOOL: true,
  },
  

  클릭 시, false / 클릭하지 않을 시, true
  • 스택 / 툴 섹션에서 분야에 따른 필터링이 가능하게 하기 위해서 해당 object를 recoil로 관리함

스택 / 툴

• 검색 input 제작 (메인 페이지 / 검색 페이지에서 활용 가능)
• input 클릭 시, 검색 모달 on / off (토글)
  검색 모달 제외한 공간을 누르면 검색 모달 off

  const handleAutoSearch = (
   searchRef: MutableRefObject<HTMLDivElement | null>,
   searchInputRef: MutableRefObject<HTMLInputElement | null>,
   e: MouseEvent,
  ) => {
   if (searchRef.current && searchInputRef.current && e) {
     if (
       !searchRef.current.contains(e.target as Node) &&
       !searchInputRef.current.contains(e.target as Node)
     ) {
       if (autoSearch) {
         setAutoSearch(false);
         setTimeout(() => {
           setDisplay(false);
           // KeyItems 초기화
           setKeyItems(allStackList);
         }, 200);
       }
     }
   }
  };
  
  useEffect(() => {
   document.addEventListener('mousedown', (e) => handleAutoSearch(ref, inputRef, e));
   // document.addEventListener('touchstart', handler); // 모바일 대응
  
   return () => {
     document.removeEventListener('mousedown', (e) => handleAutoSearch(ref, inputRef, e));
     // document.removeEventListener('touchstart', handler); // 모바일 대응
   };
  });
  

  위와 같이 mousedown 이벤트를 인식해서 mousedown된 곳이 input / 검색 모달이 아닐 경우에 대해서 검색 모달이 꺼지게 함
  (input을 제외한 이유는 제외하지 않으면, 검색 모달이 꺼지는 이벤트가 중복해서 발생하기 때문에)

변수명 정리

• keyword: 검색 내용
• keyItems: 검색 결과 (필터링된 내용)
• allStackList: 분야 필터링된 모든 스택

• 검색은 디바운스를 활용하였음

  // 검색 기능
  const updateData = () => {
   const filtered = allStackList.filter((list: string) =>
     list.toLowerCase().includes(keyword.toLowerCase()),
   );
   setKeyItems(filtered);
  };
  
  useEffect(() => {
   if (keyword.length === 0) {
     // KeyItems 초기화
     setKeyItems(allStackList);
   }
   const debounce = setTimeout(() => {
     if (keyword) updateData();
   }, 200);
   return () => {
     clearTimeout(debounce);
   };
  }, [keyword]);
  

• 선택된 분야에 따라서 스택 / 툴 필터링

  useEffect(() => {
   setAllStackList([]);
   let newArr: string[] = [];
  
   for (const field in fieldList) {
     if (!fieldList[field]) {
       newArr = [...Array.from(new Set([...newArr, ...StackDummy[field]]))];
     }
   }
   setAllStackList([...newArr]);
  }, [fieldList]);
  
  useEffect(() => {
   setKeyItems(allStackList);
  }, [allStackList]);
  

  • false인 경우 찾아서 중복 제거해준 후, stackList에 추가해줌
  • stackList가 업데이트 되면, keyItems도 업데이트해줌 (안 해주면 첫 검색 때, 아무 것도 안 뜸)
• 스택 / 툴 검색 후, 검색 모달에 뜬 스택 / 툴 선택 시, 검색창 하단에 태그 추가됨
  • 삭제 가능
  • 최대 6개까지 추가 가능
  • 6개 초과 선택 시, alert로 안내

Key Changes

• searchInput 재사용 가능한 컴포넌트 제작하였으니, 필요하시면 사용해주세요!
• toggleBtn 재사용 가능한 컴포넌트 제작하였으니, 필요하시면 사용해주세요!

To Reviewer

• 분야 / 스택, 툴 검색 부분에서 개선할 점 없는지 확인해주세요! (ex. 특정 초기화 기능이 불편하다)

After Work

• input value / handler 관리하는 hook 만들어서 input을 조금 더 쉽게 관리할 수 있게 해야함
• 마크다운 서버에서 이미지 처리 가능해지면 이미지 툴바 추가
• API 연결
• 유효성 검사 추가
  • 분야를 선택했는가?
  • 제목 작성했는가?
  • 본문 작성했는가?
  • 만약 하나라도 만족하지 않는다면, 제출 버튼 비활성화

[seocylucky]

아니 어쩜 이렇게 완벽하게 할 수가...!!!!
코드 봤는데 일단 크게 문제되어 보이는 부분은 안보이네욥!
흠 확실히 태그 전체를 누르면 더 편할 것 같긴한데 지금 당장은 이렇게 놔둬도 괜찮을 것 같다는 제 생각입니다! 일단 나머지 다 완성하는게 목표니까🔥 마크다운 진짜 대박이에요... 스켈레톤도 그렇고.. 감탄감탄

[intersoom]

아니 어쩜 이렇게 완벽하게 할 수가...!!!!

코드 봤는데 일단 크게 문제되어 보이는 부분은 안보이네욥!

흠 확실히 태그 전체를 누르면 더 편할 것 같긴한데 지금 당장은 이렇게 놔둬도 괜찮을 것 같다는 제 생각입니다! 일단 나머지 다 완성하는게 목표니까🔥 마크다운 진짜 대박이에요... 스켈레톤도 그렇고.. 감탄감탄

@seocylucky 태그 전체가 어떤거 말씀하시는거에요??

[intersoom]

흠 일단은 머지할게요~