박현준 (팀장) | 정영찬 | 임성열 | 고봉석 | 이로운 |
---|---|---|---|---|
johnphjkr | jyc-coder | sung34 | bongsee | ronieo |
[BE] [BE, FE 배포] |
[메인 페이지] [메인 페이지 하단탭] [무한스크롤] [게시글 테스트코드] [게시글 수정 및 삭제] [수정 페이지] [CustomComponents] |
[메인페이지 상단탭] [게시글상세] [게시글 수정 및 삭제] [게시글 moreButton] [댓글] [댓글 수정/삭제] [글로벌 스타일] |
[회원가입] [로그인] [인증] [로딩, 스낵바 컴포넌트] |
[글쓰기] [프로젝트 노션 제작] [회의 기록] [로고 디자인] |
- Hedwig는 twitter 벤치마킹 프라이빗 커뮤니티 SNS 서비스입니다.
- 프라이빗 서비스이기 때문에 서비스 이용을 위해선 로그인 또는 회원가입을 해야만 컨텐츠 보기가 가능합니다.
- 유저 프로필의 이미지는 기본으로 제공 됩니다.
- 메인피드 기준 상단 탭 왼쪽부터 순서대로 메인 | 내가 좋아요 한 글 | 내가 쓴 글을 볼 수 있습니다.
- 메인피드에서는 각 게시글의 댓글 갯수와 좋아요 갯수를 확인할 수 있습니다.
- 메인피드에서 유저는 각 게시글에 좋아요를 누를 수 있고 취소를 할 수 있습니다.
- 유저는 게시글을 클릭 해 게시글 상세 페이지로 진입 할 수 있습니다.
- 게시글 상세 페이지에서 타 유저의 댓글을 확인 할 수 있으며 댓글도 작성할 수 있습니다.
- 게시글 상세 페이지에서 자신이 작성한 댓글은 수정 및 삭제가 가능 합니다.
- 메인피드 기준 하단 네비게이션 왼쪽부터 글쓰기 | 홈 | 프로필(으)로 구성되어 있습니다.
- 글쓰기 네비게이션을 클릭 시 글쓰기 페이지로 이동합니다.
- 글쓰기 페이지에서는 최대 150자 까지 작성할 수 있습니다.
- 글쓰기 페이지에서는 한 가지의 미디어만 추가 할 수 있습니다.
- 글쓰기 페이지에서 다른 미디어를 추가 시 교체 됩니다.
- 홈 네비게이션을 클릭 시, 메인 피드로 이동합니다.
- 프로필 네비게이션을 클릭 시, 로그아웃 슬라이더가 출력됩니다.
- 로그아웃 슬라이더를 클릭 시, 로그아웃 팝업이 출력됩니다.
- 로그아웃을 클릭하면 다시 인증: 로그인 또는 회원가입 권유 페이지로 이동합니다.
- 글쓰기 네비게이션을 클릭 시 글쓰기 페이지로 이동합니다.
- 작업 기간 : 2023.04.17 ~ 2023.04.27
- 서비스 주소: 🦉 Hedwig 🦉
- 팀 레포지토리 주소 : Hedwig
- 팀 깃 프로젝트 태스크보드 주소: Hedwig Project Board
- 팀 작업과정 노션문서 주소: Hedwig Notion
- 테스트용 계정
🦉 로그인 또는 회원가입 권유 페이지
|
🦉 회원가입 페이지
|
🦉 로그인 페이지
|
---|
🦉 메인 페이지
|
🦉 LIKED - 내가 좋아요한 페이지
|
🦉 MY- 내가 작성한 글 페이지
|
---|
🦉 글쓰기 - 글, 미디어 작성공간
|
🦉 홈 - 메인 페이지 랜더링
|
🦉 로그아웃 - 터치 후 로그아웃
|
---|
FE
- Basic: `React`, `Typescript`, `Next.js`, `MUI `
- Library: `react-query`, `react-redux`, `axios`, `dotenv`, `eslint`, `nprogress`, `react-cookie`, `universal-cookie`, `nprogress`
BE
- Basic: `React`, `Typescript`
- Library: `Express`, `TypeORM `, `Multer`, `Multer-s3` , `MySQL`, `nodemon`, `reflectMetaData`, `JsonWebToken`, `cookie-parser`, `Dotenv`
┌─ src
│ ├─ api
│ │ └─ 공동 api 및 함수
│ │
│ ├─ components
│ │ └─ auth
│ │ | └─ 로그인/회원가입 컴포넌트
│ │ └─ cards
│ │ └─ 게시글과 댓글 컴포넌트
│ │
│ ├─ pages - 컴포넌트 랜더링 페이지
│ │ └─ auth
│ │ └─post
│ │
│ ├─ types
│ | └─ 페이지에 필요한 타입선언
│ |
│ ├─ utils
│ │
├─.env
├─.eslintrc.js
├─next.config.js
├─tsconfig.json
├─README.md
├─package.json
└─package-lock.json
1. $ git clone https://github.com/FE4react5/Hedwig.git
2. $ cd Hedwig
3. $ npm i
4. root경로에 .env 파일 생성 후, api관련 정보(API_KEY, API_URL, USER_NAME) 입력 ex) API_KEY=123456
5. $ npm run dev