feat(sprint-013): 자매 관리/타임라인/선택 UX 정리

TASK-057: 자매 상세 설정 탭 제거 (개요/세션/활동/하네스/로그만 유지) TASK-058: 관리 > 자매 관리 카드 이모지 제거, SisterAvatar 적용 TASK-059: 프로젝트 상세 이력 API/history 추가, Sprint + Hotfix timeline 표시 TASK-060: GlobalStyle에 user-select 정책 추가 (기본 none, 편집/로그/입력/코드만 text) 테스트 23/23 pass, FE 16 routes build 성공
2026-04-04 21:14:16 +09:00
parent c2a60f910b
commit a40b6eda32
6 changed files with 66 additions and 113 deletions
--- a/backend/src/projects/projects.controller.ts
+++ b/backend/src/projects/projects.controller.ts
@@ -44,6 +44,11 @@ export class ProjectsController {
    return this.projectsService.getProjectPulls(id, state ?? 'open');
  }

+  @Get(':id/history')
+  getHistory(@Param('id', ParseIntPipe) id: number) {
+    return this.projectsService.getProjectHistory(id);
+  }
+
  @Post(':id/sync-sprints')
  @UseGuards(JwtGuard, RoleGuard)
  @Roles('admin')
--- a/backend/src/projects/projects.service.ts
+++ b/backend/src/projects/projects.service.ts
@@ -104,6 +104,25 @@ export class ProjectsService {
    return this.gitea.getPulls(repoName, state);
  }

+  async getProjectHistory(id: number) {
+    const project = await this.getProjectMeta(id);
+    const repoName = project.repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
+    const files = await this.gitea.getRepoTree(repoName, '.plans/sprints/');
+    return files
+      .filter((f) => /(SPRINT-\d+|HOTFIX-\d+)\.md$/i.test(f))
+      .map((f) => {
+        const name = f.split('/').pop() ?? '';
+        const sprint = name.match(/SPRINT-(\d+)/i);
+        const hotfix = name.match(/HOTFIX-(\d+)/i);
+        return {
+          kind: sprint ? 'sprint' : 'hotfix',
+          order: sprint ? parseInt(sprint[1], 10) : 1000 + parseInt(hotfix?.[1] ?? '0', 10),
+          label: name.replace('.md', ''),
+        };
+      })
+      .sort((a, b) => a.order - b.order);
+  }
+
  private async getProjectMeta(id: number) {
    const project = await this.prisma.project.findUnique({ where: { id }, select: { id: true, repoUrl: true } });
    if (!project) throw new NotFoundException(`Project ${id} not found`);
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -6,7 +6,8 @@ import StatusBadge from '@/components/common/StatusBadge';
 import ConfirmModal from '@/components/admin/ConfirmModal';
 import { API_URL } from '@/lib/config';
 import { adminFetch } from '@/lib/adminFetch';
-import { SISTER_EMOJIS, SISTER_DISPLAY_NAMES } from '@/lib/sisters';
+import { SISTER_DISPLAY_NAMES } from '@/lib/sisters';
+import SisterAvatar from '@/components/common/SisterAvatar';

 type Status = 'online' | 'offline' | 'working' | 'unknown';

@@ -16,71 +17,13 @@ interface ActionResult {
  error: string | null;
 }

-const Table = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-const Row = styled.div`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 16px 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-
-const SisterInfo = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-`;
-
-const Emoji = styled.span`font-size: 22px;`;
-
-const Name = styled.span`
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-  min-width: 70px;
-`;
-
-const Actions = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-const ActionBtn = styled.button<{ $danger?: boolean }>`
-  padding: 6px 14px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid;
-  transition: all 0.15s;
-
-  ${({ $danger }) =>
-    $danger
-      ? `background: rgba(255,23,68,0.08); border-color: rgba(255,23,68,0.3); color: #FF1744;
-         &:hover { background: rgba(255,23,68,0.18); }`
-      : `background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.3); color: #58A6FF;
-         &:hover { background: rgba(88,166,255,0.18); }`}
-`;
-
-const ResultBanner = styled.div<{ $success: boolean }>`
-  margin-top: 8px;
-  padding: 8px 12px;
-  background: ${({ $success }) => $success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)'};
-  border: 1px solid ${({ $success }) => $success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)'};
-  border-radius: 6px;
-  font-size: 12px;
-  color: ${({ $success }) => $success ? '#00FF00' : '#FF1744'};
-  font-family: monospace;
-  white-space: pre-wrap;
-`;
+const Table = styled.div`display:flex;flex-direction:column;gap:8px;user-select:none;`;
+const Row = styled.div`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:16px;`;
+const SisterInfo = styled.div`display:flex;align-items:center;gap:10px;flex:1;`;
+const Name = styled.span`font-size:15px;font-weight:600;color:var(--text-primary);min-width:70px;`;
+const Actions = styled.div`display:flex;gap:8px;`;
+const ActionBtn = styled.button<{ $danger?: boolean }>`padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid;transition:all .15s;user-select:none;${({ $danger }) => $danger ? `background: rgba(255,23,68,0.08); border-color: rgba(255,23,68,0.3); color: #FF1744; &:hover { background: rgba(255,23,68,0.18); }` : `background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.3); color: #58A6FF; &:hover { background: rgba(88,166,255,0.18); }`}`;
+const ResultBanner = styled.div<{ $success: boolean }>`margin-top:8px;padding:8px 12px;background:${({ $success }) => $success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)'};border:1px solid ${({ $success }) => $success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)'};border-radius:6px;font-size:12px;color:${({ $success }) => $success ? '#00FF00' : '#FF1744'};font-family:monospace;white-space:pre-wrap;`;

 export default function AdminSistersPage() {
  const [sisters, setSisters] = useState<any[]>([]);
@@ -90,9 +33,7 @@ export default function AdminSistersPage() {

  useEffect(() => {
    fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {});
-    const iv = setInterval(() => {
-      fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {});
-    }, 15000);
+    const iv = setInterval(() => { fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {}); }, 15000);
    return () => clearInterval(iv);
  }, []);

