- client
- React, JavaScript
- 주요 라이브러리: axios, react-router-dom, styled-components, @toast-ui/react-editor
- server
- Node.js, Express.js, JavaScript
- DB: Mysql
- Cloud Storage: AWS S3
- 주요 라이브러리: multer, sequelize
| 화면 | 메인 페이지 | 메인 페이지2 |
|---|---|---|
| 스크린샷 |  - 글을 클릭해서 글 상세 페이지로 이동- Prev Posts 클릭해 이전 글 목록으로 이동 |
 - 프로필을 클릭해 프로필 설정 페이지로 이동 - Post를 클릭해 글 작성 페이지로, Tags를 클릭해 태그 페이지로 이동 |
| 화면 | 포스트 삭제 | 포스트 페이지 |
|---|---|---|
| 스크린샷 |  - 아래로 스크롤할 경우 상단의 시야를 막는 것을 방지하기 위해 프로필은 사라지고 헤더가 좁아지도록 구현 - 삭제 버튼을 누를 경우 글 삭제 |
 - 포스트 페이지로 이동해 글 상세를 볼 수 있음 - 상단 편집 아이콘을 클릭해 글 수정 페이지로 이동 |
| 화면 | 댓글 입력 | 댓글 추가 완료 |
|---|---|---|
| 스크린샷 |  - 포스트 페이지 하단의 입력창에 댓글을 입력하고 Submit 버튼을 클릭해 댓글 추가 |
 |
| 화면 | 포스트 작성 | 포스트 작성2 |
|---|---|---|
| 스크린샷 |  |
 - 에디터 헤더의 버튼들을 눌러 볼드, 표 추가, 이미지 추가 등을 할 수 있음 - 페이지 하단의 태그 입력창에 태그를 입력하고 엔터를 눌러 태그 추가, Submit 버튼을 눌러 글 작성 완료 |
| 화면 | 포스트 수정 | 태그 페이지 |
|---|---|---|
| 스크린샷 |  - 포스트 페이지에서 편집 아이콘을 눌러 수정 페이지로 이동할 경우 기존 글의 내용이 모두 그대로 들어가게 됨 |
 - 태그 페이지에서는 태그별로 글 목록을 확인 |
| 화면 | 프로필 설정 | 프로필 수정 |
|---|---|---|
| 스크린샷 |  - 메인 페이지 헤더의 프로필을 클릭해 프로필 설정 페이지로 이동 가능 |
 - 프로필 이미지를 클릭해 프로필 이미지 수정 - 닉네임 입력창에 닉네임을 입력해 수정, Submit 버튼을 클릭해 수정 완료 |