GitHub - pladata-encore/BE09-2nd-2team

프로젝트 개요

인스타그램 클론 프로젝트 (5/15 ~ 5/19)

본 프로젝트는 실제 서비스와 유사한 SNS 기능들을 직접 구현함으로써 React 기반 SPA 구조에 대한 이해도를 높이는 것을 목표로 하였습니다. 또한, Git Flow 전략과 이슈·마일스톤 관리, 커밋 컨벤션 등을 적용하여 효율적인 협업을 진행하고자 하였으며, Vercel을 활용한 배포를 통해 프론트엔드 프로젝트의 배포 과정을 익히는 것을 목표로 하였습니다. 이와 함께 테스트 케이스 및 결과를 문서화하여 기능의 안정성을 검증하고 QA 프로세스를 수행하는 데에도 목적을 두고 있습니다.

⭐ 클론 사이트

사이트명: 인스타그램
주소: https://www.instagram.com/

📄 클론 페이지

메인(홈) 페이지
로그인/회원가입 페이지
스토리 페이지
알림 페이지
게시글 페이지
검색 페이지
DM 페이지

🖼️ 와이어 프레임 https://www.figma.com/design/2jA1u7Lfn8W1wNVlOG4uFe/%EC%9D%B8%EC%8A%A4%ED%83%80%ED%82%AC%EB%A1%9C%EA%B7%B8%EB%9E%A8?node-id=0-1&p=f&t=RYMK150jCxFm6ah7-0

🗓 일정 계획

기간	진행 내용
1일차	사이트 분석 / 페이지 역할 분담 / 협업 관련 규칙 정의
2일차	레이아웃 구성 및 컴포넌트 구현
3일차	연관 페이지 연동 및 테스트, 배포 및 마무리 문서 작성

SPA 사이트

https://be-09-2st-2team.vercel.app/

🔧 요구사항정의서

