네이밍 규칙

12.4.1. 라우트 name 규칙

• 라우트 name은 PascalCase로 작성합니다.
• 도메인 개체를 기반으로 명명합니다. 화면 유형을 접미사로 결합하여 고유성을 확보합니다.
• 중첩 라우트의 자식 라우트는 부모 도메인을 접두사로 포함합니다.

화면 유형	네이밍 패턴	예시
목록	{도메인}List	UserList, ProjectList
상세	{도메인}Detail	UserDetail, ProjectDetail
생성	{도메인}Create	UserCreate, ProjectCreate
수정	{도메인}Edit	UserEdit, ProjectEdit
설정 하위	{부모}{항목}	SettingsProfile, SettingsSecurity

// 올바른 예
{ name: 'UserList' }
{ name: 'UserDetail' }
{ name: 'SettingsProfile' }

// 잘못된 예
{ name: 'user-list' }      // kebab-case 사용 금지
{ name: 'userList' }        // camelCase 사용 금지
{ name: 'Users' }           // 화면 유형 누락

---

12.4.2. path 규칙

• 라우트 path는 kebab-case로 작성합니다.
• 리소스 경로는 복수형을 사용합니다.
• RESTful 패턴을 준수하며, 동사 대신 명사를 사용합니다.
• 동적 세그먼트는 :파라미터명 형식으로 정의합니다.

용도	path 패턴	예시
목록 조회	/{리소스}	/users, /projects
상세 조회	/{리소스}/:id	/users/:id
생성	/{리소스}/new	/users/new
수정	/{리소스}/:id/edit	/users/:id/edit
중첩 리소스	/{부모}/:id/{자식}	/projects/:id/members

// 올바른 예
{ path: '/users' }
{ path: '/users/:id' }
{ path: '/users/new' }
{ path: '/project-members/:id/edit' }

// 잘못된 예
{ path: '/user' }            // 단수형 사용 금지
{ path: '/getUsers' }        // 동사 사용 금지
{ path: '/user_list' }       // snake_case 사용 금지
{ path: '/Users' }           // PascalCase 사용 금지

---

12.4.3. 파라미터 및 쿼리 네이밍

• Path 파라미터는 camelCase로 작성합니다.
• Query 파라미터는 snake_case로 작성합니다.
• 타입 안전한 파라미터 처리를 위해 변환 유틸리티를 사용합니다.

// path 파라미터: camelCase
{ path: '/users/:userId/posts/:postId' }

// query 파라미터: snake_case
// /users?page_size=20&sort_by=created_at

// src/composables/useTypedRoute.ts
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export function useTypedRoute<
  TParams extends Record<string, string> = Record<string, string>,
  TQuery extends Record<string, string> = Record<string, string>,
>() {
  const route = useRoute()

  const typedParams = computed(() => route.params as unknown as TParams)
  const typedQuery = computed(() => route.query as unknown as TQuery)

  return { params: typedParams, query: typedQuery, route }
}

// 사용 예시
interface UserDetailParams {
  userId: string
}

const { params } = useTypedRoute<UserDetailParams>()
const userId = computed(() => Number(params.value.userId))

---

12.4.4. 프로그래밍 방식 네비게이션

• 프로그래밍 방식 네비게이션은 path 대신 name을 사용합니다.
• name 기반 네비게이션은 경로 변경에 영향을 받지 않아 유지보수에 유리합니다.
• Composition API에서는 useRouter와 useRoute composable을 사용합니다.

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 올바른 예: name 기반 네비게이션
router.push({ name: 'UserDetail', params: { id: userId } })
router.replace({ name: 'Login', query: { redirect: route.fullPath } })

// 잘못된 예: path 직접 사용 (사용 금지)
router.push(`/users/${userId}`)
router.push({ path: '/login', query: { redirect: route.fullPath } })

• 템플릿에서도 동일하게 name 기반으로 작성합니다.

<template>
  <!-- 올바른 예 -->
  <RouterLink :to="{ name: 'UserDetail', params: { id: user.id } }">
    {{ user.name }}
  </RouterLink>

  <!-- 잘못된 예 -->
  <RouterLink :to="`/users/${user.id}`">
    {{ user.name }}
  </RouterLink>
</template>

항목	규칙
라우트 name	PascalCase, 도메인 + 화면 유형
라우트 path	kebab-case, 복수형 명사, RESTful
Path 파라미터	camelCase
Query 파라미터	snake_case
네비게이션 방식	name 기반 필수, path 직접 사용 금지
composable 사용	useRouter, useRoute 필수