메인

메인페이지는 봉봉이가 스크롤이 내려가면서 점점 우측 하단으로 이동하고 각각 배너가 나타나는 방식으로 구현할 것 이다. 배너를 클릭하면 해당 페이지로 이동하며 아래에 버튼을 만들어 더욱 쉽게 원하는 페이지로 이동할 수 있게 했다.

• 웹툰 보러가기 -> 작아지고 싶었을 뿐인데! 웹툰 사이트로 이동
• 이봉이 형제 프로필 -> 이봉이 형제 프로필 페이지로 이동
• 투표하러 가기 -> 인기 투표 페이지로 이동
• 인기 투표 순위 -> 인기 투표 순위 페이지로 이동
• 미니 게임 -> 미니게임 페이지로 이동
• 오봉이의 게시판 -> 게시판 페이지로 이동
  
  
  
  

게시판

• 오봉이가 관리하는 컨셉
• 사이트 회원만 글쓰기 가능, 비회원도 게시글 열람은 가능
• 욕설 사용 시 '엉덩이'로 필터링
  
  
  
  

게시판 메인 페이지

• 따봉(좋아요) 기능(회원만 가능, 게시글 당 1회)
• 댓글 기능
• 조회수 표시
• 조회수, 최신순으로 게시글 정렬 기능
• 게시글 고정 기능(마스터 계정만 가능)
• 해시태그 기능
• 글 제목, 작성자, 태그 검색 기능
• 지정한 기간 안에 작성 된 게시글 확인 기능
• 썸네일, 작성자 프로필 사진, 작성자 이름, 업로드 날짜, 좋아요, 댓글, 조회수, 해시 태그 표시
• 썸네일, 제목 클릭 시 게시글로 이동
• 해시 태그 클릭 시 해당 해시 태그가 달린 글만 확인 기능
• 로그인하지 않은 상태에서 글쓰기 버튼 클릭 시 글쓰기 실패 모달창 나타남
• 페이지네이션으로 한 페이지에 게시글 8개
  
  
  
  
  

글쓰기 실패 모달창

• 확인 버튼 클릭 시 모달창 사라짐
  
  
  
  

글쓰기 페이지

• 좌측 상단 오봉이의 게시판 클릭시 게시판 메인 화면으로 이동
• 태그 입력 후 '엔터' 키 누르면 input창 하단에 해시 태그 생성, 생성 된 해시 태그 클릭 시 삭제
• 나가기 버튼 클릭 시 게시판 메인 화면으로 이동
• 글쓰기 버튼 클릭 시 썸네일 업로드 모달 창 나타남
  
  
  
  

썸네일 업로드 모달 창

• 사진 아이콘 클릭 시 사진 파일 업로드 기능
• 이미 업로드 된 상황에서 한번 더 사진 아이콘 클릭하여 썸네일 수정 가능
• 확인했어요~! 체크 시 글쓰기 버튼 활성화
• 글쓰기 버튼 클릭 시 게시글 업로드 후 작성한 게시글 페이지로 이동
  
  
  
  

게시글 페이지(상)

• '수정' 클릭하여 글쓰기 페이지로 이동해 게시글 수정 기능
• '삭제' 클릭 시 게시물 삭제 기능
  
  
  
  

게시글 페이지(하)

• 댓글쓰기 버튼 클릭하여 댓글 작성
• 댓글쓰기() 괄호 사이에 댓글 수 표시
• 이모티콘 아이콘 클릭 시 댓글에 이모티콘 삽입 기능
• 답글쓰기 버튼 클릭하여 답글 기능
• 댓글 작성자 프로필 사진, 댓글 작성자 닉네임, 댓글 작성 시간 표시
• 댓글,답글 모두 작성 된 순서대로 위에서부터 정렬
• 댓글&답글 수 5개 초과 시 '댓글 더보기'클릭하여 5개씩 추가 댓글 확인 기능
  
  
  
  

헤더

• 좌측 상단 로고 클릭 시 메인 페이지로 이동
• 로그인 클릭 시 로그인 모달창 나타남
• 회원 가입 클릭시 회원가입 모달창 나타남
  
  
  
  
  