분류	no	기능	설명	비고	담당자
공통(푸터)	REQ-FOOTER-001	푸터	로그인, 회원가입, 프로필 페이지 하단 위치		@정아
로그인	REQ-LOGIN-001	로그인 form아이디 / 비밀번호 입력	로그인 입력 UI	- 비밀번호 표시 / 숨기기 기능 필요- 잘못된 입력값 > 에러 텍스트 표시	@정아
로그인	REQ-LOGIN-002	로그인 버튼	메인 페이지로 이동		@정아
로그인	REQ-LOGIN-003	가입하기 버튼	회원가입 페이지로 이동		@정아
회원가입	REQ-SIGNUP-001	회원가입 form전화번호, 비밀번호 입력 등등		- 잘못된 입력값 > 에러 텍스트 표시	@정아
회원가입	REQ-SIGNUP-002	가입하기 버튼	로그인 페이지로 이동		@정아
회원가입	REQ-SIGNUP-003	로그인 버튼	로그인 페이지로 이동		@정아
스토리	REQ-STORY-001	스토리 전체화면(스토리 목록을 눌렀을때)	스토리 썸네일을 해당 유저 스토리 전체화면으로 전환 양쪽으로 스토리의 썸네일을 보여줌	-5초 지나면 다음 화면으로 넘어감	@현우
스토리	REQ-STORY-002	다음 스토리 버튼	스토리 전체화면에서 오른쪽 버튼 누르면 다음 스토리로 이동	맨 오른쪽 스토리일 경우 다음 스토리 버튼 사라짐	@현우
스토리	REQ-STORY-003	이전 스토리 버튼	스토리 전체화면에서 왼쪽 버튼 누르면 이전 스토리로 이동	맨 왼쪽 스토리일 경우 이전 스토리 버튼 사라짐	@현우
알림	REQ-NOTIFY-001	알림 목록 표시	좋아요, 팔로우, 댓글등을 구분하여 리스트로 나타내줌	-최근 순으로 위에서부터 정렬-팔로우 파란색 버튼을 누를 경우 회색 팔로잉 버튼으로 바뀜	@현우
알림	REQ-NOTIFY-002	팔로우 요청 페이지	팔로우 요청 페이지로 이동	-팔로우 요청 페이지로 이동-화살표 누르면 다시 알림 페이지로 이동	@현우
프로필	REQ-PROFILE-001	프로필 페이지 표시	프로필 편집, 보관된 스토리 보러가기 버튼	- 버튼 위에 마우스 hover 상태 시, 진한 색으로 변함.	@혜빈
프로필	REQ-PROFILE-002	포스트 목록 표시	프로필 페이지에서 아래로 스크롤시 포스트 목록 보기 가능	- 스크롤 시 한 줄에 3개씩 게시물 리스트 보임	@혜빈
게시글	REQ-POST-001	게시글상세조회	프로필 페이지에서 포스트 클릭시 위에 겹쳐서 게시글 페이지 모달창 뜸	- 뒷 배경 진한 회색으로 처리- 좋아요, 스크랩, 댓글 남기기 가능	@혜빈
게시글	REQ-POST-002	게시글에 좋아요	좋아요 클릭시 하트가 커지면서 바뀜		@혜빈
메인화면	REQ-MAIN-001	메인 피드 스크롤 내리기	아래로 스크롤하여 게시글 보기		@준서
메인화면	REQ-MAIN-002	게시글 - 프로필 버튼	게시글의 프로필을 누르면 해당 프로필로 이동		@준서
메인화면	REQ-MAIN-003	게시글 - 좋아요 누르기 버튼	게시글 하단에 있는 하트를 눌러 좋아요 표시하기	- 좋아요를 누르면 하트가 움직이면서 빨간색으로 변하고 좋아요 수가 늘어남- 이미 표시된 좋아요를 다시 누르면 좋아요 수가 줄어들면서 하트 색깔이 하얀색으로 돌아감	@준서
메인화면	REQ-MAIN-004	게시글 더보기 버튼	게시글 하단의 더보기를 눌러 전체 게시글 확인	- 게시글 더보기를 누르면 다시 게시글을 줄일 수 없음- 더보기 버튼을 누르기 전에는 게시글의 첫번째 줄만 나옴	@준서
메인화면	REQ-MAIN-005	댓글 모두보기 버튼 (확인하기)	버튼을 눌러 게시글에 달린 모든 댓글 확인	- 폼 화면으로 전환, 배경은 회색으로 변함- 주변 배경을 누르면 폼 화면이 사라짐- ‘댓글 n개 모두보기’ 형식	@준서
메인화면	REQ-MAIN-006	댓글 달기	게시글 맨 밑 하단을 클릭하여 댓글 등록	- ‘댓글 달기…’가 placeholder로 들어가 있기	@준서
메인화면	REQ-MAIN-007	댓글 말풍선 버튼 (확인하기)	버튼을 눌러 게시글에 달린 모든 댓글 확인	- 폼 화면으로 전환, 배경은 회색으로 변함- 주변 배경을 누르면 폼 화면이 사라짐	@준서
메인화면	REQ-MAIN-009	게시글 설정 기능	버튼을 누르면 신고~취소 버튼이 나타남	- 폼 화면으로 전환, 배경은 회색으로 변함- 주변 배경을 누르면 폼 화면이 사라짐	@준서
메인화면	REQ-MAIN-010	좌측 네비게이션바	홈, 검색, 릴스, 메시지, 알림, 프로필 버튼을 누르면 각각의 창으로 이동할 수 있는 네비게이션 바	- 마우스를 갖다대면 회색으로 변함	@준서
DM 목록 페이지	REQ-DM-001	DM 목록 페이지	DM목록페이지	-채팅중인 채팅창 표시,새로운 메시지 보내기 버튼출력,새로운 메시지 보내기 버튼 누를시 보낼사람 선택창 출력,채팅중인 상대 프로필 표시	@범석
DM 목록 페이지	REQ-DM-002	채팅창	채팅창 페이지	- 대화 내용 표시, 대화 상세보기 버튼 클릭시 대화상세보기 창 출력, 대화방 나가기 , 대화방 삭제	@범석
DM 목록 페이지	REQ-DM-003	채팅창	대화내용 상세보기	- 채팅 삭제 , 신고 , 차단 버튼 출력	@범석
검색 페이지	REQ-SEARCH-001	검색 페이지	검색창	- 검색	@범석
검색 페이지	REQ-SEARCH-002	검색 페이지	목록	- 최근 검색 항목 - 최근 검색 항목 모두 지우기	@범석

테스트 케이스

