zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.20 - PostgreSQL 전환 및 Docker Compose 초안 추가

Browse Source
This commit is contained in:
zenn
2026-04-22 10:48:24 +09:00
parent 9b788406ea
commit 8ff4c979fa
24 changed files with 614 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/GoalsDashboard.vue
View File

@@ -8,10 +8,6 @@ const props = defineProps({
type: String,
default: '',
},
status: {
type: String,
default: 'all',
},
form: {
type: Object,
required: true,
@@ -36,12 +32,12 @@ const props = defineProps({
const emit = defineEmits([
'update:query',
'update:status',
'update:form-field',
'submit:create',
'start-edit',
'cancel-edit',
'submit:update',
'delete-goal',
])
function updateField(field, event) {
@@ -109,19 +105,6 @@ function isActiveOnSelectedDate(goal) {
</div>
</div>
<div class="space-y-2">
<label class="text-[11px] font-bold tracking-[0.16em] text-stone-600">상태</label>
<select
:value="form.status"
class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
@change="updateField('status', $event)"
>
<option value="active">진행 중</option>
<option value="done">완료</option>
<option value="archived">보관</option>
</select>
</div>
<p class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-3 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
여기서 목표와 표시 기간을 설정해 두면, 플래너 작성 화면에서는 해당 날짜에 보여줄지 여부만 간단히 ON/OFF 할 수 있습니다.
</p>
@@ -161,7 +144,7 @@ function isActiveOnSelectedDate(goal) {
목표가 많아져도 플래너 작성 화면이 길어지지 않도록, 전체 관리는 이 화면에서 처리합니다.
</p>
</div>
<div class="grid gap-2 sm:grid-cols-[220px_140px]">
<div class="grid gap-2 sm:grid-cols-[220px]">
<input
:value="query"
type="text"
@@ -169,16 +152,6 @@ function isActiveOnSelectedDate(goal) {
placeholder="목표 검색"
@input="emit('update:query', $event.target.value)"
/>
<select
:value="status"
class="rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
@change="emit('update:status', $event.target.value)"
>
<option value="all">전체</option>
<option value="active">진행 중</option>
<option value="done">완료</option>
<option value="archived">보관</option>
</select>
</div>
</div>
@@ -186,17 +159,18 @@ function isActiveOnSelectedDate(goal) {
<article
v-for="goal in goals"
:key="goal.id"
class="rounded-[24px] border border-stone-200 bg-white px-5 py-5"
class="rounded-[24px] border px-5 py-5 transition"
:class="editingGoalId === goal.id ? 'border-stone-900 bg-[#f7f1e7] shadow-[0_18px_40px_rgba(28,25,23,0.10)]' : 'border-stone-200 bg-white'"
>
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div class="space-y-2">
<div class="flex flex-wrap items-center gap-2">
<p class="text-lg font-semibold tracking-[-0.03em] text-stone-900">{{ goal.title }}</p>
<span
class="rounded-full px-3 py-1 text-[10px] font-bold tracking-[0.16em]"
:class="goal.status === 'done' ? 'bg-emerald-100 text-emerald-700' : goal.status === 'archived' ? 'bg-stone-200 text-stone-600' : 'bg-stone-900 text-white'"
v-if="editingGoalId === goal.id"
class="rounded-full bg-stone-900 px-3 py-1 text-[10px] font-bold tracking-[0.16em] text-white"
>
{{ goal.status === 'done' ? '완료' : goal.status === 'archived' ? '보관' : '진행 중' }}
수정 중
</span>
<span
v-if="isActiveOnSelectedDate(goal)"
@@ -211,13 +185,22 @@ function isActiveOnSelectedDate(goal) {
</p>
</div>
<button
type="button"
class="rounded-full border border-stone-300 px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
@click="emit('start-edit', goal)"
>
수정
</button>
<div class="flex flex-wrap gap-2">
<button
type="button"
class="rounded-full border border-stone-300 px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
@click="emit('start-edit', goal)"
>
수정
</button>
<button
type="button"
class="rounded-full border border-red-200 px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-red-500 transition hover:border-red-400 hover:bg-red-50"
@click="emit('delete-goal', goal)"
>
삭제
</button>
</div>
</div>
</article>

2
src/components/MiniCalendar.vue
View File

@@ -40,7 +40,7 @@ function selectYear(year) {
</script>
<template>
<section class="border border-stone-200 bg-white/80 p-5">
<section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
<div class="relative mb-4 flex items-start justify-between gap-4">
<div>
<h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>