2023-12-12 ~ 2024-02-27
해외 축구 팬들을 위한 통합 커뮤니티 사이트입니다. 다양한 해외 축구 리그와 팀의 정보를 한 곳에서 제공하여 팬들이 편리하게 접근할 수 있도록 합니다. 기존의 게시판 기능에 더불어 전체 채팅, 리그 순위, 팀 순위, 경기 일정 등을 종합하여 제공해 축구 팬들이 소통하고 최신 정보를 얻을 수 있습니다.
| 메인 | 채팅방 목록 |
 |
 |
| 채팅방 | 풋볼 |
 |
 |
| 검색 | 회원가입 |
 |
 |
| 로그인 | 게시물 |
 |
| 기능 | 설명 | 관련 포스트 |
|---|---|---|
| 무한 스크롤 | React-query를 사용하여 무한 스크롤을 구현합니다. | 관련 포스트 |
| 유효성 체크 | React-hook-form과 Zod를 활용하여 사용자 입력값의 유효성을 체크합니다. | 관련 포스트 |
| 정렬 기능 | 게시물을 최신순, 댓글순, 좋아요순으로 가져올 수 있습니다. | |
| 게시물 기능 | 게시물 포스트,수정,삭제 댓글,수정,삭제,좋아요, 싫어요를 구현합니다. | |
| 실시간 채팅 | Socket을 활용하여 실시간 채팅 기능을 구현합니다. | |
| 검색 기능 | 검색 페이지 페이지네이션 구현합니다. | |
| 데이터 필터링 | football page URL의 쿼리 스트링을 사용하여 특정 데이터를 가져오는 기능을 추가합니다. | |
| JWT 토큰 인증 | JWT(Json Web Token) 토큰 기반의 사용자 인증을 구현하여 보안을 강화합니다. | |
| 이미지 및 동영상 업로드 | Firebase 스토리지에서 이미지 및 동영상을 저장합니다. |
축구와 관련된 API가 1분에 5번만 무료, 그 이후는 유료이기 때문에 gif로 남깁니다.
| 무한스크롤 | 글쓰기 |
 |
 |
| 풋볼페이지 쿼리스트링 | 채팅 |
 |
 |
| 검색기능 | 프로필 수정 |
 |
 |
| 내 글 수정 | 댓글 작성,수정,삭제, 좋아요 |
 |
 |
| 팀 정보,일정 | |
 |