분류	요구사항 no	중분류	테스트 방법	예상 결과
공통(푸터)	REQ-FOOTER-001	정보 표시	없음	하단에 Meta, 소개, 블로그 등등 정보가 뜸
로그인	REQ-LOGIN-002	로그인 버튼 활성화	아이디, 비번 입력	아이디, 비번을 모두 입력해야 로그인 버튼이 활성화됨
로그인	REQ-LOGIN-001	비밀번호 표시/숨김	비밀번호를 입력 후 표시/숨기기 버튼을 번갈아 클릭	비밀번호가 표시되거나 숨겨짐
로그인	REQ-LOGIN-002	로그인	아이디 : qwerty비번 : qwerty입력 후 로그인 버튼 클릭	메인 페이지로 이동
로그인	REQ-LOGIN-002	로그인 실패	잘못된 아이디나 비밀번호를 입력함	“잘못된 비밀번호입니다. 다시 확인하세요.” 문구 표시
로그인	REQ-LOGIN-003	회원가입 버튼	가입하기 문구 클릭	회원가입 페이지로 이동
로그인	REQ-LOGIN-001	반응형 레이아웃	width 900px이하로 줄이기	왼쪽 이미지 사라지고 로그인폼만 표시됨
회원가입	REQ-SIGNUP-002	가입 버튼 활성화	유효한 휴대폰번호/이메일, 비밀번호, 성명, 사용자이름 입력	휴대폰번호/이메일, 비밀번호, 성명, 사용자이름 4가지 항목 모두 유효한 값으로 입력해야 가입 버튼 활성화됨
회원가입	REQ-SIGNUP-001	휴대폰번호/이메일주소 유효성 검사	잘못된 휴대폰번호/이메일주소 입력 (양식을 지키지 않음)	에러 텍스트 뜸
회원가입	REQ-SIGNUP-001	비밀번호 유효성 검사	잘못된 비밀번호 입력 (6자 이상으로 입력하지 않음)	에러텍스트 뜸
회원가입	REQ-SIGNUP-001	성명 유효성 검사	잘못된 성명 입력(64자 미만으로 입력하지 않음)	에러텍스트 뜸
회원가입	REQ-SIGNUP-001	사용자 이름 유효성 검사	잘못된 사용자 이름 입력(문자, 숫자, 밑줄 및 마침표 이외 다른 값을 입력)or이미 사용하고 있는 이름(qwerty) 입력	에러텍스트 뜸
회원가입	REQ-SIGNUP-003	로그인 버튼	로그인 버튼 클릭	로그인 페이지 이동
메인화면	REQ-MAIN-001	스크롤 기능	마우스 휠을 이동한다	스크롤하면 게시물들이 차례로 보임
메인화면	REQ-MAIN-010	왼쪽 네비게이션 바 기능	홈, 검색, 탐색 탭, 메시지, 알림, 만들기, 프로, Threads, 더보기 버튼 누르기	각각의 버튼을 눌렀을 때 해당하는 페이지로 이동 (홈, 검색, 메시지, 알림, 프로필, 더보기만 구현)
메인화면		스토리 열람 기능	상단에 있는 스토리 버튼 누르기	스토리 페이지로 넘어감
메인화면	REQ-MAIN-003	게시물 좋아요 기능	게시물 좋아요 버튼 클릭	게시물 좋아요 개수 1 증가
메인화면	REQ-MAIN-004	게시물 댓글 확인	게시물 댓글 모양 아이콘 클릭	게시물 전체 페이지로 이동
메인화면	REQ-MAIN-005	게시물 댓글 확인	게시물 ‘모두보기’ 클릭	게시물 전체 페이지로 이동
메인화면	REQ-MAIN-006	게시물 댓글 달기	게시물 댓글 달기 버튼 클릭	“안녕하세요?”라는 댓글을 달면 댓글이 추가됨
메인화면		사이드바 추천 계정 팔로우	팔로우 버튼 클릭	팔로우 버튼을 클릭하면 팔로우 버튼 색깔이 바뀌며 ‘팔로잉’으로 변경
프로필	REQ-PROFILE-001	포스트 목록 스크롤	프로필 페이지에서 위아래 스크롤	포스트 목록이 스크롤됨
프로필	REQ-PROFILE-002	포스트 상세 조회	조회를 원하는 포스트 클릭	모달창이 뜨고 해당 게시물 정보를 불러옴
프로필	REQ-PROFILE-003	팔로워/팔로잉 목록 조회	해당 버튼 클릭	마우스를 올렸을 시, 회색으로 변함.
게시글	REQ-POST-001	게시글 모달 띄우기	게시글 클릭	게시글 클릭시 뒤에 배경 어두워지면서 게시글 모달창 뜸
게시글	REQ-POST-002	게시글 모달창 지우기	x버튼 클릭	x버튼 클릭시 모달창 안보이게 설정
게시글	REQ-POST-003	게시글 사진 넘기기	좌우 버튼 클릭	첫페이지는 왼쪽 버튼 안보임왼쪽 버튼 클릭시 이전 사진으로 넘기기오른쪽 버튼 클릭시 다음 사진으로 넘기기
게시글	REQ-POST-004	게시글과 댓글 영역 스크롤	위아래 스크롤	위아래 스크롤시 게시글과 댓글리스트만 스크롤
게시글	REQ-POST-005	좋아요	좋아요 버튼 클릭	좋아요 버튼 클릭시 하트가 잠깐 커지면서 빨간색으로 변함.재 클릭시 원래대로 돌아옴
게시글	REQ-POST-006	게시물 스크랩	스크랩 버튼 클릭	스크랩 버튼 클릭시 검은색으로 변함.재클릭시 원래대로 돌아옴
DM	REQ-DM-001	DM목록 페이지	새로운 메세지보내기 버튼 클릭	새로운 메세지 보낼상대 정하는 창 출력
DM	REQ-DM-002	채팅중인채팅창표시	채팅중인 상대 표시 및 클릭	채팅중인 상대방을 클릭하여 채팅창 이동
DM	REQ-DM-003	대화내용상세보기	상세보기 버튼을 클릭	버튼 클릭시 상세정보 출력
DM	REQ-DM-003	대화방 삭제	삭제버튼 또는 상세정보에서 대화방삭제하기 버튼 클릭	대화방이 삭제되는지 확인
DM	REQ-DM-004	메인으로 돌아가기	인스타그램 버튼 클릭	메인페이지로 이동
검색창	REQ-SEARCH-001	검색	검색창에 “옥지” 입력(사용자이름, 성명 모두 검색됨)	관련 프로필 목록 표시됨
검색창	REQ-SEARCH-001	프로필로 이동(실제 동작 X)	직접검색하거나 검색기록에 있는 프로필을 클릭하여 다른사람 프로필 클릭	겉으로 아무 결과 없음(최근 검색 항목에 추가됨)
검색창	REQ-SEARCH-002	최근 검색 항목	검색 후 프로필 클릭하면 최근 검색 항목에 추가됨 → 검색창 모두 지우기	최근 검색 항목 목록 표시
검색창	REQ-SEARCH-002	최근 검색 모두 지우기	최근 검색이 있을 경우 모두 지우기가 표시됨 → 모두 지우기 클릭	최근 검색 목록이 사라짐
스토리	REQ-STORY-001	스토리 전체화면(스토리 목록을 눌렀을때)	스토리 썸네일을 누르면 전체화면 으로 전환	-5초 지나면 다음 화면으로 넘어감
스토리	REQ-STORY-002	다음 스토리 버튼	스토리 전체화면에서 오른쪽 버튼 클릭	오른쪽에 있는 다음 스토리로 이동
스토리	REQ-STORY-003	이전 스토리 버튼	스토리 전체 화면에서 왼쪽 버튼 클릭	왼쪽에 있는 다음 스토리로 이동
알림	REQ-NOTIFICATION-001	알림 페이지	메인에서 알림 버튼 클릭	알림 페이지로 넘어감
알림	REQ-NOTIFICATION-002	팔로우 요청 페이지	팔로우 요청 영역 클릭	팔로우 요청 페이지로 넘어감 <화살표 누르면 다시 돌아감
알림	REQ-NOTIFICATION-002	팔로우 버튼 클릭	팔로우 클릭	팔로잉으로 바뀌며 회색으로 전환
알림	REQ-NOTIFICATION-003	팔로우 요청 페이지	< 버튼 클릭	알림 페이지로 넘어감

