프로젝트 페이지 구조

Figma에서 가져온 페이지 구조도이다. main 페이지 역할을 맡는 index_page와, 게시판을 담당하는 posts, 게시판의 각 글을 보여주는 post_detail, 새 글 작성, 수정을 담당하는 post_create, 회원 자신의 정보를 확인할 수 있는 mypage, 그리고 강의를 모아서 보여주는 lecture_board가 있다. 그리고 로그인을 하기 위한 login_index_page, 회원가입을 위한 signup과 아이디, 비밀번호 찾기를 위한 id,pw_find page가 있다. 구조도에 소셜 로그인 페이지가 있는데, 이는 회원가입에서 바로 창을 띄워서 지원할 것이므로 실제로 페이지를 만들 필요는 없을 것 같다. 또한 lecture를 업로드할 수 있는 페이지가 존재하지 않기에 이를 추가로 지원해 주어야 하고, 전체 검색 결과를 보여주는 페이지도 없어서 이 역시 추가해야 한다.

페이지 내용 정리

페이지가 해야 하는 동작은 크게 세 가지로 나누는 것이 좋을 것 같다. 첫 번째는 어떤 것을 사용자에게 보여 줄 것인지이다. 이를 통해 페이지에서 api를 통해 받아 와야 하는 정보가 무엇인지 정의할 수 있다. 두 번째는 어떤 것을 사용자에게 입력 받아서 어디로 보낼지이다. 첫 번째가 출력이라면, 두 번째는 입력이 있다. 글 작성이나, 검색어 입력과 같은 동작이 여기 포함된다. 마지막으로는 다른 페이지로의 링크이다. 보여주기에 포함되는 내용이지만 어디로 링크되는지 확실히 하기 위해 따로 빼서 정리하려고 한다.

Header

일단 페이지를 설명하기 전, 사이트 상단에 내비게이션 바를 넣을 예정이므로 먼저 설명할 필요가 있다. 내비게이션 바인 만큼 가장 중요한 기능은 다른 페이지로의 링크 기능이다. 또한 사이트 내 게시글과 강의를 전체 검색할 검색바도 추가하도록 한다. 이상 동작을 세 가지로 나누어 정리하면 다음과 같다.

1. 보여줄 것

• 좌상단 EduMax 학원 로고
• 비로그인 시 로그인과 회원가입 링크, 반대로 로그인 시 로그인한 회원의 아이디 or 닉네임과 마이페이지, 알림 링크
• 각 게시판으로의 링크(질문게시판, 자료게시판, 공지사항, 선생님강의)
• 알림의 경우 페이지 전환 없이 사이드바 비슷한 형식으로 보여주는 것을 생각중임.

2. 입력받을 것

• 상단 검색창에 검색어를 입력받아서 url 뒤에 parameter를 붙여 검색 페이지를 요청해야 한다.

3. 링크

• 학원 로고 클릭 시 메인 페이지로 이동해야 함.
• 1번에서 언급한 로그인, 회원가입, 마이페이지, 게시판 링크에 맞게 각 게시판으로 이동시켜야 한다.
• 검색 버튼 클릭 시 전체 검색

Index

1. 보여줄 것

• 간단한 학원 소개 사진과 글귀
• 원장 사진과 원장의 말 한마디
• 학원 위치 설명과 지도
• 자료게시판 글 최신순으로 정렬하여 보여 주기
• 질문게시판 글 중 일정 기간 내에 있는 것들을 추천순으로 정렬하여 높은 것부터 선별하여 보여 주기
• 질문게시판 글을 과목별로 나누어 최신순으로 선별하여 보여 주기
• 공지사항 글 최신순으로 정렬하여 보여 주기
• 선생님강의를 과목별로 최신순으로 일정 개수만큼 선별하여 보여 주기

2. 입력받을 것

• 입력받을 것은 없다.

3. 링크

• 노출된 게시글의 제목을 클릭 시 해당 게시글의 post_detail 페이지로 이동해야 함.
• 강의를 클릭 시 해당 강의에 해당하는 페이지로 이동해야 함.

Posts

1. 보여줄 것

• 게시판 내 각 게시물들을 최신순, 추천순 중 paremeter에 설정된 기준대로 보여준다.(Default는 최신순) 글의 정보는 제목, 글쓴이, 조회수, 추천수, 작성일시를 보여 준다.
• parameter에 검색어와 검색 기준이 설정되어 있다면 해당 기준대로 필터링을 거쳐 보여 준다.(검색 기준은 제목, 내용, 글쓴이, 제목+내용 네 가지가 있으며, Default는 제목+내용이다.)
• post_create로 이동할 수 있는 글쓰기 버튼을 보여 주어야 함.

