[NewsFeed-Day 1] 10조의 첫 발자국..👣

뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간
→ 블로그, 커뮤니티, SNS 모두 될 수 있어요.

---

첫 팀 프로젝트를 시작한 날.

오늘 하루는 팀원들과 함께 프로젝트의 방향과 각자의 역할을 정하는 시간을 가졌다.

 

2025.02.12 (수) Works

1. S.A(Starting Assignments) 정하기
- 프로젝트 주제
- 포함할 내용
- 구성
- 기능
2. 와이어프레임 작성 - 피그마
- 페이지 정하기
- 페이지 구성하기
- 정보 구조 설계도
3. 팀 규칙 정하기 
- 커밋 컨벤션
- git rules
4. 나의 역할파악하기

 

 

 

S.A(Starting Assignments) 

 

📍프로젝트 주제

첫 팀원들이 모였을 때 모두 여행을 좋아한다는 공통점을 찾았다.

그렇게 정해진 우리 팀명은 여행보내조✈️

따라서 프로젝트 주제는 바로 정할 수 있었다.

'여행 기록 뉴스피드 : FootPrint👣'

회원가입과 로그인을 통해 여행 기록을 하는 뉴스피드 사이트이다.

 

📍포함할 내용

과제 발제에 제공된 예시 영상을 충분히 참고하여 아이디어들을 충분히 이야기 나누었다.

1. 마이페이지 (내가 쓴 게시글 / 프로필 수정)
2. 게시글 작성 / 수정 / 삭제
3. 국외/국내로 나누어 보기 (게시글 작성할 때 국내/국외 선택 추가)
4. 댓글 수정/삭제
5. 좋아요
6. 사용자별 게시글 확인

과 같은 의견들이 나왔고 우리는 이걸 구성과 기능 측면으로 나누었다.

 

📍구성

• Home (국내 국외)
• MyPage (프로필 / 내 게시물 모아보기)
• 로그인 페이지 / 회원가입 페이지
• 게시글 상세 페이지
• 게시글 작성 페이지

대략적으로 페이지 단위를 나누었고 팀원 수와 동일하게 다섯 개의 페이지 카테고리가 정해졌다.

 

📍기능

• 회원가입 / 로그인(로그아웃?)
• 게시글 작성 / 수정 / 삭제
• 마이페이지 (프로필 수정, 내 게시물)
• 카테고리 별 게시글 모아보기 (국내/국외)
• 검색 기능
• 지도 (시간 남으면)

기능적 측면으로도 구현할 수 있는 것들을 정해보았다.

시간이 남으면 추가적으로 해볼 것까지!

 

 

와이어프레임 작성 - 피그마

'피그마'라는 사이트를 통해 대략적으로 프로젝트 페이지 틀을 구성해보았다.

 

📍페이지 / 모달 정하기

• 홈
• 홈 - 로그인
• 마이페이지
• [Modal] 프로필 수정
• 로그인
• 회원가입
• [Modal] 게시글 상세
• [Modal] 게시글 상세 - 로그인
• 게시글 작성/수정

모든 페이지와 모달을 구분하자면 이렇게 나뉜다.

회원가입과 로그인을 통해 권한을 부여하기 때문에 그에 따른 페이지 구성도 달라진다.

 

📍페이지 구성하기

페이지별로 대략적인 틀을 구성했다.

변동 가능성은 있지만 어느정도 머릿속에서 구상하는데에 도움이 많이 되었다.

 

 

📍정보 구조 설계도

페이지가 꽤 많아지고 이동이 복잡해져, 설계도를 만들었다.

 

 

 

팀 규칙 정하기

 

📍커밋 컨벤션

기존 노션에 입력되어 있던 커밋 컨벤션을 그대로 따르기로 했다.

📍git rules

그 외에도 우리 조만의 다양한 규칙을 정했다.

• 변수명, 함수명
  • 최대한 길게, 어떤 의미인지 알게 (isLoggedIn)
  • 카멜 케이스
• PR 내용
  • 스크린샷
  • 작업내용 (what? how?)
• 브랜치명 
  • page/myPage
• 그 외 룰 
  • PR 팀원에게 알리기
  • 세명이 확인하면 merge (정현님 포함)
  • 필요없는 주석 , 콘솔 삭제하기
  • 채팅창에 치지 말고 마이크로 말하기

 

 

나의 역할 파악하기

 

내가 맡은 부분은 Home 페이지이다.

 

1. 검색창
   1-1. input
   1-2. 검색 시 [ 전체(기본) / 국내 / 국외 ] 게시글 필터링
2. 메인 로고
   2-1. FootPrint (text)
3. 로그인/회원가입 버튼
   3-1. 로그인 페이지로 이동
4. 메인 게시글(최신순)
   4-1. 게시글 클릭 시 상세페이지로 이동
5. 로그인 후 변동사항
   5-1.  로그인 버튼 -> 마이페이지 버튼&이동
   5-2. 하단 게시물 추가 버튼 -> 게시물 작성 페이지로 이동

 

Home 페이지를 구상하면서 정리해본 기능 및 동작들이다.

 

[검색 필터링]

- 검색창의 입력값에 맞는 전체 게시물을 나타냄

- 그 안에서 국내 / 국외 버튼을 통해 게시글을 필터링 하여 나타냄

 

[페이지 이동]

- 메인로고 클릭 시 Home 페이지로 이동

- 로그인/회원가입 버튼을 통해 로그인페이지로 이동

- 게시글을 클릭 시 상세페이지로 이동

- 게시물 추가 버튼 클릭 시 게시물 작성 페이지로 이동

- 마이페이지 버튼 클릭 시 마이페이지로 이동

 

[로그인 후의 변동사항]

- 상단의 로그인/회원가입 버튼이 마이페이지 버튼으로 바뀜

 

 

 

 

Tomorrow Task

- Home 페이지 UI 구현하기 (기능 제외)

- 팀원들과 디자인 의논하기

- Prettier 프로젝트 내에서 파일로 관리하기