diff --git a/README.md b/README.md index 06df951..ed572c6 100644 --- a/README.md +++ b/README.md @@ -1 +1,151 @@ -# rolling-paper +# πŸ“¬ Rolling + +> μ½”λ“œμž‡ μŠ€ν”„λ¦°νŠΈ - ν”„λ‘ νŠΈμ—”λ“œ 14κΈ° 6νŒ€ +>
배포 URL: >
ν˜‘μ—… λ…Έμ…˜: + +##
πŸ“… κ°œλ°œκΈ°κ°„: 2025. 03. 06 ~ 2025. 03. 21 + +![Image](https://github.com/user-attachments/assets/9a18294b-f763-434c-8746-aaae2cc37ab8) + +##
πŸš€ ν”„λ‘œμ νŠΈ μ†Œκ°œ + +- 친ꡬ, λ™λ£Œλ“€μ΄ 둀링페이퍼λ₯Ό 온라인으둜 μ‰½κ²Œ μž‘μ„±ν•  수 μžˆλ„λ‘ λ§Œλ“  μ„œλΉ„μŠ€μž…λ‹ˆλ‹€ + - λ‹€μ–‘ν•œ 이λͺ¨μ§€ κΈ°λŠ₯을 톡해 감정을 ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€ + - κ°„νŽΈν•œ UI둜 쉽고 λΉ λ₯΄κ²Œ 둀링페이퍼λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€ + +##
πŸ’πŸ» νŒ€μ› μ†Œκ°œ + +| | | | | | +| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| **[FE] [졜혜윀](https://github.com/rachelchoi11)** | **[FE] [μ‘°μ§€ν˜„](https://github.com/zeon0xx0)** | **[FE] [μ§€μ •ν™˜](https://github.com/jeonghwanJay)** | **[FE] [μ§„μ„±μ§„](https://github.com/cozy-ito)** | **[FE] [μ΅œκΆŒμ§„](https://github.com/kwonjin2)** | + +##
πŸ”§ 기술 μŠ€νƒ + +### Front-End + + + +### Communication + + + +##
πŸ’‘ μ‹œμž‘ κ°€μ΄λ“œ + +```shell +### 1. ν΄λ‘ ν•˜κΈ° +>git clone https://github.com/cozy-ito/rolling-paper.git + +### 2. 디렉토리 이동 +>cd rolling-paper + +### 3. νŒ¨ν‚€μ§€ μ„€μΉ˜ +>npm install + +### 4. ν”„λ‘œμ νŠΈ μ‹€ν–‰ +>npm run dev + +``` + +##
πŸ«±πŸ»β€πŸ«²πŸ» μ—­ν•  λΆ„λ‹΄ + +### ❀️ 졜혜윀 + +- νŽ˜μ΄μ§€ μž‘μ—… + - 메인 νŽ˜μ΄μ§€ + +### πŸ‘ μ‘°μ§€ν˜„ + +- 곡톡 μ»΄ν¬λ„ŒνŠΈ + - `ProfilButton`, `Button`, `CardList`, `Toast` +- νŽ˜μ΄μ§€ μž‘μ—… + - μΉ΄λ“œ λ§Œλ“€κΈ° νŽ˜μ΄μ§€ + +### πŸ§‘πŸ»β€πŸ¦± μ§€μ •ν™˜ + +- 곡톡 μ»΄ν¬λ„ŒνŠΈ + - `Badge`, `Input`, `Card`, `TextEditor` +- νŽ˜μ΄μ§€ μž‘μ—… + - λ‘€λ§νŽ˜μ΄νΌμ— λ©”μ„Έμ§€ 보내기 νŽ˜μ΄μ§€ + +### πŸ€— μ§„μ„±μ§„ + +- ν”„λ‘œμ νŠΈ μ„ΈνŒ… 및 κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ ꡬ성 +- 곡톡 μ»΄ν¬λ„ŒνŠΈ + - `ArrowButton`, `Header` +- νŽ˜μ΄μ§€ μž‘μ—… + - 메인 νŽ˜μ΄μ§€, μƒμ„±λœ 둀링페이퍼 νŽ˜μ΄μ§€, μƒμ„±λœ 둀링페이퍼 μˆ˜μ • νŽ˜μ΄μ§€ + +### 🫧 μ΅œκΆŒμ§„ + +- 곡톡 μ»΄ν¬λ„ŒνŠΈ + - `ToggleButton`, `Option`, `Dropdown`, `Modal` +- νŽ˜μ΄μ§€ μž‘μ—… + - 둀링페이퍼 λͺ©λ‘ νŽ˜μ΄μ§€, 404 였λ₯˜ νŽ˜μ΄μ§€ + +##
πŸ“Œ μ£Όμš” κΈ°λŠ₯ + +### 1. 메인 νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/419be682-f89b-4529-83e6-e9793e4c79df) + +- [ꡬ경해보기] λ²„νŠΌ 클릭 μ‹œ 둀링 페이퍼 리슀트 νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ +- [둀링 페이퍼 λ§Œλ“€κΈ°] λ²„νŠΌ 클릭 μ‹œ 둀링 페이퍼 λ§Œλ“€κΈ° νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ + +###
2. 둀링페이퍼 λͺ©λ‘ νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/8a15f4f7-4571-48d0-a866-1cee4c84d547) + +- [λ‚˜λ„ λ§Œλ“€μ–΄λ³΄κΈ°] λ²„νŠΌ 클릭 μ‹œ 둀링 페이퍼 λ§Œλ“€κΈ° νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ +- [인기 둀링 페이퍼]λŠ” λ¦¬μ•‘μ…˜ 수λ₯Ό κΈ°μ€€μœΌλ‘œ μ •λ ¬λ©λ‹ˆλ‹€ +- [μ΅œκ·Όμ— λ§Œλ“  둀링 페이퍼]λŠ” 졜근 생성 κΈ°μ€€μœΌλ‘œ μ •λ ¬λ©λ‹ˆλ‹€ +- μŠ€μΌˆλ ˆν†€ UI와 λ‘œλ”© μŠ€ν”Όλ„ˆλ₯Ό 톡해 μžμ—°μŠ€λŸ¬μš΄ λ‘œλ”© 효과λ₯Ό μ€λ‹ˆλ‹€ +- ν™”μ‚΄ν‘œλ₯Ό ν΄λ¦­ν•˜λ©΄ μ• λ‹ˆλ©”μ΄μ…˜ νš¨κ³Όκ°€ μ μš©λ˜μ–΄ λΆ€λ“œλŸ½κ²Œ μΉ΄λ“œλ₯Ό λ„˜κΈΈ 수 μžˆμŠ΅λ‹ˆλ‹€ +- 슀크둀 μŠ€λƒ… κΈ°λŠ₯으둜 μŠ€ν¬λ‘€ν•  λ•Œ νŠΉμ • μœ„μΉ˜μ—μ„œ λ‘€λ§νŽ˜μ΄νΌκ°€ μžλ™μœΌλ‘œ μ •λ ¬λ©λ‹ˆλ‹€ +- 둀링 페이퍼 μΉ΄λ“œλ₯Ό ν΄λ¦­ν•˜λ©΄ ν•΄λ‹Ή 둀링페이퍼 상세 νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ + +###
3. 둀링페이퍼 λ§Œλ“€κΈ° νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/1a4b6073-e659-42dc-9c83-0cee21026850) + +- [컬러] 토글을 μ„ νƒν•˜λ©΄ 배경색을 선택할 수 있고, [이미지] 토글을 μ„ νƒν•˜λ©΄ μ—…λ‘œλ“œν•  이미지λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€ +- λ°›λŠ” μ‚¬λžŒμ˜ 이름을 μž…λ ₯ν•˜μ§€ μ•Šμ„ 경우 [μƒμ„±ν•˜κΈ°] λ²„νŠΌμ€ λΉ„ν™œμ„±ν™” μƒνƒœκ°€ λ©λ‹ˆλ‹€ +- λ°›λŠ” μ‚¬λžŒμ˜ 이름을 μž…λ ₯ν•˜μ§€ μ•Šκ³  focus out을 ν•˜λ©΄ "값을 μž…λ ₯ν•΄ μ£Όμ„Έμš”" μ—λŸ¬ λ©”μ‹œμ§€κ°€ λœΉλ‹ˆλ‹€ +- [μƒμ„±ν•˜κΈ°] λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ λ‘€λ§νŽ˜μ΄νΌκ°€ μƒμ„±λ˜κ³  μƒμ„±λœ 둀링페이퍼 νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ + +###
4. μƒμ„±λœ 둀링페이퍼 νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/79d20238-0e55-4445-b6da-970de3cf2c86) + +- ν•΄λ‹Ή λ‘€λ§νŽ˜μ΄νΌμ— μž‘μ„±λœ λ©”μ‹œμ§€ μΉ΄λ“œ λͺ©λ‘μ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€ +- ν—€λ”μ˜ [μΆ”κ°€] λ²„νŠΌμ„ 눌러 λ‹€μ–‘ν•œ 이λͺ¨μ§€λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€ +- ν—€λ”μ˜ μ•„λž˜ ν™”μ‚΄ν‘œ λ²„νŠΌμ„ 눌러 이λͺ¨μ§€ 리슀트λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€ +- ν—€λ”μ˜ 곡유 λ²„νŠΌμ„ 톡해 μΉ΄μΉ΄μ˜€ν†‘ 및 URL둜 ν•΄λ‹Ή 둀링페이퍼λ₯Ό κ³΅μœ ν•  수 μžˆμŠ΅λ‹ˆλ‹€ +- [+] λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ μΉ΄λ“œλ₯Ό μž‘μ„±ν•  수 μžˆλŠ” 둀링페이퍼 λ©”μ‹œμ§€ 보내기 νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€ + +###
5. μƒμ„±λœ 둀링페이퍼 μˆ˜μ • νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/8881704a-64d0-4507-a125-5bbb67da7afd) + +- [μˆ˜μ •ν•˜κΈ°] λ²„νŠΌμ„ 톡해 λ©”μ‹œμ§€ μΉ΄λ“œλ₯Ό μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€ +- [νŽ˜μ΄μ§€ μ‚­μ œν•˜κΈ°] λ²„νŠΌμ„ 톡해 둀링페이퍼λ₯Ό μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€ + - [νŽ˜μ΄μ§€ μ‚­μ œν•˜κΈ°] λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 둀링페이퍼 λͺ©λ‘ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€ +- [νœ΄μ§€ν†΅] λ²„νŠΌμ„ 톡해 λ©”μ‹œμ§€ μΉ΄λ“œλ₯Ό μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€ + +###
6. 둀링페이퍼 λ©”μ‹œμ§€ 보내기 νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/7a06445d-a00b-4834-966a-c4940aeb755e) + +- λ³΄λ‚΄λŠ” μ‚¬λžŒ 이름을 μž…λ ₯ν•©λ‹ˆλ‹€ (μž…λ ₯ν•  수 μžˆλŠ” κΈ€μžλŠ” μ΅œλŒ€ 20자) +- λ³΄λ‚΄λŠ” μ‚¬λžŒμ˜ 이름을 μž…λ ₯ν•˜μ§€ μ•Šκ³  focus out을 ν•˜λ©΄ "값을 μž…λ ₯ν•΄ μ£Όμ„Έμš”" μ—λŸ¬ λ©”μ‹œμ§€κ°€ λœΉλ‹ˆλ‹€ +- ν”„λ‘œν•„ λ²„νŠΌμ„ ν΄λ¦­ν•˜μ—¬ μ›ν•˜λŠ” μ΄λ―Έμ§€λ‘œ ν”„λ‘œν•„μ„ 선택할 수 μžˆμŠ΅λ‹ˆλ‹€ +- 관계λ₯Ό μ„ νƒν•˜μ—¬ 지인, κ°€μ‘± λ“±μ˜ 관계λ₯Ό ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€ +- 이름과 λ©”μ„Έμ§€μ˜ μž…λ ₯값이 λΉ„μ–΄ 있으면 λ²„νŠΌμ€ λΉ„ν™œμ„±ν™” μƒνƒœκ°€ λ©λ‹ˆλ‹€ +- κΈ€μž κ΅΅κΈ°, κΈ°μšΈμž„, κΈ€μžμƒ‰, 폰트 등을 μ„ νƒν•˜μ—¬ 글을 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€ +- [μƒμ„±ν•˜κΈ°] λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ λ‘€λ§νŽ˜μ΄νΌκ°€ μ„±κ³΅μ μœΌλ‘œ 생성이 되고, μƒμ„±λœ 둀링페이퍼 νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€ +- 이후 μƒμ„±λœ 둀링페이퍼 νŽ˜μ΄μ§€μ˜ 헀더와 둀링페이퍼 λͺ©λ‘ νŽ˜μ΄μ§€μ˜ λ‘€λ§νŽ˜μ΄νΌμ—μ„œ ν˜„μž¬κΉŒμ§€ μž‘μ„±λœ λ©”μ‹œμ§€ 개수λ₯Ό μ‹€μ‹œκ°„μœΌλ‘œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€ + +###
7. 404 μ—λŸ¬ νŽ˜μ΄μ§€ + +![Image](https://github.com/user-attachments/assets/8570b24c-89dd-4ff6-b896-4416ad50dd8b) + +- μ‘΄μž¬ν•˜μ§€ μ•Šμ€ url에 μ ‘κ·Όν–ˆμ„ 경우 ν•΄λ‹Ή νŽ˜μ΄μ§€κ°€ λ³΄μ—¬μ§‘λ‹ˆλ‹€