👻 인스타 클론코딩 UI 선정

• 팀원들의 개인 프로젝트였던 UI를 시연한 후 익명으로 투표 진행
• 투표 결과 경수님의 작품으로 선정

👻 필수 구현 기술

• HTML, JavaScript, Ajax, Python, Flask, MongoDB
• CRUD 기술

👻 필수 포함 사항

😇 로그인창 및 회원가입창

- 회원가입 기능

• 사용자의 정보를 입력받아 db에 저장

- 로그인 기능 / 로그아웃 기능

• 입력된 사용자의 정보를 불러와 현재 입력된 사용자의 정보와 대조

😇 메인창

- 상단 헤드

• 게시글 포스트 (+) 아이콘
  • 팝업창
  • 사용자 로컬 컴퓨터의 사진첩 접근(컴퓨터에서 선택 버튼)
  • 사진을 여러 장 올리는 기능
  • 화면 블러처리
  • 우상단 x 버튼 또는 화면의 빈 공간을 클릭해 모달 닫기
• 사용자 아이콘
  • dropdown 형태로 메뉴 제시(프로필/저장됨/설정/계정 전환/로그아웃)
  • 각 메뉴에 링크를 걸어 각 페이지로 이동
• 하트 아이콘
  • dropdown 형태로 메뉴 제시(이번 달 활동과 이전 활동으로 제시)
  • 다른 회원에 대한 팔로우를 할 수 있으며, 팔로우 버튼을 눌러 팔로우 취소 가능(모달 생성)

- 메인 피드 및 추천 리스트

• 하트 아이콘(좋아요)
  • hover 기능을 통해 아이콘 테두리 색을 변경하고, 아이콘 클릭 시 아이콘의 색을 빨간 색으로 변경
  • 카운트 기능을 사용해 하트 아이콘 하단에 @@@님 외 ( )명이 좋아합니다 표시
• 댓글 달기
  • hover 기능을 통해 댓글 내용이 입력되면 게시 버튼의 색이 변하도록 설정
  • count 기능을 통해 댓글 ( )개 모두 보기에 댓글 개수를 표시하고, mongodb를 활용해 댓글 내용 화면에 표시
• 팔로우/팔로잉
  • 팔로우(파란색)를 누르게 되면 카운트 기능을 사용해 마이 페이지의 팔로워 수에 반영하며, 팔로잉(검은색)으로 변경
  • 다시 한번 팔로잉(검은색)을 누르면 팔로우 취소를 묻는 모달이 화면에 나오게 되며(화면 블러처리) 팔로우를 취소하면 다시 팔로우(파란색)으로 변경
  • 팔로잉한 사람의 게시글이 피드에 뜨도록 설정

😇 마이 페이지

• 게시글 포스트 (+) 아이콘
  • 모달
  • 사용자 로컬 컴퓨터의 사진첩 접근(컴퓨터에서 선택 버튼)
  • 사진을 여러 장 올리는 기능
  • 화면 블러처리
  • 우상단 x 버튼 또는 화면의 빈 공간을 클릭해 창 끄기
• 하트 아이콘
  • dropdown 형태로 메뉴 제시(이번 달 활동과 이전 활동으로 제시)
  • 다른 회원에 대한 팔로우를 할 수 있으며, 팔로우 버튼을 눌러 팔로우 취소 가능(모달 생성)
• 사용자 아이콘
  • dropdown 형태로 메뉴 제시(프로필/저장됨/설정/계정 전환/로그아웃)
  • 각 메뉴에 링크를 걸어 각 페이지로 이동
• 포스팅된 게시글 선택
  • 모달(레이아웃 : 좌측 사진, 우측 댓글)
  • 게시글 클릭 시 상세 페이지가 모달로 나오며, 백그라운드 회색 처리

👻 선택 포함 사항

• 로그인창에 있는 사진 carousel
• 북마크 기능
• 프로필 편집 기능
• 게시글과 Feed 부분 화면 스크롤 끝까지 내렸을때 추가 피드 불러오는 페이지네이션 기능
• DM기능
• 검색(해시태그, user)

👻 목업

• 피그마 프로그램을 통해 작성
• 회원가입창과 로그인창
  
• 상단 헤드 부분의 아이콘의 기능
  
• 메인 피드 창과 마이페이지 창
  
• 데이터베이스에 저장될 요소 구성