https://github.com/jingjing2222/rebiewook

독후감 리뷰 사이트
https://github.com/jingjing2222/rebiewook

react review supabase typescript

Last synced: 9 days ago
JSON representation

독후감 리뷰 사이트

• Host: GitHub
• URL: https://github.com/jingjing2222/rebiewook
• Owner: jingjing2222
• Created: 2025-01-17T06:05:37.000Z (27 days ago)
• Default Branch: master
• Last Pushed: 2025-02-03T11:11:41.000Z (10 days ago)
• Last Synced: 2025-02-03T11:37:20.624Z (10 days ago)
• Topics: react, review, supabase, typescript
• Language: TypeScript
• Homepage: https://rebiewook.site
• Size: 11.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rebiewook - 독후감 개인 블로깅

[배포된 사이트 링크!](https://rebiewook.site/)

# 제작 기간

2025.01.20. ~ 2025. 01.27.

# 주요 기능

## Create

### 카카오 도서 API 사용

### react-query(useMutation, useInfiniteQuery)



#### 무한 스크롤 & Virtual Scroll

![Image](https://github.com/user-attachments/assets/c020f017-534f-46a0-87c2-e8743c98966f)

- Viewport상 8개만 렌더링 후, 49번째 도서까지 스크롤시, 다음 도서 List Fetch후 List에 추가

## Read

### React-Query(useQuery)



## Upload & Delete







## 반응형 CSS (tailwindcss)

![Image](https://github.com/user-attachments/assets/4c237792-67bd-4367-ba70-e32b3e79cd88)

## 📌 기술 스택 (Tech Stack)

### 🏗️ 프레임워크 & 라이브러리

![React](https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=white)

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=flat&logo=reactrouter&logoColor=white)

![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=flat&logo=react-query&logoColor=white)

![Tanstack/React-virtual](https://img.shields.io/badge/%40tanstack%2Freact-virtual)

![react-hook-form](https://img.shields.io/badge/react--hook--form-EC5990&logo=reacthookform&logoColor=white)

### 🎨 스타일링

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat&logo=tailwindcss&logoColor=white)

![tailwindcss-animate](https://img.shields.io/badge/TailwindCSS_Animate-06B6D4?style=flat)

### 🔍 UI 컴포넌트

![shadcn%2Fui - Radix Dialog](https://img.shields.io/badge/shadcn%2Fui-Radix__Dialog_-8B5CF6?style=flat)

![shadcn%2Fui - Radix Label](https://img.shields.io/badge/shadcn%2Fui-Radix__Label_-8B5CF6?style=flat)

![shadcn%2Fui - Radix Slot](https://img.shields.io/badge/shadcn%2Fui-Radix__Slot_-8B5CF6?style=flat)

![shadcn%2Fui - Lucide Icons](https://img.shields.io/badge/shadcn%2Fui-Lucide__Icons_-8B5CF6?style=flat)

### 📅 날짜 & 시간

![date-fns](https://img.shields.io/badge/date--fns-00C853?style=flat)

### 📦 상태 관리 & 데이터 처리

![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=flat&logo=supabase&logoColor=white)

### 📝 마크다운 & 에디터

![react-markdown](https://img.shields.io/badge/react--markdown-000000?style=flat)

![react-md-editor](https://img.shields.io/badge/React_MD_Editor-000000?style=flat)

### 🛠️ 개발 환경 & 도구

![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat&logo=vite&logoColor=white)

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)

![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=flat&logo=eslint&logoColor=white)

![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=flat&logo=prettier&logoColor=white)

### ✨ ESLint & 코드 스타일링

![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=flat&logo=eslint&logoColor=white)

![TypeScript ESLint](https://img.shields.io/badge/TypeScript_ESLint-3178C6?style=flat)

### ⚡ 기타 유틸리티

![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=flat&logo=postcss&logoColor=white)

![Autoprefixer](https://img.shields.io/badge/Autoprefixer-DD3A0A?style=flat)

![camelcase-keys](https://img.shields.io/badge/camelcase--keys-333333?style=flat)

![react-cookie](https://img.shields.io/badge/react--cookie-333333?style=flat)

![@types/react](https://img.shields.io/badge/%40types%2Freact-3178C6?style=flat)

![@types/node](https://img.shields.io/badge/%40types%2Fnode-22.10.7-43853D?style=flat&logo=node.js&logoColor=white)

[def]: image.png