테스트 결과서

분류	요구사항 no	중분류	테스트 방법	예상 결과	테스트 결과
공통(푸터)	REQ-FOOTER-001	정보 표시	없음	하단에 Meta, 소개, 블로그 등등 정보가 뜸	성공
로그인	REQ-LOGIN-002	로그인 버튼 활성화	아이디, 비번 입력	아이디, 비번을 모두 입력해야 로그인 버튼이 활성화됨	성공
로그인	REQ-LOGIN-001	비밀번호 표시/숨김	비밀번호를 입력 후 표시/숨기기 버튼을 번갈아 클릭	비밀번호가 표시되거나 숨겨짐	성공
로그인	REQ-LOGIN-002	로그인	아이디 : qwerty비번 : qwerty입력 후 로그인 버튼 클릭	메인 페이지로 이동	성공
로그인	REQ-LOGIN-002	로그인 실패	잘못된 아이디나 비밀번호를 입력함	“잘못된 비밀번호입니다. 다시 확인하세요.” 문구 표시	성공
로그인	REQ-LOGIN-003	회원가입 버튼	가입하기 문구 클릭	회원가입 페이지로 이동	성공
로그인	REQ-LOGIN-001	반응형 레이아웃	width 900px이하로 줄이기	왼쪽 이미지 사라지고 로그인폼만 표시됨	성공
회원가입	REQ-SIGNUP-002	가입 버튼 활성화	유효한 휴대폰번호/이메일, 비밀번호, 성명, 사용자이름 입력	휴대폰번호/이메일, 비밀번호, 성명, 사용자이름 4가지 항목 모두 유효한 값으로 입력해야 가입 버튼 활성화됨	성공
회원가입	REQ-SIGNUP-001	휴대폰번호/이메일주소 유효성 검사	잘못된 휴대폰번호/이메일주소 입력 (양식을 지키지 않음)	에러 텍스트 뜸	성공
회원가입	REQ-SIGNUP-001	비밀번호 유효성 검사	잘못된 비밀번호 입력 (6자 이상으로 입력하지 않음)	에러텍스트 뜸	성공
회원가입	REQ-SIGNUP-001	성명 유효성 검사	잘못된 성명 입력(64자 미만으로 입력하지 않음)	에러텍스트 뜸	성공
회원가입	REQ-SIGNUP-001	사용자 이름 유효성 검사	잘못된 사용자 이름 입력(문자, 숫자, 밑줄 및 마침표 이외 다른 값을 입력)or이미 사용하고 있는 이름(qwerty) 입력	에러텍스트 뜸	성공
회원가입	REQ-SIGNUP-003	로그인 버튼	로그인 버튼 클릭	로그인 페이지 이동	성공
메인화면	REQ-MAIN-001	스크롤 기능	마우스 휠을 이동한다	스크롤하면 게시물들이 차례로 보임	성공
메인화면	REQ-MAIN-010	왼쪽 네비게이션 바 기능	홈, 검색, 탐색 탭, 메시지, 알림, 만들기, 프로, Threads, 더보기 버튼 누르기	각각의 버튼을 눌렀을 때 해당하는 페이지로 이동 (홈, 검색, 메시지, 알림, 프로필, 더보기만 구현)	성공
메인화면		스토리 열람 기능	상단에 있는 스토리 버튼 누르기	스토리 페이지로 넘어감	성공
메인화면	REQ-MAIN-003	게시물 좋아요 기능	게시물 좋아요 버튼 클릭	게시물 좋아요 개수 1 증가	성공
메인화면	REQ-MAIN-004	게시물 댓글 확인	게시물 댓글 모양 아이콘 클릭	게시물 전체 페이지로 이동	성공
메인화면	REQ-MAIN-005	게시물 댓글 확인	게시물 ‘모두보기’ 클릭	게시물 전체 페이지로 이동	성공
메인화면	REQ-MAIN-006	게시물 댓글 달기	게시물 댓글 달기 버튼 클릭	“안녕하세요?”라는 댓글을 달면 댓글이 추가됨	성공
메인화면		사이드바 추천 계정 팔로우	팔로우 버튼 클릭	팔로우 버튼을 클릭하면 팔로우 버튼 색깔이 바뀌며 ‘팔로잉’으로 변경	성공
프로필	REQ-PROFILE-001	포스트 목록 스크롤	프로필 페이지에서 위아래 스크롤	포스트 목록이 스크롤됨	성공
프로필	REQ-PROFILE-002	포스트 상세 조회	조회를 원하는 포스트 클릭	모달창이 뜨고 해당 게시물 정보를 불러옴	성공
프로필	REQ-PROFILE-003	팔로워/팔로잉 목록 조회	해당 버튼 클릭	마우스를 올렸을 시, 회색으로 변함.	성공
게시글	REQ-POST-001	게시글 모달 띄우기	게시글 클릭	게시글 클릭시 뒤에 배경 어두워지면서 게시글 모달창 뜸	성공
게시글	REQ-POST-002	게시글 모달창 지우기	x버튼 클릭	x버튼 클릭시 모달창 안보이게 설정	성공
게시글	REQ-POST-003	게시글 사진 넘기기	좌우 버튼 클릭	첫페이지는 왼쪽 버튼 안보임왼쪽 버튼 클릭시 이전 사진으로 넘기기오른쪽 버튼 클릭시 다음 사진으로 넘기기	성공
게시글	REQ-POST-004	게시글과 댓글 영역 스크롤	위아래 스크롤	위아래 스크롤시 게시글과 댓글리스트만 스크롤	성공
게시글	REQ-POST-005	좋아요	좋아요 버튼 클릭	좋아요 버튼 클릭시 하트가 잠깐 커지면서 빨간색으로 변함.재 클릭시 원래대로 돌아옴	성공
게시글	REQ-POST-006	게시물 스크랩	스크랩 버튼 클릭	스크랩 버튼 클릭시 검은색으로 변함.재클릭시 원래대로 돌아옴	성공
DM	REQ-DM-001	DM목록 페이지	새로운 메세지보내기 버튼 클릭	새로운 메세지 보낼상대 정하는 창 출력	성공
DM	REQ-DM-002	채팅중인채팅창표시	채팅중인 상대 표시 및 클릭	채팅중인 상대방을 클릭하여 채팅창 이동	성공
DM	REQ-DM-003	대화내용상세보기	상세보기 버튼을 클릭	버튼 클릭시 상세정보 출력	성공
DM	REQ-DM-003	대화방 삭제	삭제버튼 또는 상세정보에서 대화방삭제하기 버튼 클릭	대화방이 삭제되는지 확인	성공
DM	REQ-DM-004	메인으로 돌아가기	인스타그램 버튼 클릭	메인페이지로 이동	성공
검색창	REQ-SEARCH-001	검색	검색창에 “옥지” 입력(사용자이름, 성명 모두 검색됨)	관련 프로필 목록 표시됨	성공
검색창	REQ-SEARCH-001	프로필로 이동(실제 동작 X)	직접검색하거나 검색기록에 있는 프로필을 클릭하여 다른사람 프로필 클릭	겉으로 아무 결과 없음(최근 검색 항목에 추가됨)	성공
검색창	REQ-SEARCH-002	최근 검색 항목	검색 후 프로필 클릭하면 최근 검색 항목에 추가됨 → 검색창 모두 지우기	최근 검색 항목 목록 표시	성공
검색창	REQ-SEARCH-002	최근 검색 모두 지우기	최근 검색이 있을 경우 모두 지우기가 표시됨 → 모두 지우기 클릭	최근 검색 목록이 사라짐	성공
스토리	REQ-STORY-001	스토리 전체화면(스토리 목록을 눌렀을때)	스토리 썸네일을 누르면 전체화면 으로 전환	-5초 지나면 다음 화면으로 넘어감	성공
스토리	REQ-STORY-002	다음 스토리 버튼	스토리 전체화면에서 오른쪽 버튼 클릭	오른쪽에 있는 다음 스토리로 이동	성공
스토리	REQ-STORY-003	이전 스토리 버튼	스토리 전체 화면에서 왼쪽 버튼 클릭	왼쪽에 있는 다음 스토리로 이동	성공
알림	REQ-NOTIFICATION-001	알림 페이지	메인에서 알림 버튼 클릭	알림 페이지로 넘어감	성공
알림	REQ-NOTIFICATION-002	팔로우 요청 페이지	팔로우 요청 영역 클릭	팔로우 요청 페이지로 넘어감 <화살표 누르면 다시 돌아감	성공
알림	REQ-NOTIFICATION-002	팔로우 버튼 클릭	팔로우 클릭	팔로잉으로 바뀌며 회색으로 전환	성공
알림	REQ-NOTIFICATION-003	팔로우 요청 페이지	< 버튼 클릭	알림 페이지로 넘어감	성공

