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>
|
||||
@@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user