feat: 개인 할 일(체크리스트) 기능 추가

사이드바에 '할 일' 메뉴를 추가하고, 라벨 1개에 할 일 N개를 담는 개인 전용 체크리스트를 구현한다. - todo_labels / todo_items 엔티티 + 마이그레이션 (소유자·라벨 CASCADE) - 라벨·항목 CRUD API — 항목 변경 응답은 '변경된 라벨' 단위라 카드 하나만 갱신 - 모든 라벨·항목은 소유자 본인만 접근하며 타인 것은 존재를 숨김(404) - 화면: 라벨 카드 세로 나열, 인라인 추가·수정, 완료 항목은 취소선 후 하단 정렬 - 기존 .list / .toolbar / BaseModal 등 공용 디자인 규격 사용 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-21 00:23:32 +09:00
parent 74aa5a13bb
commit 29a8ef841f
17 changed files with 1490 additions and 1 deletions
@@ -22,6 +22,7 @@ import { ProjectModule } from './modules/project/project.module';
 import { ScheduleModule } from './modules/schedule/schedule.module';
 import { MeetingModule } from './modules/meeting/meeting.module';
 import { DriveModule } from './modules/drive/drive.module';
+import { TodoModule } from './modules/todo/todo.module';

@Module({
  imports: [
@@ -106,6 +107,7 @@ import { DriveModule } from './modules/drive/drive.module';
    ScheduleModule,
    MeetingModule,
    DriveModule,
+    TodoModule,
  ],
  controllers: [AppController],
  providers: [
@@ -0,0 +1,45 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+// 할 일(개인 체크리스트) — 라벨/항목 테이블 추가.
+// 라벨은 소유자 전용이고, 사용자 삭제 시 라벨과 항목이 연쇄 삭제된다.
+// 운영(migrationsRun)에서만 실행되며, dev 는 synchronize 로 자동 반영된다.
+export class AddTodo1783800000000 implements MigrationInterface {
+  name = 'AddTodo1783800000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    // 라벨(묶음)
+    await queryRunner.query(
+      `CREATE TABLE "todo_labels" ("id" uuid NOT NULL DEFAULT uuid_generate_v4(), "name" character varying NOT NULL, "color" character varying NOT NULL, "sort_order" integer NOT NULL DEFAULT '0', "created_at" TIMESTAMP NOT NULL DEFAULT now(), "updated_at" TIMESTAMP NOT NULL DEFAULT now(), "owner_id" uuid NOT NULL, CONSTRAINT "PK_todo_labels" PRIMARY KEY ("id"))`,
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_todo_labels_owner" ON "todo_labels" ("owner_id")`,
+    );
+
+    // 항목(할 일)
+    await queryRunner.query(
+      `CREATE TABLE "todo_items" ("id" uuid NOT NULL DEFAULT uuid_generate_v4(), "title" character varying NOT NULL, "done" boolean NOT NULL DEFAULT false, "sort_order" integer NOT NULL DEFAULT '0', "created_at" TIMESTAMP NOT NULL DEFAULT now(), "updated_at" TIMESTAMP NOT NULL DEFAULT now(), "label_id" uuid, CONSTRAINT "PK_todo_items" PRIMARY KEY ("id"))`,
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_todo_items_label" ON "todo_items" ("label_id")`,
+    );
+
+    // FK
+    await queryRunner.query(
+      `ALTER TABLE "todo_labels" ADD CONSTRAINT "FK_todo_labels_owner" FOREIGN KEY ("owner_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE NO ACTION`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "todo_items" ADD CONSTRAINT "FK_todo_items_label" FOREIGN KEY ("label_id") REFERENCES "todo_labels"("id") ON DELETE CASCADE ON UPDATE NO ACTION`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "todo_items" DROP CONSTRAINT "FK_todo_items_label"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "todo_labels" DROP CONSTRAINT "FK_todo_labels_owner"`,
+    );
+    await queryRunner.query(`DROP TABLE "todo_items"`);
+    await queryRunner.query(`DROP TABLE "todo_labels"`);
+  }
+}
@@ -0,0 +1,32 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import {
+  IsBoolean,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  MaxLength,
+} from 'class-validator';
+
+// 할 일 항목 생성 DTO
+export class CreateTodoItemDto {
+  @ApiProperty({ description: '할 일 내용', example: '견적서 검토' })
+  @IsString()
+  @IsNotEmpty({ message: '할 일 내용을 입력해 주세요.' })
+  @MaxLength(200, { message: '할 일은 최대 200자입니다.' })
+  title!: string;
+}
+
+// 할 일 항목 수정 DTO — 내용 변경과 완료 토글에 함께 쓴다
+export class UpdateTodoItemDto {
+  @ApiPropertyOptional({ description: '할 일 내용', example: '견적서 재검토' })
+  @IsOptional()
+  @IsString()
+  @IsNotEmpty({ message: '할 일 내용을 입력해 주세요.' })
+  @MaxLength(200, { message: '할 일은 최대 200자입니다.' })
+  title?: string;
+
+  @ApiPropertyOptional({ description: '완료 여부', example: true })
+  @IsOptional()
+  @IsBoolean()
+  done?: boolean;
+}
@@ -0,0 +1,21 @@
+import { ApiProperty, PartialType } from '@nestjs/swagger';
+import { IsNotEmpty, IsString, Matches, MaxLength } from 'class-validator';
+
+// 할 일 라벨 생성 DTO
+export class CreateTodoLabelDto {
+  @ApiProperty({ description: '라벨 이름', example: '업무 준비' })
+  @IsString()
+  @IsNotEmpty({ message: '라벨 이름을 입력해 주세요.' })
+  @MaxLength(40, { message: '라벨 이름은 최대 40자입니다.' })
+  name!: string;
+
+  @ApiProperty({ description: '라벨 색(hex)', example: '#1d4ed8' })
+  @IsString()
+  @Matches(/^#[0-9a-fA-F]{6}$/, {
+    message: '색상은 #RRGGBB 형식의 hex 값이어야 합니다.',
+  })
+  color!: string;
+}
+
+// 할 일 라벨 수정 DTO — 생성 DTO 의 부분 집합
+export class UpdateTodoLabelDto extends PartialType(CreateTodoLabelDto) {}
@@ -0,0 +1,43 @@
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  JoinColumn,
+  ManyToOne,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+  type Relation,
+} from 'typeorm';
+import { TodoLabel } from './todo-label.entity';
+
+// 할 일 항목 — 제목과 완료 여부만 갖는 최소 구성.
+// (마감일·담당자가 필요한 일은 '내 업무'가 담당하므로 여기서는 다루지 않는다)
+@Entity('todo_items')
+export class TodoItem {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  // 소속 라벨 — 라벨 삭제 시 항목도 함께 삭제
+  // Relation<> 래퍼: 엔티티 순환참조 회피
+  @Index()
+  @ManyToOne(() => TodoLabel, (label) => label.items, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'label_id' })
+  label!: Relation<TodoLabel>;
+
+  @Column({ type: 'varchar' })
+  title!: string;
+
+  @Column({ type: 'boolean', default: false })
+  done!: boolean;
+
+  // 라벨 안에서의 표시 순서 — 작을수록 위
+  @Column({ name: 'sort_order', type: 'int', default: 0 })
+  sortOrder!: number;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt!: Date;
+
+  @UpdateDateColumn({ name: 'updated_at' })
+  updatedAt!: Date;
+}
@@ -0,0 +1,51 @@
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  JoinColumn,
+  ManyToOne,
+  OneToMany,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+  type Relation,
+} from 'typeorm';
+import { User } from '../../user/entities/user.entity';
+import { TodoItem } from './todo-item.entity';
+
+// 할 일 라벨 — 개인 체크리스트의 묶음 단위(라벨 1개 : 할 일 N개).
+// 개인 전용이므로 소유자만 조회·수정할 수 있고, 사용자 삭제 시 함께 정리된다.
+@Entity('todo_labels')
+export class TodoLabel {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  // 소유자 — 항상 존재한다(공용 라벨 개념 없음)
+  @Index()
+  @ManyToOne(() => User, { onDelete: 'CASCADE', nullable: false })
+  @JoinColumn({ name: 'owner_id' })
+  owner!: User;
+
+  // 표시 이름(예: 업무 준비, 개인)
+  @Column({ type: 'varchar' })
+  name!: string;
+
+  // 라벨 색(hex, 예: #1d4ed8) — 카드 헤더의 점 색으로 쓴다
+  @Column({ type: 'varchar' })
+  color!: string;
+
+  // 표시 순서(카드 정렬) — 작을수록 위
+  @Column({ name: 'sort_order', type: 'int', default: 0 })
+  sortOrder!: number;
+
+  // 소속 할 일 — 라벨 삭제 시 함께 삭제(FK CASCADE)
+  // Relation<> 래퍼: 엔티티 순환참조 회피
+  @OneToMany(() => TodoItem, (item) => item.label)
+  items!: Relation<TodoItem>[];
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt!: Date;
+
+  @UpdateDateColumn({ name: 'updated_at' })
+  updatedAt!: Date;
+}
@@ -0,0 +1,106 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  HttpCode,
+  HttpStatus,
+  Param,
+  ParseUUIDPipe,
+  Patch,
+  Post,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { CurrentUser } from '../auth/decorators/current-user.decorator';
+import type { PublicUser } from '../user/user.service';
+import { TodoService, type TodoLabelResponse } from './todo.service';
+import { CreateTodoLabelDto, UpdateTodoLabelDto } from './dto/todo-label.dto';
+import { CreateTodoItemDto, UpdateTodoItemDto } from './dto/todo-item.dto';
+
+// 할 일(개인 체크리스트) 컨트롤러 — 라벨 1개에 항목 N개.
+// 모든 응답은 라벨 단위라 화면이 카드 하나만 갈아끼우면 된다.
+@ApiTags('Todo')
+@Controller('todos')
+@UseGuards(JwtAuthGuard)
+export class TodoController {
+  constructor(private readonly todoService: TodoService) {}
+
+  // ----- 라벨 -----
+
+  @Get('labels')
+  @ApiOperation({ summary: '내 할 일 라벨 목록(항목 포함)' })
+  @ApiResponse({ status: 200, description: '조회 성공' })
+  listLabels(@CurrentUser() user: PublicUser): Promise<TodoLabelResponse[]> {
+    return this.todoService.listLabels(user.id);
+  }
+
+  @Post('labels')
+  @ApiOperation({ summary: '할 일 라벨 생성' })
+  @ApiResponse({ status: 201, description: '생성 성공' })
+  createLabel(
+    @CurrentUser() user: PublicUser,
+    @Body() dto: CreateTodoLabelDto,
+  ): Promise<TodoLabelResponse> {
+    return this.todoService.createLabel(dto, user.id);
+  }
+
+  @Patch('labels/:id')
+  @ApiOperation({ summary: '할 일 라벨 수정' })
+  @ApiResponse({ status: 200, description: '수정 성공' })
+  updateLabel(
+    @CurrentUser() user: PublicUser,
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: UpdateTodoLabelDto,
+  ): Promise<TodoLabelResponse> {
+    return this.todoService.updateLabel(id, dto, user.id);
+  }
+
+  @Delete('labels/:id')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: '할 일 라벨 삭제(소속 할 일도 함께 삭제)' })
+  @ApiResponse({ status: 200, description: '삭제 성공' })
+  async deleteLabel(
+    @CurrentUser() user: PublicUser,
+    @Param('id', ParseUUIDPipe) id: string,
+  ): Promise<{ success: boolean }> {
+    await this.todoService.deleteLabel(id, user.id);
+    return { success: true };
+  }
+
+  // ----- 항목 -----
+
+  @Post('labels/:labelId/items')
+  @ApiOperation({ summary: '할 일 추가' })
+  @ApiResponse({ status: 201, description: '생성 성공' })
+  createItem(
+    @CurrentUser() user: PublicUser,
+    @Param('labelId', ParseUUIDPipe) labelId: string,
+    @Body() dto: CreateTodoItemDto,
+  ): Promise<TodoLabelResponse> {
+    return this.todoService.createItem(labelId, dto, user.id);
+  }
+
+  @Patch('items/:id')
+  @ApiOperation({ summary: '할 일 수정(내용 변경·완료 토글)' })
+  @ApiResponse({ status: 200, description: '수정 성공' })
+  updateItem(
+    @CurrentUser() user: PublicUser,
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: UpdateTodoItemDto,
+  ): Promise<TodoLabelResponse> {
+    return this.todoService.updateItem(id, dto, user.id);
+  }
+
+  @Delete('items/:id')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: '할 일 삭제' })
+  @ApiResponse({ status: 200, description: '삭제 성공' })
+  deleteItem(
+    @CurrentUser() user: PublicUser,
+    @Param('id', ParseUUIDPipe) id: string,
+  ): Promise<TodoLabelResponse> {
+    return this.todoService.deleteItem(id, user.id);
+  }
+}
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { TodoLabel } from './entities/todo-label.entity';
+import { TodoItem } from './entities/todo-item.entity';
+import { TodoService } from './todo.service';
+import { TodoController } from './todo.controller';
+
+// 할 일(개인 체크리스트) 모듈
+@Module({
+  imports: [TypeOrmModule.forFeature([TodoLabel, TodoItem])],
+  controllers: [TodoController],
+  providers: [TodoService],
+})
+export class TodoModule {}
@@ -0,0 +1,205 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { User } from '../user/entities/user.entity';
+import { TodoLabel } from './entities/todo-label.entity';
+import { TodoItem } from './entities/todo-item.entity';
+import { CreateTodoLabelDto } from './dto/todo-label.dto';
+import { CreateTodoItemDto, UpdateTodoItemDto } from './dto/todo-item.dto';
+
+// 응답(원시) — 표시 음영색은 프론트가 color 로 파생
+export interface TodoItemResponse {
+  id: string;
+  title: string;
+  done: boolean;
+  sortOrder: number;
+}
+
+export interface TodoLabelResponse {
+  id: string;
+  name: string;
+  color: string;
+  sortOrder: number;
+  items: TodoItemResponse[];
+  // 진행 표기(2/3)용 집계 — 프론트가 items 로 다시 세지 않도록 함께 내려준다
+  doneCount: number;
+  totalCount: number;
+}
+
+// 할 일(개인 체크리스트) 비즈니스 로직 — 라벨 1개에 항목 N개.
+// 모든 라벨·항목은 개인 전용이라 소유자 본인만 접근할 수 있고,
+// 남의 것은 존재 자체를 노출하지 않도록 404 로 처리한다.
+@Injectable()
+export class TodoService {
+  constructor(
+    @InjectRepository(TodoLabel)
+    private readonly labelRepo: Repository<TodoLabel>,
+    @InjectRepository(TodoItem)
+    private readonly itemRepo: Repository<TodoItem>,
+  ) {}
+
+  // ----- 라벨 -----
+
+  // 본인 라벨 전체 + 소속 항목을 한 번에 반환(화면이 단일 요청으로 그린다)
+  async listLabels(ownerId: string): Promise<TodoLabelResponse[]> {
+    const rows = await this.labelRepo.find({
+      where: { owner: { id: ownerId } },
+      relations: ['items'],
+      order: { sortOrder: 'ASC', createdAt: 'ASC' },
+    });
+    return rows.map((l) => this.toLabelResponse(l));
+  }
+
+  async createLabel(
+    dto: CreateTodoLabelDto,
+    ownerId: string,
+  ): Promise<TodoLabelResponse> {
+    const sortOrder = await this.nextSortOrder(this.labelRepo, {
+      owner: { id: ownerId },
+    });
+    const saved = await this.labelRepo.save(
+      this.labelRepo.create({
+        owner: { id: ownerId } as User,
+        name: dto.name.trim(),
+        color: dto.color,
+        sortOrder,
+      }),
+    );
+    // 방금 만든 라벨은 항목이 없다
+    return this.toLabelResponse({ ...saved, items: [] });
+  }
+
+  async updateLabel(
+    id: string,
+    dto: Partial<CreateTodoLabelDto>,
+    ownerId: string,
+  ): Promise<TodoLabelResponse> {
+    const label = await this.assertLabelOwned(id, ownerId);
+    if (dto.name !== undefined) label.name = dto.name.trim();
+    if (dto.color !== undefined) label.color = dto.color;
+    await this.labelRepo.save(label);
+    return this.findLabelOrThrow(id, ownerId);
+  }
+
+  // 라벨 삭제 — 소속 항목도 FK CASCADE 로 함께 삭제된다.
+  async deleteLabel(id: string, ownerId: string): Promise<void> {
+    await this.assertLabelOwned(id, ownerId);
+    await this.labelRepo.delete({ id });
+  }
+
+  // ----- 항목 -----
+
+  async createItem(
+    labelId: string,
+    dto: CreateTodoItemDto,
+    ownerId: string,
+  ): Promise<TodoLabelResponse> {
+    await this.assertLabelOwned(labelId, ownerId);
+    const sortOrder = await this.nextSortOrder(this.itemRepo, {
+      label: { id: labelId },
+    });
+    await this.itemRepo.save(
+      this.itemRepo.create({
+        label: { id: labelId } as TodoLabel,
+        title: dto.title.trim(),
+        sortOrder,
+      }),
+    );
+    // 화면이 카드 단위로 갱신할 수 있도록 라벨 전체를 돌려준다
+    return this.findLabelOrThrow(labelId, ownerId);
+  }
+
+  async updateItem(
+    id: string,
+    dto: UpdateTodoItemDto,
+    ownerId: string,
+  ): Promise<TodoLabelResponse> {
+    const item = await this.assertItemOwned(id, ownerId);
+    if (dto.title !== undefined) item.title = dto.title.trim();
+    if (dto.done !== undefined) item.done = dto.done;
+    await this.itemRepo.save(item);
+    return this.findLabelOrThrow(item.label.id, ownerId);
+  }
+
+  async deleteItem(id: string, ownerId: string): Promise<TodoLabelResponse> {
+    const item = await this.assertItemOwned(id, ownerId);
+    const labelId = item.label.id;
+    await this.itemRepo.delete({ id });
+    return this.findLabelOrThrow(labelId, ownerId);
+  }
+
+  // ----- 내부 헬퍼 -----
+
+  // 소유 라벨인지 검증하고 반환(남의 라벨은 존재를 숨긴다)
+  private async assertLabelOwned(
+    id: string,
+    ownerId: string,
+  ): Promise<TodoLabel> {
+    const label = await this.labelRepo.findOne({
+      where: { id, owner: { id: ownerId } },
+    });
+    if (!label) throw new NotFoundException('라벨을 찾을 수 없습니다.');
+    return label;
+  }
+
+  // 소유 항목인지 검증하고 반환(라벨 소유자로 판정)
+  private async assertItemOwned(
+    id: string,
+    ownerId: string,
+  ): Promise<TodoItem> {
+    const item = await this.itemRepo.findOne({
+      where: { id, label: { owner: { id: ownerId } } },
+      relations: ['label'],
+    });
+    if (!item) throw new NotFoundException('할 일을 찾을 수 없습니다.');
+    return item;
+  }
+
+  // 다음 정렬값 = 같은 묶음 안의 최대 + 1
+  private async nextSortOrder<T extends { sortOrder: number }>(
+    repo: Repository<T>,
+    where: Record<string, unknown>,
+  ): Promise<number> {
+    const [last] = await repo.find({
+      where: where as never,
+      order: { sortOrder: 'DESC' } as never,
+      take: 1,
+    });
+    return (last?.sortOrder ?? -1) + 1;
+  }
+
+  private async findLabelOrThrow(
+    id: string,
+    ownerId: string,
+  ): Promise<TodoLabelResponse> {
+    const label = await this.labelRepo.findOne({
+      where: { id, owner: { id: ownerId } },
+      relations: ['items'],
+    });
+    if (!label) throw new NotFoundException('라벨을 찾을 수 없습니다.');
+    return this.toLabelResponse(label);
+  }
+
+  private toLabelResponse(l: TodoLabel): TodoLabelResponse {
+    // 미완료 먼저, 그 안에서는 등록 순서대로
+    const items = [...(l.items ?? [])]
+      .sort((a, b) =>
+        a.done === b.done ? a.sortOrder - b.sortOrder : a.done ? 1 : -1,
+      )
+      .map((i) => ({
+        id: i.id,
+        title: i.title,
+        done: i.done,
+        sortOrder: i.sortOrder,
+      }));
+    return {
+      id: l.id,
+      name: l.name,
+      color: l.color,
+      sortOrder: l.sortOrder,
+      items,
+      doneCount: items.filter((i) => i.done).length,
+      totalCount: items.length,
+    };
+  }
+}
@@ -0,0 +1,413 @@
+<script setup lang="ts">
+// 라벨 카드 — 헤더(색점 + 이름 + 진행 + 편집/삭제) + 할 일 행 목록 + 인라인 추가 입력.
+// 전역 .list 카드 규격을 그대로 쓰고, 행은 카드 안에서 구분선으로 나눈다.
+import { ref } from 'vue'
+import { useClickOutside } from '@/composables/useClickOutside'
+import type { ApiTodoLabel, ApiTodoItem } from '@/types/todo'
+
+const props = defineProps<{ label: ApiTodoLabel }>()
+const emit = defineEmits<{
+  (e: 'add', title: string): void
+  (e: 'toggle', item: ApiTodoItem): void
+  (e: 'rename', item: ApiTodoItem, title: string): void
+  (e: 'remove', item: ApiTodoItem): void
+  (e: 'edit-label'): void
+  (e: 'delete-label'): void
+}>()
+
+// 라벨 메뉴(편집/삭제) 드롭다운
+const menuOpen = ref(false)
+const menuRef = ref<HTMLElement | null>(null)
+useClickOutside(menuOpen, () => (menuOpen.value = false), [menuRef])
+
+// 인라인 추가 입력
+const draft = ref('')
+function submitDraft(): void {
+  const title = draft.value.trim()
+  if (!title) return
+  emit('add', title)
+  draft.value = ''
+}
+
+// 항목 인라인 수정 — 한 번에 한 행만 편집 상태가 된다
+const editingId = ref<string | null>(null)
+const editDraft = ref('')
+function startEdit(item: ApiTodoItem): void {
+  editingId.value = item.id
+  editDraft.value = item.title
+}
+function commitEdit(item: ApiTodoItem): void {
+  // Enter 로 확정하면 입력이 사라지며 blur 가 뒤따라 한 번 더 호출된다.
+  // 편집 중인 행이 아니면 무시해 같은 요청이 두 번 나가지 않게 한다.
+  if (editingId.value !== item.id) return
+  const title = editDraft.value.trim()
+  editingId.value = null
+  if (!title || title === item.title) return
+  emit('rename', item, title)
+}
+function cancelEdit(): void {
+  editingId.value = null
+}
+</script>
+
+<template>
+  <section class="list tl-card">
+    <!-- 헤더 -->
+    <header class="tl-head">
+      <span
+        class="tl-dot"
+        :style="{ background: props.label.color }"
+      />
+      <h2 class="tl-name">
+        {{ props.label.name }}
+      </h2>
+      <span class="tl-progress">{{ props.label.doneCount }}/{{ props.label.totalCount }}</span>
+      <div
+        ref="menuRef"
+        class="tl-menu"
+      >
+        <button
+          type="button"
+          class="tl-menu-btn"
+          :aria-label="`${props.label.name} 라벨 메뉴`"
+          @click="menuOpen = !menuOpen"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.4"
+            stroke-linecap="round"
+          ><circle
+            cx="5"
+            cy="12"
+            r="1"
+          /><circle
+            cx="12"
+            cy="12"
+            r="1"
+          /><circle
+            cx="19"
+            cy="12"
+            r="1"
+          /></svg>
+        </button>
+        <div
+          v-if="menuOpen"
+          class="tl-menu-pop"
+        >
+          <button
+            type="button"
+            @click="menuOpen = false; emit('edit-label')"
+          >
+            라벨 편집
+          </button>
+          <button
+            type="button"
+            class="danger"
+            @click="menuOpen = false; emit('delete-label')"
+          >
+            라벨 삭제
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 할 일 행 -->
+    <div
+      v-for="item in props.label.items"
+      :key="item.id"
+      class="tl-row"
+      :class="{ done: item.done }"
+    >
+      <button
+        type="button"
+        class="tl-check"
+        role="checkbox"
+        :aria-checked="item.done"
+        :aria-label="item.title"
+        @click="emit('toggle', item)"
+      >
+        <svg
+          v-if="item.done"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ><path d="M20 6 9 17l-5-5" /></svg>
+      </button>
+      <input
+        v-if="editingId === item.id"
+        v-model="editDraft"
+        class="tl-edit"
+        @keydown.enter="commitEdit(item)"
+        @keydown.esc="cancelEdit"
+        @blur="commitEdit(item)"
+      >
+      <button
+        v-else
+        type="button"
+        class="tl-title"
+        title="클릭해서 수정"
+        @click="startEdit(item)"
+      >
+        {{ item.title }}
+      </button>
+      <button
+        type="button"
+        class="tl-del"
+        :aria-label="`${item.title} 삭제`"
+        @click="emit('remove', item)"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ><path d="M18 6 6 18M6 6l12 12" /></svg>
+      </button>
+    </div>
+
+    <!-- 인라인 추가 -->
+    <div class="tl-add">
+      <span class="tl-add-ico">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ><path d="M5 12h14M12 5v14" /></svg>
+      </span>
+      <input
+        v-model="draft"
+        class="tl-add-input"
+        placeholder="할 일을 입력하고 Enter"
+        maxlength="200"
+        @keydown.enter="submitDraft"
+      >
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.tl-card {
+  margin-bottom: 0.875rem;
+}
+/* 헤더 */
+.tl-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  padding: 0.75rem 0.875rem;
+  border-bottom: 1px solid var(--border);
+}
+.tl-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 0.1875rem;
+  flex-shrink: 0;
+}
+.tl-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.938rem;
+  font-weight: 700;
+  letter-spacing: -0.0125rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tl-progress {
+  font-size: 0.781rem;
+  font-weight: 600;
+  color: var(--text-3);
+  white-space: nowrap;
+}
+/* 라벨 메뉴 */
+.tl-menu {
+  position: relative;
+}
+.tl-menu-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+.tl-menu-btn:hover {
+  background: #eceef1;
+  color: var(--text);
+}
+.tl-menu-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+.tl-menu-pop {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  z-index: 20;
+  min-width: 8rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-pop);
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+.tl-menu-pop button {
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 0.813rem;
+  font-weight: 600;
+  color: var(--text-2);
+  text-align: left;
+  padding: 0.4375rem 0.5rem;
+  border-radius: 0.3125rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.tl-menu-pop button:hover {
+  background: #f4f5f7;
+  color: var(--text);
+}
+.tl-menu-pop button.danger {
+  color: var(--red);
+}
+.tl-menu-pop button.danger:hover {
+  background: color-mix(in srgb, var(--red) 8%, #fff);
+  color: var(--red);
+}
+/* 할 일 행 */
+.tl-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  padding: 0 0.875rem;
+  height: 2.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.tl-row:hover {
+  background: #fafbfc;
+}
+.tl-check {
+  width: 1.0625rem;
+  height: 1.0625rem;
+  flex-shrink: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 0.25rem;
+  background: #fff;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+.tl-check:hover {
+  border-color: var(--accent);
+}
+.tl-check svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.tl-row.done .tl-check {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.tl-title {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 0.844rem;
+  color: var(--text);
+  text-align: left;
+  padding: 0;
+  cursor: text;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tl-row.done .tl-title {
+  color: var(--text-3);
+  text-decoration: line-through;
+}
+.tl-edit {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  font-family: inherit;
+  font-size: 0.844rem;
+  color: var(--text);
+  padding: 0.1875rem 0.375rem;
+  outline: none;
+}
+.tl-del {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: none;
+  place-items: center;
+}
+.tl-row:hover .tl-del {
+  display: grid;
+}
+.tl-del:hover {
+  background: #eceef1;
+  color: var(--text);
+}
+.tl-del svg {
+  width: 0.813rem;
+  height: 0.813rem;
+}
+/* 인라인 추가 */
+.tl-add {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  padding: 0 0.875rem;
+  height: 2.5rem;
+}
+.tl-add-ico {
+  display: inline-flex;
+  color: var(--text-3);
+}
+.tl-add-ico svg {
+  width: 1rem;
+  height: 1rem;
+}
+.tl-add-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 0.844rem;
+  color: var(--text);
+  outline: none;
+  padding: 0;
+}
+.tl-add-input::placeholder {
+  color: var(--text-3);
+}
+</style>
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+// 할 일 라벨 생성/수정 모달 — 이름 + 색상(hue 슬라이더)
+// 색 파생 방식은 일정 카테고리 모달과 동일하게 맞춘다(채도/명도 고정, hue 만 선택)
+import { computed, ref } from 'vue'
+import BaseModal from '@/components/common/BaseModal.vue'
+import type { ApiTodoLabel, TodoLabelPayload } from '@/types/todo'
+
+const props = defineProps<{ init: ApiTodoLabel | null }>()
+const emit = defineEmits<{
+  (e: 'save', payload: TodoLabelPayload): void
+  (e: 'close'): void
+}>()
+
+const LABEL_SAT = 62
+const LABEL_LIG = 46
+
+function hslToHex(h: number, s: number, l: number): string {
+  s /= 100
+  l /= 100
+  const k = (n: number) => (n + h / 30) % 12
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number) =>
+    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
+  const to = (x: number) =>
+    Math.round(255 * x)
+      .toString(16)
+      .padStart(2, '0')
+  return `#${to(f(0))}${to(f(8))}${to(f(4))}`
+}
+function hexToHue(hex: string): number {
+  const m = hex.replace('#', '')
+  const r = parseInt(m.slice(0, 2), 16) / 255
+  const g = parseInt(m.slice(2, 4), 16) / 255
+  const b = parseInt(m.slice(4, 6), 16) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+  let h = 0
+  if (d) {
+    if (max === r) h = ((g - b) / d) % 6
+    else if (max === g) h = (b - r) / d + 2
+    else h = (r - g) / d + 4
+    h *= 60
+    if (h < 0) h += 360
+  }
+  return Math.round(h)
+}
+
+const isEdit = computed(() => !!props.init)
+const name = ref(props.init?.name ?? '')
+const hue = ref(props.init?.color ? hexToHue(props.init.color) : 210)
+const color = computed(() => hslToHex(hue.value, LABEL_SAT, LABEL_LIG))
+const valid = computed(() => !!name.value.trim())
+
+function submit(): void {
+  if (!valid.value) return
+  emit('save', { name: name.value.trim(), color: color.value })
+}
+</script>
+
+<template>
+  <BaseModal
+    :title="isEdit ? '라벨 편집' : '새 라벨'"
+    size="sm"
+    @close="emit('close')"
+  >
+    <label class="form-field"><span class="form-label"><span class="req">*</span> 이름</span>
+      <input
+        v-model="name"
+        class="form-input"
+        placeholder="예: 업무 준비"
+        autofocus
+        @keydown.enter="submit"
+      >
+    </label>
+    <div class="form-field">
+      <span class="form-label">색상</span>
+      <div class="lb-color">
+        <span
+          class="lb-dot"
+          :style="{ background: color }"
+        />
+        <input
+          v-model.number="hue"
+          type="range"
+          min="0"
+          max="359"
+          class="hue-slider"
+          :style="{ '--cur': color }"
+        >
+      </div>
+    </div>
+
+    <template #foot>
+      <button
+        class="mbtn"
+        @click="emit('close')"
+      >
+        취소
+      </button>
+      <button
+        class="mbtn primary"
+        :disabled="!valid"
+        @click="submit"
+      >
+        {{ isEdit ? '저장' : '추가' }}
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<style scoped>
+.lb-color {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.lb-dot {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius);
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+.hue-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  flex: 1;
+  height: 1rem;
+  margin: 0.375rem 0;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  outline: none;
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+.hue-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  background: var(--cur);
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+}
+.hue-slider::-moz-range-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  background: var(--cur);
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+}
+</style>
@@ -0,0 +1,58 @@
+import { useApi } from './useApi'
+import type {
+  ApiTodoLabel,
+  TodoItemPayload,
+  TodoLabelPayload,
+} from '@/types/todo'
+
+// 할 일 도메인 API Composable — 인터셉터가 success/data 를 언래핑.
+// 항목 관련 응답은 모두 '변경된 라벨' 한 건이라 화면이 카드 하나만 교체하면 된다.
+export function useTodo() {
+  const api = useApi()
+
+  // 라벨
+  async function listLabels(): Promise<ApiTodoLabel[]> {
+    return (await api.get('/todos/labels')) as unknown as ApiTodoLabel[]
+  }
+  async function createLabel(payload: TodoLabelPayload): Promise<ApiTodoLabel> {
+    return (await api.post('/todos/labels', payload)) as unknown as ApiTodoLabel
+  }
+  async function updateLabel(
+    id: string,
+    payload: Partial<TodoLabelPayload>,
+  ): Promise<ApiTodoLabel> {
+    return (await api.patch(`/todos/labels/${id}`, payload)) as unknown as ApiTodoLabel
+  }
+  async function deleteLabel(id: string): Promise<void> {
+    await api.delete(`/todos/labels/${id}`)
+  }
+
+  // 항목
+  async function createItem(
+    labelId: string,
+    title: string,
+  ): Promise<ApiTodoLabel> {
+    return (await api.post(`/todos/labels/${labelId}/items`, {
+      title,
+    })) as unknown as ApiTodoLabel
+  }
+  async function updateItem(
+    id: string,
+    payload: TodoItemPayload,
+  ): Promise<ApiTodoLabel> {
+    return (await api.patch(`/todos/items/${id}`, payload)) as unknown as ApiTodoLabel
+  }
+  async function deleteItem(id: string): Promise<ApiTodoLabel> {
+    return (await api.delete(`/todos/items/${id}`)) as unknown as ApiTodoLabel
+  }
+
+  return {
+    listLabels,
+    createLabel,
+    updateLabel,
+    deleteLabel,
+    createItem,
+    updateItem,
+    deleteItem,
+  }
+}
@@ -31,9 +31,12 @@ function toggleCollapse() {
 const mobileOpen = ref(false)

 // 현재 경로 기준으로 사이드바 네비 활성 항목을 판별
-const activeNav = computed<'tasks' | 'projects' | 'schedule' | 'meeting' | 'drive'>(() => {
+const activeNav = computed<
+  'tasks' | 'todos' | 'projects' | 'schedule' | 'meeting' | 'drive'
+>(() => {
  if (route.path.startsWith('/projects')) return 'projects'
  if (route.path.startsWith('/schedule')) return 'schedule'
+  if (route.path.startsWith('/todos')) return 'todos'
  if (route.path.startsWith('/meeting')) return 'meeting'
  if (route.path.startsWith('/drive')) return 'drive'
  return 'tasks'
@@ -204,6 +207,26 @@ async function onLogout() {
          </svg>
          <span>내 업무</span>
        </RouterLink>
+        <RouterLink
+          to="/todos"
+          class="nav-item"
+          title="할 일"
+          :class="{ active: activeNav === 'todos' }"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m3 7 2 2 4-4" />
+            <path d="m3 17 2 2 4-4" />
+            <path d="M13 6h8M13 12h8M13 18h8" />
+          </svg>
+          <span>할 일</span>
+        </RouterLink>
        <RouterLink
          to="/projects"
          class="nav-item"
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// 할 일 — 개인이 직접 적어 관리하는 체크리스트(라벨 1개에 할 일 N개).
+// (프로젝트에서 배정·지시되는 '내 업무'와는 별개의 개인용 목록)
+import { onMounted, ref } from 'vue'
+import AppShell from '@/layouts/AppShell.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+import TodoLabelCard from '@/components/todo/TodoLabelCard.vue'
+import TodoLabelModal from '@/components/todo/TodoLabelModal.vue'
+import { useTodoStore } from '@/stores/todo.store'
+import { useDialogStore } from '@/stores/dialog.store'
+import type { ApiTodoItem, ApiTodoLabel, TodoLabelPayload } from '@/types/todo'
+
+const store = useTodoStore()
+const dialog = useDialogStore()
+
+// 라벨 모달 — init 이 null 이면 생성, 있으면 편집
+const labelModal = ref<{ init: ApiTodoLabel | null } | null>(null)
+
+onMounted(() => {
+  void store.load().catch(() => {
+    // 인터셉터가 에러 토스트 처리
+  })
+})
+
+// ----- 라벨 -----
+function openNewLabel(): void {
+  labelModal.value = { init: null }
+}
+function openEditLabel(label: ApiTodoLabel): void {
+  labelModal.value = { init: label }
+}
+async function onSaveLabel(payload: TodoLabelPayload): Promise<void> {
+  const init = labelModal.value?.init
+  if (init) await store.updateLabel(init.id, payload)
+  else await store.createLabel(payload)
+  labelModal.value = null
+}
+async function onDeleteLabel(label: ApiTodoLabel): Promise<void> {
+  const msg = label.totalCount
+    ? `'${label.name}' 라벨과 여기에 등록된 할 일 ${label.totalCount}건이 함께 삭제됩니다. 계속할까요?`
+    : `'${label.name}' 라벨을 삭제할까요?`
+  const ok = await dialog.confirm(msg, {
+    title: '라벨 삭제',
+    confirmText: '삭제',
+    variant: 'danger',
+  })
+  if (!ok) return
+  await store.deleteLabel(label.id)
+}
+
+// ----- 할 일 -----
+async function onAddItem(labelId: string, title: string): Promise<void> {
+  await store.addItem(labelId, title)
+}
+async function onToggleItem(item: ApiTodoItem): Promise<void> {
+  await store.toggleItem(item.id, !item.done)
+}
+async function onRenameItem(item: ApiTodoItem, title: string): Promise<void> {
+  await store.renameItem(item.id, title)
+}
+async function onRemoveItem(item: ApiTodoItem): Promise<void> {
+  await store.removeItem(item.id)
+}
+</script>
+
+<template>
+  <AppShell>
+    <div class="page">
+      <nav class="crumb">
+        <b>할 일</b>
+      </nav>
+      <div class="pagehead">
+        <h1>할 일</h1>
+        <span class="count-pill">{{ store.totalCount }}</span>
+      </div>
+      <p class="lede">
+        스스로 챙겨야 할 일을 라벨로 묶어 두고 하나씩 체크하세요.
+      </p>
+
+      <!-- 툴바: 검색 + 새 라벨 -->
+      <div class="toolbar">
+        <div class="search">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ><circle
+            cx="11"
+            cy="11"
+            r="7"
+          /><path d="m20 20-3.5-3.5" /></svg>
+          <input
+            v-model="store.keyword"
+            type="search"
+            placeholder="라벨·할 일 검색…"
+          >
+        </div>
+        <button
+          type="button"
+          class="btn primary new-label"
+          @click="openNewLabel"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ><path d="M5 12h14M12 5v14" /></svg>새 라벨
+        </button>
+      </div>
+
+      <!-- 로딩 / 빈 상태 — 프로젝트·화상회의와 동일하게 상단 전체폭 카드 -->
+      <EmptyState v-if="store.loading && store.labels.length === 0">
+        불러오는 중…
+      </EmptyState>
+      <EmptyState v-else-if="store.displayLabels.length === 0">
+        {{
+          store.isFiltered
+            ? '검색 결과가 없습니다.'
+            : '아직 라벨이 없습니다. 라벨을 만들고 할 일을 등록해 보세요.'
+        }}
+      </EmptyState>
+
+      <!-- 라벨 카드 -->
+      <TodoLabelCard
+        v-for="label in store.displayLabels"
+        :key="label.id"
+        :label="label"
+        @add="onAddItem(label.id, $event)"
+        @toggle="onToggleItem"
+        @rename="onRenameItem"
+        @remove="onRemoveItem"
+        @edit-label="openEditLabel(label)"
+        @delete-label="onDeleteLabel(label)"
+      />
+    </div>
+
+    <TodoLabelModal
+      v-if="labelModal"
+      :init="labelModal.init"
+      @save="onSaveLabel"
+      @close="labelModal = null"
+    />
+  </AppShell>
+</template>
+
+<style scoped>
+/* 헤더 규격 — 프로젝트·화상회의 화면과 동일(.pagehead/.lede 는 전역 정의가 없어 페이지마다 선언) */
+.pagehead {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  padding: 0.5625rem 0 0.25rem;
+}
+.pagehead h1 {
+  font-size: 1.375rem;
+  font-weight: 700;
+  letter-spacing: -0.025rem;
+  white-space: nowrap;
+}
+.lede {
+  color: var(--text-2);
+  font-size: 0.844rem;
+  margin: 0.25rem 0 1.125rem;
+}
+/* 회의 로비와 동일하게 주요 버튼을 우측으로 밀어 배치 */
+.new-label {
+  margin-left: auto;
+}
+</style>
@@ -101,6 +101,13 @@ const routes: RouteRecordRaw[] = [
    component: () => import('@/pages/relay/MyTasksPage.vue'),
    meta: { requiresAuth: true },
  },
+  {
+    // 할 일 — 개인 체크리스트('내 업무'와 달리 스스로 등록해 관리)
+    path: '/todos',
+    name: 'todos',
+    component: () => import('@/pages/relay/TodoPage.vue'),
+    meta: { requiresAuth: true },
+  },
  {
    // 일정 — 전사 공유 주간 캘린더(타임라인)
    path: '/schedule',
@@ -0,0 +1,98 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useTodo } from '@/composables/useTodo'
+import type { ApiTodoLabel, TodoLabelPayload } from '@/types/todo'
+
+// 할 일 스토어 — 라벨(항목 포함) 목록 + 검색어 + CRUD.
+// 항목 변경 API 는 변경된 라벨을 그대로 돌려주므로 해당 카드만 교체한다.
+export const useTodoStore = defineStore('todo', () => {
+  const api = useTodo()
+
+  const labels = ref<ApiTodoLabel[]>([])
+  const keyword = ref('')
+  const loading = ref(false)
+
+  // 검색 — 라벨 이름 또는 할 일 내용에 걸리면 남긴다.
+  // 라벨 이름이 걸린 경우는 항목을 그대로 두고, 항목만 걸린 경우는 걸린 항목만 보여준다.
+  const displayLabels = computed<ApiTodoLabel[]>(() => {
+    const kw = keyword.value.trim().toLowerCase()
+    if (!kw) return labels.value
+    const result: ApiTodoLabel[] = []
+    for (const l of labels.value) {
+      if (l.name.toLowerCase().includes(kw)) {
+        result.push(l)
+        continue
+      }
+      const hit = l.items.filter((i) => i.title.toLowerCase().includes(kw))
+      if (hit.length) result.push({ ...l, items: hit })
+    }
+    return result
+  })
+
+  const isFiltered = computed(() => keyword.value.trim() !== '')
+  // 전체 할 일 수(헤더 count-pill 표기용)
+  const totalCount = computed(() =>
+    labels.value.reduce((sum, l) => sum + l.totalCount, 0),
+  )
+
+  // 변경된 라벨 한 건을 목록에 반영
+  function replaceLabel(next: ApiTodoLabel): void {
+    labels.value = labels.value.map((l) => (l.id === next.id ? next : l))
+  }
+
+  async function load(): Promise<void> {
+    loading.value = true
+    try {
+      labels.value = await api.listLabels()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // --- 라벨 ---
+  async function createLabel(payload: TodoLabelPayload): Promise<void> {
+    const label = await api.createLabel(payload)
+    labels.value = [...labels.value, label]
+  }
+  async function updateLabel(
+    id: string,
+    payload: Partial<TodoLabelPayload>,
+  ): Promise<void> {
+    replaceLabel(await api.updateLabel(id, payload))
+  }
+  async function deleteLabel(id: string): Promise<void> {
+    await api.deleteLabel(id)
+    labels.value = labels.value.filter((l) => l.id !== id)
+  }
+
+  // --- 항목 ---
+  async function addItem(labelId: string, title: string): Promise<void> {
+    replaceLabel(await api.createItem(labelId, title))
+  }
+  async function toggleItem(id: string, done: boolean): Promise<void> {
+    replaceLabel(await api.updateItem(id, { done }))
+  }
+  async function renameItem(id: string, title: string): Promise<void> {
+    replaceLabel(await api.updateItem(id, { title }))
+  }
+  async function removeItem(id: string): Promise<void> {
+    replaceLabel(await api.deleteItem(id))
+  }
+
+  return {
+    labels,
+    displayLabels,
+    keyword,
+    loading,
+    isFiltered,
+    totalCount,
+    load,
+    createLabel,
+    updateLabel,
+    deleteLabel,
+    addItem,
+    toggleItem,
+    renameItem,
+    removeItem,
+  }
+})
@@ -0,0 +1,31 @@
+// 할 일(개인 체크리스트) 도메인 타입 — 백엔드 Todo 응답과 1:1
+
+// 할 일 항목
+export interface ApiTodoItem {
+  id: string
+  title: string
+  done: boolean
+  sortOrder: number
+}
+
+// 라벨(할 일 묶음) — 항목과 진행 집계를 함께 내려받는다
+export interface ApiTodoLabel {
+  id: string
+  name: string
+  color: string
+  sortOrder: number
+  items: ApiTodoItem[]
+  doneCount: number
+  totalCount: number
+}
+
+// 생성/수정 payload
+export interface TodoLabelPayload {
+  name: string
+  color: string
+}
+
+export interface TodoItemPayload {
+  title?: string
+  done?: boolean
+}