📅 마일스톤 & 이슈 관리

https://github.com/backend20250319/BE09-2st-2team/milestone/2

👨‍👩‍👧‍👦 스크럼 미팅

2025-05-15

☑️ 어제 한일

---

요구사항 명세서 작성하기

🚀 오늘 할일(공통)

---

- [x]  작성한 요구 사항 명세 검토
- [x]  github 이슈 발행
- [x]  피그마 와이어프레임(간단히 동작 순서만)
- [x]  프로젝트 생성 / 깃허브 업로드 / 기본 브랜치 dev로 변경

🚀 오늘 할일(개인)

---

- [x]  혜빈 : 게시글 모달 컴포넌트 구조 잡기
- [x]  현우 :  알림 페이지 레이아웃 설계
- [x]  정아 : 로그인 페이지 구현
- [x]  준서 : MainPage 레이아웃 설계 / 레이아웃용 스타일링 파일 추가 / 컴포넌트 더미 생성
- [x]  범석 : DM 목록 페이지

❌ 장애 요소

---

- [ ]  

🤔 질문

---

- [x]  공통(푸터, 사이드바 등등)  역할 누가하는건지?  → 정아

2025-05-16

☑️ 어제 한일

---

- [x]  혜빈 : 게시글 모달창 구조 설계
- [x]  현우 : 알림 페이지 레이아웃 설계
- [x]  정아 : 로그인 페이지 90% 완료
- [x]  준서 : 레이아웃용 스타일링 파일 추가 / 컴포넌트 더미 생성
- [x]  범석 : DM 목록 페이지 설계

