Sparta Basic Todos

Next.js(14.x) 및 Supabase를 이용하여 구현된 간단한 TODO 애플리케이션입니다. 인증(로그인/회원가입) 기능과 할 일(Todo) 관리 기능을 제공하며, 클라이언트와 서버 컴포넌트가 혼합된 형태로 구성되어 있습니다. 또한 React Query, Zustand, Tailwind CSS 등을 활용하여 상태 관리 및 UI를 구현하였습니다.

주요 기능

1. 회원 가입/로그인

   • Email/Password 방식의 회원가입, 로그인 기능을 제공합니다.
   • 가입 시 Supabase 인증을 사용하며, 회원 정보를 Supabase의 profiles 테이블에 저장합니다.

2. 할 일(Todo) 관리

   • 새로운 할 일을 추가할 수 있습니다.
   • 목록에서 할 일을 완료 상태로 체크하거나, 삭제할 수 있습니다.
   • 할 일 상세 페이지에서 개별 Todo 정보를 확인할 수 있습니다.

3. 마이 페이지(Mypage)

   • 로그인한 사용자 정보를 가져와 간단한 프로필(이름, ID 등)을 표시합니다.
   • 해당 사용자가 작성한 할 일 목록을 확인할 수 있습니다.

4. 테마 전환 (Light/Dark/System)

   • Next Themes를 사용하여 다크 모드와 라이트 모드를 전환할 수 있습니다.

5. SSR, ISR, CSR 혼합

   • app 디렉터리 구조를 사용하여 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)를 적절히 혼합했습니다.
   • Supabase의 SSR 기능을 통해 서버 측에서 인증 정보를 확인하고, 미들웨어로 세션 관리 로직을 처리합니다.

기술 스택

• 프레임워크: Next.js 14.x
• UI 라이브러리: React 18.x
• 인증/데이터베이스: Supabase
• 상태 관리 및 데이터 Fetching: React Query + Zustand
• 스타일: Tailwind CSS
• 폼 검증: React Hook Form + Zod

폴더 구조

.
├─ api/
│   ├─ profile-api.ts        # 프로필 조회 로직
│   └─ todo-api.ts           # Todo 목록/상세/추가/삭제/토글 로직
├─ app/
│   ├─ (todo)/               # Todo 관련 페이지 (메인 목록, 상세 등)
│   │   ├─ todo/[id]/        # 특정 Todo 상세 페이지
│   │   ├─ layout.tsx
│   │   └─ page.tsx
│   ├─ auth/
│   │   ├─ error/            # 로그인/회원가입 실패 등 에러 처리 페이지
│   │   ├─ login/            # 로그인 페이지
│   │   ├─ signup/           # 회원가입 페이지
│   │   └─ actions.ts        # 로그인/로그아웃/회원가입 server action
│   ├─ mypage/               # 마이 페이지 (사용자 정보 및 사용자별 Todo)
│   ├─ globals.css           # 전역 스타일(Tailwind)
│   ├─ layout.tsx            # 전체 레이아웃
│   └─ providers.tsx         # React Query 클라이언트 설정
├─ components/
│   ├─ auth/                 # 로그인, 회원가입, 사용자 정보 표시 등의 컴포넌트
│   ├─ provider/             # 테마 제공 컴포넌트
│   ├─ todos/                # Todo 목록, 상세, CRUD 관련 컴포넌트
│   └─ DarkModeToggle.tsx    # 다크 모드/라이트 모드 전환 버튼
├─ lib/
│   └─ utils.ts              # 유틸리티 함수
├─ query/
│   ├─ useProfileQuery.ts    # 사용자 프로필 관련 React Query 훅
│   ├─ useTodoMutation.tsx   # Todo 생성/삭제/토글 등에 대한 Mutation 훅
│   └─ useTodoQuery.ts       # Todo 목록/상세 등에 대한 Query 훅
├─ store/
│   └─ useTodoStore.ts       # Zustand를 이용해 Todo 페이지 상태(완료/미완료 스위치) 관리
├─ types/
│   └─ todo.types.ts         # Supabase 타입 정의, Todo 타입 인터페이스
├─ utils/
│   └─ supabase/             # Supabase 클라이언트 생성, SSR 미들웨어, 서버 접근 로직
├─ .eslintrc.json
├─ .gitignore
├─ database.types.ts         # Supabase DB 스키마 타입
├─ LICENSE
├─ middleware.ts             # Next.js 미들웨어 (세션 관리용)
├─ next.config.mjs
├─ package.json
├─ postcss.config.mjs
├─ README.md                 # (기존) 기본 README 파일
├─ tailwind.config.ts
└─ tsconfig.json

환경 변수 설정

프로젝트 실행 전, Supabase 프로젝트의 URL과 anon key를 환경 변수로 설정해야 합니다.
.env.local 파일을 만들어 아래 예시처럼 설정해 주세요:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

• 주의: 실제 운영 환경에서는 민감한 정보를 안전하게 관리해야 합니다.

실행 방법

1. 저장소 클론

git clone https://github.com/username/react-basic-6th-todo.git
cd react-basic-6th-todo

2. 종속성(Dependencies) 설치

npm install
# 또는
yarn install
# 또는
pnpm install

3. 개발 서버 시작

npm run dev
# 또는
yarn dev
# 또는
pnpm dev

• 위 명령 실행 후 http://localhost:3000을 열면 페이지를 확인할 수 있습니다.

4. 빌드 및 배포

npm run build
npm run start

• npm run build로 프로젝트를 빌드한 다음, npm run start를 통해 프로덕션 서버를 실행할 수 있습니다.

사용 예시

1. 회원가입

   • /auth/signup 경로에서 기본 정보(이메일, 비밀번호, 이름) 입력 후 회원가입

2. 로그인

   • /auth/login 경로에서 이메일, 비밀번호로 로그인
   • 로그인 후 메인 페이지(/)에서 TODO 목록 확인 가능

3. 할 일 추가

   • 메인 페이지에서 할 일(Todo) 입력 후 추가 버튼 클릭
   • 목록에 새로운 할 일 생성

4. 할 일 상세

   • 할 일을 클릭하면 /todo/[id] 페이지에서 상세 보기 가능

5. 마이 페이지

   • /mypage 경로로 이동하면 본인 프로필과 작성한 할 일을 확인

라이선스

본 프로젝트는 MIT License를 따릅니다.