🐦 ReactSNS

소셜 네트워크 서비스

🔗 배포 주소

👉 https://react-sns-one.vercel.app

📖 프로젝트 소개

실시간 소셜 미디어 플랫폼으로, 사용자 인증, 포스트 작성/수정/삭제, 댓글/대댓글, 좋아요, 프로필 관리 등의 기능을 구현한 풀스택 웹 애플리케이션입니다. React + TypeScript + Supabase를 활용하여 실시간 데이터 처리와 인증을 구현했으며,
Vercel을 통해 배포된 풀스택 개인 프로젝트입니다.

⚙️ 기술 스택

Frontend

State Management & Data Fetching

Backend & Auth

Deploy

✨ 주요 기능

기능	설명
🔐 회원가입 / 로그인	Supabase Auth 기반 사용자 인증
✍️ 게시글 작성	텍스트 중심의 포스트 작성 및 업로드
🔁 무한 스크롤	react-intersection-observer를 활용한 피드 무한 로딩
🌙 다크 모드	next-themes를 활용한 라이트/다크 테마 전환
🔔 토스트 알림	sonner를 활용한 UX 피드백 알림
📱 반응형 UI	Tailwind CSS 기반의 모바일 대응 레이아웃

🚀 시작 가이드

요구사항

• Node.js 18 이상
• npm

설치 및 실행

# 1. 레포지토리 클론
git clone https://github.com/Amelia-Shin/reactSNS.git
cd reactSNS

# 2. 패키지 설치
npm install

# 3. 환경변수 설정
# .env 파일을 생성하고 아래 값을 입력해주세요
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# 4. 개발 서버 실행
npm run dev

빌드

npm run build

📁 프로젝트 구조

src/
├── components/     # 재사용 UI 컴포넌트
├── pages/          # 라우팅 페이지
├── hooks/          # 커스텀 훅
├── store/          # Zustand 상태 관리
└── supabase/       # Supabase 클라이언트 설정

---

Made with ❤️ by Amelia-Shin