커뮤니티 메인 화면에서 게시글 리스트를 렌더링하고, 게시글 상세 화면에서는 댓글 작성 및 수정 기능을 구현하였습니다. 글 작성 화면에서는 임시저장 및 불러오기 기능을 통해 사용자의 편의를 고려했습니다. 창 크기에 따른 UI를 고려하며 창의 크기의 변화에 일관성 있는 디자인을 구현했습니다. 재판 기능의 UI/UX 디자인에도 도움을 주며, 기존 디자인과 통일성 있는 디자인을 할 수 있도록 도왔습니다. 또한 커뮤니티/재판 기능 중 커뮤니티 전반의 프론트엔드를 맡았습니다.
기존 버튼 컴포넌트에서는 커뮤니티에서 중요하지 않은 type, width, height, fontSize 등의 props를 매번 지정해야 했습니다. 이에 따라 커뮤니티 전용 버튼 컴포넌트를 새롭게 설계하여 불필요한 props 입력을 제거하고 코드 가독성과 유지보수성을 개선하였습니다.
또한 커뮤니티 기능에서 필요로 하는 게시글, 댓글, 댓글 입력 등의 컴포넌트를 만들어서 사용했습니다. 컴포넌트를 사용해보며 불필요하거나, 해당 기능에서 추가적으로 필요한 props등의 부분에 대해서 계속해서 수정을 해가며 완성도를 더욱 높였습니다.
TanStack Query(React Query)를 사용해 서버와의 비동기 통신을 관리하였습니다. 게시글 목록 렌더링, 게시글 및 댓글 CRUD, 임시저장/불러오기 등의 기능을 API와 연동하였습니다. 임시저장 기능은 서버 연동 방식으로 구현하여 디바이스 간 동기화를 지원하였습니다.
게시글 페이지
게시글 작성
커뮤니티 메인 페이지
검색 페이지
임시저장 / 불러오기