-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d4c8de0
commit d289e7e
Showing
1 changed file
with
212 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,212 @@ | ||
| 합동 4팀 백엔드 레포 입니다. | ||
|
|
||
| ## 프로젝트 소개 | ||
|
|
||
| ### 프로젝트 제목 | ||
| **HunsuKing :: AI Question Community Platform** | ||
|
|
||
| <img src="https://placehold.co/1280x720" width=100%> | ||
|
|
||
| ### 프로젝트 정보 | ||
| 우리 팀은 네이버의 지식인 서비스를 착안하여, <br/> | ||
| 사용자가 채택한 질문에 `AI`가 추가적인 답변, 훈수를 두는 재미있는 커뮤니티를 목표로 개발하였습니다. | ||
|
|
||
| **개발기간:** 2024.08.06 ~ 2024.09.10 <br/> | ||
| **배포 주소:** [https://hunsuking.yoyobar.xyz/](https://hunsuking.yoyobar.xyz/) | ||
|
|
||
| ### 팀 소개 | ||
|
|
||
| | 이름 | 역할 | 사진 | GitHub | Blog | | ||
| |------------|--------------------|--------------------------------------------|--------------------------------------------------|-------------------------------------------| | ||
| | Kim, Min Su| 팀 & 프론트엔드 팀장 | <img src="https://github.com/yoyobar.png" width="50"/> | [GitHub](https://github.com/yoyobar) | [Blog](https://wiki.yoyobar.xyz) | | ||
| | Kim, Se Rim | 프론트엔드 팀원 | <img src="https://github.com/srnnnn.png" width="50"/> | [GitHub](https://github.com/srnnnn) | [Blog]() | | ||
| | Hwang, Seong Min | 프론트엔드 팀원 | <img src="https://github.com/akwjr963.png" width="50"/> | [GitHub](https://github.com/akwjr963) | [Blog]() | | ||
| | Song, Yun Ju| 백엔드 팀장 | <img src="https://github.com/yoonju977.png" width="50"/> | [GitHub](https://github.com/yoonju977) | [Blog]() | | ||
| | Kim, Da Yeon| 백엔드 팀원 | <img src="https://github.com/dayeonkimm.png" width="50"/> | [GitHub](https://github.com/dayeonkimm) | [Blog]() | | ||
|
|
||
| --- | ||
|
|
||
| ## 1. 개발환경 | ||
|
|
||
| ### 개발 언어 및 라이브러리 | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### 환경 관리 | ||
|  | ||
|  | ||
|
|
||
| ### 데이터베이스 | ||
|  | ||
|
|
||
| ### Assistant LLM | ||
|  | ||
|
|
||
| ### CI & CD | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Cloud Service | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| --- | ||
|
|
||
| ## 2. 채택한 브랜치 전략 | ||
|
|
||
| ### 기술 | ||
| - **React**와 **TypeScript**를 사용하여 빠르고 안정적인 프론트엔드 개발. | ||
| - **Tailwind CSS**와 **framer motion**을 사용한 스타일링 및 애니메이션. | ||
| - **zustand**를 통한 효율적이고 단순한 상태 관리. | ||
| - **react-query**를 통한 알림 실시간 동기화, 어드민 페이지 실시간 동기화 상태 관리 | ||
|
|
||
| ### 브랜치 전략 | ||
| 우리는 프로젝트를 `clone`하여 각자의 리포지토리에서 개발을 진행했습니다. <br/> | ||
| 각 개발자는 `develop/개발구역이름` 브랜치와 `main` 브랜치로 나눠 작업했으며, <br/> | ||
| 주 개발 브랜치는 `dev/main`에서 작업하였습니다. <br/><br/> | ||
| 개발 구역에서 기능을 구현한 후 `Pull Request`를 통해 코드를 검토하고 `merge`하는 방식을 사용했습니다. <br/> | ||
| 이를 통해 코드 품질을 높이고 협업 효율성을 극대화할 수 있었습니다. | ||
|
|
||
| ### Commit Convention | ||
|
|
||
| | | Tag Name | Description | | ||
| | ---- | --------- | ---------------------------------- | | ||
| | 기능 | Feat | 새로운 기능을 추가할 경우 | | ||
| | 기능 | Fix | 버그를 고친 경우 | | ||
| | 기능 | Design | CSS 등 사용자 UI 디자인 변경 | | ||
| | 개선 | Style | 코드 Format, 코드 수정이 없는 경우 | | ||
| | 개선 | Refactor | 코드 리팩토링 | | ||
| | 개선 | Comment | 주석 변경 | | ||
| | ETC | Docs | 문서 수정 | | ||
| | ETC | Chore | 빌드 테스트, 패키지 매니저 | | ||
| | ETC | Rename | 파일 명 수정 | | ||
| | ETC | Test | 배포 환경 테스트 | | ||
|
|
||
|
|
||
| ## Pull Request(PR) Convention | ||
|
|
||
| PR과 관련된 템플릿은 PR을 생성할때 자동으로 생성됩니다. <br/> | ||
| 해당 내용을 참고하시어 작성을 진행해주시기 바랍니다. | ||
|
|
||
| --- | ||
|
|
||
| ## 3. 주요 페이지 | ||
|
|
||
| | 홈 페이지 | | ||
| |--------------------------------------------| | ||
| | <img src="https://placehold.co/1280x720"/> | | ||
| | 서비스 메인 페이지와 게시물을 볼 수 있습니다. | | ||
|
|
||
| | 로그인 페이지 | | ||
| |--------------------------------------------| | ||
| | <img src="https://placehold.co/1280x720"/> | | ||
| | 현대웹 구조에 맞게 로그인 페이지를 구성하고, 이메일 인증과 비밀번호 찾기가 가능합니다. | | ||
|
|
||
| | 마이 페이지 | | ||
| |--------------------------------------------| | ||
| | <img src="https://placehold.co/1280x720"/> | | ||
| | 사용자 정보를 확인하고 레벨, 사용자 이미지, 탈퇴처리, 작성한 게시물 등 다양한 작업이 가능합니다.| | ||
|
|
||
| | 어드민 페이지 | | ||
| |--------------------------------------------| | ||
| | <img src="https://placehold.co/1280x720"/> | | ||
| | React-query를 통한 실시간 동기화 데이터를 지원하는 어드민 페이지입니다. 유저 신고관리, 게시물 관리, 유저 관리 등이 가능합니다.| | ||
|
|
||
|
|
||
| | 에디터 모달 | | ||
| |--------------------------------------------| | ||
| | <img src="https://placehold.co/1280x720"/> | | ||
| | TipTap을 통해 직접 구성한 에디터 모달입니다. `lowlight`를 통해 렌더링되며, 클라이언트로 데이터로 넘어올 경우 `highlight.js`로 렌더링 됩니다.| | ||
|
|
||
|
|
||
|
|
||
| --- | ||
|
|
||
| ## 4. 페이지별 주요 기능 | ||
|
|
||
| ### 공통 기능 | ||
| - 유저 Google 로그인 쿠키로 관리 | ||
| - 사설 유저 로그인 쿠키로 관리 | ||
|
|
||
| ### 홈 페이지 | ||
| - `zustand`로 동기화된 게시물 데이터 | ||
| - 사용자의 게시물에 알림이 존재하여 실시간 반응 확인 | ||
| - 카테고리 별 게시물, 검색 기능, 댓글, 댓글 이미지 등 여러 모던 웹 기능 지원 | ||
|
|
||
| ### 마이 페이지 | ||
| - 사용자 정보 편집 기능 | ||
| - 사용자 경험치, 레벨 확인 | ||
| - 사용자 작성 글, 작성 댓글 확인 및 수정 | ||
| - 사용자 계정 탈퇴 | ||
|
|
||
| ### 어드민 페이지 | ||
| - `react-query`로 실시간 동기화된 서버 데이터 | ||
| - 사용자 신고 내역 조회 / 처리 | ||
| - 사용자 게시물 조회 / 삭제 | ||
| - 사용자 조회 / Role Change / 탈퇴 처리 | ||
|
|
||
| ### 로그인 페이지 | ||
| - 사설 로그인 / 소셜 로그인 지원 | ||
| - 가입 후 이메일 인증 기능 | ||
| - 비밀번호 찾기 기능 | ||
|
|
||
| --- | ||
|
|
||
| ## 5. 아키텍처, 클라우드 아키텍처, ERD | ||
|
|
||
| ### 아키텍처 | ||
|  | ||
|
|
||
| ### 클라우드 아키텍처 | ||
|  | ||
|
|
||
| ### ERD | ||
|  | ||
|
|
||
| --- | ||
|
|
||
| ## 6. Front-End 트러블 슈팅 | ||
|
|
||
| - **문제:** Lorem Ipsum. | ||
| - **해결:** Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. | ||
|
|
||
| - **문제:** Lorem Ipsum. | ||
| - **해결:** Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. | ||
|
|
||
| - **문제:** Lorem Ipsum. | ||
| - **해결:** Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. | ||
|
|
||
| - **문제:** Lorem Ipsum. | ||
| - **해결:** Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum. | ||
|
|
||
|
|
||
|
|
||
| --- | ||
|
|
||
| ## 7. 개선 방향성 | ||
|
|
||
| - 게시물 데이터 `Pagination` | ||
| - 게시물 데이터 `react-query`를 활용하여 실시간 동기화 | ||
| - 사용자 경험(`UX`) 개선을 위한 피드백 시스템 도입. | ||
|
|
||
| --- | ||
|
|
||
| ## 8. 프로젝트 후기 | ||
|
|
||
| 이번 프로젝트는 진행에 차질에 있었으나 빠르게 문제점을 파악하고 수정하고 <br/> | ||
| 최신 기술 스택을 활용하여 사용자 중심의 서비스를 제공할 수 있었습니다. <br/> | ||
| 프로젝트 기간 동안 발생한 이슈들을 해결하면서 많은 성장을 이룰 수 있었고, 앞으로의 개선 방향에 대해서도 명확한 계획을 수립할 수 있었습니다. | ||
|
|
||
| --- | ||
|
|
||
| 더 자세한 정보는 [Hunsuking](https://hunsuking.yoyobar.xyz/)를 방문해 주세요. |