2. 입력받을 것

• 게시판 내 검색 기능을 이용할 검색어를 입력 받아서 parameter로 넘겨 주어야 한다.
• 게시판 내 검색에서, 1에서 말한 검색 기준을 선택하여 검색 시 parameter로 넘겨 줄 수 있도록 해야 한다.
• 정렬 기준을 최신순, 추천순 둘 중 하나로 입력받아 페이지에 반영해야 한다.

3. 링크

• 노출된 게시글의 제목을 클릭 시 해당 게시글의 post_detail 페이지로 이동해야 함.
• 글쓰기 버튼을 누를 시 post_create로 이동하고, 어느 게시판에서 눌렀는지에 대한 정보를 parameter로 넘겨 주어야 한다.

Search_results

1. 보여줄 것

• 게시판 카테고리별로(자료, 질문, 공지사항, 선생님강의) 검색 결과를 일정 개수만큼 최신순으로 보여 준다.

2. 입력받을 것

• 검색 결과를 보여주기 위한 페이지라, 상단바 검색 외 입력은 받지 않아도 된다.

3. 링크

• 검색 결과의 제목을 누를 시 해당 post_detail이나 lecture_detail로 이동한다.
• 게시판별로 검색결과 더보기 링크를 눌러서 이를 통해 해당 posts나 lecture_board로 이동한다.

Post_detail

1. 보여줄 것

• 게시글의 제목, 내용, 작성일시, 글쓴이, 추천수, 조회수를 보여 주어야 한다.
• 댓글들의 내용, 작성일시, 글쓴이, 추천수를 보여 주어야 한다.
• 이 게시글이 어느 게시판에서 작성된 글인지 작게 보여 주어야 한다.
• 게시글 수정과 삭제, 댓글 수정과 삭제 버튼을 보여 주어야 한다.

2. 입력받을 것

• 게시글의 댓글을 입력, 수정할 수 있어야 한다.
• 댓글의 댓글, 즉 대댓글을 입력, 수정할 수 있어야 한다.

3. 링크

• 어느 게시판에서 작성된 글인지 게시판 이름을 클릭하면 해당 게시판에 해당하는 posts로 이동해야 한다.
• 게시글 수정버튼을 누를 시 post_create 페이지로 이동해야 함.

Post_create

1. 보여줄 것

• 작성이 끝나고 누를 작성 완료 버튼을 보여 주어야 함.
• 수정 버튼을 눌러 들어왔다면 원래 글 내용과 제목을 보여 주어야 함.

2. 입력받을 것

• 게시글의 제목과 내용을 입력받을 form이 있어야 함.
• 어느 게시판에 게시글을 업로드할지 입력받아야 함.
• 이미지나 pdf 같은 첨부 파일을 업로드할 수 있어야 함.

3. 링크

• 작성 완료 버튼을 누를 시 글이 쓰인 게시판에 해당하는 posts 페이지로 이동한다.

My_page

1. 보여줄 것

• 회원가입 시 입력한 정보들을 보여 주어야 함.(이름, 닉네임, 아이디, 이메일, 프로필 사진을 도입한다면 사진까지)
• 회원정보 수정(닉네임, 프로필, 이메일)을 위한 수정 버튼이 필요함. 수정은 해당 페이지에서 할 수 있도록 한다.
• 비밀번호를 바꿀 수 있도록 id, pw find로 이동하는 버튼을 만들어야 함.
• 회원 탈퇴를 할 수 있는 버튼을 만들어야 함.
• 사용자가 쓴 글을 posts 페이지에서처럼 페이징을 적용하여 볼 수 있어야 함.
• 사용자가 추천한 글 열기 posts 페이지에서처럼 비슷하게 볼 수 있어야 함.
• 사용자가 쓴 댓글 역시 최신순으로 정렬하여 보여 주어야 함.
• 회원 정보, 사용자가 쓴 글, 사용자가 추천한 글, 사용자가 쓴 댓글 중 원하는 걸 볼 수 있도록 탭메뉴를 보여 주어 선택할 수 있도록 해야 함.

2. 입력받을 것

• 회원정보 수정을 선택하였을 때 이를 위한 form이 있어야 함. form은 default값으로 현재 사용자 정보를 담아야 함.
• 사용자가 쓴 글, 추천한 글, 댓글을 검색할 검색 기준 설정과 검색창을 지원해야 함.(posts와 일단 똑같이 하도록 한다.)

3. 링크

