Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3dd3109c8b | |||
| 23dcd1c778 | |||
| 8d6ac66677 | |||
| ce5872c93c |
@@ -4,7 +4,7 @@
|
||||
|
||||
- 프로젝트명: 10 Minute Planner 웹 UI
|
||||
- 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
|
||||
- 현재 기준 버전: `v0.1.52` 준비 중
|
||||
- 현재 기준 버전: `v0.1.56`
|
||||
- Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
|
||||
|
||||
## 기준 디자인
|
||||
@@ -49,6 +49,11 @@
|
||||
- `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
|
||||
- `TIME TABLE` 숫자 영역은 선택/드래그로 텍스트가 잡히지 않도록 막아두었다.
|
||||
- `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
|
||||
- `TIME TABLE` 라벨은 왼쪽 클릭 시 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 시 붙여넣기 메뉴를 연다.
|
||||
- `TIME TABLE` 라벨 오른쪽의 `?` 아이콘으로 복사/붙여넣기 사용법을 바로 볼 수 있다.
|
||||
- 타임테이블 복사/붙여넣기 결과는 오른쪽 아래 상태 토스트로 바로 안내한다.
|
||||
- 모바일과 태블릿처럼 `TIME TABLE`이 아래로 내려가는 구간에서는 6칸 그리드가 남는 폭을 더 넓게 채우도록 조정했다.
|
||||
- 미니 달력의 월 이동, 연도 선택, 날짜 버튼은 `mousedown.prevent`로 포커스만 잡히고 실제 이동은 두 번째 클릭에 되는 느낌을 줄이도록 보정했다.
|
||||
- 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
|
||||
- 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.
|
||||
- 입력 내용이 있는 날짜는 달력 하단에 빨간 점으로 표시된다.
|
||||
@@ -121,7 +126,6 @@
|
||||
|
||||
## 다음 권장 작업
|
||||
|
||||
- 관리자 페이지에 사용자 검색, 상태 필터, 최근 접속/문서 수 기준 정렬 UX를 추가한다.
|
||||
- 목표 화면에 완료 처리와 보관 상태를 분리해서, 진행 중 목표와 지난 목표를 더 명확하게 나눈다.
|
||||
- `READ NEXT`의 자동 제안 규칙을 더 자연스럽게 다듬고, 빈 상태 문구도 상황별로 정리한다.
|
||||
- 공유용 이미지 저장 기능을 인쇄 레이아웃과 같은 기준으로 설계하고 구현한다.
|
||||
|
||||
3
TODO.md
3
TODO.md
@@ -18,6 +18,7 @@
|
||||
- [x] `TIME TABLE`을 마우스 드래그로 칠할 수 있게 만든다.
|
||||
- [x] `TIME TABLE` 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
|
||||
- [x] 선택된 `TIME TABLE` 구간을 기준으로 `TOTAL TIME`을 자동 계산한다.
|
||||
- [x] 원하는 날짜의 `TIME TABLE`을 다른 날짜로 복사할 수 있게 한다.
|
||||
|
||||
## 2단계: 달력과 이동 기능
|
||||
|
||||
@@ -103,4 +104,4 @@
|
||||
- [x] 메일 발송 인프라와 발신 도메인 정책을 Resend 기준으로 확정한다.
|
||||
- [x] 관리자 페이지에서 계정 비활성화 / 강제 로그아웃 / 삭제 기능을 추가한다.
|
||||
- [x] 관리자 페이지에서 사용자별 문서 상세 조회 기능을 추가한다.
|
||||
- [ ] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
|
||||
- [x] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ten-minute-planner",
|
||||
"version": "0.1.52",
|
||||
"version": "0.1.56",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ten-minute-planner",
|
||||
"version": "0.1.52",
|
||||
"version": "0.1.56",
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ten-minute-planner",
|
||||
"private": true,
|
||||
"version": "0.1.52",
|
||||
"version": "0.1.56",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
210
src/App.vue
210
src/App.vue
@@ -44,6 +44,7 @@ const GUIDE_TOOLTIP_STORAGE_KEY = 'ten-minute-guide-tooltips-hidden'
|
||||
const DDAY_DISABLED_STORAGE_KEY = 'ten-minute-dday-disabled-dates'
|
||||
const CARRYOVER_CHECK_POLICY_STORAGE_KEY = 'ten-minute-carryover-check-policy'
|
||||
const CARRYOVER_CHECK_POLICIES = ['ask', 'all', 'current']
|
||||
const TIMETABLE_CLIPBOARD_PREFIX = 'TEN_MINUTE_TIMETABLE:'
|
||||
const screenMode = ref('planner')
|
||||
const viewMode = ref('focus')
|
||||
const printLayout = ref('single')
|
||||
@@ -131,6 +132,14 @@ const adminUsers = ref([])
|
||||
const adminRecentLogins = ref([])
|
||||
const adminSelectedUserId = ref(null)
|
||||
const adminUserDetail = ref(null)
|
||||
const timetableClipboard = ref(null)
|
||||
const timetableContextMenu = ref({
|
||||
open: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
dateKey: '',
|
||||
record: null,
|
||||
})
|
||||
|
||||
const hours = [
|
||||
'6', '7', '8', '9', '10', '11', '12',
|
||||
@@ -520,6 +529,7 @@ const secondaryDate = computed(() => {
|
||||
})
|
||||
|
||||
const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))
|
||||
const secondaryDateKey = computed(() => toKey(secondaryDate.value))
|
||||
|
||||
function getDateDisplay(date) {
|
||||
const main = `${date.getFullYear()}. ${`${date.getMonth() + 1}`.padStart(2, '0')}. ${`${date.getDate()}`.padStart(2, '0')}.`
|
||||
@@ -912,6 +922,11 @@ function handleGlobalKeydown(event) {
|
||||
event.preventDefault()
|
||||
closeCarryoverCheckPrompt()
|
||||
}
|
||||
|
||||
if (event.key === 'Escape' && timetableContextMenu.value.open) {
|
||||
event.preventDefault()
|
||||
closeTimetableContextMenu()
|
||||
}
|
||||
}
|
||||
|
||||
function clearTasks(record, indexes) {
|
||||
@@ -969,6 +984,115 @@ function carryIncompleteTasksToNextDay() {
|
||||
: `${nextDateLabel} 빈칸 ${copyCount}개까지만 이월했습니다.`
|
||||
}
|
||||
|
||||
function normalizeTimetableClipboard(candidate) {
|
||||
if (!candidate || typeof candidate !== 'object') {
|
||||
return null
|
||||
}
|
||||
|
||||
const sourceDateKey = typeof candidate.sourceDateKey === 'string' ? candidate.sourceDateKey : ''
|
||||
const timetable = Array.isArray(candidate.timetable) ? candidate.timetable : []
|
||||
|
||||
if (!sourceDateKey || timetable.length !== timetableCellCount || timetable.some((value) => typeof value !== 'boolean')) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
sourceDateKey,
|
||||
timetable: [...timetable],
|
||||
}
|
||||
}
|
||||
|
||||
async function copyTimetableToClipboard(record, sourceDateKey) {
|
||||
const clipboardPayload = normalizeTimetableClipboard({
|
||||
sourceDateKey,
|
||||
timetable: record.timetable,
|
||||
})
|
||||
|
||||
if (!clipboardPayload) {
|
||||
setSyncFeedback('local', '복사할 타임테이블을 찾지 못했습니다.')
|
||||
return
|
||||
}
|
||||
|
||||
timetableClipboard.value = clipboardPayload
|
||||
|
||||
let copiedToSystemClipboard = false
|
||||
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(
|
||||
`${TIMETABLE_CLIPBOARD_PREFIX}${JSON.stringify(clipboardPayload)}`,
|
||||
)
|
||||
copiedToSystemClipboard = true
|
||||
}
|
||||
} catch (error) {
|
||||
copiedToSystemClipboard = false
|
||||
}
|
||||
|
||||
setSyncFeedback(
|
||||
'local',
|
||||
copiedToSystemClipboard
|
||||
? `${createDateLabel(sourceDateKey)} 타임테이블을 클립보드에 저장했습니다.`
|
||||
: `${createDateLabel(sourceDateKey)} 타임테이블을 앱 안에 복사했습니다.`,
|
||||
)
|
||||
}
|
||||
|
||||
function pasteTimetableFromClipboard(record, targetDateKey, clipboardPayload = timetableClipboard.value) {
|
||||
const normalizedClipboard = normalizeTimetableClipboard(clipboardPayload)
|
||||
|
||||
if (!normalizedClipboard) {
|
||||
setSyncFeedback('local', '붙여넣을 타임테이블이 없습니다.')
|
||||
return
|
||||
}
|
||||
|
||||
record.timetable = [...normalizedClipboard.timetable]
|
||||
schedulePlannerSyncForRecord(record)
|
||||
timetableClipboard.value = normalizedClipboard
|
||||
|
||||
setSyncFeedback(
|
||||
'local',
|
||||
normalizedClipboard.timetable.some(Boolean)
|
||||
? `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블을 ${createDateLabel(targetDateKey)}에 붙여넣었습니다.`
|
||||
: `${createDateLabel(normalizedClipboard.sourceDateKey)} 타임테이블이 비어 있어 ${createDateLabel(targetDateKey)}도 비웠습니다.`,
|
||||
)
|
||||
}
|
||||
|
||||
async function handleTimetableHeaderAction(record, dateKey) {
|
||||
closeTimetableContextMenu()
|
||||
await copyTimetableToClipboard(record, dateKey)
|
||||
}
|
||||
|
||||
function openTimetableContextMenu(record, dateKey, event) {
|
||||
timetableContextMenu.value = {
|
||||
open: true,
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
dateKey,
|
||||
record,
|
||||
}
|
||||
}
|
||||
|
||||
function closeTimetableContextMenu() {
|
||||
timetableContextMenu.value = {
|
||||
open: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
dateKey: '',
|
||||
record: null,
|
||||
}
|
||||
}
|
||||
|
||||
function pasteTimetableToContextTarget() {
|
||||
const { record, dateKey } = timetableContextMenu.value
|
||||
|
||||
if (!record || !dateKey) {
|
||||
closeTimetableContextMenu()
|
||||
return
|
||||
}
|
||||
|
||||
pasteTimetableFromClipboard(record, dateKey)
|
||||
closeTimetableContextMenu()
|
||||
}
|
||||
|
||||
function updateMemo(record, { index, value }) {
|
||||
record.memo[index].text = value
|
||||
schedulePlannerSyncForRecord(record)
|
||||
@@ -2851,27 +2975,29 @@ onBeforeUnmount(() => {
|
||||
{{ isCompactMobile ? 'INFO' : 'OPEN SIDE PANEL' }}
|
||||
</button>
|
||||
</div>
|
||||
<PlannerPage
|
||||
:date-main="selectedDateDisplay.main"
|
||||
:date-weekday="selectedDateDisplay.weekday"
|
||||
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
||||
:dday="plannerDday"
|
||||
:show-dday="showPlannerDday"
|
||||
:comment="planner.comment"
|
||||
:total-time="formatTotalTimeKorean(planner)"
|
||||
:tasks="planner.tasks"
|
||||
:memo="planner.memo"
|
||||
:hours="hours"
|
||||
:timetable="planner.timetable"
|
||||
@update:comment="updateComment(planner, $event)"
|
||||
@update:task-label="updateTaskLabel(planner, $event)"
|
||||
@update:task-title="updateTaskTitle(planner, $event)"
|
||||
@toggle:task="toggleTask(planner, $event)"
|
||||
@clear:tasks="clearTasks(planner, $event)"
|
||||
@update:memo-label="updateMemoLabel(planner, $event)"
|
||||
@update:memo="updateMemo(planner, $event)"
|
||||
@update:timetable="updateTimetable(planner, $event)"
|
||||
/>
|
||||
<PlannerPage
|
||||
:date-main="selectedDateDisplay.main"
|
||||
:date-weekday="selectedDateDisplay.weekday"
|
||||
:date-weekday-tone="selectedDateDisplay.weekdayTone"
|
||||
:dday="plannerDday"
|
||||
:show-dday="showPlannerDday"
|
||||
:comment="planner.comment"
|
||||
:total-time="formatTotalTimeKorean(planner)"
|
||||
:tasks="planner.tasks"
|
||||
:memo="planner.memo"
|
||||
:hours="hours"
|
||||
:timetable="planner.timetable"
|
||||
@update:comment="updateComment(planner, $event)"
|
||||
@update:task-label="updateTaskLabel(planner, $event)"
|
||||
@update:task-title="updateTaskTitle(planner, $event)"
|
||||
@toggle:task="toggleTask(planner, $event)"
|
||||
@clear:tasks="clearTasks(planner, $event)"
|
||||
@update:memo-label="updateMemoLabel(planner, $event)"
|
||||
@update:memo="updateMemo(planner, $event)"
|
||||
@update:timetable="updateTimetable(planner, $event)"
|
||||
@timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
|
||||
@timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<aside
|
||||
@@ -3191,6 +3317,8 @@ onBeforeUnmount(() => {
|
||||
@update:memo-label="updateMemoLabel(planner, $event)"
|
||||
@update:memo="updateMemo(planner, $event)"
|
||||
@update:timetable="updateTimetable(planner, $event)"
|
||||
@timetable-action="handleTimetableHeaderAction(planner, selectedDateKey)"
|
||||
@timetable-contextmenu="openTimetableContextMenu(planner, selectedDateKey, $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="print-hidden overflow-hidden" :style="spreadPageFrameStyle">
|
||||
@@ -3215,6 +3343,8 @@ onBeforeUnmount(() => {
|
||||
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
|
||||
@update:memo="updateMemo(secondaryPlanner, $event)"
|
||||
@update:timetable="updateTimetable(secondaryPlanner, $event)"
|
||||
@timetable-action="handleTimetableHeaderAction(secondaryPlanner, secondaryDateKey)"
|
||||
@timetable-contextmenu="openTimetableContextMenu(secondaryPlanner, secondaryDateKey, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3333,6 +3463,42 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="timetableContextMenu.open"
|
||||
class="print-hidden fixed inset-0 z-40"
|
||||
@click="closeTimetableContextMenu"
|
||||
@contextmenu.prevent="closeTimetableContextMenu"
|
||||
>
|
||||
<section
|
||||
class="absolute z-50 min-w-[220px] rounded-[24px] border border-stone-200 bg-white p-3 shadow-[0_24px_80px_rgba(28,25,23,0.18)]"
|
||||
:style="{
|
||||
left: `${Math.min(timetableContextMenu.x, windowWidth - 236)}px`,
|
||||
top: `${timetableContextMenu.y}px`,
|
||||
}"
|
||||
@click.stop
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<p class="px-2 pb-2 text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">Time Table Menu</p>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-sm font-semibold transition"
|
||||
:class="timetableClipboard ? 'text-stone-800 hover:bg-[#f7f2ea]' : 'cursor-not-allowed text-stone-400'"
|
||||
:disabled="!timetableClipboard"
|
||||
@click="pasteTimetableToContextTarget"
|
||||
>
|
||||
<span>현재 날짜에 붙여넣기</span>
|
||||
<span class="text-[10px] font-bold tracking-[0.14em] text-stone-400">
|
||||
{{ timetableClipboard ? '준비됨' : '비어 있음' }}
|
||||
</span>
|
||||
</button>
|
||||
<p
|
||||
class="mt-2 rounded-2xl bg-[#faf7f2] px-3 py-3 text-[11px] font-semibold leading-5 text-stone-500"
|
||||
>
|
||||
{{ timetableClipboard ? `${createDateLabel(timetableClipboard.sourceDateKey)} 타임테이블이 복사되어 있습니다.` : '먼저 다른 날짜의 TIME TABLE 라벨을 왼쪽 클릭해 복사해 주세요.' }}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<AuthDialog
|
||||
:open="authDialogOpen"
|
||||
:mode="authMode"
|
||||
@@ -3500,7 +3666,7 @@ onBeforeUnmount(() => {
|
||||
leave-to-class="translate-y-2 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="isAuthenticated && syncToastVisible"
|
||||
v-if="syncToastVisible"
|
||||
class="pointer-events-none fixed bottom-5 right-5 z-40 max-w-[240px] rounded-full border border-stone-200/70 bg-white/80 px-3 py-2 shadow-[0_10px_24px_rgba(28,25,23,0.08)] backdrop-blur"
|
||||
>
|
||||
<p
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
summary: {
|
||||
type: Object,
|
||||
@@ -45,6 +47,10 @@ const emit = defineEmits([
|
||||
'delete-user',
|
||||
])
|
||||
|
||||
const userSearch = ref('')
|
||||
const userStatusFilter = ref('all')
|
||||
const userSort = ref('lastLoginDesc')
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) {
|
||||
return '기록 없음'
|
||||
@@ -86,6 +92,61 @@ function getPlannerSummary(payload) {
|
||||
memoCount: memo.filter((item) => item?.text?.trim?.() || item?.label?.trim?.()).length,
|
||||
}
|
||||
}
|
||||
|
||||
const filteredUsers = computed(() => {
|
||||
const search = userSearch.value.trim().toLowerCase()
|
||||
const filtered = props.users.filter((user) => {
|
||||
const matchesSearch = !search
|
||||
|| String(user.id).includes(search)
|
||||
|| user.nickname?.toLowerCase().includes(search)
|
||||
|| user.email?.toLowerCase().includes(search)
|
||||
|
||||
if (!matchesSearch) {
|
||||
return false
|
||||
}
|
||||
|
||||
switch (userStatusFilter.value) {
|
||||
case 'active':
|
||||
return !user.disabledAt && user.isActiveRecently
|
||||
case 'disabled':
|
||||
return Boolean(user.disabledAt)
|
||||
case 'unverified':
|
||||
return !user.emailVerifiedAt
|
||||
case 'admin':
|
||||
return user.role === 'admin'
|
||||
case 'member':
|
||||
return user.role !== 'admin'
|
||||
default:
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
return [...filtered].sort((left, right) => {
|
||||
switch (userSort.value) {
|
||||
case 'plannerDesc':
|
||||
return right.plannerEntryCount - left.plannerEntryCount || right.id - left.id
|
||||
case 'goalDesc':
|
||||
return right.goalCount - left.goalCount || right.id - left.id
|
||||
case 'createdDesc':
|
||||
return new Date(right.createdAt || 0).getTime() - new Date(left.createdAt || 0).getTime() || right.id - left.id
|
||||
case 'nicknameAsc':
|
||||
return String(left.nickname || '').localeCompare(String(right.nickname || ''), 'ko')
|
||||
case 'lastLoginDesc':
|
||||
default:
|
||||
return new Date(right.lastLoginAt || right.createdAt || 0).getTime()
|
||||
- new Date(left.lastLoginAt || left.createdAt || 0).getTime()
|
||||
|| right.id - left.id
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const filteredUsersSummary = computed(() => {
|
||||
const total = filteredUsers.value.length
|
||||
const disabled = filteredUsers.value.filter((user) => user.disabledAt).length
|
||||
const active = filteredUsers.value.filter((user) => !user.disabledAt && user.isActiveRecently).length
|
||||
|
||||
return { total, disabled, active }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -178,6 +239,53 @@ function getPlannerSummary(payload) {
|
||||
{{ message }}
|
||||
</p>
|
||||
|
||||
<div class="mt-5 grid gap-3 rounded-[24px] border border-stone-200 bg-[#fcfaf6] p-4 md:grid-cols-[minmax(0,1.2fr)_180px_180px]">
|
||||
<label class="grid gap-2">
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">검색</span>
|
||||
<input
|
||||
v-model="userSearch"
|
||||
type="text"
|
||||
placeholder="닉네임, 이메일, ID 검색"
|
||||
class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition placeholder:text-stone-400 focus:border-stone-400"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2">
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">상태 필터</span>
|
||||
<select
|
||||
v-model="userStatusFilter"
|
||||
class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
|
||||
>
|
||||
<option value="all">전체 사용자</option>
|
||||
<option value="active">최근 활동</option>
|
||||
<option value="disabled">비활성화</option>
|
||||
<option value="unverified">미인증</option>
|
||||
<option value="member">일반 사용자</option>
|
||||
<option value="admin">관리자</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="grid gap-2">
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">정렬</span>
|
||||
<select
|
||||
v-model="userSort"
|
||||
class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
|
||||
>
|
||||
<option value="lastLoginDesc">최근 접속순</option>
|
||||
<option value="plannerDesc">문서 많은 순</option>
|
||||
<option value="goalDesc">목표 많은 순</option>
|
||||
<option value="createdDesc">최근 가입순</option>
|
||||
<option value="nicknameAsc">이름순</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap items-center gap-2 text-[11px] font-bold tracking-[0.12em] text-stone-500">
|
||||
<span class="rounded-full bg-white px-3 py-2">표시 {{ filteredUsersSummary.total }}명</span>
|
||||
<span class="rounded-full bg-white px-3 py-2">활동 {{ filteredUsersSummary.active }}명</span>
|
||||
<span class="rounded-full bg-white px-3 py-2">비활성 {{ filteredUsersSummary.disabled }}명</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 overflow-hidden rounded-[24px] border border-stone-200 bg-white">
|
||||
<div class="hidden grid-cols-[84px_minmax(0,1.2fr)_110px_150px_90px_90px_150px_190px] gap-3 border-b border-stone-200 bg-[#f8f4ed] px-5 py-4 text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500 xl:grid">
|
||||
<span>ID</span>
|
||||
@@ -192,7 +300,7 @@ function getPlannerSummary(payload) {
|
||||
|
||||
<div class="divide-y divide-stone-200">
|
||||
<article
|
||||
v-for="user in users"
|
||||
v-for="user in filteredUsers"
|
||||
:key="user.id"
|
||||
class="px-5 py-4"
|
||||
>
|
||||
@@ -273,10 +381,10 @@ function getPlannerSummary(payload) {
|
||||
</article>
|
||||
|
||||
<div
|
||||
v-if="!busy && users.length === 0"
|
||||
v-if="!busy && filteredUsers.length === 0"
|
||||
class="px-5 py-10 text-center text-sm font-semibold text-stone-500"
|
||||
>
|
||||
표시할 사용자가 없습니다.
|
||||
조건에 맞는 사용자가 없습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { onBeforeUnmount, ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@@ -28,10 +28,7 @@ const emit = defineEmits(['dismiss'])
|
||||
|
||||
const open = ref(false)
|
||||
const rootRef = ref(null)
|
||||
|
||||
function isCompactButtonLabel() {
|
||||
return String(props.buttonLabel || '').trim().length <= 1
|
||||
}
|
||||
const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)
|
||||
|
||||
function close() {
|
||||
open.value = false
|
||||
@@ -75,8 +72,8 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex min-w-[22px] items-center justify-center border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
|
||||
:class="isCompactButtonLabel() ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
|
||||
class="inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
|
||||
:class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
|
||||
aria-label="가이드 보기"
|
||||
:aria-expanded="open"
|
||||
@click.stop="toggle"
|
||||
@@ -86,7 +83,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<span
|
||||
v-if="open"
|
||||
class="absolute left-0 top-7 z-50 w-64 rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)]"
|
||||
class="absolute right-0 top-7 z-50 w-[min(16rem,calc(100vw-2rem))] rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)] sm:left-0 sm:right-auto sm:w-64"
|
||||
@pointerdown.stop
|
||||
>
|
||||
<span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
|
||||
|
||||
@@ -48,6 +48,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
|
||||
@mousedown.prevent
|
||||
@click="emit('shift-month', -1)"
|
||||
>
|
||||
←
|
||||
@@ -57,6 +58,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.16em] text-stone-500 transition hover:bg-stone-100 hover:text-ink sm:text-[11px]"
|
||||
@mousedown.prevent
|
||||
@click="isYearPickerOpen = !isYearPickerOpen"
|
||||
>
|
||||
{{ yearLabel }}
|
||||
@@ -65,6 +67,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full border border-stone-200 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink sm:h-auto sm:w-auto sm:px-2 sm:py-1"
|
||||
@mousedown.prevent
|
||||
@click="emit('shift-month', 1)"
|
||||
>
|
||||
→
|
||||
@@ -74,6 +77,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 self-start rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink sm:self-auto"
|
||||
@mousedown.prevent
|
||||
@click="emit('go-today')"
|
||||
>
|
||||
TODAY
|
||||
@@ -87,6 +91,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
||||
@mousedown.prevent
|
||||
@click="emit('shift-year', -12)"
|
||||
>
|
||||
←
|
||||
@@ -97,6 +102,7 @@ function selectYear(year) {
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full border border-stone-200 px-2 py-1 text-xs font-bold text-stone-600 transition hover:border-stone-400 hover:text-ink"
|
||||
@mousedown.prevent
|
||||
@click="emit('shift-year', 12)"
|
||||
>
|
||||
→
|
||||
@@ -109,6 +115,7 @@ function selectYear(year) {
|
||||
type="button"
|
||||
class="rounded-xl border px-3 py-2 text-[11px] font-semibold transition"
|
||||
:class="year === currentYearNumber ? 'border-ink bg-ink text-white' : 'border-stone-200 text-stone-700 hover:border-stone-400 hover:bg-stone-50'"
|
||||
@mousedown.prevent
|
||||
@click="selectYear(year)"
|
||||
>
|
||||
{{ year }}
|
||||
@@ -139,6 +146,7 @@ function selectYear(year) {
|
||||
: 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
|
||||
day.isCurrentMonth ? '' : 'opacity-35',
|
||||
]"
|
||||
@mousedown.prevent
|
||||
@click="emit('select', day.date)"
|
||||
>
|
||||
<span>{{ day.label }}</span>
|
||||
|
||||
@@ -66,6 +66,8 @@ const emit = defineEmits([
|
||||
'update:memo-label',
|
||||
'update:memo',
|
||||
'update:timetable',
|
||||
'timetable-action',
|
||||
'timetable-contextmenu',
|
||||
])
|
||||
|
||||
let dragState = null
|
||||
@@ -408,16 +410,32 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<section class="planner-sheet__timetable w-full shrink-0 lg:w-[210px]">
|
||||
<div class="flex items-center gap-2 text-muted">
|
||||
<div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
|
||||
<button
|
||||
type="button"
|
||||
class="group flex flex-1 items-center gap-2 rounded-full px-1 py-1 text-left transition hover:bg-stone-100/80"
|
||||
@click="emit('timetable-action')"
|
||||
@contextmenu.prevent="emit('timetable-contextmenu', $event)"
|
||||
>
|
||||
<span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
|
||||
<span class="h-px flex-1 bg-ink"></span>
|
||||
</button>
|
||||
<GuideTooltip
|
||||
title="Time Table"
|
||||
description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다."
|
||||
:dismissible="false"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2 text-muted">
|
||||
<span class="shrink-0">TIME TABLE</span>
|
||||
<span class="h-px flex-1 bg-ink"></span>
|
||||
</div>
|
||||
<div class="planner-sheet__timetable-scroll overflow-x-auto pb-1">
|
||||
<div class="planner-sheet__timetable-grid min-w-[210px]">
|
||||
<div class="planner-sheet__timetable-grid min-w-[210px] w-full">
|
||||
<div
|
||||
v-for="(hour, index) in hours"
|
||||
:key="`${hour}-${index}`"
|
||||
class="flex h-[25px] border-b sm:h-[30px]"
|
||||
class="grid h-[25px] grid-cols-[30px_repeat(6,minmax(0,1fr))] border-b sm:h-[30px] lg:grid-cols-[30px_repeat(6,30px)]"
|
||||
:class="index === hours.length - 1 ? 'border-ink' : 'border-line'"
|
||||
>
|
||||
<div
|
||||
@@ -430,7 +448,7 @@ onBeforeUnmount(() => {
|
||||
v-for="quarter in 6"
|
||||
:key="quarter"
|
||||
:class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
|
||||
class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
|
||||
class="h-full cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
|
||||
@contextmenu.prevent
|
||||
@pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
|
||||
@pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
|
||||
|
||||
Reference in New Issue
Block a user