Skip to content

5urf/5urf-twitter

Repository files navigation

5urf Twitter

레트둜 κ°μ„±μ˜ μ†Œμ…œ λ―Έλ””μ–΄ ν”Œλž«νΌ
μ‚¬μš©μžλ“€μ΄ 생각과 μˆœκ°„μ„ κ³΅μœ ν•  수 μžˆλŠ” ν˜„λŒ€μ μ΄λ©΄μ„œλ„ ν–₯수λ₯Ό λΆˆλŸ¬μΌμœΌν‚€λŠ” νŠΈμœ„ν„° 클둠 ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.

5urf Twitter Home Screenshot

πŸ”— 데λͺ¨ 링크

🌐 Live Demo

ν…ŒμŠ€νŠΈ 계정

이메일: [email protected]
λΉ„λ°€λ²ˆν˜Έ: test1234567

✨ μ£Όμš” κΈ°λŠ₯

πŸ” μ‚¬μš©μž 인증 μ‹œμŠ€ν…œ

  • νšŒμ›κ°€μž… & 둜그인: iron-session을 ν™œμš©ν•œ μ•ˆμ „ν•œ μ„Έμ…˜ 관리
  • λΉ„λ°€λ²ˆν˜Έ μ•”ν˜Έν™”: bcryptjsλ₯Ό ν†΅ν•œ μ•ˆμ „ν•œ λΉ„λ°€λ²ˆν˜Έ ν•΄μ‹±
  • μ‹€μ‹œκ°„ μœ νš¨μ„± 검증: Zod μŠ€ν‚€λ§ˆλ₯Ό ν™œμš©ν•œ ν΄λΌμ΄μ–ΈνŠΈ/μ„œλ²„ μ–‘λ°©ν–₯ 검증
νšŒμ›κ°€μž… μœ νš¨μ„± 검사 μ˜ˆμ‹œ

πŸ“ νŠΈμœ— 관리

  • νŠΈμœ— μž‘μ„±: 200자 μ œν•œμ˜ μ‹€μ‹œκ°„ κΈ€μž 수 μΉ΄μš΄ν„°
  • νŠΈμœ— μˆ˜μ • & μ‚­μ œ: μ†Œμœ μž κΆŒν•œ 확인을 ν†΅ν•œ μ•ˆμ „ν•œ CRUD
  • μ‹€μ‹œκ°„ μƒνƒœ ν‘œμ‹œ: 낙관적 μ—…λ°μ΄νŠΈ(Optimistic Updates)둜 λΆ€λ“œλŸ¬μš΄ UX
νŠΈμœ— μˆ˜μ •

πŸ’– μƒν˜Έμž‘μš© κΈ°λŠ₯

  • μ’‹μ•„μš” μ‹œμŠ€ν…œ: μ‹€μ‹œκ°„ μ’‹μ•„μš” ν† κΈ€ 및 μΉ΄μš΄ν„°
  • λŒ“κΈ€ μ‹œμŠ€ν…œ: νŠΈμœ—λ³„ λŒ“κΈ€ μž‘μ„±, μˆ˜μ •, μ‚­μ œ
  • μ‚¬μš©μž ν”„λ‘œν•„: κ°œμΈμ •λ³΄ μˆ˜μ •, λΉ„λ°€λ²ˆν˜Έ λ³€κ²½, νšŒμ› νƒˆν‡΄
λŒ“κΈ€

πŸ” 검색 & 탐색

  • 톡합 검색: νŠΈμœ— λ‚΄μš©κ³Ό μ‚¬μš©μžλͺ… λ™μ‹œ 검색
  • νŽ˜μ΄μ§€λ„€μ΄μ…˜: 효율적인 데이터 λ‘œλ”©κ³Ό 탐색
  • μ‚¬μš©μž ν”„λ‘œν•„ νŽ˜μ΄μ§€: κ°œμΈλ³„ νŠΈμœ— λͺ¨μŒ 및 ν™œλ™ 기둝
ν”„λ‘œν•„ νŽ˜μ΄μ§€

🎨 μ‚¬μš©μž κ²½ν—˜

  • 닀크λͺ¨λ“œ 지원: 라이트/닀크 ν…Œλ§ˆ ν† κΈ€
  • 레트둜 λ””μžμΈ: ν”½μ…€ ν°νŠΈμ™€ 레트둜 μŠ€νƒ€μΌμ˜ λ…νŠΉν•œ UI
  • λ°˜μ‘ν˜• λ””μžμΈ: λͺ¨λ°”일뢀터 λ°μŠ€ν¬ν†±κΉŒμ§€ μ™„λ²½ λŒ€μ‘
  • λ‘œλ”© μƒνƒœ 관리: μŠ€μΌˆλ ˆν†€ UI
닀크λͺ¨λ“œ

πŸ›  기술 μŠ€νƒ

Frontend

  • Next.js 15
  • TypeScript
  • TailwindCSS
  • Lucide React

Backend & Database

  • Next.js API Routes & Server Actions
  • Prisma
  • iron-session
  • bcryptjs
  • Zod

πŸ“ ν”„λ‘œμ νŠΈ ꡬ쑰

