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하는 방식을 사용했습니다.
이를 통해 코드 품질을 높이고 협업 효율성을 극대화할 수 있었습니다.
| Tag Name | Description | |
|---|---|---|
| 기능 | Feat | 새로운 기능을 추가할 경우 |
| 기능 | Fix | 버그를 고친 경우 |
| 기능 | Design | CSS 등 사용자 UI 디자인 변경 |
| 개선 | Style | 코드 Format, 코드 수정이 없는 경우 |
| 개선 | Refactor | 코드 리팩토링 |
| 개선 | Comment | 주석 변경 |
| ETC | Docs | 문서 수정 |
| ETC | Chore | 빌드 테스트, 패키지 매니저 |
| ETC | Rename | 파일 명 수정 |
| ETC | Test | 배포 환경 테스트 |
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를 방문해 주세요.