cyjo9603/chalkak

📸 React SNS 서비스

현재는 deprecated 되었습니다.

Chalkak

• React로 개발한 SNS 서비스 ( Chalkak )

Skill

Front-end

• React ( Hooks )
• TypeScript
• Redux & Redux saga
• Ant Design
• Styled Component
• Next.js ( SSR + express.js )

Back-end

• Express.js ( node )
• Typescript
• Sequelize ( MySQL )

DEVOPS

• AWS ( EC2, S3, Route53 )

Execution screen

MAIN PAGE

• 기본 접속 화면

기본

로그인 후

기기별 반응형

SIGNUP PAGE

• 회원가입 화면
• 각 항목에 맞지 않게 입력하면 아래에 붉은 색으로 사유가 나타난다.
• 올바르게 입력하면 초록색으로 알맞게 입력했다는 메시지가 나타난다.

SIGNIN PAGE

• 로그인 화면
• 아이디와 비밀번호를 입력하지 않으면 버튼이 비활성화 되어있다.

DRAWER

• 사이드 메뉴 화면
• 헤더의 메뉴버튼을 누르면 나타난다.
• 맨 아래에 로그아웃 버튼이 있다.

NOTIFY

• 알림 화면
• 친구요청이 올경우 옆쪽 공간에 요청 메시지가 나타난다.

PASSWORD CHECK PAGE

• 비밀번호 체크 화면
• 마이페이지, 비밀번호 변경 같은 개인정보 화면을 들어갈때 나타난다.

MY PAGE

• 마이페이지
• 개인정보에 대한 내용이 나타나는 화면이다.
• 우측 상단의 편집 버튼을 누르면 개인정보를 수정할 수 있다.

• 마이페이지 정보 수정 화면

CHANGE PASSWORD PAGE

• 비밀번호 변경 화면

PROFILE PAGE

• 프로필 화면
• 내 프로필과 내가 작성한 게시글이 보이는 화면이다.

OTHER USER PAGE

• 다른 유저 화면
• 다른 유저의 프로필과 작성 게시글이 보여지는 화면이다.
• 우측 상단의 버튼으로 친구 신청을 할 수가 있다.

FRIENDS LIST PAGE

• 친구 목록 화면
• 친구 목록이 나오며 친구가 5명 이상일경우 더보기 버튼이 표시된다.
• 더보기 버튼을 누를때마다 5명씩 추가로 보여진다.

WRITE POST

• 게시글 작성
• 이미지 업로드 버튼을 누르면 이미지를 업로드하는 폼이 생성된다.
• #해쉬태그를 이용하여 게시글 검색 명령어를 지정할 수 있다.

WRITE COMMENT

• 댓글 작성
• 게시글의 댓글아이콘을 클릭하여 댓글을 작성할 수 있다.

SEARCH HASHTAG POST

• 해쉬태그 검색
• 헤더부분에 있는 검색창으로 해쉬태그를 검색할 수 있다.