From b18a9af195f55332a1c226fe87b925668f4dce33 Mon Sep 17 00:00:00 2001
From: AWESOMEDEV <admin@awesomedev.dev>
Date: Thu, 23 Jul 2026 14:26:55 +0900
Subject: [PATCH] =?UTF-8?q?feat(helper):=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20t?=
 =?UTF-8?q?extarea(=EC=A4=84=EB=B0=94=EA=BF=88)=20+=20=ED=9A=8C=EC=82=AC?=
 =?UTF-8?q?=20=EC=83=9D=ED=99=9C=EB=8F=84=20=EB=8B=B5=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력이 <input> 한 줄뿐이라 줄바꿈이 안 됐다 → <textarea>로. Enter 전송,
  Shift+Enter 줄바꿈. 답변은 이미 pre-wrap이라 줄바꿈 반영됨.
- LlmAssistant 프롬프트에 회사 생활·직장 예절·업무 소통(보고·이메일·질문법·
  온보딩)을 신입 눈높이로 답하도록 추가. mirim 온보딩 교육과 결이 맞음.
---
 .../dev/awesomedev/mirim/service/LlmAssistant.java | 12 ++++++++----
 frontend/src/components/HelperWidget.jsx           | 14 ++++++++++++--
 frontend/src/styles/global.css                     |  7 ++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/backend/src/main/java/dev/awesomedev/mirim/service/LlmAssistant.java b/backend/src/main/java/dev/awesomedev/mirim/service/LlmAssistant.java
index a7bacc4..55fa464 100644
--- a/backend/src/main/java/dev/awesomedev/mirim/service/LlmAssistant.java
+++ b/backend/src/main/java/dev/awesomedev/mirim/service/LlmAssistant.java
@@ -33,10 +33,14 @@ public class LlmAssistant {
     private static final Logger log = LoggerFactory.getLogger(LlmAssistant.class);
 
     private static final String SYSTEM = """
-            너는 어썸데브 학습 플랫폼의 AI 학습 도우미다. 프로그래밍을 배우는 수습생의 질문에
-            친절하고 정확하게 한국어로 답한다. 개념 설명은 충실히 하되, 지금 풀고 있는 코딩 문제의
-            완성된 정답 코드를 통째로 주지는 마라 — 학생이 스스로 풀도록 방향과 힌트를 준다.
-            답은 간결하게, 꼭 필요하면 짧은 예시 코드만 곁들인다.""";
+            너는 어썸데브 학습 플랫폼의 AI 학습 도우미다. 수습생(신입)의 질문에 친절하고
+            정확하게 한국어로 답한다. 두 종류의 질문을 모두 돕는다.
+            - 프로그래밍·개념: 충실히 설명하되, 지금 풀고 있는 코딩 문제의 완성된 정답 코드는
+              통째로 주지 말고 스스로 풀도록 방향과 힌트를 준다.
+            - 회사 생활·직장 예절·업무 소통: 보고하는 법(사실→판단→다음 행동), 이메일·메신저
+              예절, 질문 잘하는 법, 첫 출근·온보딩 기본기 등을 신입 눈높이에서 구체적이고
+              실용적으로 알려준다.
+            답은 간결하게, 꼭 필요하면 짧은 예시만 곁들인다.""";
 
     private final String baseUrl;
     private final String model;
diff --git a/frontend/src/components/HelperWidget.jsx b/frontend/src/components/HelperWidget.jsx
index c078145..3847d95 100644
--- a/frontend/src/components/HelperWidget.jsx
+++ b/frontend/src/components/HelperWidget.jsx
@@ -62,11 +62,21 @@ export default function HelperWidget() {
             {loading && <div className="helper-msg helper-ai helper-thinking">생각 중…</div>}
           </div>
           <form className="helper-input" onSubmit={send}>
-            <input
+            {/* textarea라 여러 줄 질문을 쓸 수 있다. Enter는 전송, Shift+Enter는 줄바꿈.
+                학습 포인트: input은 한 줄뿐이라 Enter=전송만 가능했다 — 긴 질문엔 textarea가 맞다. */}
+            <textarea
+              className="helper-ta"
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              placeholder="질문을 입력하세요"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  send(e);
+                }
+              }}
+              placeholder="질문을 입력하세요 (Shift+Enter 줄바꿈)"
               aria-label="질문 입력"
+              rows={1}
             />
             <button type="submit" className="helper-send" disabled={loading} aria-label="보내기">
               <Send size={18} strokeWidth={1.5} />
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 4e44980..fecb985 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1575,7 +1575,7 @@ inline-code, .icode {
   padding: 12px;
   border-top: 1px solid var(--line);
 }
-.helper-input input {
+.helper-ta {
   flex: 1;
   min-width: 0;
   padding: 9px 12px;
@@ -1584,7 +1584,12 @@ inline-code, .icode {
   background: var(--bg);
   color: var(--ink);
   font: inherit;
+  line-height: 1.5;
+  resize: none;          /* 손잡이로 늘리는 건 막고 */
+  max-height: 120px;     /* 여러 줄이어도 입력창이 패널을 다 먹지 않게 */
+  overflow-y: auto;
 }
+.helper-input { align-items: flex-end; }   /* textarea가 여러 줄이어도 보내기 버튼이 바닥에 정렬 */
 .helper-send {
   border: none;
   background: var(--primary);