[팀 프로젝트] issue daily

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 Projects

 

효과적인 커뮤니케이션

 

Github의 다양한 기능을 활용해 체계적으로 프로젝트를 관리하면서, 팀 내 커뮤니케이션이 원활해졌고 팀 전체의 효율성이 크게 향상되었습니다. 이를 통해 작업 속도가 빨라졌고, 최종 목표 달성까지의 과정이 체계적으로 이루어졌습니다.

 

 

 

내가 맡은 역할 🔥

인증 기능 구현

[Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정

 

Supabase Auth를 사용해 이메일 기반의 로그인과 OAuth 기반의 소셜 로그인 기능을 구현했습니다.

 

로그인

 

사용자가 로그인을 하면 발급된 JWT 토큰을 쿠키에 저장해 클라이언트 측에서 인증 상태를 확인할 수 있도록 했고, 이를 통해 사용자는 인가된 리소스에 접근할 수 있었습니다.

 

❓왜 Supabase Auth 인지

 

supabse auth를 선택한 이유는 supabase가 `Access Token`과 `Refresh Token`을 자동으로 관리해 줘서 복잡한 토큰 관리 없이 손쉽게 인증 기능을 구현할 수 있었고 이를 통해 개발 생산성을 높일 수 있어서 선택했습니다.

 

회고 🧐

프로젝트 리더십 경험을 통한 성과

이 프로젝트에서 Github를 활용한 체계적인 프로젝트 관리를 통해 팀 전체의 효율성을 크게 높였습니다.