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>
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user