ttipo/comrelay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 프로젝트 저장소 연동 UI + 화면 문구 정리 (Phase 2b)

Browse Source 
- useRepo 복구(프로젝트 종속 /projects/:projectId/repos): list/meta/checkName/create/remove
- types/repo ApiRepo 를 새 RepoResponse 와 정합(projectId 추가, members/counts 제거)
- ProjectTabs 에 '저장소' 탭(repoCount) 추가, 4개 페이지 repo-count 전달
- ProjectReposPage 신설(/projects/:id/repos): 연동 저장소 목록 + 연동(생성) 폼
  (slug 가용성 디바운스 체크·템플릿 옵션) + Gitea 열기 + 연동 해제(admin)
- 화면 잔여 '저장소' 문구를 '프로젝트'로 정리(crumb/설정/멤버 모달/주석/not-found)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ttipo
2026-06-20 19:52:23 +09:00
parent e028449312
commit 8a2e34d617
10 changed files with 831 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ProjectTabs.vue
+9 -2
View File
@@ -1,12 +1,13 @@
<script setup lang="ts">
// 저장소 서브탭 — 업무/멤버/활동/설정
// 프로젝트 서브탭 — 업무/멤버/저장소/활동/설정
import { RouterLink } from 'vue-router'
interface Props {
projectId: string
active: 'tasks' | 'members' | 'activity' | 'settings'
active: 'tasks' | 'members' | 'repos' | 'activity' | 'settings'
taskCount: number
memberCount: number
repoCount: number
/** 설정 탭 노출 여부(관리자만). 기본 false — 권한이 확인된 경우에만 노출 */
canManage?: boolean
}
@@ -27,6 +28,12 @@ defineProps<Props>()
>
<span class="tb-label">멤버</span> <span class="tb-count">{{ memberCount }}</span>
</RouterLink>
<RouterLink
:to="`/projects/${projectId}/repos`"
:class="{ active: active === 'repos' }"
>
<span class="tb-label">저장소</span> <span class="tb-count">{{ repoCount }}</span>
</RouterLink>
<RouterLink
:to="`/projects/${projectId}/activity`"
:class="{ active: active === 'activity' }"
frontend/src/composables/useRepo.ts
+58
View File
@@ -0,0 +1,58 @@
import { useApi } from './useApi'
import type {
ApiRepo,
CreateRepoPayload,
RepoCreateMeta,
} from '@/types/repo'
import type { Paginated } from '@/types/pagination'
// 저장소 도메인 API Composable — 프로젝트에 연동된 Gitea 저장소.
// 모든 경로는 /projects/:projectId/repos 하위. 인터셉터가 success/data 를 언래핑.
export function useRepo() {
const api = useApi()
async function list(
projectId: string,
page = 1,
size = 20,
): Promise<Paginated<ApiRepo>> {
return (await api.get(`/projects/${projectId}/repos`, {
params: { page, size },
})) as unknown as Paginated<ApiRepo>
}
// 생성 폼 메타(소유자/템플릿)
async function getCreateMeta(projectId: string): Promise<RepoCreateMeta> {
return (await api.get(
`/projects/${projectId}/repos/meta`,
)) as unknown as RepoCreateMeta
}
// slug 사용 가능 여부 — 전역 유일 검사
async function checkName(
projectId: string,
slug: string,
): Promise<boolean> {
const res = (await api.get(`/projects/${projectId}/repos/name-available`, {
params: { slug },
})) as unknown as { available: boolean }
return res.available
}
async function create(
projectId: string,
payload: CreateRepoPayload,
): Promise<ApiRepo> {
return (await api.post(
`/projects/${projectId}/repos`,
payload,
)) as unknown as ApiRepo
}
// 연동 해제(삭제)
async function remove(projectId: string, repoId: string): Promise<void> {
await api.delete(`/projects/${projectId}/repos/${repoId}`)
}
return { list, getCreateMeta, checkName, create, remove }
}
frontend/src/pages/relay/ProjectActivityPage.vue
+4 -3
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
// 저장소 활동 — 날짜 그룹 단위 활동 피드 (API 연동)
// 프로젝트 활동 — 날짜 그룹 단위 활동 피드 (API 연동)
import { computed, defineComponent, h, ref, watch } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import AppShell from '@/layouts/AppShell.vue'
@@ -17,7 +17,7 @@ const projectId = computed(() => String(route.params.projectId))
const projectStore = useProjectStore()
const activityStore = useActivityStore()
// 저장소 헤더 + 활동 피드 로딩
// 프로젝트 헤더 + 활동 피드 로딩
const repo = ref<Project | null>(null)
async function load() {
try {
@@ -89,7 +89,7 @@ const ActIcon = defineComponent({
to="/projects"
class="lnk"
>
저장소
프로젝트
</RouterLink>
<span class="sep">/</span>
<RouterLink
@@ -111,6 +111,7 @@ const ActIcon = defineComponent({
active="activity"
:task-count="repo.totalCount"
:member-count="memberCount"
:repo-count="repo.repoCount"
:can-manage="repo.canManage"
/>
frontend/src/pages/relay/ProjectDetailPage.vue
+4 -3
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
// 저장소 상세 — 저장소 헤더(공통) + 진행률 + 서브탭(공통) + 업무 목록
// 프로젝트 상세 — 프로젝트 헤더(공통) + 진행률 + 서브탭(공통) + 업무 목록
// 세그먼트/검색은 백엔드에서 필터·카운트하고, 목록은 더보기(오프셋 페이지네이션)로 점진 로드한다.
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
@@ -110,7 +110,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
to="/projects"
class="lnk"
>
저장소
프로젝트
</RouterLink>
<span class="sep">/</span>
<b>{{ repo.name }}</b>
@@ -157,6 +157,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
active="tasks"
:task-count="counts.all"
:member-count="memberCount"
:repo-count="repo.repoCount"
:can-manage="repo.canManage"
/>
@@ -415,7 +416,7 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
class="page"
>
<p class="not-found-msg">
요청하신 저장소를 찾을 수 없습니다.
요청하신 프로젝트를 찾을 수 없습니다.
</p>
</div>
</AppShell>
frontend/src/pages/relay/ProjectMembersPage.vue
+9 -8
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
// 저장소 멤버 — 멤버 목록 + 역할/제거 + 멤버 초대 모달 (백엔드 연동)
// 프로젝트 멤버 — 멤버 목록 + 역할/제거 + 멤버 초대 모달 (백엔드 연동)
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import AppShell from '@/layouts/AppShell.vue'
@@ -20,7 +20,7 @@ const projectId = computed(() => String(route.params.projectId))
const projectStore = useProjectStore()
const memberStore = useMemberStore()
// 저장소 헤더 — API 연동
// 프로젝트 헤더 — API 연동
const repo = ref<Project | null>(null)
async function loadRepo() {
try {
@@ -50,7 +50,7 @@ watch(
{ immediate: true },
)
// 현재 사용자가 이 저장소의 관리자인지(초대·역할변경·제거 권한)
// 현재 사용자가 이 프로젝트의 관리자인지(초대·역할변경·제거 권한)
const isAdmin = computed(() =>
members.value.some((m) => m.isYou && m.roleType === 'admin'),
)
@@ -96,7 +96,7 @@ async function changeRole(userId: string, roleType: MemberRoleType) {
// --- 멤버 제거 ---
async function removeMember(userId: string, name: string) {
if (!window.confirm(`${name} 님을 저장소에서 제거하시겠습니까?`)) return
if (!window.confirm(`${name} 님을 프로젝트에서 제거하시겠습니까?`)) return
try {
await memberStore.remove(projectId.value, userId)
} catch {
@@ -117,7 +117,7 @@ const usersLoading = ref(false)
const showUserDropdown = ref(false)
let userSearchTimer: ReturnType<typeof setTimeout> | null = null
// 현재 저장소에 이미 속한 사용자 id (자동완성에서 제외)
// 현재 프로젝트에 이미 속한 사용자 id (자동완성에서 제외)
const memberIds = computed(() => new Set(members.value.map((m) => m.user.id)))
const userOptions = computed(() =>
userResults.value.filter((u) => !memberIds.value.has(u.id)),
@@ -208,7 +208,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
to="/projects"
class="lnk"
>
저장소
프로젝트
</RouterLink>
<span class="sep">/</span>
<RouterLink
@@ -232,6 +232,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
active="members"
:task-count="repo.totalCount"
:member-count="counts.all"
:repo-count="repo.repoCount"
:can-manage="repo.canManage"
/>
@@ -250,7 +251,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
r="10"
/><path d="M12 16v-4M12 8h.01" />
</svg>
이 저장소의 멤버만 업무 담당자로 지정할 수 있습니다. <b>관리자</b>는 업무 지시·멤버 관리가 가능하고, <b>멤버</b>는 담당자로 배정되어 업무를 수행합니다.
이 프로젝트의 멤버만 업무 담당자로 지정할 수 있습니다. <b>관리자</b>는 업무 지시·멤버 관리가 가능하고, <b>멤버</b>는 담당자로 배정되어 업무를 수행합니다.
</div>
<!-- 툴바 -->
@@ -470,7 +471,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
<div>
<h2>멤버 초대</h2>
<div class="mh-sub">
<b>{{ repo?.name }}</b> 저장소에 멤버를 추가합니다.
<b>{{ repo?.name }}</b> 프로젝트에 멤버를 추가합니다.
</div>
</div>
<button
frontend/src/pages/relay/ProjectReposPage.vue
+720
View File
@@ -0,0 +1,720 @@
<script setup lang="ts">
// 프로젝트 연동 저장소 — 연동된 Gitea 저장소 목록 + 저장소 연동(생성) + 연동 해제
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import AppShell from '@/layouts/AppShell.vue'
import ProjectHeader from '@/components/ProjectHeader.vue'
import ProjectTabs from '@/components/ProjectTabs.vue'
import { useProjectStore } from '@/stores/project.store'
import { useRepo } from '@/composables/useRepo'
import type { Project, Visibility } from '@/mock/relay.mock'
import type { ApiRepo, RepoCreateMeta } from '@/types/repo'
const route = useRoute()
const projectId = computed(() => String(route.params.projectId))
const projectStore = useProjectStore()
const repoApi = useRepo()
// 프로젝트 헤더/탭 — API 연동
const project = ref<Project | null>(null)
async function loadProject() {
try {
project.value = await projectStore.fetchOne(projectId.value)
} catch {
project.value = null // 404/403 은 인터셉터가 알림 처리
}
}
const memberCount = computed(() =>
project.value ? project.value.members.length + project.value.moreCount : 0,
)
const canManage = computed(() => project.value?.canManage ?? false)
// 연동 저장소 목록
const repos = ref<ApiRepo[]>([])
const loading = ref(false)
async function loadRepos() {
loading.value = true
try {
const res = await repoApi.list(projectId.value)
repos.value = res.items
} catch {
// 인터셉터가 알림 처리
} finally {
loading.value = false
}
}
watch(
projectId,
() => {
loadProject()
loadRepos()
},
{ immediate: true },
)
// --- 저장소 연동(생성) 폼 ---
const showForm = ref(false)
const meta = ref<RepoCreateMeta | null>(null)
const slug = ref('')
const name = ref('')
const description = ref('')
const visibility = ref<Visibility>('private')
const useTemplate = ref(false)
const submitting = ref(false)
// slug 가용성 — null(미확인) / true / false
const slugAvailable = ref<boolean | null>(null)
const slugChecking = ref(false)
let slugTimer: ReturnType<typeof setTimeout> | null = null
const slugValid = computed(() => /^[a-z0-9-_]+$/.test(slug.value.trim()))
// 폼 열기 — 메타(소유자/템플릿) 1회 로드
async function openForm() {
showForm.value = true
if (!meta.value) {
try {
meta.value = await repoApi.getCreateMeta(projectId.value)
} catch {
// 인터셉터가 알림 처리
}
}
}
function closeForm() {
showForm.value = false
slug.value = ''
name.value = ''
description.value = ''
visibility.value = 'private'
useTemplate.value = false
slugAvailable.value = null
}
// slug 입력 디바운스 → 가용성 체크
watch(slug, () => {
slugAvailable.value = null
if (slugTimer) clearTimeout(slugTimer)
const value = slug.value.trim()
if (!value || !slugValid.value) return
slugChecking.value = true
slugTimer = setTimeout(async () => {
try {
slugAvailable.value = await repoApi.checkName(projectId.value, value)
} catch {
slugAvailable.value = null
} finally {
slugChecking.value = false
}
}, 300)
})
onBeforeUnmount(() => {
if (slugTimer) clearTimeout(slugTimer)
})
const canSubmit = computed(
() =>
!submitting.value &&
slugValid.value &&
slugAvailable.value === true &&
name.value.trim() !== '' &&
description.value.trim() !== '',
)
// 저장소 연동 — 성공 시 목록 갱신 + 폼 닫기
async function linkRepo() {
if (!canSubmit.value) return
submitting.value = true
try {
await repoApi.create(projectId.value, {
slug: slug.value.trim(),
name: name.value.trim(),
description: description.value.trim(),
visibility: visibility.value,
...(meta.value?.template.available ? { useTemplate: useTemplate.value } : {}),
})
closeForm()
await Promise.all([loadRepos(), loadProject()])
} catch {
// 인터셉터가 알림 처리
} finally {
submitting.value = false
}
}
// 연동 해제 — 확인 후 삭제, 목록 갱신
async function unlinkRepo(repo: ApiRepo) {
const ok = window.confirm(
`저장소 ‘${repo.name}’의 연동을 해제합니다.\nGitea 저장소도 함께 삭제됩니다. 계속할까요?`,
)
if (!ok) return
try {
await repoApi.remove(projectId.value, repo.id)
await Promise.all([loadRepos(), loadProject()])
} catch {
// 인터셉터가 알림 처리
}
}
</script>
<template>
<AppShell>
<div
v-if="project"
class="page"
>
<div class="crumb">
<RouterLink
to="/projects"
class="lnk"
>
프로젝트
</RouterLink>
<span class="sep">/</span>
<RouterLink
:to="`/projects/${project.id}`"
class="lnk"
>
{{ project.name }}
</RouterLink>
<span class="sep">/</span>
<b>저장소</b>
</div>
<ProjectHeader
:repo="project"
:meta-text="`연동 저장소 ${project.repoCount}개`"
:members="project.members"
:more-count="project.moreCount"
/>
<ProjectTabs
:project-id="project.id"
active="repos"
:task-count="project.totalCount"
:member-count="memberCount"
:repo-count="project.repoCount"
:can-manage="project.canManage"
/>
<!-- 안내 + 연동 버튼 -->
<div class="repos-head">
<p class="lede">
이 프로젝트에 코드 저장소를 연동하면 업무를 코드 변경과 연결해 관리할 수 있습니다.
한 프로젝트에 여러 저장소를 연동할 수 있습니다.
</p>
<button
v-if="canManage && !showForm"
class="btn primary"
type="button"
@click="openForm"
>
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14M12 5v14" />
</svg>
저장소 연동
</button>
</div>
<!-- 연동(생성) 폼 -->
<form
v-if="showForm"
class="card form"
@submit.prevent="linkRepo"
>
<div class="fblock">
<div class="flabel">
<span class="req">*</span> 저장소 이름(slug)
</div>
<div class="fhint">
영문 소문자·숫자와 하이픈(-)·밑줄(_)만 사용. {{ meta?.owner ? `${meta.owner}/` : '' }}이름 형태로 생성됩니다.
</div>
<input
v-model="slug"
type="text"
class="tinput"
placeholder="예: q3-launch-campaign"
maxlength="60"
autocomplete="off"
>
<div
v-if="slug.trim() && !slugValid"
class="fstatus bad"
>
사용할 수 없는 형식입니다.
</div>
<div
v-else-if="slugChecking"
class="fstatus"
>
확인 중…
</div>
<div
v-else-if="slugAvailable === true"
class="fstatus ok"
>
사용 가능한 이름입니다.
</div>
<div
v-else-if="slugAvailable === false"
class="fstatus bad"
>
이미 사용 중인 이름입니다.
</div>
</div>
<div class="fblock">
<div class="flabel">
<span class="req">*</span> 표시 제목
</div>
<input
v-model="name"
type="text"
class="tinput"
placeholder="예: 3분기 신제품 런칭 캠페인"
maxlength="40"
>
</div>
<div class="fblock">
<div class="flabel">
<span class="req">*</span> 설명
</div>
<textarea
v-model="description"
class="tinput tarea"
maxlength="300"
placeholder="저장소의 목적을 간단히 적어주세요."
/>
</div>
<div class="fblock">
<div class="flabel">
<span class="req">*</span> 공개 범위
</div>
<div class="radio-row">
<button
class="radio-chip"
:class="{ sel: visibility === 'private' }"
type="button"
@click="visibility = 'private'"
>
비공개
</button>
<button
class="radio-chip"
:class="{ sel: visibility === 'public' }"
type="button"
@click="visibility = 'public'"
>
공개
</button>
</div>
</div>
<div
v-if="meta?.template.available"
class="fblock"
>
<label class="check">
<input
v-model="useTemplate"
type="checkbox"
>
<span>템플릿 저장소(<code>{{ meta.template.slug }}</code>)를 복제해 생성</span>
</label>
</div>
<div class="form-footer">
<button
class="btn ghost"
type="button"
@click="closeForm"
>
취소
</button>
<button
class="btn primary"
type="submit"
:disabled="!canSubmit"
>
{{ submitting ? '연동 중…' : '연동' }}
</button>
</div>
</form>
<!-- 연동 저장소 목록 -->
<div class="list">
<div
v-for="repo in repos"
:key="repo.id"
class="repo-row"
>
<div class="repo-ico">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
</svg>
</div>
<div class="repo-main">
<div class="repo-title">
<span class="repo-name">{{ repo.name }}</span>
<span
class="vis"
:class="repo.visibility"
>{{ repo.visibility === 'private' ? '비공개' : '공개' }}</span>
<span
v-if="repo.giteaMissing"
class="missing"
>Gitea 연결 끊김</span>
</div>
<div class="repo-sub">
<span class="slug">{{ repo.slug }}</span>
<span class="dot">·</span>
<span class="branch">{{ repo.branch }}</span>
</div>
</div>
<div class="repo-actions">
<a
v-if="repo.htmlUrl"
:href="repo.htmlUrl"
target="_blank"
rel="noopener noreferrer"
class="btn ghost sm"
>
Gitea 열기
</a>
<button
v-if="canManage"
class="btn danger sm"
type="button"
@click="unlinkRepo(repo)"
>
연동 해제
</button>
</div>
</div>
<div
v-if="loading && repos.length === 0"
class="list-empty"
>
불러오는 중…
</div>
<div
v-else-if="repos.length === 0"
class="list-empty"
>
아직 연동된 저장소가 없습니다.{{ canManage ? ' ‘저장소 연동’으로 추가해 보세요.' : '' }}
</div>
</div>
</div>
<!-- 프로젝트를 찾지 못한 경우 -->
<div
v-else
class="page"
>
<p class="not-found-msg">
요청하신 프로젝트를 찾을 수 없습니다.
</p>
</div>
</AppShell>
</template>
<style scoped>
.crumb {
padding: 1.125rem 0 0.75rem;
}
.crumb .lnk {
color: var(--accent);
text-decoration: none;
}
.crumb .sep {
color: var(--text-3);
margin: 0 0.4375rem;
}
.repos-head {
display: flex;
align-items: flex-start;
gap: 1rem;
margin: 1.125rem 0 1rem;
}
.lede {
flex: 1;
color: var(--text-2);
font-size: 0.844rem;
line-height: 1.6;
}
.btn {
height: 2.25rem;
padding: 0 1rem;
border-radius: var(--radius);
font-size: 0.844rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.375rem;
text-decoration: none;
white-space: nowrap;
}
.btn.sm {
height: 1.875rem;
padding: 0 0.75rem;
font-size: 0.781rem;
}
.btn.primary {
border: none;
background: var(--accent);
color: #fff;
}
.btn.primary:hover {
background: var(--accent-hover);
}
.btn.primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn.ghost {
border: 1px solid var(--border-strong);
background: #fff;
color: var(--text-2);
}
.btn.danger {
border: 1px solid var(--red-border);
background: #fff;
color: var(--red);
}
.btn.danger:hover {
background: var(--red-weak);
}
/* 연동 폼 */
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.625rem;
}
.form {
margin-bottom: 1.125rem;
}
.fblock {
padding: 1.125rem 1.5rem;
border-top: 1px solid var(--border);
}
.fblock:first-child {
border-top: none;
}
.flabel {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.4375rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.flabel .req {
color: var(--accent);
font-weight: 700;
}
.fhint {
font-size: 0.781rem;
color: var(--text-3);
margin-bottom: 0.5625rem;
line-height: 1.5;
}
.tinput {
width: 100%;
height: 2.5rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 0 0.75rem;
font-family: inherit;
font-size: 0.875rem;
color: var(--text);
background: #fff;
}
.tinput:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-weak);
}
textarea.tarea {
min-height: 4.5rem;
padding: 0.625rem 0.75rem;
line-height: 1.6;
resize: vertical;
height: auto;
}
.fstatus {
font-size: 0.781rem;
margin-top: 0.4375rem;
color: var(--text-3);
}
.fstatus.ok {
color: #1b7a3d;
}
.fstatus.bad {
color: var(--red);
}
.radio-row {
display: flex;
gap: 0.5rem;
}
.radio-chip {
height: 2.25rem;
padding: 0 1rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
background: #fff;
font-family: inherit;
font-size: 0.844rem;
font-weight: 600;
color: var(--text-2);
cursor: pointer;
}
.radio-chip.sel {
border-color: var(--accent);
background: var(--accent-weak);
color: var(--accent);
}
.check {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.844rem;
color: var(--text-2);
cursor: pointer;
}
.check code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8125rem;
color: var(--text);
}
.form-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5625rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
background: #fafbfc;
border-radius: 0 0 0.625rem 0.625rem;
}
/* 저장소 목록 */
.list {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.625rem;
}
.repo-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--border);
}
.repo-row:first-child {
border-top: none;
}
.repo-ico {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5625rem;
background: var(--accent-weak);
color: var(--accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.repo-ico svg {
width: 1.1875rem;
height: 1.1875rem;
}
.repo-main {
flex: 1;
min-width: 0;
}
.repo-title {
display: flex;
align-items: center;
gap: 0.5625rem;
flex-wrap: wrap;
}
.repo-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text);
}
.vis {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-2);
background: #f1f2f4;
border-radius: 20px;
padding: 0.125rem 0.5rem;
}
.vis.public {
color: #1b7a3d;
background: var(--green-weak);
}
.missing {
font-size: 0.6875rem;
font-weight: 600;
color: var(--red);
background: var(--red-weak);
border: 1px solid var(--red-border);
border-radius: 20px;
padding: 0.125rem 0.5rem;
}
.repo-sub {
display: flex;
align-items: center;
gap: 0.4375rem;
margin-top: 0.3125rem;
font-size: 0.781rem;
color: var(--text-3);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.repo-sub .dot {
font-family: inherit;
}
.repo-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.list-empty {
padding: 2.5rem 1.25rem;
text-align: center;
color: var(--text-3);
font-size: 0.844rem;
}
.not-found-msg {
padding: 3rem 0;
text-align: center;
color: var(--text-2);
}
</style>
frontend/src/pages/relay/ProjectSettingsPage.vue
+14 -13
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
// 저장소 설정 — 일반 설정 + 위험 구역 (관리자 전용)
// 프로젝트 설정 — 일반 설정 + 위험 구역 (관리자 전용)
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import AppShell from '@/layouts/AppShell.vue'
@@ -29,7 +29,7 @@ const description = ref('')
const visibility = ref<Visibility>('private')
const saving = ref(false)
// 저장소 로드 + 폼 초기화
// 프로젝트 로드 + 폼 초기화
async function loadRepo() {
try {
repo.value = await projectStore.fetchOne(projectId.value)
@@ -38,7 +38,7 @@ async function loadRepo() {
return
}
if (!repo.value) return
// 비관리자는 설정 화면에 진입할 수 없음 — 저장소 상세로 되돌린다(탭도 숨겨져 있어 정상 경로로는 도달 불가)
// 비관리자는 설정 화면에 진입할 수 없음 — 프로젝트 상세로 되돌린다(탭도 숨겨져 있어 정상 경로로는 도달 불가)
if (!repo.value.canManage) {
void router.replace(`/projects/${projectId.value}`)
return
@@ -67,10 +67,10 @@ async function save() {
}
}
// 저장소 삭제 (소유자 전용)
// 프로젝트 삭제 (소유자 전용)
async function removeRepo() {
if (!repo.value || !isOwner.value) return
if (!window.confirm('저장소와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 계속할까요?')) return
if (!window.confirm('프로젝트와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 계속할까요?')) return
try {
await projectStore.remove(projectId.value)
await router.push('/projects')
@@ -91,7 +91,7 @@ async function removeRepo() {
to="/projects"
class="lnk"
>
저장소
프로젝트
</RouterLink>
<span class="sep">/</span>
<RouterLink
@@ -115,6 +115,7 @@ async function removeRepo() {
active="settings"
:task-count="repo.totalCount"
:member-count="memberCount"
:repo-count="repo.repoCount"
:can-manage="repo.canManage"
/>
@@ -136,7 +137,7 @@ async function removeRepo() {
rx="2"
/><path d="M7 11V7a5 5 0 0 1 10 0v4" />
</svg>
저장소 설정은 <b>관리자</b>만 변경할 수 있습니다.
프로젝트 설정은 <b>관리자</b>만 변경할 수 있습니다.
</div>
<!-- 일반 -->
@@ -174,7 +175,7 @@ async function removeRepo() {
공개 범위
</div>
<div class="fhint">
저장소와 그 안의 업무를 누가 볼 수 있는지 결정합니다.
프로젝트와 그 안의 업무를 누가 볼 수 있는지 결정합니다.
</div>
<div class="radio-group">
<button
@@ -199,7 +200,7 @@ async function removeRepo() {
</span>
<span class="rc-body">
<span class="rc-title">비공개</span>
<span class="rc-desc">저장소에 초대된 멤버만 접근하고 업무를 확인할 수 있습니다.</span>
<span class="rc-desc">프로젝트에 초대된 멤버만 접근하고 업무를 확인할 수 있습니다.</span>
</span>
<span class="rc-radio" />
</button>
@@ -223,7 +224,7 @@ async function removeRepo() {
</span>
<span class="rc-body">
<span class="rc-title">공개</span>
<span class="rc-desc">조직 내 모든 구성원이 저장소를 보고 업무 현황을 열람할 수 있습니다.</span>
<span class="rc-desc">조직 내 모든 구성원이 프로젝트를 보고 업무 현황을 열람할 수 있습니다.</span>
</span>
<span class="rc-radio" />
</button>
@@ -250,10 +251,10 @@ async function removeRepo() {
<div class="danger-row">
<div class="dr-main">
<div class="dr-title">
저장소 삭제
프로젝트 삭제
</div>
<div class="dr-desc">
저장소와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 되돌릴 수 없습니다.
프로젝트와 그 안의 모든 업무·활동 기록이 영구 삭제됩니다. 되돌릴 수 없습니다.
<span
v-if="!isOwner"
class="owner-only"
@@ -266,7 +267,7 @@ async function removeRepo() {
:disabled="!isOwner"
@click="removeRepo"
>
저장소 삭제
프로젝트 삭제
</button>
</div>
</div>
frontend/src/router/index.ts
+6
View File
@@ -44,6 +44,12 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/pages/relay/ProjectMembersPage.vue'),
meta: { requiresAuth: true },
},
{
path: '/projects/:projectId/repos',
name: 'project-repos',
component: () => import('@/pages/relay/ProjectReposPage.vue'),
meta: { requiresAuth: true },
},
{
path: '/projects/:projectId/activity',
name: 'project-activity',
frontend/src/types/repo.ts
+4 -7
View File
@@ -9,26 +9,23 @@ export interface ApiMember {
avatarUrl: string | null
}
// 저장소(API 원시) — 백엔드 RepoResponse 와 1:1
// 저장소(API 원시) — 백엔드 RepoResponse 와 1:1. 프로젝트에 연동된 Gitea 저장소(코드 연동 전용).
export interface ApiRepo {
id: string // slugName (라우팅 식별자)
projectId: string // 소속 프로젝트
name: string
owner: string
slug: string // owner/slugName
desc: string | null
visibility: Visibility
branch: string
members: ApiMember[]
memberCount: number
doneCount: number
totalCount: number
cloneUrl: string | null // Gitea HTTPS clone URL (미연동 시 null)
htmlUrl: string | null // Gitea 웹 UI URL (미연동 시 null)
giteaMissing: boolean // Gitea 조직에서 사라진 저장소 표시(동기화로 갱신)
updatedAt: string
// 현재 사용자 권한 — 단건 조회에서만 내려옴(목록은 미포함)
canManage?: boolean // admin (설정 변경/탭 노출)
isOwner?: boolean // 소유자 (저장소 삭제)
canManage?: boolean // 프로젝트 admin (설정 변경)
isOwner?: boolean // 프로젝트 소유자
}
// 저장소 생성 요청