[TOY] 설계 - 프론트 엔드 (Post)

1. Front-end 설계

---

클라이언트에게 보여줄 화면 설계입니다. 게시글과 관련된 Post 화면 설계와 사용자 관련 User 화면 설계로 나눠 진행하였습니다. 화면 디자인은 Figma를 통해 진행하였습니다.

2. header & footer

---

게시글 관련 페이지에 공통으로 사용될 header와 footer입니다.

2.1 header

페이지 상단에 위치하게 될 header입니다. 주로 메인 페이지로 돌아가기 위한 메인 아이콘과 로그인과 관련된 정보를 가지고 있습니다.

필드명	타입
메인 아이콘	텍스트 or 이미지
로그인	링크 텍스트
로그아웃	링크 텍스트
회원가입	링크 텍스트
마이페이지	링크 텍스트
환영메시지	텍스트

로그인이 되지 않은 상태에서 로그인과 회원가입 텍스트를 출력하고 로그인이 된 경우 마이페이지, 로그아웃, 환영 메시지를 출력합니다.

 

로그인 전

로그인 전

 

로그인 후

로그인 후

2.2 footer

페이지 하단에 위치하게 될 footer입니다. 홈페이지 아이콘과 저의 관련 홈페이지 정보를 삽입했습니다.

필드명	타입
아이콘	텍스트
관련 정보	텍스트

 

footer

3. Post

---

게시글과 관련된 페이지들입니다. 게시글 목록, 게시글 조회, 게시글 작성, 게시글 수정 페이지가 존재합니다.

3.1 post-index

홈페이지에 접속하게 되면 메인 페이지가 될 게시글 목록입니다. 기본적으로 일반 게시글 페이지가 기본으로 지정되어 출력됩니다.

필드명	타입
게시글 종류 tab	버튼
게시글 종류	텍스트
게시글 목록	리스트 or 테이블
글쓰기 btn	버튼
페이지	버튼 or 링크 텍스트
검색창	텍스트 필드
검색 조건	드롭다운 메뉴
검색	버튼

 

디자인

post-index

3.2 post-view

게시글 조회 페이지입니다. 목록에서 게시글 클릭 시 연결되는 페이지로 상세한 게시글의 내용을 담고 있습니다.

필드명	타입
제목	텍스트
수정	링크 텍스트
삭제	링크 텍스트
작성자	텍스트
내용	텍스트
추천	버튼
비추천	버튼
댓글	리스트
닉네임	텍스트 필드
패스워드	텍스트 필드
댓글 내용	텍스트 필드
작성	버튼

 

디자인

post-view

3.3 post-write

게시글 목록 페이지에서 글 작성 버튼 클릭 시 연결되는 게시글 작성 페이지입니다.

필드명	타입
write	텍스트
닉네임	텍스트 필드
패스워드	텍스트 필드
제목	텍스트 필드
글 종류	라디오 버튼
글 내용	텍스트 필드
취소	버튼
작성	버튼
이미지 추가	버튼

비회원의 경우 닉네임과 비밀번호 입력 필드가 출력되고 매니저 등급 이상 시 공지 라디오 버튼이 출력됩니다.

 

디자인

post-write

3.4 post-edit

게시글 조회 페이지에서 수정 버튼 클릭 시 연결되는 게시글 수정 페이지입니다. 수정의 경우 제목, 글 내용, 게시글 타입만 수정이 가능합니다. 비회원 작성글 수정 시 작성했던 닉네임, 패스워드는 변경이 불가능합니다.

필드명	타입
edit	텍스트
닉네임	텍스트 필드
패스워드	텍스트 필드
제목	텍스트 필드
글 종류	라디오 버튼
글 내용	텍스트 필드
취소	버튼
수정	버튼
이미지 추가	버튼

 

디자인

post-edit

 

* 현재 필드명은 구분을 위한 이름으로 개발 시 사용될 필드명과 차이가 있을 수 있습니다.