From ae6af518dd5b5fd5cd5c2d3b6bf165ea7243d943 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 10:50:41 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EC=97=85=EB=AC=B4=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20AI=20=EC=B6=94=EC=B2=9C=EC=9D=84=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=EC=9D=B8=EB=9D=BC=EC=9D=B8=20=ED=8C=A8=EB=84=90=20?=
 =?UTF-8?q?=E2=86=92=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존: 체크리스트 아래에 인라인으로 펼쳐지던 AI 추천 패널
변경: Teleport 기반 중앙 모달(반투명 배경, 헤더 고정 + 본문 스크롤).
배경 클릭/× 로 닫기(분석 중에는 닫기 비활성). 추천 항목 추가 동작은 동일.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/TaskCreatePage.vue | 179 ++++++++++++--------
 1 file changed, 106 insertions(+), 73 deletions(-)

diff --git a/frontend/src/pages/relay/TaskCreatePage.vue b/frontend/src/pages/relay/TaskCreatePage.vue
index b146eb3..7efbb40 100644
--- a/frontend/src/pages/relay/TaskCreatePage.vue
+++ b/frontend/src/pages/relay/TaskCreatePage.vue
@@ -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;