• 로그인 시 헤더 우측에 프로필 사진 표시
• 프로필 사진 클릭시 메뉴창 나타남
• '프로필 사진 바꾸기' 클릭 시 프로필 사진 업로드/변경 기능
• '내가 작성한 글' 클릭 시 회원이 작성한 글 확인 기능****
• '로그아웃'클릭 시 로그아웃 기능
  
  
  
  
  

로그인 모달창

• 비밀번호 *으로 표시
• SIGN IN 버튼 클릭 시 로그인 시도
• 카카오톡 연동
  
  
  
  

로그인 성공 모달창

• 확인 버튼 클릭 시 로그인 후 이전 페이지로 이동
  
  
  
  
  

로그인 실패 모달창

• 확인 버튼 클릭 시 모달창 사라짐
  
  
  
  
  

회원 가입 모달창

• 비밀번호 *표시
  
  
  
  
  

회원 가입 실패 모달창

• 비밀번호 일치-id 중복-닉네임 중복 순으로 확인하여 우선순위대로 모달창 나타나게
• 확인 버튼 클릭 시 모달창 사라짐
  
  
  
  
  
• 확인 버튼 클릭 시 메인 페이지로 이동(자동 로그인x)
  
  
  
  

이봉이 형제 프로필

이봉이 형제 프로필 메인 페이지

• 이봉이 형제 호버 시 포즈 바뀌는 효과
• 순위 보기 버튼 클릭 시 인기 투표 순위 페이지로 이동
• 투표하러GO 버튼 클릭 시 인기 투표 페이지로 이동
• 이봉이 형제 클릭 시 이봉이 형제 각각 소개 페이지로 이동
  
  
  
  
  

이봉이 소개 페이지(상)

• 이봉이 투표하러 가기 버튼 클릭 시 인기 투표 페이지로 이동
• 우측 글씨 클릭 시 해당 스크롤로 이동
• 이봉이 형제 프로필 클릭 시 이봉이 형제 프로필 메인 페이지로 이동
  
  
  
  
  

이봉이 소개 페이지(하)

인기 투표

인기 투표 페이지

• 중복 투표 불가능
• 체크 시 투표하기 버튼 활성화
• 투표하기 버튼 클릭 시 투표 완료 모달창 나타남
• 결과보기 버튼 클릭 시 인기 투표 순위 페이지로 이동
  
  
  
  
  

투표 완료 모달창

• 투표받은 봉이 사진/대사 나타나게
• 결과 보기 버튼 클릭 시 인기 투표 순위 페이지로 이동
  
  
  
  
  

투표 실패 모달창

• 확인 버튼 클릭 시 모달창 사라짐
  
  
  
  

미니 게임

테트리스 페이지

• 점수 1위~3위 유저 프로필 사진, 닉네임, 점수 표시
  
  
  
  
  

게임 오버 시

• Replay 버튼 클릭 시 게임 다시하기
  
  
  
  

인기 투표 순위

• 이봉이 형제 소개 보러가기 클릭 시 이봉이 형제 프로필 메인 페이지로 이동
• 투표하러가기 버튼 클릭 시 인기 투표 페이지로 이동
• 순위,N봉이,받은 표수 표시
• 1~3등 웃는 얼굴, 4~6등 우는 얼굴
  
  
  
  
  
  기획안 완성했다! 나름 열심히 했다고 생각했는데 PM님이 예시로 보여준 기획안과 비교하면 많이 부실하다ㅠㅠ 레이아웃만 잡은 정도라서 디자인은 많이 변할 것 같다. 솔직히 공부한 것을 써먹어보려는 짬뽕탕같은 느낌도 조금 있다,,ㅋㅋ 그리고 디자인이 생각보다 어려웠다. 열심히 해봐도 진짜 사이트(?)같은 느낌이 안들어서 여러 사이트를 참고했다. 기획안은 최대한 구체적으로 작성하려고 노력했는데 오늘 회의 때 피드백 받고 구현하면서도 많이 수정될 것 같다. 내일 부터 구현 시작이다😣