🚀 오늘 할일(공통)

---

- [x]  어제까지 한 작업 머지하고 작업시작하기

🚀 오늘 할일(개인)

---

- [ ]  혜빈 : 게시글 모달창 마무리
- [ ]  현우 : 알림 페이지 마무리
- [ ]  정아 : 로그인 페이지 마무리 및 푸터 구현, 회원가입 페이지 구현
- [ ]  준서 : MainPage 레이아웃 설계 마무리 / 게시물 카드 컴포넌트 설계
- [ ]  범석 : DM 목록 페이지 마무리 / 검색창 설계

❌ 장애 요소

---

- [ ]  습한 날씨
- [ ]  약한 체력

🤔 질문

---

- [ ]

2025-05-18

## 테스트 결과서 작성 여부(작성 완료시 체크)

---

- 테스트케이스별로 관련 기능 no(요구사항명세 확인)도 함께 기재
- [x]  정아
- [ ]  준서
- [x]  혜빈
- [ ]  현우
- [x]  범석

## 진행 상황 공유

---

- 미완성 페이지나 기능은 상세히 작성해주세요.

**정아**

- [x]  회원가입 페이지
- [x]  로그인 페이지
- [x]  푸터

❌ 미완성 페이지 or 기능, 장애요소 공유

- 오늘 마무리 가능 O

```
- 회원가입, 로그인 페이지
  - css 파일 분리
  - 인스타 폰트 적용
```

---

**준서**

- [x]  메인 페이지 네이게이션 바 및 피드창

❌ 미완성 페이지 or 기능, 장애요소 공유

- 오늘 모두 마무리 가능 O

```
- 네비게이션 사이드바 마무리 (팔로우 -> 팔로잉 전환)
- 피드 댓글보기 -> 게시글 전체창 전환 
```

---

**혜빈**

- [x]  프로필 페이지
- [x]  게시글 페이지

❌ 미완성 페이지 or 기능, 장애요소 공유

```
프로필 페이지
- 상당 프로필바 (UI 구현은 가능하나 클릭시 이벤트 발생은 마감 어려움..)
- 하단 게시물 리스트 (오늘 마감 가능)
- 하단 게시물 리스트에서 게시물 클릭 시 해당 게시글 모달창 띄우기 (오늘 마감 가능)
```

---

**현우**

- [ ]  스토리 페이지
- [x]  알림 페이지