@@ -104,10 +45,7 @@ export default function AdminSistersPage() {
      const data: ActionResult = await res.json();
      setResults((p) => ({ ...p, [`${action}:${name}`]: data }));
    } catch (e) {
-      setResults((p) => ({
-        ...p,
-        [`${action}:${name}`]: { success: false, output: '', error: (e as Error).message },
-      }));
+      setResults((p) => ({ ...p, [`${action}:${name}`]: { success: false, output: '', error: (e as Error).message } }));
    } finally {
      setLoading((p) => ({ ...p, [`${action}:${name}`]: false }));
    }
@@ -123,52 +61,23 @@ export default function AdminSistersPage() {
            <div key={s.id}>
              <Row>
                <SisterInfo>
-                  <Emoji>{SISTER_EMOJIS[s.name] ?? '🤖'}</Emoji>
+                  <SisterAvatar name={s.name} size={28} />
                  <Name>{SISTER_DISPLAY_NAMES[s.name] ?? s.name}</Name>
                  <StatusBadge status={s.status as Status} />
                </SisterInfo>
                <Actions>
-                  <ActionBtn
-                    onClick={() => setModal({ action: 'restart', name: s.name })}
-                    disabled={loading[`restart:${s.name}`]}
-                  >
-                    {loading[`restart:${s.name}`] ? '...' : '🔄 재시작'}
-                  </ActionBtn>
-                  <ActionBtn
-                    $danger
-                    onClick={() => setModal({ action: 'reset', name: s.name })}
-                    disabled={loading[`reset:${s.name}`]}
-                  >
-                    {loading[`reset:${s.name}`] ? '...' : '🗑️ 리셋'}
-                  </ActionBtn>
+                  <ActionBtn onClick={() => setModal({ action: 'restart', name: s.name })} disabled={loading[`restart:${s.name}`]}>{loading[`restart:${s.name}`] ? '...' : '재시작'}</ActionBtn>
+                  <ActionBtn $danger onClick={() => setModal({ action: 'reset', name: s.name })} disabled={loading[`reset:${s.name}`]}>{loading[`reset:${s.name}`] ? '...' : '리셋'}</ActionBtn>
                </Actions>
              </Row>
-              {restartResult && (
-                <ResultBanner $success={restartResult.success}>
-                  재시작: {restartResult.success ? '✅ 성공' : `❌ ${restartResult.error}`}
-                  {restartResult.output && `\n${restartResult.output}`}
-                </ResultBanner>
-              )}
-              {resetResult && (
-                <ResultBanner $success={resetResult.success}>
-                  리셋: {resetResult.success ? '✅ 성공' : `❌ ${resetResult.error}`}
-                </ResultBanner>
-              )}
+              {restartResult && <ResultBanner $success={restartResult.success}>재시작: {restartResult.success ? '✅ 성공' : `❌ ${restartResult.error}`}{restartResult.output && `\n${restartResult.output}`}</ResultBanner>}
+              {resetResult && <ResultBanner $success={resetResult.success}>리셋: {resetResult.success ? '✅ 성공' : `❌ ${resetResult.error}`}</ResultBanner>}
            </div>
          );
        })}
      </Table>

