🙇🏻‍♂️ 프로젝트 소개

VOUGE는 패션을 주제로 관심이 많은 사람들이 모여 다양한 정보 공유 및 소통할 수 있는 커뮤니티 입니다.

🛠️ Tech

1. SpringBoot
2. thymeleaf
3. AWS S3
4. MariaDB
5. HTML / CSS
6. JavaScript
7. Ajax
8. FontAwesome
9. SummerNote

❗️ Function

1. 회원가입 및 로그인

사용자는 회원가입을 통해 VOGUE에 가입하고, 로그인하여 자신의 계정으로 접속할 수 있습니다

2. 개인정보 수정

사용자는 개인정보를 수정할 수 있으며, AWS의 S3 서비스를 통해 프로필 이미지를 업데이트 할 수 있습니다.

3. 글 목록

사용자는 네이게이션바를 클릭하여 카테고리별 글 목록을 확인할 수 있습니다.

4. 댓글

댓글 작성자와 현재 세션에 저장된 사용자가 같을 시 수정 및 삭제 기능을 사용할 수 있습니다.

5. 글쓰기

사용자가 로그인 상태라면 게시글을 작성할 수 있습니다.

💿 Database

1. MEMBER

사용자의 정보가 저장된 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(4)	O	X	사용자의 고유 값	PRIMARY
EMAIL	VARCHAR(30)	O	X	이메일
PASSWORD	VARCHAR(255)	O	X	비밀번호
NICKNAME	VARCHAR(30)	O	X	닉네임
GRADE	VARCHAR(30)	X	BASIC	등급
PROFILE	LONGTEXT	X	/image/non-profile.png	프로필 이미지
VISITED_DATE	INT(4)	X	0	방문횟수
CREATED_AT	TIMESTAMP	X	CURRENT_TIMESTAMP	가입일

2. MAIN_CTGRY

메인 카테고리 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(2)	O	X	메인 카테고리 고유 값	PRIMARY
NAME	VARCHAR(30)	O	X	제목

3. SUB_CTGRY

서브 카테고리 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(2)	O	X	서브 카테고리 고유 값	PRIMARY
NAME	VARCHAR(30)	O	X	제목
PARENT	INT(2)	O	X	분류	FOREIGN

4. POST

게시글이 저장된 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(4)	O	X	게시글 고유 값	PRIMARY
TITLE	VARCHAR(60)	O	X	제목
CONTENT	LONGTEXT	O	X	내용
PREPEND	VARCHAR(10)	X	X	말머리
HIT	INT(4)	X	0	방문 횟수
CREATED_AT	TIMESTAMP	X	CURRENT_TIMESTAMP	작성일
PUBLIC_OPTION	CHAR(1)	X	Y	공개 옵션
COMMENT_OPTION	CHAR(1)	X	Y	댓글 허용 옵션
CTGRY	INT(2)	O	X	카테고리	FOREIGN
WRITER	INT(4)	O	X	작성자	FOREIGN

5. COMMENT

댓글이 저장된 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(2)	O	X	댓글의 고유 값	PRIMARY
CONTENT	LONGTEXT	O	X	내용
CREATED_AT	TIMESTAMP	X	CURRENT_TIMESTAMP	생성일
WRITER	INT(2)	O	X	사용자 고유 값	FOREIGN
POST	INT(2)	O	X	게시글 고유 값	FOREIGN

6. LIKED

개시글의 좋아요 정보가 저장된 테이블

Column	DataType	NotNull	Default	Description	Key
ID	INT(2)	O	X	좋아요 고유 값	Primary
POST	INT(2)	O	X	게시글 고유 값	FOREIGN
MEMBER	INT(2)	O	X	사용자 고유 값	FOREIGN

🖥️ Views

1. index

• 프로젝트의 메인화면입니다. 상단의 LOGIN, JOIN 버튼을 클릭하여 로그인 및 회원가입 할 수 있습니다.
• header과 aside는 thymeleaf의 replace 기능을 사용하여 모든 화면에서 분리된 html 파일을 불러옵니다.
• aside의 카테고리와 메인 이미지 하단의 글 목록을 통해 게시글 목록으로 이동할 수 있습니다.

2. Join / Login

• 회원가입 화면입니다.

• 로그인 화면입니다.
• 로그인 후 index 화면으로 redirect 됩니다.
• aside의 상단에 로그인 후 이용해주세요. 멘트가 사용자의 프로필로 변경되고 header에 로그아웃 버튼이 활성화 됩니다.

3. Post list

• 패션정보 카테고리의 게시글 목록입니다.
• [] 안에 숫자를 통해 몇개의 댓글이 있는지 확인 할 수 있으며, 작성자, 작성일, 조회수, 좋아요 개수를 확인할 수 있습니다.
• 페이지네이션을 사용하여 구현하였습니다.
• 검색폼을 통해 게시글 및 작성자를 검색할 수 있습니다.

4. Post detail

• 게시글의 디테일 화면입니다.
• 상단의 카테고리 이름을 통해 해당 카테고리로 이동할 수 있습니다.
• 작성자의 닉네임을 클릭 시 작성자의 프로필로 이동할 수 있습니다.
• URL 복사를 클릭하면 현재 페이지의 URL을 복사할 수 있습니다.
• 하단으로 스크롤하면 해당 게시글의 댓글을 확인할 수 있습니다.

• 로그인된 사용자가 현재 게시글에 좋아요를 눌렀을 경우 backgroud가 있는 하트가 보여집니다.
• 로그인 세션이 없거나 좋아요를 누르지 않은 경우 border가 있는 하트가 보여집니다.

5. Comment

• 게시글의 디테일 화면에서 스크롤하여 확인할 수 있는 댓글 목록입니다.
• 작성자의 닉네임을 클릭 시 작성자의 프로필로 이동할 수 있습니다.
• ajax를 통해 댓글이 5개씩 보여지며, + 버튼을 통해 남아 있는 게시글을 5개씩 불러올 수 있습니다.

• 댓글 작성자와 현재 세션에 저장된 사용자가 같을 시 수정 및 삭제를 할 수 있는 hidden-button이 활성화됩니다.

• 수정 버튼을 클릭하면 현재 댓글을 수정할 수 있는 form이 활성화되며, 수정 및 삭제 또한 ajax로 구현하였습니다.

6. Add post

• 게시글을 작성할 수 있는 화면입니다.
• 로그인 상태가 아닌 경우 해당 페이지에 접근할 수 없습니다.
• 로그인한 회원의 등급이 Admin이 아닐 경우 특정 카테고리와 말머리를 선택할 수 없습니다.
• 게시글의 공개 옵션 및 댓글 허용 옵션을 선택할 수 있습니다.

• 댓글 허용 옵션이 체크 되지 않은 경우 해당 게시글 댓글 화면입니다.
• 댓글이 허용되지 않는 게시글입니다. 라는 안내 멘트가 출력됩니다.

7. Profile

• 사용자의 프로필 화면입니다.
• ajax와 페이지네이션을 통해 구현하였습니다.
• 사용자가 작성한 글과 댓글단 글을 확인할 수 있습니다.
• 현재 세션에 로그인된 사용자와 현재 페이지의 사용자가 일치하다면 공개옵션이 'N'인 작성글도 확인할 수 있습니다.
• 작성글 입니다.

• 댓글단 글 입니다.
• 두개의 table 태그를 사용한 것이 아닌 하나의 테이블에서 javascript를 통해 동적으로 사용하였습니다.