❌ 미완성 페이지 or 기능, 장애요소 공유

```
스토리 페이지 , 전역에 padding이 걸려있어서 스토리 페이지 검은 배경 밖으로 흰색 틀 생김
```

---

**범석**

- [x]  DM 목록 페이지
- [ ]  검색 페이지

❌ 미완성 페이지 or 기능, 장애요소 공유

```
DM 목록 페이지 (마감)
-상대방 프로필로 넘어가는 부분은 생략해야될거같아요,,,
검색페이지 (아직 시작X)
```

---

2025-05-19

☑️ 어제 한일

혜빈 : 맡은 페이지 완료
현우 : 맡은 페이지 완료
정아 : 맡은 페이지 완료
준서 : 맡은 페이지 완료
범석 : 맡은 페이지 완료

🚀 오늘 할일(공통)

❌ 장애 요소

[ ]

🤔 질문

[ ]

📢 회고

정아 : 첫 프론트엔드 프로젝트로 인스타그램 클론 코딩을 진행하며 로그인·회원가입 페이지와 푸터를 구현했다. css파일 분리의 중요성을 체감했고, 팀원들 모두 주말까지 소통하며 열심히 해주신 덕분에 프로젝트를 성공적으로 마무리할 수 있었다.
혜빈 : 처음 리액트를 써봐서 걱정도 많았는데, 팀원들과 같이 오류가 나는 부분을 하나하나 해결하면서 무사히 끝낼 수 있었다. 특히 리액트로 애니메이션을 넣어본 건 처음이라 더 재밌었고, 여러 페이지를 컴포넌트 단위로 나눠서 만드는 것도 직접 해보니까 확실히 감이 잡혔다. 구조적으로 코드를 짜는 연습을 할 수 있어서 얻는게 많았던 프로젝트였다.
현우 : 프론트엔드 프로젝트를 진행하면서 내가 짜는 코드가 바로 시각적으로 화면에 나와서 흥미로웠다. 리액트가 처음이라 코드 짜고 실제 화면을 구현하는 것에 어려움이 있었지만, 팀원분들과 상의하며 각자 맡은 부분을 성공적으로 끝낼 수 있었던 것 같다
준서 : 리액트 공부가 제일 안되어 있어서 걱정했는데 다행히 무사히 끝낼 수 있었다. 라우팅이나 페이지 전환 등에 익숙치 않아 버벅거린 탓에 처음 생각했던 모든 기능을 구현하지는 못했지만, 팀원분들 덕에 성공적으로 마무리할 수 있었다. 또한 리액트 연습을 제대로 할 수 있었기 때문에 얻어가는 것이 많은 프로젝트라고 생각한다.
범석 : 이번 프로젝트를 진행하면서 부족한 점이 많아 걱정도 되었지만, 평소에 자주 사용하는 인스타그램의 기능을 직접 클론코딩해보니 오히려 더 흥미롭고 즐겁게 작업할 수 있었습니다. 프론트엔드 개발을 하며 코드를 수정할 때마다 화면에 실시간으로 반영되는 과정이 무척 재미있었고, 이 점이 개발에 대한 흥미를 더욱 키워준 것 같습니다. 비록 모든 기능을 완벽히 구현하진 못했지만, 팀원들과 소통하고 협업하면서 많은 것을 배우고 성장할 수 있었던 뜻깊은 프로젝트였습니다.

Git 브랜치 전략

1️⃣ 기능 브랜치 생성

dev 브랜치에서 기능 브랜치 생성
생성 전 dev 최신 상태로 pull 필수

git checkout dev          # dev 브랜치로 이동
git pull origin dev       # 최신 상태로 업데이트
git checkout -b feature/기능명  # 기능 브랜치 생성

📌 브랜치 네이밍 예시:

feature/login, fix/typo

2️⃣ Pull Request (PR) 생성

작업 내용 커밋 & 푸시

git add .
git commit -m "작업 내용"
git push origin feature/기능명

GitHub에서 dev 브랜치로 PR 생성
- 프로젝트 Repository > Pull requests > New pull request > Create pull request
- PR 설명에 #이슈번호 포함

3️⃣ 병합 및 후처리

✅ 기능 미완 (작업 이어갈 경우)

git checkout dev
git pull origin dev 
git checkout feature/기능명
git merge dev  # dev 내용 반영 후 작업 계속

# 라이브러리 업데이트
npm update

✅ 기능 완료 (브랜치 삭제)

git checkout dev
git pull origin dev

# 로컬 삭제
git branch -d feature/기능명

# 원격 삭제
git push origin --delete feature/기능명

# 라이브러리 업데이트
npm update

4️⃣ 최종 배포 (main으로 병합)

git checkout main
git pull origin main
git merge dev
git push origin main

🗺️ 브랜치 흐름도


main ← dev ← feature/기능명
         ↑
    브랜치 생성 전 반드시 pull!
         ↑
      작업 완료 → PR & 병합
         ↓
     병합 완료 후 브랜치 삭제