\---src
📦src
┣ 📂components
┃ ┣ 📂Chat
┃ ┃ ┣ 📜ChatContainer.tsx
┃ ┃ ┣ 📜ChatDelete.tsx
┃ ┃ ┣ 📜ChatInfo.tsx
┃ ┃ ┣ 📜ChatInput.tsx
┃ ┃ ┣ 📜ChatTitle.tsx
┃ ┃ ┗ 📜ChatUser.tsx
┃ ┣ 📂Football
┃ ┃ ┣ 📜LeagueRank.tsx
┃ ┃ ┣ 📜LeagueRankSelect.tsx
┃ ┃ ┣ 📜LeagueScoreRank.tsx
┃ ┃ ┣ 📜LeagueScoreTable.tsx
┃ ┃ ┣ 📜LeagueScoreTableHead.tsx
┃ ┃ ┣ 📜LeagueTable.tsx
┃ ┃ ┣ 📜LeagueTableHead.tsx
┃ ┃ ┣ 📜LeagueTeamModal.tsx
┃ ┃ ┣ 📜LeagueTeamModalSchedule.tsx
┃ ┃ ┣ 📜LeagueTeamModalSquad.tsx
┃ ┃ ┣ 📜LeagueTeamModalSquadSelect.tsx
┃ ┃ ┣ 📜LeagueTeamPlayerSelect.tsx
┃ ┃ ┣ 📜LeagueTeamScheduleCarousel.tsx
┃ ┃ ┣ 📜LeagueTeamSquadBody.tsx
┃ ┃ ┣ 📜LeagueTeamSquadHead.tsx
┃ ┃ ┗ 📜LeagueYearSelect.tsx
┃ ┣ 📂Home
┃ ┃ ┣ 📜Allposts.tsx
┃ ┃ ┣ 📜HomeLeagueSelect.tsx
┃ ┃ ┣ 📜HomeLeagueTable.tsx
┃ ┃ ┣ 📜HomeLeagueTableBody.tsx
┃ ┃ ┣ 📜HomeLeagueTableHead.tsx
┃ ┃ ┣ 📜Post.tsx
┃ ┃ ┣ 📜PostComment.tsx
┃ ┃ ┣ 📜PostCommentDelBtn.tsx
┃ ┃ ┣ 📜PostCommentDisLike.tsx
┃ ┃ ┣ 📜PostCommentForm.tsx
┃ ┃ ┣ 📜PostCommentLike.tsx
┃ ┃ ┣ 📜PostCommentList.tsx
┃ ┃ ┣ 📜PostCommentUpdateBtn.tsx
┃ ┃ ┣ 📜PostDisLike.tsx
┃ ┃ ┣ 📜PostLike.tsx
┃ ┃ ┣ 📜Posts.tsx
┃ ┃ ┗ 📜Searchbar.tsx
┃ ┣ 📂Modal
┃ ┃ ┣ 📜PostModal.tsx
┃ ┃ ┣ 📜PostModalImage.tsx
┃ ┃ ┗ 📜PostModalVideo.tsx
┃ ┣ 📂Myprofile
┃ ┃ ┣ 📜MyInfo.tsx
┃ ┃ ┣ 📜MyInfoImage.tsx
┃ ┃ ┣ 📜Mypost.tsx
┃ ┃ ┣ 📜MypostComment.tsx
┃ ┃ ┣ 📜MypostDelbtn.tsx
┃ ┃ ┣ 📜Myposts.tsx
┃ ┃ ┣ 📜MypostsPage.tsx
┃ ┃ ┗ 📜MyprofileTab.tsx
┃ ┣ 📂Room
┃ ┃ ┣ 📜RoomCard.tsx
┃ ┃ ┣ 📜RoomCreateBtn.tsx
┃ ┃ ┣ 📜RoomList.tsx
┃ ┃ ┗ 📜RoomModal.tsx
┃ ┣ 📂search
┃ ┃ ┣ 📜SearchPage.tsx
┃ ┃ ┗ 📜SearchResult.tsx
┃ ┣ 📂sidebar
┃ ┃ ┣ 📜Sidebar.tsx
┃ ┃ ┗ 📜Sidebars.tsx
┃ ┣ 📂ui // shadn/ui 파일
┃ ┃ ┣ 📜alert-dialog.tsx
┃ ┃ ┣ 📜button.tsx
┃ ┃ ┣ 📜card.tsx
┃ ┃ ┣ 📜carousel.tsx
┃ ┃ ┣ 📜Container.tsx
┃ ┃ ┣ 📜customToast.tsx
┃ ┃ ┣ 📜input.tsx
┃ ┃ ┣ 📜label.tsx
┃ ┃ ┣ 📜Loading.tsx
┃ ┃ ┣ 📜Modal.tsx
┃ ┃ ┣ 📜pagination.tsx
┃ ┃ ┣ 📜ScrollTop.tsx
┃ ┃ ┣ 📜select.tsx
┃ ┃ ┣ 📜sheet.tsx
┃ ┃ ┣ 📜table.tsx
┃ ┃ ┣ 📜tabs.tsx
┃ ┃ ┗ 📜textarea.tsx
┃ ┗ 📜ProtectedRoute.tsx
┣ 📂hook // 커스텀 훅
┃ ┣ 📜getUser.tsx
┃ ┣ 📜useScroll.tsx
┃ ┣ 📜useThrottle.tsx
┃ ┗ 📜useWindowWidth.tsx
┣ 📂lib // api 파일
┃ ┣ 📜commentApi.ts
┃ ┣ 📜footballApi.ts
┃ ┣ 📜likeApi.ts
┃ ┣ 📜postApi.ts
┃ ┣ 📜roomApi.ts
┃ ┣ 📜socket.ts
┃ ┣ 📜userApi.ts
┃ ┗ 📜utils.ts
┣ 📂pages // 페이지
┃ ┣ 📜Chat.tsx
┃ ┣ 📜ChatRoom.tsx
┃ ┣ 📜Football.tsx
┃ ┣ 📜Home.tsx
┃ ┣ 📜Login.tsx
┃ ┣ 📜Myprofile.tsx
┃ ┣ 📜Register.tsx
┃ ┗ 📜Search.tsx
┣ 📂store // 전역관리
┃ ┣ 📜useAuth.tsx // 인증 상태 관리
┃ ┣ 📜useRoomModel.tsx // 채팅방 모달 상태 관리
┃ ┣ 📜userPostModel.tsx // 게시물 모달 상태 관리
┃ ┗ 📜useTeamModel.tsx // 팀 모달 상태 관리
┣ 📂types // 타입스크립트 타입
┃ ┣ 📜etc.ts
┃ ┣ 📜foontballTypes.ts
┃ ┗ 📜types.ts
┣ 📂utils // 기타
┃ ┣ 📜formSchema.ts // 회원가입 양식 스키마
┃ ┗ 📜league.ts // 리그 데이터
┣ 📜App.css
┣ 📜App.tsx
┣ 📜firebase.ts
┣ 📜index.css
┣ 📜main.tsx
┗ 📜vite-env.d.ts
┣ 📦config
┃ ┗ 📜db.js
┣ 📦controller
┃ ┣ 📜chatController.js
┃ ┣ 📜commentController.js
┃ ┣ 📜disLikeController.js
┃ ┣ 📜footballController.js
┃ ┣ 📜likeController.js
┃ ┣ 📜postController.js
┃ ┣ 📜roomController.js
┃ ┣ 📜teamController.js
┃ ┗ 📜userController.js
📦middlewear
┗ 📜authMiddlewear.js
┣ 📦models
┃ ┣ 📜chatModel.js
┃ ┣ 📜commentModel.js
┃ ┣ 📜disLikeModel.js
┃ ┣ 📜likeModel.js
┃ ┣ 📜postModel.js
┃ ┣ 📜roomModel.js
┃ ┗ 📜userModel.js
┣ 📂routes
┃ ┣ 📜commentRoute.js
┃ ┣ 📜dislikeRoute.js
┃ ┣ 📜footballRoute.js
┃ ┣ 📜likeRoute.js
┃ ┣ 📜postRoutes.js
┃ ┣ 📜roomRoute.js
┃ ┣ 📜teamRoute.js
┃ ┗ 📜userRoutes.js
┣ 📜.env
┣ 📜index.js
┣ 📜package-lock.json
┗ 📜package.json