HackMD - Collaborative Markdown Knowledge Base

![HOOKIE](https://i.imgur.com/Peev1Mz.png) [🔗 배포 링크](https://hookie.netlify.app/) ## 🖥️ 서비스 소개 > 내가 만든 후기 너를 위해 썼지~ 🎶 > **후키**를 통해 나의 후기를 자유롭게 작성하고 공유해보세요! 영화, 장소, 물건... 뭐든 좋아요 😀 ## 👥 팀원 소개 ### **Frontend** |신윤철|왕유린|김설하|서유림| |:----:|:----:|:----:|:----:| |<img src="https://avatars.githubusercontent.com/u/71367408?v=4" alt="신윤철" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/101461874?v=4" alt="왕유린" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/95897068?v=4" alt="김설하" width="130" height="130">|<img src="https://avatars.githubusercontent.com/u/74060716?v=4" alt="서유림" width="130" height="130">| |[dev-yun](https://github.com/dev-yun)|[wang-yurin](https://github.com/wang-yurin)|[zldnlto](https://github.com/zldnlto)|[yoorimseo](https://github.com/yoorimseo)| ### **Backend** 부트캠프 제공 API ## 👨‍👩‍👧‍👦 역할 분담 ### 🧑🏻‍💻 신윤철 - 홈 페이지, 게시글 업로드 페이지, 게시글 수정 페이지, 프로필 페이지, 프로필 수정 페이지, 검색 페이지 - bottom Sheet, SnackBar, Dialog 모달 구현 - Loading Skeleton 구현 ### 👩🏻‍💻 왕유린 - splash 페이지, 회원가입 페이지, 로그인 페이지, 프로필 설정 페이지 - 다크모드 기능 구현 ### 👩🏻‍💻 김설하 - myPicks 페이지, 채팅 페이지, 404페이지 - 디자인 기획 및 에셋 제작 ### 👩🏻‍💻 서유림 - 게시글 상세 페이지, 팔로워 페이지, 팔로잉 페이지 - 디자인 기획 및 에셋 제작 ### 👥 공통 - Header, Navigation, Button 컴포넌트 ## 🤝 팀문화 - 매일 오전 9시에 **회고 및 진행 상황**을 공유해요. - **감정 나누기 시간**을 가지며 팀원들과 함께 멘탈도 챙겨요. - **'쉴땐 쉰다!'** 지속가능한 개발 지향해요. ## 🛠 테크 스택 ![Tech Stack](https://i.imgur.com/tbB78SU.png) ## 🔀 Git Flow ![Git Flow](https://i.imgur.com/EvI6Zny.png) ## 🖥️ 페이지 소개 |스플래시|회원가입| |:----:|:----:| |<img src='https://i.imgur.com/NrkBgAe.gif' width="300" />|<img src='https://i.imgur.com/Ynj45pS.gif' width="300"/>| |<pre style='width:300px'>✨ 앱 구동 시작화면 ✨ 로그인 정보 유무에 따른 페이지 이동</pre>|<pre style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 입력 시 유효성 검사 ✨ 유효성 검사 통과하면 버튼 활성화</pre>| <div style="color:tomato">----------------------------------------------</div> <hr style="color:tomato" /> |프로필 설정|로그인| |:----:|:----:| |<img src='https://i.imgur.com/7z6YZYt.gif' width="300" />|<img src='https://i.imgur.com/0NHwPYU.gif' width="300"/>| |<pre style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 입력 시 유효성 검사 ✨ 유효성 검사 통과하면 버튼 활성화 ✨ 이미지 설정하지 않으면 기본 프로필 이미지 적용</pre>|<pre style='width:300px'>✨ 사용자의 오류를 최소화하기 위해 인풋 모두 입력해야 버튼 활성화 ✨ 로컬스토리지에 토큰 저장 ✨ 로그인 완료 후 홈 페이지로 이동</pre>| |홈 페이지|검색 페이지| |:----:|:----:| |<img src='https://i.imgur.com/wNaJtA7.gif' width="300"/>|<img src='https://i.imgur.com/atXjz5c.gif' width="300"/>| |<pre style='width:300px'>✨ 게시글 수정, 삭제, 신고, 좋아요 기능 구현 ✨ Loading Indicator 구현</pre>|<pre style='width:300px'>✨ 사용자를 검색하고 프로필로 이동하는 기능 구현 ✨ debounce 기능 적용 ✨ Loading Indicator 구현</pre>| |업로드 페이지|게시글 상세 페이지| |:----:|:----:| |<img src='https://i.imgur.com/PVHIpVN.gif' width="300"/>|<img src='https://i.imgur.com/q4E5FJp.gif' width="300"/>| |<pre>✨ 이미지, 후기, 태그 추가 기능 구현 ✨ 작성한 포스트 수정 기능 구현 ✨ Loading Indicator 구현 ✨ HEIC 파일 변환하여 추가 기능 구현</pre>|<pre>✨ 게시글 삭제, 수정, 신고, 좋아요 기능 구현 ✨ 댓글 작성, 삭제, 신고 기능 구현 ✨ 댓글 작성 시 스크롤 이동 구현 ✨ 입력에 따라 입력창의 세로 길이가 유동적으로 변하도록 구현</pre>| |프로필 페이지|프로필 수정 페이지| |:----:|:----:| |<img src='https://i.imgur.com/K2PbWhx.gif' width="300"/>|<img src='https://i.imgur.com/9p66u8E.gif' width="300"/>| ✨ 게시글 수정, 삭제, 신고 좋아요 ✨ 프로필 수정, 팔로우, 팔로잉 페이지 이동 ✨ 게시글 리스트형, 앨범형 보기 ✨ 무한 스크롤 구현 |<pre>✨ 기존 프로필 정보를 유지하며 수정 페이지로 이동 ✨ validation을 통과해야 수정할 수 있도록 구현</pre>| |팔로우 페이지|채팅 페이지| |:----:|:----:| |<img src='https://i.imgur.com/drRX0XL.gif' width="300"/>|<img src='https://i.imgur.com/r8AybVb.gif' width="300"/>| |<pre>✨ 유저 팔로우, 팔로잉 기능 구현 ✨ 타 유저 프로필 페이지 이동 </pre>|<pre>✨ 채팅 페이지 구현 ✨ 나의 메세지, 상대방 메세지 컴포넌트 구분</pre>| |MyPicks|MyPicks 업로드 페이지| |:----:|:----:| |<img src='https://i.imgur.com/sTl1bjD.gif' width='300' />|<img src='https://i.imgur.com/sQ6Dld0.gif' width='300' />| |<pre>✨ 모달 형식으로 띄워지는 상세 조회 페이지 ✨ myPicks 수정, 삭제 기능 구현 ✨ 기존의 작성 내용을 유지하며 수정 페이지로 이동</pre>|<pre>✨ 이미지 파일 등록, 미리보기 기능 구현 ✨ 유효성 검사 통과해야 등록 가능 ✨ 가격 미정 항목에 대한 예외처리</pre>| |다크모드|404| |:----:|:----:| |<img src='https://i.imgur.com/ydVU5yM.gif' width='300'/>|<img src='https://i.imgur.com/vono9VQ.png' width='300'/>| |<pre>✨ 사용자 OS에 따른 다크모드, 라이트모드 적용 ✨ 사용자가 선택하여 테마 모드 설정</pre>|<pre>✨ 유효하지 않은 url 접근 시 404페이지 표시</pre>| ## 🗓️ 개발 기간 (22년 11월 27일 ~ 23년 1월 4일) ### 📌 주차별 프로젝트 마일스톤 |주차|| |----|----| |**1주차** (11/27 ~ 12/8)|- 프로젝트 컨셉 회의 및 기술 스택, 협업툴 결정 (`Notion`, `Discord`, `Figma`) - GitProject, GitIssue 템플릿 적용, GitFlow 실습, Figma 디자인 작업 및 기획, 컨벤션 설정| |**2주차** (12/9 ~ 12/15)|- 초기 개발환경 세팅 - 공통 컴포넌트 페어프로그래밍으로 구현| |**3주차** (12/16 ~ 12/22)|- 페이지 단위로 업무를 분담하여 작업 시작| |**4주차** (12/23 ~ 12/29)|- 주요 기능 구현 1차 완료 - 추가기능 구현(다크모드, Loading Indicator) - 배포| |**5주차** (12/30~1/4)|- 프로젝트를 시연해보며 보이는 에러 수정 - SEO작업 - 프로젝트 PPT, README 작성| ## 📁 프로젝트 폴더 구조 ``` ├── 📁 src │ ├── App.jsx │ ├── 📁 api │ ├── 📁 assets │ ├── 📁 atoms │ ├── 📁 components │ │ ├── 📁 AuthInputForm │ │ ├── 📁 ChatUserItem │ │ ├── 📁 Comment │ │ ├── 📁 FollowItem │ │ ├── 📁 Message │ │ ├── 📁 Modal │ │ ├── 📁 Post │ │ ├── 📁 Profile │ │ ├── 📁 Skeleton │ │ ├── 📁 Title │ │ ├── 📁 UserSearch │ │ └── 📁 common │ ├── 📁 constants │ ├── 📁 hooks │ ├── 📁 pages │ │ ├── 📁 Auth │ │ ├── 📁 Chat │ │ ├── 📁 Home │ │ ├── 📁 MyPicksUpload │ │ ├── 📁 NotFound │ │ ├── 📁 Post │ │ ├── 📁 Profile │ │ ├── 📁 Search │ │ ├── 📁 Splash │ │ └── 📁 Welcome │ ├── 📁 routes │ └── 📁 styles └── ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.