Picktogram은 디자이너를 위한 SNS 서비스입니다.
AWS EC2를 통해 배포하였습니다. http://3.34.219.42:3000
로컬에서 실행하려면 아래 순서를 따르면 됩니다.
- 레포지토리를 클론합니다.
git clone
- picktogram 폴더로 들어갑니다.
cd picktogram
- package를 설치하고, 개발 모드로 실행합니다.
npm install
npm run dev
- Next.js
- Typescript
- React Query
- React Hook Form
- Emotion
- Nestia SDK를 이용한 통신 (백엔드와의 연동 방식)
https://sunrise-push-ffa.notion.site/Picktogram-3437f9ef750b43e78ca09c3aae0df46d
-
Nestia SDK
- npm으로 Nestia Sever Apis를 다운 받으면 SDK를 사용할 수 있습니다
- 자동완성이 지원되고 보낼 바디 타입과 받을 리턴 타입이 유추됩니다.
-
회원가입 / 로그인
- 자체 회원가입을 지원합니다.
- 회원가입, 로그인 과정에서 React Hook Form을 활용한 Validation을 이루어집니다.
- Authentication 과정을 Sever-side로 진행하여, 리디렉션 전에 인증되지 않은 콘텐츠의 깜빡임을 방지합니다. (관련 내용 : https://nextjs.org/docs/pages/building-your-application/routing/authenticating )
-
게시글 / 댓글 조회
-
게시글은 무한 스크롤을 통해 제공합니다.
-
댓글은 더보기 버튼을 통해 추가됩니다.
-
특정 게시글 확인 이후 뒤로가면 기존 스크롤이 유지됩니다.
-
-
게시글 / 댓글 작성
- 게시글 작성 과정에서 이미지 업로드 기능을 제공합니다.
- 게시글 이미지 위의 특정 좌표에 할당되는 댓글을 작성할 수 있습니다.
- 이미지 위의 댓글은 클릭하거나 마우스를 올리는 것으로 확인 할 수 있습니다.
- 일반적인 댓글 작성도 가능합니다. 이 경우에는 이미지 위에 해당 댓글은 표시되지 않습니다.
- 댓글이 없는 게시글을 추천합니다. 페이지네이션 형태로 제공됩니다.
-
팔로우 / 언팔로우
- 날 팔로우한 유저를 추천합니다. 페이지네이션 형태로 제공됩니다.
-
유저 프로필 수정
- 커버 이미지를 수정할 수 있습니다.
- 프로필 이미지를 수정할 수 있습니다.
- 소개글을 수정할 수 있습니다.
-
게시글과 댓글 작성 빈도로 측정되는 점수가 있습니다. 이를 활용한 추천 유저 기능을 추가할 예정입니다.
-
대댓글 기능을 추가할 예정입니다.
-
게시글 검색 기능을 추가할 예정입니다.
- 마이 페이지
- 다른 유저의 페이지