FC-DEV-FinalProject / FinalProject_2VEN_FE

데브코스 파이널프로젝트 시스메틱 2조 이븐한조 FE 리포지토리
0 stars 1 forks source link

[Design] 전략 승인 관리 스타일링(추후 MSW 연결, api 연결) #198

Closed seoyoonyi closed 1 day ago

seoyoonyi commented 1 day ago

🚀 풀 리퀘스트 제안

closes #195

📋 작업 내용

https://deploy-preview-198--sysmetics.netlify.app/admin/strategies/approval

🔧 변경 사항

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

📸 스크린샷 (선택 사항)

image

📄 기타

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

Sourcery에 의한 요약

모의 데이터를 사용하여 전략 승인 관리 페이지를 구현하고, 승인 및 거부 작업을 위한 모달을 포함합니다. 사용성을 향상시키기 위해 테이블에 수평 스크롤을 추가합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Implement a strategy approval management page using mock data, including a modal for approval and rejection actions. Enhance the table with horizontal scrolling for improved usability. New Features: - Implement a strategy approval management page with mock data for strategy requests. Enhancements: - Add horizontal scrolling to the strategy approval table for better navigation.
sourcery-ai[bot] commented 1 day ago

리뷰어 가이드 by Sourcery

이 PR은 모의 데이터를 사용하여 전략 승인 관리 페이지 UI를 구현합니다. 구현에는 전략 세부 정보를 표시하는 테이블, 모달을 통한 승인/거부 기능, 다양한 전략 상태에 대한 상태 표시기가 포함됩니다.

변경 사항이 간단해 보이며 시각적 표현이 필요하지 않아 다이어그램이 생성되지 않았습니다.

파일 수준 변경 사항

변경 사항 세부 사항 파일
반응형 디자인으로 전략 승인 목록 테이블 구현
  • 전략 이름, 상태, 등록 날짜, 유형, 공개 여부 및 관리에 대한 열을 포함한 테이블 구조 생성
  • 작은 화면을 위한 수평 스크롤 기능 추가
  • colgroup을 사용하여 반응형 열 너비 구현
  • 긴 전략 제목에 대한 줄임표 추가
  • 여러 자산에 대한 수량 표시기와 함께 자산 클래스 아이콘 통합
src/pages/admin/strategy/StrategyApprovalListPage.tsx
승인 및 거부 작업을 위한 모달 기능 추가
  • 전략 승인을 위한 확인 모달 구현
  • 거부 사유를 위한 텍스트 영역이 있는 거부 모달 생성
  • 거부 메시지에 대한 문자 수 제한(300) 추가
src/pages/admin/strategy/StrategyApprovalListPage.tsx
src/components/page/admin/RejectTextarea.tsx
전략 상태 시각화 시스템 구현
  • 색상 코드가 있는 상태 레이블 생성
  • 다양한 전략 상태(운용 중, 운용 종료, 운용 대기)에 대한 지원 추가
  • 게시물 상태 변환을 처리하기 위한 유틸리티 함수 구현
src/components/page/admin/strategyStatusLabel.tsx
src/utils/statusUtils.ts

연결된 이슈에 대한 평가

이슈 목표 해결됨 설명
#195 모의 데이터를 사용하여 관리자 섹션의 전략 승인 관리 페이지에 대한 CSS 스타일 구현

연결될 가능성이 있는 이슈


팁 및 명령어 #### 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 strategy approval management page UI with mock data. The implementation includes a table displaying strategy details, approval/rejection functionality through modals, and status indicators for different strategy states. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented the strategy approval list table with responsive design |
  • Created a table structure with columns for strategy name, status, registration date, type, publicity, and management
  • Added horizontal scroll functionality for smaller screens
  • Implemented responsive column widths using colgroup
  • Added ellipsis for long strategy titles
  • Integrated asset class icons with count indicator for multiple assets
| `src/pages/admin/strategy/StrategyApprovalListPage.tsx` | | Added modal functionality for approval and rejection actions |
  • Implemented confirmation modal for strategy approval
  • Created a rejection modal with textarea for rejection reasons
  • Added character count limit (300) for rejection messages
| `src/pages/admin/strategy/StrategyApprovalListPage.tsx`
`src/components/page/admin/RejectTextarea.tsx` | | Implemented strategy status visualization system |
  • Created status labels with color-coded indicators
  • Added support for different strategy states (운용 중, 운용 종료, 운용 대기)
  • Implemented utility function for handling post status conversion
| `src/components/page/admin/strategyStatusLabel.tsx`
`src/utils/statusUtils.ts` | ### Assessment against linked issues | Issue | Objective | Addressed | Explanation | | ------ | ------- | ----- | ----- | | #195 | Implement CSS styling for the strategy approval management page in admin section with mock data | ✅ | | ### Possibly linked issues - **#195**: PR addresses the issue by implementing CSS and mock data for strategy approval management. ---
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).
netlify[bot] commented 1 day ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit 1da50ee99c30e3e51cd7aec430211350ed60e7ce
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/67430f1701bad70008dcee40
Deploy Preview https://deploy-preview-198--sysmetics.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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