• 추천글, 쓴 글의 경우 제목을 클릭하면 해당 글의 post_detail 페이지로 링크되어야 한다.
• 댓글의 경우에도 해당 댓글을 클릭할 시 댓글이 있는 post_detail 페이지로 링크된 뒤 해당 위치로 anchor까지 걸려야 한다.
• 비밀번호 변경 시 id, pw find로 이동하여야 한다.

Lecture_board

1. 보여줄 것

• 업로드된 강의의 제목과 강사명, 업로드 일시를 보여 준다.
• 과목별로 나누어 강의를 보여 준다(국, 영, 수, 탐). 요청사항으로, 영어는 수능, 내신 어법 세 개의 카테고리로 세분화한다. 이에 대한 탭 메뉴가 필요할 것 같다.
• 강사에 한해 강의 업로드 버튼을 보여 주어야 한다.

2. 입력받을 것

• 강의 검색어를 입력받고, 검색 조건 역시 입력받아 parameter로 보내 주어야 한다. 검색 조건 옵션으로는 제목과 강사명 두 개 중 하나를 선택하도록 한다.

3. 링크

• 강의의 제목을 클릭하면 해당 강의의 Lecture_detail 페이지로 이동해야 한다.

Lecture_detail

구조도에는 없지만, 강의를 보여 주기 위한 페이지를 추가하였다.

1. 보여줄 것

• 유튜브 링크를 가져와서 사이트에서 강의 유튜브 영상을 재생할 수 있도록 해야 함.
• 원본 유튜브로 이동할 수 있는 유튜브로 이동 버튼을 만들 예정이다.

2. 입력받을 것

• 입력받을 것은 없어 보임.(댓글도 없을 예정이고, 오직 강의 시청 페이지로만 기능할 예정)

3. 링크

• 버튼을 누르면 해당 강의의 원본 유튜브 링크로 이동할 수 있도록 할 예정이다.

Login

1. 보여줄 것

• 회원가입, 아이디 비번 찾기 페이지로 이동할 링크
• 로그인 버튼을 보여 주어야 함.
• 소셜 로그인을 할 수 있도록 버튼을 만들어 놓아야 함.

2. 입력받을 것

• ID와 password를 입력받아서 서버에 전송해 주어야 한다.

3. 링크

• id, pw find와 signup으로 이동할 수 있어야 한다.
• 로그인 버튼을 누르면 성공한다면 기본적으로는 index 페이지로 가게 해야 하나, 만약 중간에 로그인이 만료된 상황이나 글쓰기 버튼을 눌렀다가 로그인이 필요하여 이 페이지로 온 경우 post_create로 보내 주어야 한다.

Id, pw find

1. 보여줄 것

• 아이디 찾기와 비밀번호 변경을 선택할 수 있는 탭 메뉴
• 비밀번호 찾기 시 이메일 인증번호를 보낼 수 있는 버튼
• 다음과 이전 과정으로 넘어갈 수 있는 버튼
• 아이디 찾기의 경우 이메일이 확인되면 아이디를 알려 준다.

2. 입력받을 것

• 아이디 찾기의 경우 이메일만 입력받는다.
• 비밀번호 찾기의 경우 이메일과 아이디를 입력받고, 인증번호 역시 입력받아야 함. 그리고 인증번호가 올바른 경우 새 비밀번호와 새 비밀번호 확인을 위한 form을 만들어야 함.

3. 링크

• 모든 아이디 찾기나 비밀번호 변경 과정을 완료한 경우 다시 login으로 보내야 한다.

Signup

1. 보여줄 것

• 회원 가입은 회원정보 입력, 인증, 회원가입 완료 세 단계로 이루어진다. 이 단계를 보여줄 수 있는 진행 상황을 표시하는 bar를 만드는 것이 좋을 것 같다.

2. 입력받을 것

• 회원정보 입력에서는 이름, 아이디, 비밀번호, 비밀번호 확인, 닉네임을 입력받는다.
• 인증에서는 이메일 주소를 입력받고, 인증번호 보내기 버튼을 통해 인증번호를 입력받아서 일치 여부를 확인해야 한다.

3. 링크

• 다음, 이전 버튼을 통한 같은 회원가입 페이지끼리의 이동을 하고 마지막 완료에서 login 페이지로 이동할 수 있는 링크를 걸어야 한다.

이제 이 페이지를 기반으로, 어떤 정보가 필요한지 추려서 이에 대한 API를 먼저 짜 볼 생각이었는데, API에 대해 생각하기 전에 Git branch를 어떻게 설정해서 버전 관리를 어떻게 할지 정해 놓지 않았어서 이에 대해 먼저 생각해 보려고 한다.