5urf-twitter/
β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ (auth)/                    # 인증 νŽ˜μ΄μ§€ (둜그인/νšŒμ›κ°€μž…)
β”‚   β”‚   β”œβ”€β”€ log-in/
β”‚   β”‚   └── create-account/
β”‚   β”œβ”€β”€ (tabs)/                    # μ£Όμš” νƒ­ λ„€λΉ„κ²Œμ΄μ…˜ 라우트 κ·Έλ£Ή
β”‚   β”‚   β”œβ”€β”€ (home)/                # ν™ˆ ν”Όλ“œ
β”‚   β”‚   β”œβ”€β”€ search/                # ν‚€μ›Œλ“œ 검색
β”‚   β”‚   β”œβ”€β”€ tweets/[id]/           # νŠΈμœ— 상세 보기 및 μˆ˜μ •
β”‚   β”‚   β”œβ”€β”€ users/[username]/      # μœ μ € ν”„λ‘œν•„ νŽ˜μ΄μ§€
β”‚   β”‚   └── settings/              # ν™˜κ²½μ„€μ • νŽ˜μ΄μ§€
β”‚   β”œβ”€β”€ api/                       # API 라우트
β”‚   └── actions/                   # ν…Œλ§ˆ λ“± UI κ΄€λ ¨ μ„œλ²„ μ•‘μ…˜
β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ auth/                      # 둜그인/νšŒμ›κ°€μž… UI
β”‚   β”œβ”€β”€ tweet/                     # νŠΈμœ— μΉ΄λ“œ 및 μž…λ ₯μ°½
β”‚   β”œβ”€β”€ response/                  # λŒ“κΈ€ UI
β”‚   β”œβ”€β”€ search/                    # 검색 μž…λ ₯ 및 κ²°κ³Ό
β”‚   β”œβ”€β”€ profile/                   # ν”„λ‘œν•„ μˆ˜μ •/미리보기
β”‚   β”œβ”€β”€ common/                    # 곡톡 λ²„νŠΌ, λ‘œλ”© λ“±
β”‚   └── layout/                    # 헀더, νƒ­λ°” λ“± λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈ
β”œβ”€β”€ lib/                           # 곡톡 μœ ν‹Έλ¦¬ν‹° 및 μ„€μ •
β”‚   β”œβ”€β”€ db.ts                      # Prisma DB μ—°κ²°
β”‚   β”œβ”€β”€ session.ts                 # μ„Έμ…˜ 처리
β”‚   β”œβ”€β”€ auth.ts                    # iron-session 기반 인증 ν•Έλ“€λŸ¬
β”‚   └── constants.ts               # μƒμˆ˜ 및 μœ νš¨μ„± κ·œμΉ™
β”œβ”€β”€ types/                         # μ»€μŠ€ν…€ νƒ€μž… 및 μΈν„°νŽ˜μ΄μŠ€
└── prisma/                        # Prisma μŠ€ν‚€λ§ˆ 및 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜

🎯 μ£Όμš” κ΅¬ν˜„ νŠΉμ§•

πŸ”„ μ΅œμ ν™”λœ μ‚¬μš©μž κ²½ν—˜

  • 낙관적 μ—…λ°μ΄νŠΈ: μ’‹μ•„μš”, λŒ“κΈ€ λ“± μ¦‰μ‹œ 반영으둜 λ°˜μ‘μ„± κ·ΉλŒ€ν™”
  • μŠ€μΌˆλ ˆν†€ λ‘œλ”©: μ½˜ν…μΈ  λ‘œλ”© 쀑 μžμ—°μŠ€λŸ¬μš΄ ν”Œλ ˆμ΄μŠ€ν™€λ”
  • μ‹€μ‹œκ°„ 폼 검증: μ‚¬μš©μž μž…λ ₯에 λŒ€ν•œ 즉각적인 ν”Όλ“œλ°±

πŸ”’ λ³΄μ•ˆ & μ„±λŠ₯

  • μ„œλ²„μ‚¬μ΄λ“œ μ„Έμ…˜: ν΄λΌμ΄μ–ΈνŠΈ λ…ΈμΆœ μ—†λŠ” μ•ˆμ „ν•œ 인증
  • κΆŒν•œ 기반 μ ‘κ·Ό μ œμ–΄: μ†Œμœ μžλ§Œ μˆ˜μ •/μ‚­μ œ κ°€λŠ₯
  • SQL μΈμ μ…˜ λ°©μ§€: Prisma ORM을 ν†΅ν•œ μ•ˆμ „ν•œ 쿼리
  • Next.js 캐싱: μžλ™ μ΅œμ ν™”λœ 데이터 페칭

🎨 독창적인 λ””μžμΈ

  • 레트둜 ν…Œλ§ˆ: Press Start 2P ν°νŠΈμ™€ ν”½μ…€ μ•„νŠΈ 감성
  • μΌκ΄€λœ λ””μžμΈ μ‹œμŠ€ν…œ: μž¬μ‚¬μš© κ°€λŠ₯ν•œ μ»΄ν¬λ„ŒνŠΈ μ•„ν‚€ν…μ²˜

About

πŸ“ 생각과 μˆœκ°„μ„ κ³΅μœ ν•  수 μžˆλŠ” ν”Œλž«νΌ

Resources

Stars

Watchers

Forks

Contributors