ronieo/Hedwig

🦉Hedwig 팀 소개

박현준 (팀장)	정영찬	임성열	고봉석	이로운

johnphjkr	jyc-coder	sung34	bongsee	ronieo
[BE] [BE, FE 배포]	[메인 페이지] [메인 페이지 하단탭] [무한스크롤] [게시글 테스트코드] [게시글 수정 및 삭제] [수정 페이지] [CustomComponents]	[메인페이지 상단탭] [게시글상세] [게시글 수정 및 삭제] [게시글 moreButton] [댓글] [댓글 수정/삭제] [글로벌 스타일]	[회원가입] [로그인] [인증] [로딩, 스낵바 컴포넌트]	[글쓰기] [프로젝트 노션 제작] [회의 기록] [로고 디자인]

🦉 Hedwig 프로젝트 소개

Hedwig는 twitter 벤치마킹 프라이빗 커뮤니티 SNS 서비스입니다.
프라이빗 서비스이기 때문에 서비스 이용을 위해선 로그인 또는 회원가입을 해야만 컨텐츠 보기가 가능합니다.
유저 프로필의 이미지는 기본으로 제공 됩니다.
메인피드 기준 상단 탭 왼쪽부터 순서대로 메인 | 내가 좋아요 한 글 | 내가 쓴 글을 볼 수 있습니다.
- 메인피드에서는 각 게시글의 댓글 갯수와 좋아요 갯수를 확인할 수 있습니다.
- 메인피드에서 유저는 각 게시글에 좋아요를 누를 수 있고 취소를 할 수 있습니다.
유저는 게시글을 클릭 해 게시글 상세 페이지로 진입 할 수 있습니다.
- 게시글 상세 페이지에서 타 유저의 댓글을 확인 할 수 있으며 댓글도 작성할 수 있습니다.
- 게시글 상세 페이지에서 자신이 작성한 댓글은 수정 및 삭제가 가능 합니다.
메인피드 기준 하단 네비게이션 왼쪽부터 글쓰기 | 홈 | 프로필(으)로 구성되어 있습니다.
- 글쓰기 네비게이션을 클릭 시 글쓰기 페이지로 이동합니다.
  - 글쓰기 페이지에서는 최대 150자 까지 작성할 수 있습니다.
  - 글쓰기 페이지에서는 한 가지의 미디어만 추가 할 수 있습니다.
  - 글쓰기 페이지에서 다른 미디어를 추가 시 교체 됩니다.
- 홈 네비게이션을 클릭 시, 메인 피드로 이동합니다.
- 프로필 네비게이션을 클릭 시, 로그아웃 슬라이더가 출력됩니다.
  - 로그아웃 슬라이더를 클릭 시, 로그아웃 팝업이 출력됩니다.
  - 로그아웃을 클릭하면 다시 인증: 로그인 또는 회원가입 권유 페이지로 이동합니다.

⏱ Hedwig작업과정

작업 기간 : 2023.04.17 ~ 2023.04.27
서비스 주소: 🦉 Hedwig 🦉
팀 레포지토리 주소 : Hedwig
팀 깃 프로젝트 태스크보드 주소: Hedwig Project Board
팀 작업과정 노션문서 주소: Hedwig Notion
테스트용 계정

🦉 인증: 로그인, 회원가입 페이지 구성

🦉 로그인 또는 회원가입 권유 페이지	🦉 회원가입 페이지	🦉 로그인 페이지

🦉 상단 네비게이션 페이지 구성

🦉 메인 페이지	🦉 LIKED - 내가 좋아요한 페이지	🦉 MY- 내가 작성한 글 페이지

🦉 하단 네비게이션 페이지 구성

🦉 글쓰기 - 글, 미디어 작성공간	🦉 홈 - 메인 페이지 랜더링	🦉 로그아웃 - 터치 후 로그아웃

🛠️Hedwig 기술 스택

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`

📁 Hedwig 프로젝트 구조

┌─ 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

💻 Hedwig 프로젝트 실행 방법

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

ronieo / Hedwig

🦉Hedwig 팀 소개

🦉 Hedwig 프로젝트 소개

⏱ Hedwig작업과정

🦉 인증: 로그인, 회원가입 페이지 구성

🦉 상단 네비게이션 페이지 구성

🦉 하단 네비게이션 페이지 구성

🛠️Hedwig 기술 스택

📁 Hedwig 프로젝트 구조

💻 Hedwig 프로젝트 실행 방법

About