🏷️ 네이밍 규칙

구분	네이밍 규칙	예시
기능 폴더	`kebab-case`	`auth` , `search-profile`
컴포넌트 폴더	`components` (고정)	`auth/components/`, `posts/components/`
컴포넌트 파일	`PascalCase`	`LoginForm.jsx`, `Footer.jsx`
페이지 파일	`page.jsx` (고정)	`login/page.jsx`, `posts/page.jsx`
CSS 파일	`snake_case`	`search_overlay.css`, `login_form.module.css`
이미지 파일	`snake_case`	`auth_01.png`, `profile_default.jpeg`

📁 폴더 규칙

📁 public/            # 정적 파일
├── 📁 images/        # 이미지
│    ├── 📁 auth/     # 페이지별 폴더
|    |    └── auth_01.png
|		 └── 📁 feed/     
|    └── ...               
|
📁 src/
├── 📁 app/
│   └── 📁 (features)/  # 페이지별 폴더
│       ├── 📁 auth/            # 로그인/회원가입
│       │   ├── 📁 components/
│       │   │   └── LoginForm.jsx
│       │   ├── 📁 login/
│       │   │   └── page.jsx          # 로그인 페이지
│       │   └── 📁 signup/
│       │       └── page.jsx          # 회원가입 페이지
│       ├── 📁 posts/            # 게시글
│       │   ├── 📁 components/
│       │   │   ├── 📁 post-modal/         
│       │   └── page.jsx                
│       ├── 📁 profile/          # 프로필
│       │   ├── 📁 components/
│       │   │   ├── 📁 profile-page /
│       │   │   └──────📁 post-grid /
								└──────📁 profile-header /
								└──────📁 profile-tabs /         
│       │   └── page.jsx              
│       ├── 📁 messages/         # 메세지
│       │   ├── 📁 components/
│       │   │   ├── DMItem.jsx
│       │   │   └── MessageInput.jsx
│       │   │   └── DmView.jsx
│       │   └── page.jsx 
│       │   └── page.css       
│       ├── 📁 notifications/    # 알림
│       │   ├── 📁 components/
│       │   │   └── NotificationItem.jsx
│       │   │   └── ... 
│       │   └── 📁noti
|       |          └── page.jsx
|       ├── 📁 stories/          # 스토리
│       │   ├── 📁 components/
│       │   │   ├── StoryProgressBar.jsx
│       │   │   └── ...
│       │   └──[username]  
|       |          └── page.jsx       
│       ├── 📁 search/           # 검색
│       │   ├── 📁 components/
│       │   │   └── SearchComponent.jsx    # 검색창
│       │   │   └── search-component.css   
│       │   └── page.jsx              
│       ├── 📁 main/             # 메인(홈)
│       │   ├── 📁 components/
│       │   │   └── Feed.jsx
│       │   │   └── MoreOptionsModal.jsx
│       │   │   └── NavBar.jsx
│       │   │   └── PostCards.jsx
│       │   │   └── Side.jsx
│       │   │   └── Story.jsx
│       │   │   └── ...
│       │   ├── 📁 pages/
│       │   └── page.jsx          # 메인 페이지
│       │   ├── 📁 data/
│       │   │   └── DataOfFeed.js     
│       │   │   └── UserRecommended.js     
│       │   │   └── UserStory.js    
│       │   ├── 📁 styles/ 
│       │   │   └── heart-liked.css
|       |   |   └── mainpage-layout.module.css          
├── 📁 components/  # 공통 재사용 컴포넌트
│   └── Footer.jsx
|                      
├── next.config.js
└── package.json

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public/images		public/images
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
jsconfig.json		jsconfig.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

프로젝트 개요

인스타그램 클론 프로젝트 (5/15 ~ 5/19)

SPA 사이트

🔧 요구사항정의서

테스트 케이스

테스트 결과서

📅 마일스톤 & 이슈 관리

👨‍👩‍👧‍👦 스크럼 미팅

📢 회고

Git 브랜치 전략

1️⃣ 기능 브랜치 생성

2️⃣ Pull Request (PR) 생성

3️⃣ 병합 및 후처리

4️⃣ 최종 배포 (main으로 병합)

🗺️ 브랜치 흐름도

🏷️ 네이밍 규칙

📁 폴더 규칙

About

Uh oh!

Releases

Packages

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

프로젝트 개요

인스타그램 클론 프로젝트 (5/15 ~ 5/19)

SPA 사이트

🔧 요구사항정의서

테스트 케이스

테스트 결과서

📅 마일스톤 & 이슈 관리

👨‍👩‍👧‍👦 스크럼 미팅

📢 회고

Git 브랜치 전략

1️⃣ 기능 브랜치 생성

2️⃣ Pull Request (PR) 생성

3️⃣ 병합 및 후처리

4️⃣ 최종 배포 (main으로 병합)

🗺️ 브랜치 흐름도

🏷️ 네이밍 규칙

📁 폴더 규칙

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages