프로젝트 기록 1 - 프로젝트 기획 및 와이어 프레임 구현

오늘은 스파르타 프론트엔드 엔지니어 양성과정 9기의 2번째 팀 프로젝트가 진행되었다.
새로운 프로젝트를 시작하면서 아이디어 구상 및 와이어 프레임 작성, 사용기술 스택에 대해 살펴보겠다!

 

📜 프로젝트 주제 선정

브레인스토밍 과정

처음 프로젝트를 시작하면 팀원들끼리 어떤 프로젝트를 구현할 지 주제를 정해야한다!

원활한 진행을 위해 팀원들 서로서로 1개씩 주제를 말하기로 했다.

 

• 흥미 & 관심사와 관련된 주제로 글을 작성하는 사이트
• 스파르타 프론트엔드 9기의 TIL 및 인사이트 등의 블로그 글 공유 사이트
• 향수등 여러 제품에 대해서 사용자가 리뷰를 작성할 수 있는 사이트
• 코드에 대한 궁금증을 올리고 다른 사용자에게 코드 리뷰를 받을 수 있는 사이트
• 트위터와 인스타그램 같이 오늘 일을 작성하고 공유할 수 있는 사이트
• 집 주위릐 꿀팁들을 서로 공유하는 사이트

위와 같은 주제들이 나왔었다!
서로가 낸 주제들을 듣고 하고 싶은 주제들을 선택했을 때 "제품 리뷰 사이트", "코드 리뷰 사이트", "집근처 꿀팁 사이트"로 좁혀졌다.

 

그리고 최종 주제를 결정하기 위해서 아이디어들에 들어가야할 기능 또는 장점/단점에 대해 서로 이야기해보았다.

이 아이디어들을 "만들고 싶은 가?", "자신도 사용하고 싶은가?", "프로젝트 규모가 적절한가?" 를 기준으로 고민해보았을 때, 
만장일치로 "코드 리뷰 사이트"로 결정되었다.

 

 

📌 주요 기능 설계

컨텐츠 관리 기능

사용자들이 더 풍부한 표현이 가능한 글을 작성할 수 있도록 Markdown 형식을 지원하는 에디터를 구현합니다:

• 글 / 댓글
  • Markdown 문법의 에디터 제공
  • 작성 / 수정 / 삭제 가능
  • 좋아요 버튼 가능

사용자 인증 기능

Supabase의 인증 시스템을 활용하여 안전하고 편리한 사용자 관리를 구현합니다:

• 회원가입 
  • 이메일 / 비밀번호 / 닉네임 / 비밀번호 재설정을 위한 질문 & 답변을 받음
• 로그인
  • 이메일 / 비밀번호로 로그인
  • 소셜 로그인 연동 (시간이 가능하다면)
  • contextAPI로 로그인 정보 관리
  • Supabase의 session을 통해 로그인 유지
• 비밀번호 관리
  • 비밀번호 재설정
  • 회원가입 때 기입한 질문의 답벼으로 인증

 

그외 프로젝트 관련 기능

• 무한 스크롤 - 홈 화면에서 글 목록 무한 스크롤
  • 페이지당 최적화된 게시글 수 설정
  • 데이터 캐싱 처리 / 스크롤 위치 기억 (시간이 가능하다면)
  • 로딩 상태를 skeleton UI로 표시 (시간이 가능하다면)

 

 

👾 와이어 프레임

페이지 구조 설계

프로젝트의 주요 페이지들을 다음과 같이 구성하였다.

• 홈 페이지 (/)
• 로그인/회원가입 페이지 (/sign-in , /sign-up)
• 글 작성/수정 페이지 (/write, /edit)
• 글 상세 페이지 (/view/[:post-id])
• 마이 페이지 (/my-page)

페이지별 상세 구성

홈 페이지

• 필터링 - 프로그래밍 언어별 필터링 / 최신순 & 좋아요 갯수 & 댓글 갯수로 정렬
• 코드 리뷰 썸네일 - 리뷰가 이루어지는 토론의 장, 제목 / 작성자 / 사용 언어 / 좋아요 & 댓글 수가 기입 되어 있음

 

글 작성/수정 페이지

• 제목 input 박스, 언어 타입 선택 select 박스, Code Editor, 등록하기 버튼

 

회원가입 페이지

• 아이디, 비밀번호를 작성하여 회원가입을 하고, 아이디 중복 확인이 가능합니다.
• 추후 비밀번호를 분실했을 경우, 간단하게 사전 질문에 대한 답변을 저장해두어 비밀번호 재설정까지 가능합니다.

 

로그인 페이지

• 가입해둔 아이디와 비밀번호를 입력하여 로그인합니다.
• 추가로 회원가입을 하지 않았다면 회원가입 페이지 링크를 지원합니다.

 

마이 페이지

• 개인 정보 수정을 할 수 있습니다.

 

 

📖 Github Rules

브랜치명 생성 방식 - Type/[issue-number]-[branch_name]

main	배포용 브랜치	main
develop	통합(개발)용 브랜치	develop
Feature/	기능 개발 브랜치	Feature/#10-login
Bugfix/	버그 수정 브랜치	Bugfix/#11-navbar
Hotfix/	긴급 패치 브랜치	Hotfix/#9-payment
Chore/	문서, 설정파일 변경 브랜치	Chore/#7-update_readme
Docs/	문서 작업 브랜치	Docs/#8-API_guide
Refactor/	리팩토링 브랜치	Refactor/#5-home_page_UI

 

Commit message

type:#[issue_number] title

예시)
feat:#15 공통 컴포넌트 Button 구현

 

commit 타입	commit 타입 설명
feat	기능 구현
bugfix	버그 수정
refactor	코드 리팩토링
deisgn	디자인 수정
chore	package.json 변경(npm 설치 등) & gitignore 변경 & setting

 

Pull Request

### 이슈 번호
> 해당 이슈 번호를 적습니다.

### 작업 설명
> 작업한 내용을 적습니다.

### 리뷰 요구 사항
> 리뷰 예상 시간 및 고민 사항을 적습니다.
> 논의가 필요한 부분 남겨주세용

### 미리보기
> 프론트에서 디자인에 변경사항 또는 새로운 디자인을 머지하는 경우 이미지를 첨부합니다.

 

 

 

사용 기술 스택

• pnpm로 패키지 관리
• styled-components 로 스타일 적용
• useReducer와 contextAPI를 이용하여 전역 상태 관리
• React-Router-Dom으로 라우팅 구현하여 SPA 적용
• BaaS 서비스인 supabase를 이용하여 data 관리
• vercel을 통해 배포