deprecated

HANGER

• ReactJs/NextJs를 사용하여 개발한 SNS 서비스 입니다.

skil

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

HTTPS

• nginx와 letsencrypt를 통한 https 적용

Index Page

로그인 전

로그인 후

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

기기별 반응형

Signup Page

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

SignIn Page

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

Add Post

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

Comment

• 댓글 업로드 화면

Menu

• 헤더 메뉴
• 로그인 시 사용 가능하며 로그인한 사용자의 프로필, 사용자가 저장한 포스트, 좋아요한 포스트, 프로필 수정 페이지로 이동할 수 있다.

Search

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

User Profile Page

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

Main Page

Save Page

Like Page

Single Post Page

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

Hashtag Post Page

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

Edit User Info Page

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