-      {modal && (
-        <ConfirmModal
-          title={modal.action === 'restart' ? '게이트웨이 재시작' : '세션 리셋'}
-          message={`${SISTER_DISPLAY_NAMES[modal.name] ?? modal.name}의 ${modal.action === 'restart' ? 'OpenClaw Gateway를 재시작' : '메인 세션을 초기화'}하시겠어요?`}
-          confirmLabel={modal.action === 'restart' ? '재시작' : '리셋'}
-          danger={modal.action === 'reset'}
-          onConfirm={() => doAction(modal.action, modal.name)}
-          onCancel={() => setModal(null)}
-        />
-      )}
+      {modal && <ConfirmModal title={modal.action === 'restart' ? '게이트웨이 재시작' : '세션 리셋'} message={`${SISTER_DISPLAY_NAMES[modal.name] ?? modal.name}의 ${modal.action === 'restart' ? 'OpenClaw Gateway를 재시작' : '메인 세션을 초기화'}하시겠어요?`} confirmLabel={modal.action === 'restart' ? '재시작' : '리셋'} danger={modal.action === 'reset'} onConfirm={() => doAction(modal.action, modal.name)} onCancel={() => setModal(null)} />}
    </>
  );
 }
--- a/frontend/app/projects/[id]/page.tsx
+++ b/frontend/app/projects/[id]/page.tsx
@@ -320,6 +320,7 @@ export default function ProjectDetailPage() {
  const { id } = useParams<{ id: string }>();
  const [project, setProject] = useState<any>(null);
  const [tasks, setTasks] = useState<any[]>([]);
+  const [history, setHistory] = useState<any[]>([]);
  const [commits, setCommits] = useState<any[]>([]);
  const [branches, setBranches] = useState<any[]>([]);
  const [pulls, setPulls] = useState<any[]>([]);
@@ -332,9 +333,11 @@ export default function ProjectDetailPage() {
    Promise.allSettled([
      fetch(`${API_URL}/api/projects/${id}`),
      fetch(`${API_URL}/api/projects/${id}/tasks`),
-    ]).then(([pRes, tRes]) => {
+      fetch(`${API_URL}/api/projects/${id}/history`),
+    ]).then(([pRes, tRes, hRes]) => {
      if (pRes.status === 'fulfilled' && pRes.value.ok) pRes.value.json().then(setProject);
      if (tRes.status === 'fulfilled' && tRes.value.ok) tRes.value.json().then(setTasks);
+      if (hRes.status === 'fulfilled' && hRes.value.ok) hRes.value.json().then(setHistory);
    }).finally(() => setLoading(false));
  }, [id]);

@@ -429,7 +432,16 @@ export default function ProjectDetailPage() {
                  </PhaseItem>
                );
              })}
