🔀 :: (#1103) 야근 함께 근무자 선택 + 신청서 결재란 대표 단일화

client/src/lib/overtimePdf.ts

@@ -35,6 +35,8 @@ export type OvertimeSheetData = {
   createdAt: string;
   /** 회사명 (멀티테넌트 — 목록 API 가 내려줌, 없으면 하단 사명 줄 생략) */
   companyName?: string | null;
+  /** 함께 근무자 이름 목록 (선택) */
+  companions?: string[] | null;
 };
 
 function esc(s: string): string {
@@ -92,7 +94,7 @@ const SHEET_CSS = `
 .otsheet .ot-reason th,.otsheet .ot-reason td{border:1px solid #9AA0A8;}
 .otsheet .ot-reason .ot-rh{height:40px;background:#F5F6F8;font-size:13.5px;font-weight:600;color:#3A3F46;letter-spacing:3px;text-align:left;padding:0 16px;vertical-align:middle;}
 .otsheet .ot-reason .ot-rhint{background:#F5F6F8;font-size:11px;font-weight:400;color:#A6ADB6;letter-spacing:0.5px;text-align:right;padding:0 16px;vertical-align:middle;width:200px;}
-.otsheet .ot-reason .ot-rb{height:330px;vertical-align:top;padding:18px 20px;font-size:14.5px;line-height:1.8;color:#1F2329;white-space:pre-wrap;word-break:break-word;}
+.otsheet .ot-reason .ot-rb{height:304px;vertical-align:top;padding:18px 20px;font-size:14.5px;line-height:1.8;color:#1F2329;white-space:pre-wrap;word-break:break-word;}
 .otsheet .ot-notes{margin-top:12px;font-size:11px;color:#6B7178;line-height:1.8;letter-spacing:0.2px;}
 .otsheet .ot-closing{margin-top:26px;text-align:center;font-size:15.5px;letter-spacing:1px;color:#1F2329;line-height:26px;}
 .otsheet .ot-date{margin-top:18px;text-align:center;font-size:14.5px;letter-spacing:2px;color:#1F2329;line-height:26px;}
@@ -177,9 +179,9 @@ export function overtimeSheetHTML(d: OvertimeSheetData): string {
       </td>
       <td style="width:300px;">
         <table class="ot-approve">
-          <tr><td class="ot-ap-side" rowspan="3">결<br>재</td><th class="ot-ap-title">신 청</th><th class="ot-ap-title">담 당</th><th class="ot-ap-title">승 인</th></tr>
-          <tr><td class="ot-ap-sign">(인)</td><td class="ot-ap-sign">(인)</td><td class="ot-ap-sign">(인)</td></tr>
-          <tr><td class="ot-ap-date">&nbsp;.&nbsp;&nbsp;.&nbsp;</td><td class="ot-ap-date">&nbsp;.&nbsp;&nbsp;.&nbsp;</td><td class="ot-ap-date">&nbsp;.&nbsp;&nbsp;.&nbsp;</td></tr>
+          <tr><td class="ot-ap-side" rowspan="3">결<br>재</td><th class="ot-ap-title">신 청</th><th class="ot-ap-title">대 표</th></tr>
+          <tr><td class="ot-ap-sign">(인)</td><td class="ot-ap-sign">(인)</td></tr>
+          <tr><td class="ot-ap-date">&nbsp;.&nbsp;&nbsp;.&nbsp;</td><td class="ot-ap-date">&nbsp;.&nbsp;&nbsp;.&nbsp;</td></tr>
         </table>
       </td>
     </tr>
@@ -197,7 +199,8 @@ export function overtimeSheetHTML(d: OvertimeSheetData): string {
       <th>직&nbsp;&nbsp;급</th><td>${esc(d.position || "-")}</td>
     </tr>
     <tr>
-      <th>근무 일자</th><td colspan="5">${esc(fmtDateWithWeekday(d.date))}</td>
+      <th>근무 일자</th><td>${esc(fmtDateWithWeekday(d.date))}</td>
+      <th>함께 근무</th><td colspan="3">${d.companions && d.companions.length ? esc(d.companions.join(", ")) : '<span class="ot-dim">—</span>'}</td>
     </tr>
     <tr>
       <th>근무 시간</th><td colspan="5"><span class="ot-dim">소정근로시간 종료 후 ~</span> <span class="ot-strong">${esc(fmtTimeHM(d.extendedEnd))}</span> <span class="ot-dim">까지 (휴게시간 제외)</span></td>

client/src/lib/previewMock.ts

@@ -230,7 +230,7 @@ function demoOvertimes() {
   // 야근 신청 서식 폼·PDF 버튼 데모 — 줄바꿈 사유 포함(pre-line 렌더 확인용).
   return {
     overtimes: [
-      { id: "ot1", date: iso(-1, 0).slice(0, 10), extendedEnd: iso(-1, 21), reason: "신규 기능 배포 대응 및 모니터링.\n장애 발생 시 즉시 롤백 대기.", status: "APPROVED", createdAt: iso(-1, 10), user: { name: "김데모", team: "프로덕트팀", position: "매니저" } },
+      { id: "ot1", date: iso(-1, 0).slice(0, 10), extendedEnd: iso(-1, 21), reason: "신규 기능 배포 대응 및 모니터링.\n장애 발생 시 즉시 롤백 대기.", status: "APPROVED", createdAt: iso(-1, 10), companions: [{ id: "u-lead-1", name: "이앨리스" }, { id: "u-lead-3", name: "박그레이스" }], user: { name: "김데모", team: "프로덕트팀", position: "매니저" } },
       { id: "ot2", date: iso(-3, 0).slice(0, 10), extendedEnd: iso(-3, 22), reason: "월말 정산 마감", status: "PENDING", createdAt: iso(-3, 9), user: { name: "김데모", team: "프로덕트팀", position: "매니저" } },
     ],
     companyName: "주식회사 데모",

client/src/pages/AttendancePage.tsx

@@ -659,8 +659,10 @@ function formatRange(a: string, b: string) {
 type Overtime = {
   id: string; date: string; extendedEnd: string; reason?: string | null;
   status: string; createdAt: string;
+  companions?: { id: string; name: string }[] | null;
   user?: { name: string; team: string | null; position: string | null } | null;
 };
+type MateLite = { id: string; name: string; team?: string | null };
 function otTime(iso: string): string {
   return new Date(iso).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", hour12: false });
 }
@@ -673,6 +675,13 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
   const [reason, setReason] = useState("");
   // 계획내용 줄 카운터 — PDF 계획 박스가 담을 수 있는 실측 줄 수(자동 줄바꿈 포함) 기준.
   const [planLines, setPlanLines] = useState<{ lines: number; maxLines: number } | null>(null);
+  // 함께 근무자 선택 — 최대 5명, 본인 제외. 서식 정보표·목록에 표기.
+  const [mates, setMates] = useState<MateLite[]>([]);
+  const [mateOpen, setMateOpen] = useState(false);
+  const [mateQuery, setMateQuery] = useState("");
+  const [mateUsers, setMateUsers] = useState<MateLite[] | null>(null);
+  const mateBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [mateRect, setMateRect] = useState<{ top: number; left: number } | null>(null);
   const [saving, setSaving] = useState(false);
   const [pdfBusy, setPdfBusy] = useState<string | null>(null);
   const [companyName, setCompanyName] = useState<string | null>(null);
@@ -695,8 +704,12 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
     setSaving(true);
     try {
       const extendedEnd = `${date}T${endTime}:00+09:00`;
-      await api("/api/attendance/overtime", { method: "POST", json: { date, extendedEnd, reason: reason || undefined } });
+      await api("/api/attendance/overtime", {
+        method: "POST",
+        json: { date, extendedEnd, reason: reason || undefined, companions: mates.length ? mates.map((m) => m.id) : undefined },
+      });
       setReason("");
+      setMates([]);
       await load();
     } catch (e: any) {
       alertAsync({ title: "신청 실패", description: e?.message ?? "야근 신청에 실패했어요" });
@@ -721,11 +734,36 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
         reason: o.reason,
         createdAt: o.createdAt,
         companyName,
+        companions: (o.companions ?? []).map((c) => c.name),
       });
     } catch (e: any) {
       alertAsync({ title: "PDF 생성 실패", description: e?.message ?? "신청서 PDF 생성에 실패했어요" });
     } finally { setPdfBusy(null); }
   }
+  async function openMatePicker() {
+    const r = mateBtnRef.current?.getBoundingClientRect();
+    if (r) setMateRect({ top: Math.round(r.bottom + 6), left: Math.round(Math.max(8, Math.min(r.left, window.innerWidth - 276))) });
+    setMateQuery("");
+    setMateOpen(true);
+    if (!mateUsers) {
+      try {
+        const res = await api<{ users: MateLite[] }>("/api/users");
+        setMateUsers(res.users ?? []);
+      } catch { setMateUsers([]); }
+    }
+  }
+  // 바깥 클릭으로 피커 닫기 — 팝오버(.otmate-pop) 안 클릭은 유지.
+  useEffect(() => {
+    if (!mateOpen) return;
+    function onDoc(e: MouseEvent) {
+      const t = e.target as HTMLElement;
+      if (t.closest(".otmate-pop") || t === mateBtnRef.current) return;
+      setMateOpen(false);
+    }
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [mateOpen]);
+
   // 계획내용 입력 제한 — PDF 계획 박스(A4 1페이지 고정 330px)에 실제로 들어가는 줄 수까지만.
   // 자동 줄바꿈 포함 실측(measurePlanLines)이라 "몇 자"가 아니라 "몇 줄"이 기준. 넘치면
   // 들어가는 만큼으로 잘라(clampPlanText) 서식이 2페이지로 넘어가거나 글이 잘리는 일이 없다.
@@ -756,6 +794,7 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
         reason,
         createdAt: new Date().toISOString(),
         companyName,
+        companions: mates.map((m) => m.name),
       });
     } catch (e: any) {
       alertAsync({ title: "PDF 생성 실패", description: e?.message ?? "신청서 PDF 생성에 실패했어요" });
@@ -786,6 +825,19 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
               <TimePicker value={endTime} onChange={setEndTime} className="w-[110px]" />
               <span className="otform-dim whitespace-nowrap">까지 (휴게시간 제외)</span>
             </div>
+            <div className="otform-th">함께 근무</div>
+            <div className="otform-td otform-time flex-wrap gap-1.5 py-2">
+              {mates.map((m) => (
+                <span key={m.id} className="otmate-chip">
+                  {m.name}
+                  <button type="button" aria-label={`${m.name} 제외`} onClick={() => setMates((prev) => prev.filter((x) => x.id !== m.id))}>×</button>
+                </span>
+              ))}
+              {mates.length < 5 && (
+                <button type="button" ref={mateBtnRef} className="otmate-add" onClick={openMatePicker}>+ 추가</button>
+              )}
+              {mates.length === 0 && <span className="otform-dim">(선택) 같이 야근하는 동료</span>}
+            </div>
             <div className="otform-th otform-span !justify-start px-3">
               계획 내용 (업무 내용)
               <span className={`otform-lines ${planLines && planLines.lines >= planLines.maxLines ? "otform-lines-full" : ""}`}>
@@ -804,6 +856,48 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
             </div>
           </div>
         </div>
+        {mateOpen && mateRect && (
+          <Portal>
+            <div className="otmate-pop" style={{ top: mateRect.top, left: mateRect.left }}>
+              <input
+                autoFocus
+                className="input !py-1.5 !text-[13px] mb-1.5"
+                placeholder="이름·팀 검색"
+                value={mateQuery}
+                onChange={(e) => setMateQuery(e.target.value)}
+              />
+              <div className="otmate-list">
+                {mateUsers === null ? (
+                  <div className="otmate-empty">불러오는 중…</div>
+                ) : (
+                  (() => {
+                    const q = mateQuery.trim().toLowerCase();
+                    const picked = new Set(mates.map((m) => m.id));
+                    const items = (mateUsers ?? [])
+                      .filter((m) => m.id !== user?.id && !picked.has(m.id))
+                      .filter((m) => !q || m.name.toLowerCase().includes(q) || (m.team ?? "").toLowerCase().includes(q))
+                      .slice(0, 30);
+                    if (!items.length) return <div className="otmate-empty">검색 결과가 없어요</div>;
+                    return items.map((m) => (
+                      <button
+                        key={m.id}
+                        type="button"
+                        className="otmate-item"
+                        onClick={() => {
+                          setMates((prev) => (prev.length >= 5 ? prev : [...prev, { id: m.id, name: m.name, team: m.team }]));
+                          setMateOpen(false);
+                        }}
+                      >
+                        <span className="font-semibold">{m.name}</span>
+                        {m.team && <span className="text-ink-400 text-[11.5px] ml-1.5">{m.team}</span>}
+                      </button>
+                    ));
+                  })()
+                )}
+              </div>
+            </div>
+          </Portal>
+        )}
         <div className="flex justify-end items-center gap-2 mt-3">
           <button className="btn-ghost" onClick={downloadFormPdf} disabled={pdfBusy === "form"} title="작성 중인 서식을 결재용 PDF 로 다운로드">
             {pdfBusy === "form" ? "생성 중…" : "서식 PDF"}
@@ -825,6 +919,9 @@ function OvertimeSection({ isReviewer }: { isReviewer: boolean }) {
                   <div className="font-bold text-ink-900">{o.date} <span className="text-ink-400 font-medium text-[12px]">→ {otTime(o.extendedEnd)}</span></div>
                   {/* pre-line + 2줄 클램프 — 줄바꿈 사유가 한 줄로 뭉개지지 않게(전문은 PDF 로) */}
                   {o.reason && <div className="text-[12px] text-ink-500 whitespace-pre-line line-clamp-2">{o.reason}</div>}
+                  {!!o.companions?.length && (
+                    <div className="text-[11.5px] text-ink-400 truncate">함께 근무 · {o.companions.map((c) => c.name).join(", ")}</div>
+                  )}
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <button className="btn-ghost btn-xs" onClick={() => downloadPdf(o)} disabled={pdfBusy === o.id} title="신청서 PDF 다운로드">

client/src/styles.css

@@ -1511,3 +1511,15 @@ body.hinest-chat-fs .hinest-preview-banner {
 /* 계획내용 줄 카운터 — PDF 계획 박스 수용량(실측) 대비 현재 줄 수. 꽉 차면 경고색. */
 .otform-lines { margin-left: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; color: var(--c-text-muted); white-space: nowrap; }
 .otform-lines-full { color: #E5484D; }
+
+/* 함께 근무자 칩·피커 (야근 신청 서식 폼) */
+.otmate-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--c-surface-3); border: 1px solid var(--c-border); font-size: 12px; font-weight: 600; color: var(--c-text-2); }
+.otmate-chip button { color: var(--c-text-muted); font-size: 13px; line-height: 1; padding: 0 1px; }
+.otmate-chip button:hover { color: #e5484d; }
+.otmate-add { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--c-border-strong); font-size: 12px; font-weight: 600; color: var(--c-text-3); }
+.otmate-add:hover { background: var(--c-surface-3); color: var(--c-text-2); }
+.otmate-pop { position: fixed; z-index: 2000; width: 268px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); padding: 8px; }
+.otmate-list { max-height: 220px; overflow-y: auto; }
+.otmate-item { display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px; font-size: 13px; color: var(--c-text); }
+.otmate-item:hover { background: var(--c-surface-3); }
+.otmate-empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--c-text-muted); }

server/prisma/migrations/20260708000000_overtime_companions/migration.sql

@@ -0,0 +1,2 @@
+-- 야근 신청 함께 근무자 스냅샷(JSON [{id,name}]) — 추가형 컬럼(운영 RDS 는 기동 시 migrate deploy 멱등 적용)
+ALTER TABLE "OvertimeRequest" ADD COLUMN "companions" TEXT;

server/prisma/schema.prisma

@@ -470,6 +470,7 @@ model OvertimeRequest {
   date        String // YYYY-MM-DD (KST) — 야근한/할 날짜
   extendedEnd DateTime // 연장 종료시각
   reason      String?
+  companions  String? // 함께 근무자 스냅샷 — JSON [{id,name}] (신청 시점 이름, 서식 표기용)
   status      String    @default("PENDING") // PENDING | APPROVED | REJECTED
   reviewer    String? // 심사한 관리자 userId
   createdAt   DateTime  @default(now())

server/src/routes/attendance.ts

@@ -335,20 +335,44 @@ const overtimeSchema = z.object({
   date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "YYYY-MM-DD"),
   extendedEnd: z.string().refine((s) => !Number.isNaN(new Date(s).getTime()), "유효한 일시가 아닙니다"),
   reason: z.string().max(1000).optional(),
+  // 함께 근무자 — 사용자 ID 목록(최대 5명). 이름은 서버가 같은 회사 사용자로 검증해 스냅샷.
+  companions: z.array(z.string().max(64)).max(5).optional(),
 });
 
+/** companions JSON 문자열 → [{id,name}]. 손상/빈값은 빈 배열(서식·목록 표기용). */
+function parseCompanions(raw: string | null): { id: string; name: string }[] {
+  if (!raw) return [];
+  try {
+    const v = JSON.parse(raw);
+    return Array.isArray(v) ? v.filter((x) => x && typeof x.name === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
 router.post("/overtime", async (req, res) => {
   const parsed = overtimeSchema.safeParse(req.body);
   if (!parsed.success) return res.status(400).json({ error: "invalid input" });
   const u = (req as any).user;
   const d = parsed.data;
+  // 함께 근무자 검증 — 같은 회사의 활성 사용자만, 본인 제외. 이름은 DB 값으로 스냅샷
+  // (클라가 보낸 이름을 신뢰하지 않음 — 결재 서식에 박제되는 값이라 위·변조 여지 차단).
+  let companions: { id: string; name: string }[] = [];
+  const ids = (d.companions ?? []).filter((id) => id !== u.id);
+  if (ids.length) {
+    companions = await prisma.user.findMany({
+      where: { id: { in: ids }, companyId: u.companyId ?? null, active: true },
+      select: { id: true, name: true },
+    });
+  }
   const ot = await prisma.overtimeRequest.create({
     data: {
       userId: u.id,
       companyId: u.companyId ?? null,
       date: d.date,
       extendedEnd: new Date(d.extendedEnd),
       reason: d.reason,
+      companions: companions.length ? JSON.stringify(companions) : null,
     },
   });
   await writeLog(u.id, "OVERTIME_REQUEST", ot.id, `${d.date} → ${d.extendedEnd}`);
@@ -375,7 +399,11 @@ router.get("/overtime", async (req, res) => {
   const company = u.companyId
     ? await prisma.company.findUnique({ where: { id: u.companyId }, select: { name: true } })
     : null;
-  res.json({ overtimes: list, companyName: company?.name ?? null });
+  res.json({
+    // companions 는 DB 엔 JSON 문자열 — 클라가 파싱하지 않도록 배열로 풀어 내려준다.
+    overtimes: list.map((o) => ({ ...o, companions: parseCompanions(o.companions) })),
+    companyName: company?.name ?? null,
+  });
 });
 
 router.patch("/overtime/:id", async (req, res) => {