// 커머스 리뉴얼 프로젝트 - TechBridge 샘플 데이터 const PROJECT = { code: "", name: "프로젝트", phase: "", start: "", end: "", }; const MEMBERS = { dev: [], aa: [], dba: [], ca: [], pm: [] }; const allMembers = [...MEMBERS.dev, ...MEMBERS.aa, ...MEMBERS.dba, ...MEMBERS.ca]; // DB 에서 로드된 실제 사용자 매핑 — App 에서 refreshUsers 시 동기화 const __membersFromDb = new Map(); function syncMembersFromDb(users) { __membersFromDb.clear(); for (const u of (users || [])) { __membersFromDb.set(u.id, { id: u.id, name: u.name, email: u.email, role: u.role, company: u.company || "-", avatar: u.avatar || (u.name?.[0] || "?"), }); } } const findMember = (id) => { if (!id) return { name: "-", avatar: "?", role: "-", company: "-" }; if (__membersFromDb.has(id)) return __membersFromDb.get(id); return allMembers.find(m => m.id === id) || { name: id, avatar: "?", role: "-", company: "-" }; }; // 요청 구분 / 세부 유형 const CATEGORIES = { DEV: { label: "DEV", fullLabel: "Developer", color: "indigo", subtypes: ["버그 수정", "기능 개발/지원", "코드 리뷰", "기술 문의", "라이브러리/도구"], }, AA: { label: "AA", fullLabel: "Application Architect", color: "violet", subtypes: ["공통 모듈/프레임워크", "아키텍처 검토/가이드", "표준/컨벤션", "라이브러리 도입"], }, DBA: { label: "DBA", fullLabel: "Database Administrator", color: "teal", subtypes: ["테이블 생성/변경", "쿼리 튜닝/인덱스", "권한/계정", "데이터 이관", "백업/복구"], }, CA: { label: "CA", fullLabel: "Cloud Architect", color: "orange", subtypes: ["서버/인프라 신청", "배포/네트워크/방화벽", "모니터링/로그", "도메인/인증서"], }, }; const STATUSES = [ { key: "requested", label: "요청", desc: "신규 등록", tone: "slate" }, { key: "progress", label: "진행중", desc: "작업 수행", tone: "blue" }, { key: "hold", label: "보류", desc: "이슈/대기", tone: "zinc" }, { key: "done", label: "완료", desc: "처리 완료", tone: "green" }, { key: "rejected", label: "반려", desc: "담당자 반려", tone: "rose" }, { key: "cancelled", label: "취소", desc: "요청자 철회", tone: "zinc" }, ]; // 종결(터미널) 상태 — 지연·긴급·진행중 여부 계산에서 제외하는 대상 const TERMINAL_STATUSES = new Set(["done", "rejected", "cancelled"]); const isTerminalStatus = (s) => TERMINAL_STATUSES.has(s); const PRIORITIES = [ { key: "P0", label: "긴급", tone: "rose" }, { key: "P1", label: "높음", tone: "orange" }, { key: "P2", label: "보통", tone: "slate" }, { key: "P3", label: "낮음", tone: "zinc" }, ]; // 요청 대장 데이터 const REQUESTS = []; // 일자 관련 유틸 const todayISO = new Date().toISOString().slice(0, 10); const toDate = (s) => new Date(s + "T00:00:00"); const daysDiff = (a, b) => Math.round((toDate(b) - toDate(a)) / 86400000); // 2026-04-23 (목) 10:09:13 형태로 포맷 (클라이언트 로컬 타임존) // 비밀번호 정책 — 서버 validatePassword 와 동일 규칙 const PASSWORD_RULE_TEXT = "8자 이상, 영문 대/소문자·숫자·특수문자 중 3종류 이상, 동일 문자 3회 연속 불가"; function validatePasswordClient(password) { if (typeof password !== "string") return "비밀번호 형식이 올바르지 않습니다"; if (password.length < 8) return "비밀번호는 8자 이상이어야 합니다"; if (password.length > 128) return "비밀번호는 128자 이하여야 합니다"; let classes = 0; if (/[a-z]/.test(password)) classes++; if (/[A-Z]/.test(password)) classes++; if (/\d/.test(password)) classes++; if (/[^A-Za-z0-9]/.test(password)) classes++; if (classes < 3) return "영문 대/소문자, 숫자, 특수문자 중 3종류 이상을 포함해야 합니다"; if (/(.)\1\1/.test(password)) return "동일 문자를 3번 이상 연속으로 쓸 수 없습니다"; return null; } const DOW_KR = ["일", "월", "화", "수", "목", "금", "토"]; function formatDateTimeKR(at) { if (!at) return ""; const d = new Date(at); if (isNaN(d)) return String(at); const y = d.getFullYear(); const M = String(d.getMonth() + 1).padStart(2, "0"); const D = String(d.getDate()).padStart(2, "0"); const hh = String(d.getHours()).padStart(2, "0"); const mm = String(d.getMinutes()).padStart(2, "0"); const ss = String(d.getSeconds()).padStart(2, "0"); return `${y}-${M}-${D} (${DOW_KR[d.getDay()]}) ${hh}:${mm}:${ss}`; } Object.assign(window, { PROJECT, MEMBERS, CATEGORIES, STATUSES, PRIORITIES, REQUESTS, findMember, todayISO, toDate, daysDiff, allMembers }); // 공통 UI 컴포넌트 - 배지, 아바타, 칩, 아이콘 const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; function useClickOutside(ref, onOutside) { useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onOutside(); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); } /* ============ Icons (line, 16px) ============ */ const Icon = { dashboard: (p) => , list: (p) => , kanban: (p) => , timeline: (p) => , plus: (p) => , search: (p) => , filter: (p) => , sort: (p) => , close: (p) => , chevron: (p) => , clock: (p) => , comment: (p) => , link: (p) => , bell: (p) => , arrow: (p) => , check: (p) => , paperclip: (p) => , eye: (p) => , warn: (p) => , menu: (p) => , calendar: (p) => , users: (p) => , building: (p) => , cog: (p) => , }; // 요청 이벤트 한 건을 사람이 읽기 쉬운 형태로 서술 function describeRequestEvent(ev) { const actor = ev.byName || ev.by || "사용자"; const statusLabel = (k) => STATUSES.find(s => s.key === k)?.label || k || "(없음)"; const prioLabel = (k) => k ? `${k} ${PRIORITIES.find(p => p.key === k)?.label || ""}`.trim() : "(없음)"; const memberLabel = (id) => id ? (findMember(id).name || id) : "(없음)"; switch (ev.kind) { case "created": return { icon: "🟢", text: `${actor}님이 요청을 등록했습니다` }; case "status": return { icon: "🔁", text: `${actor}님이 상태를 ${statusLabel(ev.from)} → ${statusLabel(ev.to)} 로 변경` }; case "assignee": return { icon: "👤", text: `${actor}님이 담당자를 ${memberLabel(ev.from)} → ${memberLabel(ev.to)} 로 변경` }; case "priority": return { icon: "⚡", text: `${actor}님이 우선순위를 ${prioLabel(ev.from)} → ${prioLabel(ev.to)} 로 변경` }; default: return { icon: "·", text: `${actor}님이 '${ev.kind}' 이벤트` }; } } // 브랜드 마크 — 로그인/TopBar/파비콘 공통 // 상태 전환 시 사유 입력 모달 (보류/반려/취소 공통) function ReasonPromptModal({ statusKey, onConfirm, onCancel }) { const [text, setText] = useState(""); const STATUS_LABEL = { hold: "보류", rejected: "반려", cancelled: "취소" }; const label = STATUS_LABEL[statusKey] || ""; const MAX = 500; const submit = () => { const t = text.trim(); if (!t) return; onConfirm(t); }; return (
e.stopPropagation()} style={{ background: "#fff", borderRadius: 8, padding: "22px 24px", width: 460, boxShadow: "var(--shadow-lg)" }}>
{label} 사유 입력
상태를 {label}(으)로 변경하려면 사유가 필요합니다. 입력한 사유는 코멘트로 기록되어 팀원이 볼 수 있습니다.