#733 문제 풀이 커뮤니티 활성화 개선

- 질문하기 탭 브랜드 강조색 적용해 시인성 개선
- 오답 제출 시 질문 유도 넛지 배너 추가 (클릭 시 질문 탭 이동)
- 질문 작성 모달 제목 기본값을 "[문제번호] 문제제목"으로 채움

Author: wlsgur11

frontend/src/pages/oj/views/problem/problemSolving/Problem.vue

@@ -34,14 +34,29 @@
                 제출 현황
               </div>
               <div
-                class="tab-header"
+                class="tab-header tab-header--ask"
                 :class="{ active: leftPainActiveTab === 'community' }"
                 @click="leftPainActiveTab = 'community'"
               >
                 <i class="fi fi-rr-map-marker-question"></i>
                 질문하기
               </div>
             </div>
+            <div v-if="showAskNudge" class="ask-nudge">
+              <span class="ask-nudge-text">
+                이 문제에서 막혔나요? 다른 사람에게 질문해보세요.
+              </span>
+              <div class="ask-nudge-actions">
+                <button class="ask-nudge-go" @click="goAsk">질문하기 →</button>
+                <button
+                  class="ask-nudge-close"
+                  aria-label="닫기"
+                  @click="showAskNudge = false"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
             <div class="tab-content">
               <ProblemDetailFlexibleContainer
                 v-show="leftPainActiveTab === 'problem'"
@@ -206,6 +221,7 @@ export default {
       },
       modalCheck: false,
       leftPainActiveTab: "problem",
+      showAskNudge: false,
       rightPainActiveTab: "editor",
       lastSubmissionId: null,
       isInitialized: false,
@@ -280,6 +296,7 @@ export default {
       this.result = { result: 9 }
       this.lastSubmissionId = null
       this.leftPainActiveTab = "problem"
+      this.showAskNudge = false
       this.modalCheck = false
       this.problem = this.getEmptyProblem()
     },
@@ -466,6 +483,10 @@ export default {
     check() {
       alert(this.code)
     },
+    goAsk() {
+      this.leftPainActiveTab = "community"
+      this.showAskNudge = false
+    },
     checkSubmissionStatus() {
       // 使用setTimeout避免一些问题
       if (this.refreshStatus) {
@@ -483,6 +504,8 @@ export default {
 
               this.leftPainActiveTab = "submission"
               this.lastSubmissionId = id
+              // 통과(Accepted=0)하지 못한 결과면 질문 유도 넛지 표시
+              this.showAskNudge = this.result.result !== 0
 
               clearTimeout(this.refreshStatus)
               this.init({
@@ -508,6 +531,7 @@ export default {
       }
       this.submissionId = ""
       this.result = { result: 9 }
+      this.showAskNudge = false
       this.submitting = true
       let data = {
         problem_id: this.problem.id,
@@ -807,6 +831,63 @@ export default {
   background-color: var(--bg-color);
 }
 
+/* 질문하기 탭: 무채색 탭들 사이에서 눈에 띄도록 브랜드 강조색 부여 */
+.tab-header--ask {
+  color: #5b64ed;
+  font-weight: 700;
+}
+
+.tab-header--ask:not(.active) {
+  background-color: rgba(91, 100, 237, 0.07);
+}
+
+/* 오답 후 질문 유도 넛지 */
+.ask-nudge {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 8px 0;
+  padding: 9px 12px;
+  border: 1px solid rgba(91, 100, 237, 0.35);
+  background-color: rgba(91, 100, 237, 0.08);
+  border-radius: 8px;
+  font-size: 13px;
+  color: inherit;
+}
+
+.ask-nudge-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.ask-nudge-go {
+  border: none;
+  background-color: #5b64ed;
+  color: #fff;
+  font-weight: 700;
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ask-nudge-go:hover {
+  filter: brightness(1.05);
+}
+
+.ask-nudge-close {
+  border: none;
+  background: transparent;
+  color: #9999a6;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
 .tab-content {
   height: calc(100% - 40px);
   min-height: 0;

frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemCommunity.vue

@@ -376,9 +376,9 @@ export default {
       this.query.page = 1
       this.fetchPosts()
     },
-    // 문제 질문 작성 시, 문제 태그 prefix 추가
+    // 문제 질문 작성 시, "[문제 번호] 문제 제목" 형태로 제목 기본 채움
     openCreateModal() {
-      this.newPost.title = `[${this.problem._id}] `
+      this.newPost.title = `[${this.problem._id}] ${this.problem.title || ""}`
       this.showCreateModal = true
     },
   },