[Feat] 상품유형(투자자산분류) 관리 페이지 백엔드 API 적용

[jizerozz]

🚀 풀 리퀘스트 제안

📋 작업 내용

상품유형 조회, 등록, 수정, 삭제 API 반영했습니다. 삭제의 경우 PK제약조건 관련으로 인해 soft delete 처리를 해둔 상태라고 해서 현재 이 부분은 삭제시 isActive 상태가 Y에서 N으로 바뀌며 화면에서 사라지지는 않습니다. 이 부분 백엔드쪽에서 좀 더 고민해보고 괜찮은 처리 방법 알려주신다고 하셔서 좀 더 상의해볼 예정입니다. \이 부분과 이미지 파일 업로드 기능은 결정되는대로 매매유형관리, 상품유형관리에 둘 다 적용해서 올리도록 하겠습니다.

🔧 변경 사항

• [ ] 📃 README.md
• [ ] 📦 package.json
• [ ] 🔥 파일 삭제
• [ ] 🧹 그 외 ex) .gitignore 등

주요 변경 사항을 요약해 주세요.

📸 스크린샷 (선택 사항)

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

[netlify[bot]]

✅ Deploy Preview for sysmetics ready!

Name	Link
🔨 Latest commit	574ab344d384b9ab211e1707f6d435e8ac0c66ce
🔍 Latest deploy log	https://app.netlify.com/sites/sysmetics/deploys/673e9674c53b9c0008d2f68c
😎 Deploy Preview	https://deploy-preview-170--sysmetics.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sourcery-ai[bot]]

리뷰어 가이드 by Sourcery

이 PR은 투자 자산 분류 관리 페이지를 위한 백엔드 API 통합을 구현합니다. 변경 사항은 모의 데이터를 실제 API 호출로 대체하고, 페이지네이션 지원을 추가하며, 투자 자산 유형에 대한 CRUD 작업(생성, 읽기, 업데이트, 삭제)을 구현합니다. 구현은 상태 관리 및 API 호출을 위해 React Query를 사용하며, 적절한 오류 처리와 낙관적 업데이트를 포함합니다.

투자 자산 유형에 대한 CRUD 작업의 시퀀스 다이어그램

sequenceDiagram
    actor User
    participant UI as StockTypeListPage
    participant API as Backend API

    User->>UI: 투자 자산 유형 보기
    UI->>API: fetchInvestmentTypes(page, pageSize)
    API-->>UI: 투자 자산 유형 데이터 반환

    User->>UI: 새로운 투자 자산 유형 추가
    UI->>API: fetchPostInvestmentType(newTypeData)
    API-->>UI: 성공 메시지 반환

    User->>UI: 기존 투자 자산 유형 편집
    UI->>API: fetchPutInvestmentType(updatedTypeData)
    API-->>UI: 성공 메시지 반환

    User->>UI: 투자 자산 유형 삭제
    UI->>API: fetchDeleteInvestmentType(typeId)
    API-->>UI: 성공 메시지 반환

InvestmentAssetProps의 업데이트된 클래스 다이어그램

classDiagram
    class InvestmentAssetProps {
        +number investmentAssetClassesId
        +number order
        +string investmentAssetClassesName
        +string investmentAssetClassesIcon
        +string isActive
    }
    note for InvestmentAssetProps "선택적 investmentAssetClassesId 및 order 속성을 포함하도록 업데이트됨"

파일 수준 변경 사항

