Repository files navigation

HunsuKing :: AI Question Community Platform

우리 팀은 네이버의 지식인 서비스를 착안하여,
사용자가 채택한 질문에AI가 추가적인 답변, 훈수를 두는 재미있는 커뮤니티를 목표로 개발하였습니다.

개발기간: 2024.08.06 ~ 2024.09.10
배포 주소:https://hunsuking.yoyobar.xyz/

이름	역할	사진	GitHub	Blog
Kim, Min Su	팀 & 프론트엔드 팀장		GitHub	Blog
Kim, Se Rim	프론트엔드 팀원		GitHub	-
Hwang, Seong Min	프론트엔드 팀원		GitHub	-
Song, Yun Ju	백엔드 팀장		GitHub	-
Kim, Da Yeon	백엔드 팀원		GitHub	-

• React와TypeScript를 사용하여 빠르고 안정적인 프론트엔드 개발.
• Tailwind CSS와framer motion을 사용한 스타일링 및 애니메이션.
• zustand를 통한 효율적이고 단순한 상태 관리.
• react-query를 통한 알림 실시간 동기화, 어드민 페이지 실시간 동기화 상태 관리

우리는 프로젝트를clone하여 각자의 리포지토리에서 개발을 진행했습니다.
각 개발자는develop/개발구역이름 브랜치와main 브랜치로 나눠 작업했으며,
주 개발 브랜치는dev/main에서 작업하였습니다.

개발 구역에서 기능을 구현한 후Pull Request를 통해 코드를 검토하고merge하는 방식을 사용했습니다.
이를 통해 코드 품질을 높이고 협업 효율성을 극대화할 수 있었습니다.

PR과 관련된 템플릿은 PR을 생성할때 자동으로 생성됩니다.
해당 내용을 참고하시어 작성을 진행해주시기 바랍니다.

홈 페이지
서비스 메인 페이지와 게시물을 볼 수 있습니다.

로그인 페이지
현대웹 구조에 맞게 로그인 페이지를 구성하고, 이메일 인증과 비밀번호 찾기가 가능합니다.

마이 페이지
사용자 정보를 확인하고 레벨, 사용자 이미지, 탈퇴처리, 작성한 게시물 등 다양한 작업이 가능합니다.

어드민 페이지
React-query를 통한 실시간 동기화 데이터를 지원하는 어드민 페이지입니다. 유저 신고관리, 게시물 관리, 유저 관리 등이 가능합니다.

• 유저 Google 로그인 쿠키로 관리
• 사설 유저 로그인 쿠키로 관리

• zustand로 동기화된 게시물 데이터
• 사용자의 게시물에 알림이 존재하여 실시간 반응 확인
• 카테고리 별 게시물, 검색 기능, 댓글, 댓글 이미지 등 여러 모던 웹 기능 지원

• 사용자 정보 편집 기능
• 사용자 경험치, 레벨 확인
• 사용자 작성 글, 작성 댓글 확인 및 수정
• 사용자 계정 탈퇴

• react-query로 실시간 동기화된 서버 데이터
• 사용자 신고 내역 조회 / 처리
• 사용자 게시물 조회 / 삭제
• 사용자 조회 / Role Change / 탈퇴 처리

• 사설 로그인 / 소셜 로그인 지원
• 가입 후 이메일 인증 기능
• 비밀번호 찾기 기능

• 문제: Toast 모달 지연시간 이전 컴포넌트 이동시 재등장

  • 해결:
  • Toast 모달이 등장 이후 지연시간 이후 사라지기전에 페이지를 이동하면, 해당 토스트의 시간이 초기화 되는 문제가 있었습니다.
  • 해당 Toast 모달을 파기하고, Alert모달로 변경하여 각 페이지별로 개별적으로 관리하도록 수정하였습니다.

• 문제: Editor 이미지 업로드후 글 작성 취소시 S3내 데이터 잔존

  • 해결:
  • Editor 모달 내에서 onChangeEvent 발생이후 기존 img src 배열이 사라질경우, api 엔드포인트로 객체 삭제를 전달하여 해당 문제를 해결하였습니다.

• 문제: 알림 기능이 새로고침시에만 동작.

  • 해결:
  • 알림기능에React-query를 반영하여Refetch를 30초 간격으로 수정하여, 알림이 실시간으로 동기화 되도록 수정했습니다.
  • 해당 부분에 착안하여 어드민페이지는 모든 데이터를 실시간 동기화하도록 수정하였습니다.

• 문제:Editor 모달 스타일링이 게시물에 반영되지 않음

  • 해결:
  • 실제로 게시물 로직은 html만 전송하기때문에, 스타일링을 유지할 수 없었습니다.
  • Editor는lowlight로 스타일링을 채용했으나, 해당 스타일이 넘어오지 않았습니다.
  • highlight.js로 뷰어측 코드블럭을 디자인하고,tailwind/typography을 커스텀 스타일하여 해당 스타일과 동일하게 맞췄습니다.

• 문제:Editor 모달 컴포넌트 디자인이 깨짐

  • 해결:
  • Editor Modal은Tiptap을 채택하였는데, tailwindcss를 사용중일경우 문제가 발생할 수 있다는 점을 확인했습니다.StackOverFlow
  • 해당 문제를 해결하기위해tailwind/typography를 활용하고, 다른tailwindcss사용자의 에디터 레포를 확인해서 스타일링을 수정하였습니다.Repository

• 게시물 데이터Pagination
• 게시물 데이터react-query를 활용하여 실시간 동기화
• 사용자 경험(UX) 개선을 위한 피드백 시스템 도입.

이번 프로젝트는 진행에 차질에 있었으나 빠르게 문제점을 파악하고 수정하고
최신 기술 스택을 활용하여 사용자 중심의 서비스를 제공할 수 있었습니다.
프로젝트 기간 동안 발생한 이슈들을 해결하면서 많은 성장을 이룰 수 있었고, 앞으로의 개선 방향에 대해서도 명확한 계획을 수립할 수 있었습니다.

더 자세한 정보는Hunsuking를 방문해 주세요.