- 기술 선택은 웹 프로그래밍 A-Z 기초에서 배운 내용(HTML, JavaScript, Ajax, Python, Flask, MongoDB...) 내에서 !
- DB 연동하는 기능은 기본 CRUD를 모두 포함해야함.
⏰ 프로젝트 타임라인(05/03 ~ 05/11)
05/03 (화) 저녁 6시까지 : S.A(Starting Assignment) 제출
05/03 (화) ~ 05/04 (수) : S.A 제출 순대로 팀 별 피드백
05/11 (수) 오후 1시까지 : 프로젝트 마무리 및 GIT & 시연 영상 녹화본 제출
05/11 (수) 오후 1~4시 : 1차 피드백 발표회
05/11 (수) 오후 4~7시 : 팀 별 회고 (방법 및 회고록 제출 별도 공지)
필수 포함 사항
- HTML, JavaScript, Ajax, Python, Flask, MongoDB
- CRUD 기술
❤️🔥로그인창 및 회원가입창
- 회원가입 기능
- 사용자의 정보를 입력받아 db에 저장
- 로그인 기능 / 로그아웃 기능
입력된 사용자의 정보를 불러와 현재 입력된 사용자의 정보와 대조
❤️🔥메인창
- 상단 헤드
- 게시글 포스트 (+) 아이콘
- 팝업창
- 사용자 로컬 컴퓨터의 사진첩 접근(컴퓨터에서 선택 버튼)
- 사진을 여러 장 올리는 기능
- 화면 블러처리
- 우상단 x 버튼 또는 화면의 빈 공간을 클릭해 모달 닫기
- 사용자 아이콘
- dropdown 형태로 메뉴 제시(프로필/저장됨/설정/계정 전환/로그아웃)
- 각 메뉴에 링크를 걸어 각 페이지로 이동
- 하트 아이콘
- dropdown 형태로 메뉴 제시(이번 달 활동과 이전 활동으로 제시)
- 다른 회원에 대한 팔로우를 할 수 있으며, 팔로우 버튼을 눌러 팔로우 취소 가능(모달 생성)
- 메인 피드 및 추천 리스트
- 하트 아이콘(좋아요)
- hover 기능을 통해 아이콘 테두리 색을 변경하고, 아이콘 클릭 시 아이콘의 색을 빨간 색으로 변경
- 카운트 기능을 사용해 하트 아이콘 하단에 @@@님 외 ( )명이 좋아합니다 표시
- 댓글 달기
- hover 기능을 통해 댓글 내용이 입력되면 게시 버튼의 색이 변하도록 설정
- count 기능을 통해 댓글 ( )개 모두 보기에 댓글 개수를 표시하고, mongodb를 활용해 댓글 내용 화면에 표시
- 팔로우/팔로잉
- 팔로우(파란색)를 누르게 되면 카운트 기능을 사용해 마이 페이지의 팔로워 수에 반영하며, 팔로잉(검은색)으로 변경
- 다시 한번 팔로잉(검은색)을 누르면 팔로우 취소를 묻는 모달이 화면에 나오게 되며(화면 블러처리) 팔로우를 취소하면 다시 팔로우(파란색)으로 변경
- 팔로잉한 사람의 게시글이 피드에 뜨도록 설정
❤️🔥마이 페이지
- 게시글 포스트 (+) 아이콘
- 모달
- 사용자 로컬 컴퓨터의 사진첩 접근(컴퓨터에서 선택 버튼)
- 사진을 여러 장 올리는 기능
- 화면 블러처리
- 우상단 x 버튼 또는 화면의 빈 공간을 클릭해 창 끄기
- 하트 아이콘
- dropdown 형태로 메뉴 제시(이번 달 활동과 이전 활동으로 제시)
- 다른 회원에 대한 팔로우를 할 수 있으며, 팔로우 버튼을 눌러 팔로우 취소 가능(모달 생성)
- 사용자 아이콘
- dropdown 형태로 메뉴 제시(프로필/저장됨/설정/계정 전환/로그아웃)
- 각 메뉴에 링크를 걸어 각 페이지로 이동
- 포스팅된 게시글 선택
- 모달(레이아웃 : 좌측 사진, 우측 댓글)
- 게시글 클릭 시 상세 페이지가 모달로 나오며, 백그라운드 회색 처리
❤️🔥선택 사항
- 로그인창에 있는 사진 carousel
- 북마크 기능
- 프로필 편집 기능
- 게시글과 Feed 부분 화면 스크롤 끝까지 내렸을때 추가 피드 불러오는 페이지네이션 기능
- DM기능
- 검색(해시태그, user)
❤️🔥목업
- 피그마 프로그램을 통해 작성
- 회원가입창과 로그인창
지금까지 만들었던 팀원들의 UI를 한 명씩 시연해보고 수정할 점들을 적어본 후 익명 투표를 진행했다.
S.A 를 작성해 제출하고 저번 팀프로젝트 회고록에서 시도해보자했던 피그마를 이용해 MOCK UP을 만들었다.
기획 탄탄하게, 미니멀 먼저 구현 후 수정과 업데이트를 통해 괜찮은 결과물을 만들 계획임. 다들 화이팅 ! 👍
반응형
'PROJECTS' 카테고리의 다른 글
| Team Project 2 | 인스타그램 클론코딩 | 회원가입 UI (0) | 2022.05.05 |
|---|---|
| Team Project 2 | MOCK UP 만들 땐 피그마, 오늘은 DB 구성 구축까지 ! | 인스타그램 클론코딩 Flask | 팀프로젝트 (0) | 2022.05.03 |
| 구현 코드 | Html + CSS + Js | 클론 코딩 1면 (미완) | 인스타그램 데스크탑 UI 클론코딩 (0) | 2022.05.02 |
| ☠️문제점이 산더미인 K.P.T☠️ | 딸랑 1면 만드는데 이렇게 힘들고 고될 일이니? | 4동안의 인스타 데스크탑 UI 클론 페이지 (2) | 2022.05.02 |
| 총체적 난관.... 어쩔.. | 반응형 웹, Carousel(캐러셋), 정렬 이슈 | 인스타 데스크탑 UI클론 (0) | 2022.04.30 |