변경 사항	세부 사항	파일
투자 자산 유형 관리에 대한 API 통합 구현	CRUD 작업을 위한 API 엔드포인트 추가 투자 유형을 가져오고, 생성하고, 업데이트하고, 삭제하기 위한 API 클라이언트 함수 구현 적절한 오류 처리 및 응답 타이핑 추가 하드코딩된 모의 데이터를 API 응답으로 대체	src/api/stockType.ts src/api/apiEndpoints.ts
상태 관리를 위한 React Query 훅 추가	POST, PUT, DELETE 작업을 위한 사용자 정의 변이 훅 생성 자동 데이터 재페치를 위한 쿼리 무효화 구현 로딩 상태 동안 더 나은 UX를 위한 keepPreviousData 옵션 추가	src/hooks/mutations/useStockType.ts src/pages/admin/stock-type/StockTypeListPage.tsx
페이지네이션 기능 구현	페이지네이션 상태 관리 추가 API 호출과 페이지네이션 통합 페이지 탐색을 위한 UI 구성 요소 추가	src/pages/admin/stock-type/StockTypeListPage.tsx
적절한 데이터 처리를 통한 UI 구성 요소 강화	null/undefined 데이터를 처리하기 위해 TypeTable 구성 요소 업데이트 적절한 타입 검사 및 인터페이스 추가 폼 검증 및 오류 메시지 개선	src/components/page/admin/TypeTable.tsx src/components/page/admin/FileInput.tsx src/types/admin.ts

관련된 문제일 수 있음

• #1: PR은 제품 유형에 대한 CRUD 작업을 포함하여 문제에 설명된 API 통합 작업을 구현합니다.

---

팁 및 명령어

#### Sourcery와 상호작용하기 - **새 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 Sourcery에게 이슈 생성을 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령어를 사용하여 요약을 삽입할 위치를 지정할 수도 있습니다. #### 경험 맞춤화 [대시보드](https://app.sourcery.ai)에 액세스하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하십시오. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하십시오. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.

Original review guide in English

## Reviewer's Guide by Sourcery This PR implements the backend API integration for the investment asset classification management page. The changes replace mock data with real API calls, add pagination support, and implement CRUD operations (Create, Read, Update, Delete) for investment asset types. The implementation uses React Query for state management and API calls, with proper error handling and optimistic updates. #### Sequence diagram for CRUD operations on investment asset types ```mermaid sequenceDiagram actor User participant UI as StockTypeListPage participant API as Backend API User->>UI: View investment asset types UI->>API: fetchInvestmentTypes(page, pageSize) API-->>UI: Return investment asset types data User->>UI: Add new investment asset type UI->>API: fetchPostInvestmentType(newTypeData) API-->>UI: Return success message User->>UI: Edit existing investment asset type UI->>API: fetchPutInvestmentType(updatedTypeData) API-->>UI: Return success message User->>UI: Delete investment asset type UI->>API: fetchDeleteInvestmentType(typeId) API-->>UI: Return success message ``` #### Updated class diagram for InvestmentAssetProps ```mermaid classDiagram class InvestmentAssetProps { +number investmentAssetClassesId +number order +string investmentAssetClassesName +string investmentAssetClassesIcon +string isActive } note for InvestmentAssetProps "Updated to include optional investmentAssetClassesId and order attributes" ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented API integration for investment asset types management |

• Added API endpoints for CRUD operations
• Implemented API client functions for fetching, creating, updating, and deleting investment types
• Added proper error handling and response typing
• Replaced hardcoded mock data with API responses

| `src/api/stockType.ts`
`src/api/apiEndpoints.ts` | | Added React Query hooks for state management |

• Created custom mutation hooks for POST, PUT, and DELETE operations
• Implemented query invalidation for automatic data refetching
• Added keepPreviousData option for better UX during loading states

| `src/hooks/mutations/useStockType.ts`
`src/pages/admin/stock-type/StockTypeListPage.tsx` | | Implemented pagination functionality |

• Added pagination state management
• Integrated pagination with API calls
• Added UI components for page navigation

| `src/pages/admin/stock-type/StockTypeListPage.tsx` | | Enhanced UI components with proper data handling |

• Updated TypeTable component to handle null/undefined data
• Added proper type checking and interfaces
• Improved form validation and error messaging

| `src/components/page/admin/TypeTable.tsx`
`src/components/page/admin/FileInput.tsx`
`src/types/admin.ts` | ### Possibly linked issues - **#1**: The PR implements API integration tasks outlined in the issue, including CRUD operations for product types. ---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).