-              {tasks.length === 0 && <PhaseItem><PhaseMeta>PENDING</PhaseMeta><PhaseBox><PhaseName>Sprint 없음</PhaseName></PhaseBox></PhaseItem>}
+              {history.length > 0 && history.map((entry: any) => (
+                <PhaseItem key={entry.label}>
+                  <PhaseMeta>{entry.kind === 'hotfix' ? 'HOTFIX' : 'TIMELINE'}</PhaseMeta>
+                  <PhaseBox $active={false}>
+                    <PhaseName>{entry.label}</PhaseName>
+                    <PhaseDesc>{entry.kind === 'hotfix' ? '보정/수정 이력' : 'Sprint 진행 이력'}</PhaseDesc>
+                  </PhaseBox>
+                </PhaseItem>
+              ))}
+              {tasks.length === 0 && history.length === 0 && <PhaseItem><PhaseMeta>PENDING</PhaseMeta><PhaseBox><PhaseName>Sprint 없음</PhaseName></PhaseBox></PhaseItem>}
            </PhaseTimeline>
          </div>

--- a/frontend/app/sisters/[name]/page.tsx
+++ b/frontend/app/sisters/[name]/page.tsx
@@ -147,7 +147,7 @@ export default function SisterDetailPage() {
          </MetaPanel>
          <div>
            <TabBar>
-              {[{ id: 'overview', label: '개요' }, { id: 'sessions', label: '세션' }, { id: 'activity', label: '활동' }, { id: 'harness', label: '하네스' }, { id: 'logs', label: '로그' }, { id: 'config', label: '설정' }].map((t) => <TabBtn key={t.id} $active={tab === t.id} onClick={() => setTab(t.id)}>{t.label}</TabBtn>)}
+              {[{ id: 'overview', label: '개요' }, { id: 'sessions', label: '세션' }, { id: 'activity', label: '활동' }, { id: 'harness', label: '하네스' }, { id: 'logs', label: '로그' }].map((t) => <TabBtn key={t.id} $active={tab === t.id} onClick={() => setTab(t.id)}>{t.label}</TabBtn>)}
            </TabBar>

            {tab === 'overview' && <Timeline>{activity.slice(0, 8).map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
@@ -155,7 +155,6 @@ export default function SisterDetailPage() {
            {tab === 'activity' && <Timeline>{activity.map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
            {tab === 'harness' && <><Toolbar><Select value={selectedFile} onChange={(e) => setSelectedFile(e.target.value)}>{FILES.map((f) => <option key={f} value={f}>{f}</option>)}</Select><Btn onClick={() => { setContent(saved); setSaveResult(null); }}>되돌리기</Btn><Btn onClick={handleSave}>저장</Btn></Toolbar>{saveResult && <ResultMsg $success={saveResult.success}>{saveResult.msg}</ResultMsg>}<CodeEditor value={content} onChange={setContent} /></>}
            {tab === 'logs' && <><Toolbar><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>최근</span><LinesInput type="number" value={lines} onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)} min={10} max={500} /><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>줄</span><Btn onClick={fetchLogs}>{logLoading ? '로딩 중...' : '로그 가져오기'}</Btn></Toolbar><LogTerminal lines={logLines} /></>}
-            {tab === 'config' && <><SectionTitle>SOUL.md / AGENTS.md</SectionTitle><ConfigPre>{configData?.raw || '(설정 파일 없음)'}</ConfigPre></>}
          </div>
        </DetailGrid>
      </>}
--- a/frontend/styles/GlobalStyle.ts
+++ b/frontend/styles/GlobalStyle.ts
@@ -48,8 +48,17 @@ const GlobalStyle = createGlobalStyle`
    cursor: pointer;
  }

-  input, textarea, select {
+  /* 기본적으로 관제 UI 텍스트 드래그 방지 */
+  body {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* 편집/로그/입력/코드 영역은 선택 허용 */
+  input, textarea, select, pre, code, [contenteditable="true"], .cm-editor, .cm-content {
    font-family: inherit;
+    user-select: text;
+    -webkit-user-select: text;
  }

  ::-webkit-scrollbar {