카카오 테크 캠퍼스 1기 3단계 프로젝트
개발 기간 : 2023.09.25 ~ 2023.11.11
🔗 배포 주소
👨👨👦👦 팀 소개
👀 서비스 소개
🚀 주요 기능
📌 개발 주안점
🖥️ 화면 구성
⚙️ ERD
⭐ 시스템 구조도
🔧 기술 스택
💡 프로젝트 실행 방법
🗂️ 디렉토리 구조
💎 라이센스
프론트 서버 : https://kb70bd6b8a3f6a.user-app.krampoline.com/
백엔드 서버 : https://kb70bd6b8a3f6a.user-app.krampoline.com/api/
 |
 |
 |
|---|---|---|
| 김은지 | 송지혜 | 윤강 |
| publdaze | qwer15948 | GangHub1970 |
| Auth(카카오 API) 이메일 인증 회원관리 마이페이지 퍼블리싱 |
페이지 관리 포스트(CkEditor5) 댓글 페이지 링크 퍼블리싱 |
그룹 생성(s3) 초대 그룹 마이페이지 퍼블리싱 |
우리만의 추억을 함께 기록하고, 즐거운 순간을 공유하며 소중한 경험을 함께 만들어보세요! 위키키는 친구, 동료와 함께 다양한 활동을 기록하며 우리만의 특별한 공간을 만들 수 있는 그룹형 커뮤니티 서비스입니다.
-
그룹 기반의 다양한 활동 기록 📝
서로의 추억과 경험을 기록하고 페이지 별 목차를 통해 정보에 편리하게 접근하세요.
-
편리한 그룹원 초대 및 편집 권한 📨
그룹을 손쉽게 생성하고 초대링크를 통해 친구나 동료를 초대하세요. 모든 그룹원에게 페이지 편집 권한이 있어 함께 만들어가는 즐거움을 누릴 수 있습니다.
-
비공개 그룹 옵션 🔐
원하는 경우 비공개 그룹으로 설정하여 오직 그룹원끼리만 접근할 수 있도록 하세요. 우리만의 기록 공간을 안전하게 유지할 수 있습니다.
위키키를 통해 함께 즐거운 순간을 기록하고 공유하는 새로운 경험을 만나보세요. 다양한 활동을 즐기며 소중한 추억을 함께 쌓아가는 여정을 시작해보세요!
- 사용자는 그룹을 생성하고 관리할 수 있습니다. 그룹의 이름, 대표 사진, 공개 여부 등을 설정할 수 있습니다.
- 사용자는 그룹에 가입하거나 초대를 받아 그룹에 참여할 수 있습니다. 초대코드를 통해 그룹 가입을 할 수 있습니다.
- 그룹의 멤버 리스트를 확인하고 관리할 수 있습니다. 그룹원 초대, 탈퇴 등의 기능이 제공됩니다.
- 그룹 내에서 페이지를 생성하고 수정할 수 있습니다. 각 페이지는 제목, 내용, 목차 등을 가지고 있습니다.
- 그룹 내에서 변경된 최근 페이지의 히스토리를 확인할 수 있습니다.
- 사용자는 페이지에 댓글을 작성하고 수정, 삭제할 수 있습니다.
- 사용자는 그룹 내에서 자신이 기여한 문서의 목록을 확인할 수 있습니다.
- 사용자는 메인 페이지에서 그룹을 검색할 수 있으며, 그룹 내에서는 페이지를 검색할 수 있습니다.
- 검색 결과를 확인하고 해당 페이지로 이동할 수 있습니다.
- 사용자는 카카오 로그인을 통해 로그인 하거나, 회원가입을 통해 계정을 생성하고 로그인하여 서비스를 이용할 수 있습니다.
- 린터(eslint), 포맷터(prettier)를 적용하여 코드의 일관성을 유지하고, 협업 시 코드 작성 및 유지보수를 원활히 하였습니다.
- 코드의 가독성과 유지 보수를 위해 import 해야할 대상의 경로를 절대 경로로 불러올 수 있도록 하였습니다. (craco + react-app-alias 사용)
- 윈도우, 맥등 다양한 OS로 개발할 때 일관된 환경을 제공하기 위해서 모든 운영체제에서 동일한 방법으로 환경 변수를 설정할 수 있도록 하였습니다. (cross-env 사용)
- 공통된 레이아웃을 따로 분리하여 중복된 코드를 줄이고 효율적인 유지 보수가 가능하게 했습니다.
- Recoil key, React Query key를 관리하는 상수 파일을 만들어 실수로 동일한 키를 사용하는 상황을 방지하고, 필요한 곳에서 쉽게 재사용할 수 있도록 하였습니다.
- 단일 컴포넌트 기준이 아닌 페이지 기준으로 key 값이 고유하도록 react-uuid를 사용하였습니다.
- 코드의 가독성을 위해 그룹 생성 시의 단계를 한 페이지 안에서 모두 처리하지 않고, 각 단계별로 컴포넌트를 나누어 처리하였습니다.
- 에러 바운더리를 적용하여 각 컴포넌트에서 에러 처리 로직을 분리해내고, 서비스의 에러를 전역으로 일관성있게 처리하였습니다.
- 게시글에 집중할 수 있도록 무채색의 깔끔하고 심플한 디자인을 적용하였습니다.
- 회원가입 시 사용자의 입력에 따라 즉각적인 유효성 피드백을 제공합니다.
- 카카오 로그인 시 인가 코드 발급 후 서비스 API를 호출하는 데 걸리는 지연 시간 동안 사용자에게 로딩 화면을 보여주고, 실패 시에는 뒤로가기 버튼을 제공하였습니다.
- 그룹 및 페이지 제목에 남은 글자 수를 표기하여 사용자가 입력 가능한 글자 수의 실시간 피드백을 제공하였습니다.
- replace 옵션을 사용해 사용자의 페이지 이동 흐름이 자연스럽게 하였습니다. 예를 들어, 그룹 생성이 완료된 후 뒤로가기를 누르면 그룹 생성 페이지가 아닌 그 이전의 메인 페이지로 이동합니다.
- favicon 및 오픈그래프, 트위터 카드 등 기본 설정 및 메타 데이터를 이용하여 웹의 완성도를 높였습니다.
| 메인 화면 (로그인 전) | 메인 화면 (로그인 후) |
|---|---|
 |
 |
