HANGER

Skill

front-end

• Javascript
• ReactJs
• Redux & Redex-saga
• styled-components
• NextJs

back-end

• ExpressJs (node)
• Javascript
• Sequelize (MySQL)

DEVOPS

• AWS (EC2, S3, Route53)
• ubuntu (nginx, letsencrypt, pm2)

Execution screen

Index Page

index\_page.png

• 헤더의 검색기능, 메뉴기능 사용이 가능하며 게시글 오른쪽에 알림 기능을 출력 (우측 사진: 모바일 알림 기능)

index\_page2.png

Signup Page

• 회원가입 화면
• 각 항목 별로 오류 발생 시 메시지 출력
• 모든 항목을 알맞게 채웠을 경우 회원가입 실행

sign\_up.png

SignIn Page

• 로그인 화면
• 회원가입을 통해 저장된 아이디와 비밀번호를 입력 시 로그인 실행

sign\_in.png

Add Post

• 포스트 업로드 화면
• 사진과 게시글을 작성하여 게시물을 업로드

add\_post.png

Comment

• 댓글 업로드 화면

comment

Search

• 검색창
• 로그인 시 사용가능하며 회원가입한 사용자, 사용된 해쉬태그 등을 검색 가능 (우측 사진: 모바일 검색 기능)

search.png

User Profile Page

• 유저 프로필 페이지
• 로그인 유저의 프로필 페이지에서는 자신이 저장한 게시글을 볼 수 있으며 프로필 수정 페이지로 이동 가능

user\_profile.png

Single Post Page

• 싱글 포스트 페이지
• 유저가 직접 검색해서 접속할 수 있으며 유저 알림을 통해 접속 가능

single\_page.png

Hashtag Post Page

• 해시태그 포스트 페이지
• 검색과 게시글 태그 클릭 시 해당 태그를 사용한 게시글을 호출

hashtag.png

Edit User Info Page

• 유저 정보 수정 페이지
• 유저의 이름과 닉네임, 유저 소개, 프로필 사진 변경 가능

edit\_user\_info.png