메모 앱 기능 개선 - Supabase 마이그레이션 및 마크다운 편집기, 상세 보기 모달 추가하라

[YunWon123]

개요🔎

메모 앱의 핵심 기능들을 대폭 개선하였습니다.

작업사항✍🏻

• Supabase 마이그레이션: 로컬 스토리지에서 Supabase로 데이터 저장소 변경

  • src/lib/supabase.ts: Supabase 클라이언트 설정
  • src/types/database.ts: 데이터베이스 타입 정의
  • src/hooks/useSupabaseMemos.ts: Supabase CRUD 훅 구현
  • src/contexts/MemoContext.tsx: 전역 상태 관리 컨텍스트 추가

• 마크다운 편집기 및 뷰어: react-md-editor 라이브러리 통합

  • src/components/MemoForm.tsx: 마크다운 편집기 통합
  • 실시간 프리뷰 기능 제공
  • 마크다운 문법 지원

• 메모 상세 보기 모달: 사용자 경험 개선

  • src/components/MemoViewer.tsx: 상세 보기 모달 컴포넌트 추가
  • ESC 키, 배경 클릭으로 모달 닫힘 기능
  • 모달 내에서 편집/삭제 버튼 제공
  • src/components/MemoItem.tsx: 카드 클릭 시 모달 열림 기능
  • src/components/MemoList.tsx, src/app/page.tsx: 모달 연동

• 패키지 및 스타일링 개선

  • package.json: 필요한 의존성 추가
  • src/app/globals.css: 마크다운 스타일링 추가

주의사항❗️

• Supabase 환경 변수 설정 필요 (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY)
• 기존 로컬 스토리지 데이터는 자동으로 마이그레이션되지 않음
• 마크다운 편집기 사용 시 브라우저 호환성 확인 필요
• 모달 구현으로 접근성(a11y) 고려사항 검토 권장