issue daily 📰
Open News API를 이용하여 최근 뉴스들을 카테고리별로 확인할 수 있는 사이트입니다.
배포 링크 : https://issue-daily.vercel.app/
깃허브 링크 : https://github.com/smu06030/issue-daily
프로젝트 구조 📂
📦src
┣ 📂app
┃ ┣ 📂(auth)
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂reset-password
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂signup
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂update-password
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📜auth-layout.tsx
┃ ┃ ┗ 📜loading.tsx
┃ ┣ 📂(root)
┃ ┃ ┣ 📂(protected)
┃ ┃ ┃ ┗ 📂mypage
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📂detail
┃ ┃ ┃ ┗ 📂[category]
┃ ┃ ┃ ┃ ┗ 📂[id]
┃ ┃ ┃ ┃ ┃ ┣ 📜AllComments.tsx
┃ ┃ ┃ ┃ ┃ ┣ 📜Comment.tsx
┃ ┃ ┃ ┃ ┃ ┣ 📜Comments.tsx
┃ ┃ ┃ ┃ ┃ ┣ 📜MyComments.tsx
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂api
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜route.ts
┃ ┃ ┣ 📂logout
┃ ┃ ┃ ┗ 📜route.ts
┃ ┃ ┣ 📂signup
┃ ┃ ┃ ┗ 📜route.ts
┃ ┃ ┗ 📜auth.ts
┃ ┣ 📂auth
┃ ┃ ┗ 📂callback
┃ ┃ ┃ ┗ 📜route.ts
┃ ┣ 📂fonts
┃ ┃ ┣ 📜GeistMonoVF.woff
┃ ┃ ┣ 📜GeistVF.woff
┃ ┃ ┗ 📜PretendardVariable.woff2
┃ ┣ 📜favicon.ico
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┣ 📜page.tsx
┃ ┗ 📜providers.tsx
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Button
┃ ┃ ┃ ┣ 📜GoogleButton.tsx
┃ ┃ ┃ ┣ 📜KakaoButton.tsx
┃ ┃ ┃ ┗ 📜LogoutButton.tsx
┃ ┃ ┣ 📂Form
┃ ┃ ┃ ┣ 📜LoginForm.tsx
┃ ┃ ┃ ┣ 📜ResetPasswordForm.tsx
┃ ┃ ┃ ┣ 📜SignUpForm.tsx
┃ ┃ ┃ ┗ 📜UpdatePasswordForm.tsx
┃ ┃ ┗ 📂InputFeild
┃ ┃ ┃ ┗ 📜InputField.tsx
┃ ┣ 📂layout
┃ ┃ ┣ 📜Footer.tsx
┃ ┃ ┗ 📜Header.tsx
┃ ┣ 📂likes
┃ ┃ ┗ 📜LikeButton.tsx
┃ ┣ 📂mainPage
┃ ┃ ┣ 📜CategoryNewsCard.tsx
┃ ┃ ┣ 📜CategoryNewsList.tsx
┃ ┃ ┣ 📜TopNewsCard.tsx
┃ ┃ ┗ 📜TopNewsList.tsx
┃ ┗ 📂mypage
┃ ┃ ┣ 📜Card.tsx
┃ ┃ ┣ 📜Comment.tsx
┃ ┃ ┣ 📜Likes.tsx
┃ ┃ ┣ 📜Modal.tsx
┃ ┃ ┗ 📜Profile.tsx
┣ 📂providers
┃ ┗ 📜userStoreProvider.tsx
┣ 📂public
┃ ┣ 📂images
┃ ┃ ┣ 📜default_img.jpg
┃ ┃ ┗ 📜default_profile.jpeg
┃ ┣ 📜google.png
┃ ┣ 📜kakao.png
┃ ┗ 📜news_image.jpg
┣ 📂serverActions
┃ ┣ 📜newsApi.ts
┃ ┗ 📜profileActions.ts
┣ 📂store
┃ ┗ 📜user-store.ts
┣ 📂types
┃ ┣ 📜comment.ts
┃ ┣ 📜mypageTypes.ts
┃ ┗ 📜newsInfo.ts
┣ 📂utils
┃ ┣ 📂category
┃ ┃ ┗ 📜categoryArr.ts
┃ ┣ 📂supabase
┃ ┃ ┣ 📜client.ts
┃ ┃ ┣ 📜middleware.ts
┃ ┃ ┣ 📜profileService.ts
┃ ┃ ┗ 📜server.ts
┃ ┗ 📜teamInfo.ts
┗ 📜middleware.ts
기술 스택 🛠️
프론트
협업 툴
버전 관리
서버리스
배포
팀장으로서의 역할 👨👩👧👦
1. 체계적이고 효율적인 프로젝트 관리하기
이번 프로젝트에서 ✨팀장으로서의 가장 큰 목표는 체계적이고 효율적인 프로젝트 관리✨였습니다.
그래서 Github의 다양한 기능들을 적극 활용해 프로젝트 전반을 관리했습니다.
Github 이슈 관리
작업을 체계적으로 나누기 위해 이슈마다 기능, 오류, 리팩토리 등의 태그를 달아 분류했습니다.
이슈에는 세부 설명과 해야 할 작업을 작성하고 완료되면 체크할 수 있는 방식으로 진행했습니다.
Github 마일스톤 구성
마일스톤을 프로젝트 각 화면 단위로 구성하여, 각 화면의 진행 상태를 시각적으로 한눈에 파악해 진행 상황을 효율적으로 관리할 수 있었습니다.
Github Projects 활용
Github Projects의 칸반 보드를 활용해 각 이슈의 진행 상태를 시각적으로 관리해 작업 흐름을 관리하는 데 도움이 되었고, 전체적인 프로젝트 상태를 모니터링하며 팀원 간의 작업 상태 공유와 마감 기한을 준수할 수 있었습니다.
효과적인 커뮤니케이션
Github의 다양한 기능을 활용해 체계적으로 프로젝트를 관리하면서, 팀 내 커뮤니케이션이 원활해졌고 팀 전체의 효율성이 크게 향상되었습니다. 이를 통해 작업 속도가 빨라졌고, 최종 목표 달성까지의 과정이 체계적으로 이루어졌습니다.
내가 맡은 역할 🔥
인증 기능 구현
Supabase Auth를 사용해 이메일 기반의 로그인과 OAuth 기반의 소셜 로그인 기능을 구현했습니다.
사용자가 로그인을 하면 발급된 JWT 토큰을 쿠키에 저장해 클라이언트 측에서 인증 상태를 확인할 수 있도록 했고, 이를 통해 사용자는 인가된 리소스에 접근할 수 있었습니다.
❓왜 Supabase Auth 인지
supabse auth를 선택한 이유는 supabase가 `Access Token`과 `Refresh Token`을 자동으로 관리해 줘서 복잡한 토큰 관리 없이 손쉽게 인증 기능을 구현할 수 있었고 이를 통해 개발 생산성을 높일 수 있어서 선택했습니다.
회고 🧐
프로젝트 리더십 경험을 통한 성과
이 프로젝트에서 Github를 활용한 체계적인 프로젝트 관리를 통해 팀 전체의 효율성을 크게 높였습니다.
'공부 > 프로젝트' 카테고리의 다른 글
KINS 프로젝트 초기 세팅 (1) | 2024.12.20 |
---|---|
[모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 (0) | 2024.11.19 |
[팀 프로젝트] Go 캠핑! (1) | 2024.09.23 |
[리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 (1) | 2024.09.15 |
[개인 프로젝트] MBTI 테스트 (0) | 2024.09.14 |
[개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 (0) | 2024.09.09 |
[팀 프로젝트] 방콕 스타일 회고 (0) | 2024.09.04 |
[팀 프로젝트] 방콕 스타일 (2) | 2024.09.04 |