회원가입 |
로그인 |
 |
 |
카카오 로그인 로딩 화면 |
비밀번호 재설정 |
 |
 |
그룹 생성 |
그룹 페이지 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
그룹 가입 페이지 |
내 문서 기여 목록 페이지 |
 |
 |
그룹원 목록 조회 |
그룹원 초대 |
 |
 |
그룹 검색 결과 |
없는 페이지 검색 결과 |
 |
 |
마이페이지 |
그룹 마이페이지 |
 |
 |
개발 환경에서 프로젝트를 테스트하려면 아래의 항목이 필요합니다.
- Node.js : 18.12.0
| environment | description |
| {REACT_APP_API_URL} | API 통신을 위한 서버의 URL을 입력해주세요. |
| {REACT_APP_BUCKET_NAME} | AWS S3 버킷의 이름을 입력해주세요. |
| {REACT_APP_REGION} | AWS S3 버킷이 저장된 위치를 입력해주세요. |
| {REACT_APP_ACCESS_KEY_ID} | AWS S3에 접근하기 위한 사용자의 access key를 입력해주세요. |
| {REACT_APP_SECRET_ACCESS_KEY} | AWS S3에 접근하기 위한 사용자의 secret access key를 입력해주세요. |
| {REACT_APP_KAKAO_REDIRECT_URL} | 카카오 로그인을 위한 인가 코드를 전달받을 서비스 서버의 URL을 입력해주세요. |
| {REACT_APP_KAKAO_REST_API_KEY} | 카카오 로그인의 client-id로 사용되는 앱 REST API 키를 입력해주세요. |
- 환경 변수를 바탕으로 .env 파일을 생성합니다.
REACT_APP_API_URL={배포된 백엔드 API 주소}
...
- 위의 과정을 마치고 프로그램을 실행합니다.
npm install
npm start
📦src
┣ 📂apis
┃ ┣ 📜authApi.ts
┃ ┣ 📜axios.ts
┃ ┣ 📜commentApi.ts
┃ ┣ 📜dto.ts
┃ ┣ 📜groupApi.ts
┃ ┣ 📜image.ts
┃ ┣ 📜mainApi.ts
┃ ┣ 📜pageApi.ts
┃ ┣ 📜postApi.ts
┃ ┗ 📜queryClient.ts
┣ 📂assets
┃ ┣ 📂images
┃ ┃ ┣ 📂login
┃ ┃ ┣ 📂logo
┃ ┃ ┃ ┣ 📜logo.svg
┃ ┃ ┃ ┗ 📜textLogo.svg
┣ 📂components
┃ ┣ 📂Common
┃ ┃ ┣ 📜DividerWithText.tsx
┃ ┃ ┣ 📜Pagination.tsx
┃ ┃ ┣ 📜ScrollToTop.tsx
┃ ┃ ┗ 📜SearchInput.tsx
┃ ┣ 📂Error
┃ ┃ ┣ 📜ErrorBoundary.tsx
┃ ┃ ┣ 📜ErrorFallback.tsx
┃ ┃ ┗ 📜InviteErrorFallback.tsx
┃ ┣ 📂Footer
┃ ┃ ┗ 📜Footer.tsx
┃ ┣ 📂GroupCreate
┃ ┃ ┣ 📜GroupCreateCompleteSection.tsx
┃ ┃ ┣ 📜GroupCreateNameSection.tsx
┃ ┃ ┣ 📜GroupCreateNickNameSection.tsx
┃ ┃ ┣ 📜GroupCreatePhotoSection.tsx
┃ ┃ ┗ 📜GroupCreateSearchSetting.tsx
┃ ┣ 📂Header
┃ ┃ ┣ 📜GroupSelector.tsx
┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┗ 📜HeaderMenu.tsx
┃ ┣ 📂Home
┃ ┃ ┣ 📜GroupCard.tsx
┃ ┃ ┣ 📜GroupList.tsx
┃ ┃ ┗ 📜OfficialGroup.tsx
┃ ┣ 📂Invite
┃ ┃ ┗ 📜InviteFetcher.tsx
┃ ┣ 📂JoinGroup
┃ ┃ ┣ 📜OfficialGroup.tsx
┃ ┃ ┣ 📜UnOfficialClosedGroup.tsx
┃ ┃ ┗ 📜UnOfficialOpenedGroup.tsx
┃ ┣ 📂Layout
┃ ┃ ┣ 📜MainLayout.tsx
┃ ┃ ┣ 📜NoHeaderLayout.tsx
┃ ┃ ┗ 📜PageLayout.tsx
┃ ┣ 📂Modal
┃ ┃ ┣ 📜AddLinkModal.tsx
┃ ┃ ┣ 📜AuthDeleteModal.tsx
┃ ┃ ┣ 📜ConfirmCancelModal.tsx
┃ ┃ ┣ 📜GroupMemberListModal.tsx
┃ ┃ ┣ 📜GroupQuitModal.tsx
┃ ┃ ┣ 📜InviteModal.tsx
┃ ┃ ┣ 📜PageCreateModal.tsx
┃ ┃ ┣ 📜PasswordChangeModal.tsx
┃ ┃ ┣ 📜PasswordFindModal.tsx
┃ ┃ ┗ 📜PostDeleteModal.tsx
┃ ┣ 📂MyPage
┃ ┃ ┣ 📜ContributeAccordion.tsx
┃ ┃ ┗ 📜ContributeItem.tsx
┃ ┣ 📂Page
┃ ┃ ┣ 📂Common
┃ ┃ ┃ ┣ 📜IndexList.tsx
┃ ┃ ┃ ┣ 📜LikeDislikeButton.tsx
┃ ┃ ┃ ┣ 📜PageContainer.tsx
┃ ┃ ┃ ┣ 📜PageTitleSection.tsx
┃ ┃ ┃ ┗ 📜RecentChangeList.tsx
┃ ┃ ┗ 📂Post
┃ ┃ ┃ ┣ 📂Editor
┃ ┃ ┃ ┃ ┣ 📜Ckeditor.tsx
┃ ┃ ┃ ┃ ┣ 📜Ckviewer.tsx
┃ ┃ ┃ ┃ ┗ 📜Editor.css
┃ ┃ ┃ ┣ 📜AddPostButton.tsx
┃ ┃ ┃ ┣ 📜Comment.tsx
┃ ┃ ┃ ┣ 📜CommentList.tsx
┃ ┃ ┃ ┗ 📜Post.tsx
┃ ┗ 📜PostHistoryAccordion.tsx
┣ 📂constants
┃ ┣ 📜errorMsg.ts
┃ ┣ 📜queryKeys.ts
┃ ┣ 📜recoilKeys.ts
┃ ┗ 📜validationPatterns.ts
┣ 📂dummy
┃ ┣ 📜group.ts
┃ ┗ 📜page.ts
┣ 📂hooks
┃ ┣ 📜useAlert.ts
┃ ┣ 📜useJoinMutation.ts
┃ ┗ 📜useModal.ts
┣ 📂pages
┃ ┣ 📜GroupCreatePage.tsx
┃ ┣ 📜GroupJoinPage.tsx
┃ ┣ 📜GroupMainPage.tsx
┃ ┣ 📜GroupMyPage.tsx
┃ ┣ 📜GroupSearchResultPage.tsx
┃ ┣ 📜HomePage.tsx
┃ ┣ 📜InviteProcessPage.tsx
┃ ┣ 📜KakaoLoginPage.tsx
┃ ┣ 📜LoginPage.tsx
┃ ┣ 📜MyContributePage.tsx
┃ ┣ 📜MyPage.tsx
┃ ┣ 📜NotFoundPage.tsx
┃ ┣ 📜PostEditPage.tsx
┃ ┣ 📜PostHistoryPage.tsx
┃ ┣ 📜ReportPage.tsx
┃ ┣ 📜SearchResultPage.tsx
┃ ┗ 📜SignUpPage.tsx
┣ 📂recoil
┃ ┗ 📂atoms
┃ ┃ ┣ 📜auth.ts
┃ ┃ ┗ 📜group.ts
┣ 📂routes
┃ ┗ 📜PrivateRoute.tsx
┣ 📂test
┃ ┣ 📂pages
┃ ┃ ┣ 📜LoginPage.test.tsx
┃ ┃ ┗ 📜SignUpPage.test.tsx
┃ ┗ 📂utils
┃ ┃ ┗ 📜TestWrapper.tsx
┣ 📂utils
┃ ┣ 📂Form
┃ ┃ ┗ 📜nickName.ts
┃ ┣ 📜serverError.ts
┃ ┗ 📜time.ts
┣ 📜App.test.tsx
┣ 📜App.tsx
┣ 📜index.tsx
┣ 📜react-app-env.d.ts
┣ 📜setupTests.ts
┗ 📜tailwind.css
MIT License
Copyright (c) 2023 [1기] 카카오 테크 캠퍼스 (3단계) 프로젝트 8조
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.