style: 업무 생성 AI 추천을 하단 인라인 패널 → 모달로 변경
기존: 체크리스트 아래에 인라인으로 펼쳐지던 AI 추천 패널 변경: Teleport 기반 중앙 모달(반투명 배경, 헤더 고정 + 본문 스크롤). 배경 클릭/× 로 닫기(분석 중에는 닫기 비활성). 추천 항목 추가 동작은 동일. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -561,82 +561,94 @@ function goBack() {
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- AI 추천 할 일 -->
|
||||
<div
|
||||
v-if="aiSuggesting || aiSuggestions || aiError"
|
||||
class="ai-suggest"
|
||||
>
|
||||
<div class="ai-suggest-head">
|
||||
<span class="ai-suggest-title">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
|
||||
</svg>
|
||||
AI 추천 할 일
|
||||
</span>
|
||||
<button
|
||||
v-if="aiSuggestions || aiError"
|
||||
class="ai-suggest-close"
|
||||
type="button"
|
||||
aria-label="닫기"
|
||||
@click="dismissSuggestions"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- AI 추천 할 일 — 모달 -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="aiSuggesting"
|
||||
class="ai-suggest-msg"
|
||||
v-if="aiSuggesting || aiSuggestions || aiError"
|
||||
class="ai-modal-overlay"
|
||||
@click.self="!aiSuggesting && dismissSuggestions()"
|
||||
>
|
||||
프로젝트와 업무 내용을 분석하고 있어요…
|
||||
</div>
|
||||
<div
|
||||
v-else-if="aiError"
|
||||
class="ai-suggest-msg err"
|
||||
>
|
||||
{{ aiError }}
|
||||
</div>
|
||||
<template v-else-if="aiSuggestions">
|
||||
<div
|
||||
v-for="group in aiSuggestions"
|
||||
:key="group.category"
|
||||
class="ai-group"
|
||||
class="ai-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="AI 추천 할 일"
|
||||
>
|
||||
<div class="ai-group-head">
|
||||
<span class="ai-group-cat">{{ group.category }}</span>
|
||||
<div class="ai-suggest-head">
|
||||
<span class="ai-suggest-title">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
|
||||
</svg>
|
||||
AI 추천 할 일
|
||||
</span>
|
||||
<button
|
||||
class="ai-group-all"
|
||||
v-if="aiSuggestions || aiError"
|
||||
class="ai-suggest-close"
|
||||
type="button"
|
||||
@click="addSuggestionGroup(group)"
|
||||
aria-label="닫기"
|
||||
@click="dismissSuggestions"
|
||||
>
|
||||
전체 추가
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-for="(item, i) in group.items"
|
||||
:key="i"
|
||||
class="ai-sg-item"
|
||||
:class="{ added: isSuggestionAdded(item) }"
|
||||
type="button"
|
||||
:disabled="isSuggestionAdded(item)"
|
||||
@click="addSuggestion(item)"
|
||||
>
|
||||
<span class="ai-sg-ico">{{ isSuggestionAdded(item) ? '✓' : '+' }}</span>
|
||||
<span class="ai-sg-txt">{{ item }}</span>
|
||||
</button>
|
||||
|
||||
<div class="ai-modal-body">
|
||||
<div
|
||||
v-if="aiSuggesting"
|
||||
class="ai-suggest-msg"
|
||||
>
|
||||
프로젝트와 업무 내용을 분석하고 있어요…
|
||||
</div>
|
||||
<div
|
||||
v-else-if="aiError"
|
||||
class="ai-suggest-msg err"
|
||||
>
|
||||
{{ aiError }}
|
||||
</div>
|
||||
<template v-else-if="aiSuggestions">
|
||||
<div
|
||||
v-for="group in aiSuggestions"
|
||||
:key="group.category"
|
||||
class="ai-group"
|
||||
>
|
||||
<div class="ai-group-head">
|
||||
<span class="ai-group-cat">{{ group.category }}</span>
|
||||
<button
|
||||
class="ai-group-all"
|
||||
type="button"
|
||||
@click="addSuggestionGroup(group)"
|
||||
>
|
||||
전체 추가
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-for="(item, i) in group.items"
|
||||
:key="i"
|
||||
class="ai-sg-item"
|
||||
:class="{ added: isSuggestionAdded(item) }"
|
||||
type="button"
|
||||
:disabled="isSuggestionAdded(item)"
|
||||
@click="addSuggestion(item)"
|
||||
>
|
||||
<span class="ai-sg-ico">{{ isSuggestionAdded(item) ? '✓' : '+' }}</span>
|
||||
<span class="ai-sg-txt">{{ item }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ai-suggest-foot">
|
||||
필요한 항목만 골라 추가하세요. (전부 추가할 필요는 없어요)
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-suggest-foot">
|
||||
필요한 항목만 골라 추가하세요. (전부 추가할 필요는 없어요)
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1162,18 +1174,39 @@ function goBack() {
|
||||
}
|
||||
|
||||
/* AI 추천 할 일 */
|
||||
.ai-suggest {
|
||||
margin-top: 0.875rem;
|
||||
border: 1px solid var(--accent-border);
|
||||
background: #faf9ff;
|
||||
border-radius: 0.625rem;
|
||||
padding: 0.75rem 0.875rem;
|
||||
.ai-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(16, 18, 24, 0.45);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.5rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
.ai-modal {
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
max-height: 80vh;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ai-modal-body {
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ai-suggest-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.875rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #faf9ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ai-suggest-title {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in New Issue
Block a user