카테고리
This commit is contained in:
parent
573a300a4a
commit
fe1c99c727
|
|
@ -148,7 +148,12 @@ class TableCategoryValueService {
|
|||
AND (company_code = $4 OR company_code = '*')
|
||||
`;
|
||||
|
||||
const params: any[] = [tableName, columnName, siblingMenuIds, companyCode];
|
||||
const params: any[] = [
|
||||
tableName,
|
||||
columnName,
|
||||
siblingMenuIds,
|
||||
companyCode,
|
||||
];
|
||||
|
||||
if (!includeInactive) {
|
||||
query += ` AND is_active = true`;
|
||||
|
|
@ -246,7 +251,7 @@ class TableCategoryValueService {
|
|||
value.icon || null,
|
||||
value.isActive !== false,
|
||||
value.isDefault || false,
|
||||
value.menuId, // menuId 추가
|
||||
value.menuId, // menuId 추가
|
||||
companyCode,
|
||||
userId,
|
||||
]);
|
||||
|
|
@ -494,4 +499,3 @@ class TableCategoryValueService {
|
|||
}
|
||||
|
||||
export default new TableCategoryValueService();
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
**공통코드**와 유사하지만 **메뉴별로 독립적으로 관리**되는 코드 시스템입니다.
|
||||
|
||||
**주요 특징**:
|
||||
|
||||
- 메뉴별 독립 관리: 각 화면(메뉴)마다 별도의 카테고리 목록 관리
|
||||
- 계층 구조 지원: 상위 카테고리 → 하위 카테고리 (최대 3단계)
|
||||
- 멀티테넌시: 회사별로 독립적으로 관리
|
||||
|
|
@ -20,16 +21,19 @@
|
|||
### 1.2 사용 예시
|
||||
|
||||
#### 프로젝트 관리 화면
|
||||
|
||||
- 프로젝트 유형: 개발, 유지보수, 컨설팅
|
||||
- 프로젝트 상태: 계획, 진행중, 완료, 보류
|
||||
- 우선순위: 긴급, 높음, 보통, 낮음
|
||||
|
||||
#### 계약관리 화면
|
||||
|
||||
- 계약 유형: 판매, 구매, 임대, 용역
|
||||
- 계약 상태: 작성중, 검토중, 체결, 종료
|
||||
- 결제 방식: 현금, 카드, 계좌이체, 어음
|
||||
|
||||
#### 자산관리 화면
|
||||
|
||||
- 자산 분류: IT장비, 비품, 차량, 부동산
|
||||
- 자산 상태: 정상, 수리중, 폐기, 분실
|
||||
- 위치: 본사, 지점A, 지점B, 창고
|
||||
|
|
@ -546,9 +550,7 @@ class CategoryService {
|
|||
const checkResult = await pool.query(checkQuery, [valueId, companyCode]);
|
||||
|
||||
if (parseInt(checkResult.rows[0].count) > 0) {
|
||||
throw new Error(
|
||||
"하위 카테고리 값이 있어 삭제할 수 없습니다"
|
||||
);
|
||||
throw new Error("하위 카테고리 값이 있어 삭제할 수 없습니다");
|
||||
}
|
||||
|
||||
// 비활성화
|
||||
|
|
@ -899,9 +901,10 @@ import { CategoryConfig, CategoryValue } from "@/types/category";
|
|||
*/
|
||||
export async function getCategoriesByMenu(menuObjid: number) {
|
||||
try {
|
||||
const response = await apiClient.get<{ success: boolean; data: CategoryConfig[] }>(
|
||||
`/api/categories/menu/${menuObjid}`
|
||||
);
|
||||
const response = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: CategoryConfig[];
|
||||
}>(`/api/categories/menu/${menuObjid}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 목록 조회 실패:", error);
|
||||
|
|
@ -914,9 +917,10 @@ export async function getCategoriesByMenu(menuObjid: number) {
|
|||
*/
|
||||
export async function getCategoryValues(categoryId: string) {
|
||||
try {
|
||||
const response = await apiClient.get<{ success: boolean; data: CategoryValue[] }>(
|
||||
`/api/categories/${categoryId}/values`
|
||||
);
|
||||
const response = await apiClient.get<{
|
||||
success: boolean;
|
||||
data: CategoryValue[];
|
||||
}>(`/api/categories/${categoryId}/values`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 값 조회 실패:", error);
|
||||
|
|
@ -929,10 +933,10 @@ export async function getCategoryValues(categoryId: string) {
|
|||
*/
|
||||
export async function createCategory(config: CategoryConfig) {
|
||||
try {
|
||||
const response = await apiClient.post<{ success: boolean; data: CategoryConfig }>(
|
||||
"/api/categories",
|
||||
config
|
||||
);
|
||||
const response = await apiClient.post<{
|
||||
success: boolean;
|
||||
data: CategoryConfig;
|
||||
}>("/api/categories", config);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 생성 실패:", error);
|
||||
|
|
@ -945,10 +949,10 @@ export async function createCategory(config: CategoryConfig) {
|
|||
*/
|
||||
export async function addCategoryValue(value: CategoryValue) {
|
||||
try {
|
||||
const response = await apiClient.post<{ success: boolean; data: CategoryValue }>(
|
||||
"/api/categories/values",
|
||||
value
|
||||
);
|
||||
const response = await apiClient.post<{
|
||||
success: boolean;
|
||||
data: CategoryValue;
|
||||
}>("/api/categories/values", value);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 값 추가 실패:", error);
|
||||
|
|
@ -959,12 +963,15 @@ export async function addCategoryValue(value: CategoryValue) {
|
|||
/**
|
||||
* 카테고리 값 수정
|
||||
*/
|
||||
export async function updateCategoryValue(valueId: number, updates: Partial<CategoryValue>) {
|
||||
export async function updateCategoryValue(
|
||||
valueId: number,
|
||||
updates: Partial<CategoryValue>
|
||||
) {
|
||||
try {
|
||||
const response = await apiClient.put<{ success: boolean; data: CategoryValue }>(
|
||||
`/api/categories/values/${valueId}`,
|
||||
updates
|
||||
);
|
||||
const response = await apiClient.put<{
|
||||
success: boolean;
|
||||
data: CategoryValue;
|
||||
}>(`/api/categories/values/${valueId}`, updates);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 값 수정 실패:", error);
|
||||
|
|
@ -977,9 +984,10 @@ export async function updateCategoryValue(valueId: number, updates: Partial<Cate
|
|||
*/
|
||||
export async function deleteCategoryValue(valueId: number) {
|
||||
try {
|
||||
const response = await apiClient.delete<{ success: boolean; message: string }>(
|
||||
`/api/categories/values/${valueId}`
|
||||
);
|
||||
const response = await apiClient.delete<{
|
||||
success: boolean;
|
||||
message: string;
|
||||
}>(`/api/categories/values/${valueId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error("카테고리 값 삭제 실패:", error);
|
||||
|
|
@ -1001,7 +1009,7 @@ export type WebType =
|
|||
| "datetime"
|
||||
| "select"
|
||||
| "entity"
|
||||
| "category" // 신규 추가
|
||||
| "category" // 신규 추가
|
||||
| "textarea"
|
||||
| "boolean"
|
||||
| "checkbox"
|
||||
|
|
@ -1022,13 +1030,23 @@ export type WebType =
|
|||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Plus, X, ChevronRight } from "lucide-react";
|
||||
import { getCategoriesByMenu, getCategoryValues, addCategoryValue } from "@/lib/api/category";
|
||||
import {
|
||||
getCategoriesByMenu,
|
||||
getCategoryValues,
|
||||
addCategoryValue,
|
||||
} from "@/lib/api/category";
|
||||
import { CategoryConfig, CategoryValue } from "@/types/category";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
|
|
@ -1038,14 +1056,14 @@ interface CategoryTypeConfigPanelProps {
|
|||
menuObjid?: number;
|
||||
}
|
||||
|
||||
export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = ({
|
||||
config,
|
||||
onUpdate,
|
||||
menuObjid,
|
||||
}) => {
|
||||
export const CategoryTypeConfigPanel: React.FC<
|
||||
CategoryTypeConfigPanelProps
|
||||
> = ({ config, onUpdate, menuObjid }) => {
|
||||
const { toast } = useToast();
|
||||
const [categories, setCategories] = useState<CategoryConfig[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>(config.categoryId || "");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>(
|
||||
config.categoryId || ""
|
||||
);
|
||||
const [categoryValues, setCategoryValues] = useState<CategoryValue[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
|
|
@ -1161,12 +1179,16 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
</Badge>
|
||||
<span className="text-sm">{value.valueLabel}</span>
|
||||
</div>
|
||||
{value.children && value.children.length > 0 && renderCategoryValues(value.children, depth + 1)}
|
||||
{value.children &&
|
||||
value.children.length > 0 &&
|
||||
renderCategoryValues(value.children, depth + 1)}
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
const selectedCategoryConfig = categories.find((c) => c.categoryId === selectedCategory);
|
||||
const selectedCategoryConfig = categories.find(
|
||||
(c) => c.categoryId === selectedCategory
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
|
|
@ -1179,7 +1201,11 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((cat) => (
|
||||
<SelectItem key={cat.categoryId} value={cat.categoryId} className="text-xs sm:text-sm">
|
||||
<SelectItem
|
||||
key={cat.categoryId}
|
||||
value={cat.categoryId}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
{cat.categoryName}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
@ -1198,7 +1224,9 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
<Checkbox
|
||||
id="multiSelect"
|
||||
checked={config.isMultiSelect || false}
|
||||
onCheckedChange={(checked) => onUpdate({ isMultiSelect: checked as boolean })}
|
||||
onCheckedChange={(checked) =>
|
||||
onUpdate({ isMultiSelect: checked as boolean })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="multiSelect" className="text-xs sm:text-sm">
|
||||
다중 선택 허용
|
||||
|
|
@ -1209,7 +1237,9 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
{/* 카테고리 값 목록 */}
|
||||
{selectedCategory && categoryValues.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-xs font-medium sm:text-sm">카테고리 값 목록</Label>
|
||||
<Label className="text-xs font-medium sm:text-sm">
|
||||
카테고리 값 목록
|
||||
</Label>
|
||||
<div className="mt-2 max-h-64 overflow-y-auto rounded-md border p-2">
|
||||
{renderCategoryValues(categoryValues)}
|
||||
</div>
|
||||
|
|
@ -1220,15 +1250,26 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
{selectedCategory && selectedCategoryConfig?.allowCustomValues && (
|
||||
<div>
|
||||
{!isAddingValue ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setIsAddingValue(true)} className="w-full">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
새 값 추가
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsAddingValue(true)}
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />새 값 추가
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-y-2 rounded-md border p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium sm:text-sm">새 카테고리 값</Label>
|
||||
<Button variant="ghost" size="icon" onClick={() => setIsAddingValue(false)} className="h-6 w-6">
|
||||
<Label className="text-xs font-medium sm:text-sm">
|
||||
새 카테고리 값
|
||||
</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsAddingValue(false)}
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -1256,8 +1297,17 @@ export const CategoryTypeConfigPanel: React.FC<CategoryTypeConfigPanelProps> = (
|
|||
{selectedCategoryConfig && (
|
||||
<div className="rounded-md bg-muted p-3 text-xs">
|
||||
<div className="flex gap-2">
|
||||
<Badge variant={selectedCategoryConfig.allowCustomValues ? "default" : "secondary"} className="text-[10px]">
|
||||
{selectedCategoryConfig.allowCustomValues ? "사용자 정의 허용" : "고정 값"}
|
||||
<Badge
|
||||
variant={
|
||||
selectedCategoryConfig.allowCustomValues
|
||||
? "default"
|
||||
: "secondary"
|
||||
}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{selectedCategoryConfig.allowCustomValues
|
||||
? "사용자 정의 허용"
|
||||
: "고정 값"}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
최대 깊이: {selectedCategoryConfig.maxDepth}단계
|
||||
|
|
@ -1348,12 +1398,14 @@ const renderCategoryOptions = (values: CategoryValue[], depth: number = 0) => {
|
|||
### 시나리오 1: 프로젝트 관리 화면에서 카테고리 사용
|
||||
|
||||
1. **관리자가 카테고리 생성**
|
||||
|
||||
- 화면관리에서 "프로젝트 관리" 화면 선택
|
||||
- 카테고리 관리 메뉴로 이동
|
||||
- "프로젝트 유형" 카테고리 생성
|
||||
- 값 추가: 개발, 유지보수, 컨설팅
|
||||
|
||||
2. **화면에 카테고리 컴포넌트 배치**
|
||||
|
||||
- 위젯 추가 → 웹타입: "category" 선택
|
||||
- 카테고리 선택: "프로젝트 유형"
|
||||
- 라벨 설정: "프로젝트 유형"
|
||||
|
|
@ -1366,6 +1418,7 @@ const renderCategoryOptions = (values: CategoryValue[], depth: number = 0) => {
|
|||
### 시나리오 2: 계층 구조 카테고리
|
||||
|
||||
1. **관리자가 3단계 카테고리 생성**
|
||||
|
||||
- "지역" 카테고리 생성 (maxDepth: 3)
|
||||
- 1단계: 서울특별시, 부산광역시
|
||||
- 2단계: 강남구, 송파구 (서울 하위)
|
||||
|
|
@ -1457,12 +1510,14 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
## 8. 구현 체크리스트
|
||||
|
||||
### 데이터베이스 ✅
|
||||
|
||||
- [ ] 마이그레이션 파일 작성 (036_create_menu_categories.sql)
|
||||
- [ ] 테이블 생성 및 인덱스
|
||||
- [ ] 샘플 데이터 삽입
|
||||
- [ ] 외래키 제약조건 설정
|
||||
|
||||
### 백엔드 ✅
|
||||
|
||||
- [ ] 타입 정의 (backend-node/src/types/category.ts)
|
||||
- [ ] 서비스 레이어 (categoryService.ts)
|
||||
- [ ] 컨트롤러 레이어 (categoryController.ts)
|
||||
|
|
@ -1470,6 +1525,7 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
- [ ] app.ts에 라우트 등록
|
||||
|
||||
### 프론트엔드 ✅
|
||||
|
||||
- [ ] 타입 정의 (frontend/types/category.ts)
|
||||
- [ ] API 클라이언트 (frontend/lib/api/category.ts)
|
||||
- [ ] WebType에 "category" 추가
|
||||
|
|
@ -1478,6 +1534,7 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
- [ ] RealtimePreview에 렌더링 로직 추가
|
||||
|
||||
### 테스트 ✅
|
||||
|
||||
- [ ] 카테고리 생성/조회/수정/삭제 API 테스트
|
||||
- [ ] 메뉴별 카테고리 필터링 테스트
|
||||
- [ ] 계층 구조 렌더링 테스트
|
||||
|
|
@ -1488,18 +1545,22 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
## 9. 향후 확장 가능성
|
||||
|
||||
### 9.1 동적 카테고리 검색
|
||||
|
||||
- 카테고리 값이 많을 때 Combobox로 변경
|
||||
- 자동완성 검색 기능
|
||||
|
||||
### 9.2 카테고리 템플릿
|
||||
|
||||
- 자주 사용하는 카테고리를 템플릿으로 저장
|
||||
- 새 메뉴 생성 시 템플릿 적용
|
||||
|
||||
### 9.3 카테고리 분석
|
||||
|
||||
- 가장 많이 사용되는 카테고리 값 통계
|
||||
- 사용되지 않는 카테고리 값 정리 제안
|
||||
|
||||
### 9.4 카테고리 권한 관리
|
||||
|
||||
- 특정 사용자만 특정 카테고리 값 선택 가능
|
||||
- 카테고리 값별 접근 권한 설정
|
||||
|
||||
|
|
@ -1510,6 +1571,7 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
**카테고리 시스템**은 채번 규칙과 유사한 구조로 메뉴별로 독립적으로 관리되는 코드 시스템입니다.
|
||||
|
||||
**핵심 특징**:
|
||||
|
||||
- ✅ 메뉴별 독립 관리
|
||||
- ✅ 계층 구조 지원 (최대 3단계)
|
||||
- ✅ 멀티테넌시 격리
|
||||
|
|
@ -1517,8 +1579,8 @@ SELECT 'Migration 036: Menu Categories created successfully!' AS status;
|
|||
- ✅ 다중 선택 옵션
|
||||
|
||||
**공통코드와의 차이점**:
|
||||
|
||||
- 공통코드: 전사 공통 (모든 메뉴에서 동일)
|
||||
- 카테고리: 메뉴별 독립 (각 화면마다 다른 값)
|
||||
|
||||
이제 이 계획서를 기반으로 구현을 시작하시겠습니까?
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue