개요
프로젝트 기간
2023/06 (약 2주)
역할
기획, FE(질문 작성 페이지, 질문 상세 페이지), Deployment
팀 / 솔로
팀(FE & BE)
기술 스택
React, Tailwind, Recoil, Netlify
질문 작성 페이지
TipTap 라이브러리를 이용한 웹 에디터 구현
- 질문 생성시 웹 에디터 라이브러리인 TipTap을 이용해 다양한 서식, 스타일, 레이아웃 등의 요소를 적용할 수 있도록 구현했습니다.
- 웹 에디터를 공통 컴포넌트로 제작하여, 질문 상세페이지에서도 질문 수정, 답변 등록, 답변 수정에 이용할 수 있도록 구현하였습니다.
질문 태그 구현
- 질문 작성 시, 질문과 관련된 프로그래밍 언어 및 기술 등의 태그를 달 수 있는 기능을 구현했습니다.
- 태그 데이터는 질문 검색, 질문 필터링 등 다양한 기능에 활용될 수 있도록 확장성을 고려해 구현했습니다.
질문 상세 페이지
Recoil을 활용한 상태 관리
- 각 질문의 상세 페이지에서 사용되는 질문 id, 답변 데이터, 댓글 데이터 등을 백엔드 서버에서 받아와 Recoil을 활용하여 전역상태로 관리했습니다.
- 전역 상태를 활용함으로써 동일한 상태를 여러 컴포넌트에서 공유할 수 있도록 하여 프로젝트의 복잡성을 줄였습니다.
질문, 답변, 댓글 crud 구현
- 질문, 답변, 댓글의 CRUD 기능을 구현하였습니다.
- 질문 및 답변의 등록 및 수정 기능에도 TipTap 웹 에디터를 이용하여 다양한 서식, 스타일, 레이아웃 등의 요소를 적용할 수 있습니다.
CSS Grid를 이용한 레이아웃 구성
질문 및 답변 컴포넌트들의 레이아웃은 2차원적인 배치가 요구되었기 때문에, 1차원 레이아웃에 적합한 Flex 대신 2차원 레이아웃을 효율적으로 처리할 수 있는 Grid를 선택하여 디자인에 최적화된 구현을 적용했습니다.