FC-DEV-FinalProject / FinalProject_2VEN_FE

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

[Design] 투자자 마이페이지 - 나의 문의 CSS #154

Closed ssuminii closed 6 days ago

ssuminii commented 6 days ago

🚀 풀 리퀘스트 제안

closes #127

📋 작업 내용

나의 문의(투자자마이페이지) CSS

🔧 변경 사항

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

📸 스크린샷 (선택 사항)

image

Nov-19-2024 16-03-56

📄 기타

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

Sourcery에 의한 요약

투자자의 마이 페이지에서 '내 문의' 섹션에 대한 CSS 스타일링을 구현하고 개별 문의에 대한 상세 보기를 추가합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Implement CSS styling for the 'My Inquiries' section in the investor's my page and add a detailed view for individual inquiries. New Features: - Add a detailed view for individual inquiries in the investor's my page section. Enhancements: - Enhance the investor's my page by implementing CSS styling for the 'My Inquiries' section, improving the user interface.
sourcery-ai[bot] commented 6 days ago

리뷰어 가이드 by Sourcery

이 PR은 마이페이지 섹션의 투자자 문의 페이지에 대한 CSS 스타일링 및 라우팅을 구현합니다. 구현에는 페이지네이션이 있는 문의를 표시하기 위한 테이블 기반 레이아웃이 포함되며, 문의 목록 및 상세 페이지에 대한 새로운 경로가 추가됩니다.

MyInquiriesPage 및 MyInquiresDetailPage의 클래스 다이어그램

classDiagram
    class MyInquiriesPage {
        +myInquirie: Array
        +investorMypageWrapper: css
        +titleWrapper: css
        +tableWrapper: css
        +rowStyle: css
        +headerStyle: css
        +inquirieTitleStyle: css
        +traderInfoStyle: css
        +statusStyle(status: string): css
    }
    class MyInquiresDetailPage {
        +render(): JSX.Element
    }
    MyInquiriesPage --> MyInquiresDetailPage : "navigates to"

파일 수준 변경 사항

변경 사항 세부 사항 파일
emotion/css를 사용하여 스타일드 컴포넌트로 문의 목록 페이지 UI 구현
  • 문의 표시를 위한 그리드 템플릿 열로 테이블 레이아웃 생성
  • 문의 제목, 트레이더 정보 및 상태 표시기 스타일 추가
  • 말줄임표로 응답형 텍스트 잘림 구현
  • '대기 중' 및 '완료' 상태에 대한 다른 스타일의 상태 표시기 추가
  • 페이지네이션 컴포넌트 통합
src/pages/mypage/investor/MyInquiriesPage.tsx
문의 페이지에 대한 라우팅 구조 업데이트
  • 문의 상세 페이지에 대한 새로운 경로 추가
  • 문의 경로를 LIST 및 DETAIL 경로로 분할
  • 새로운 경로 상수를 사용하도록 네비게이션 링크 업데이트
src/route/Router.tsx
src/constants/routes.ts
src/components/navigation/InvestorMypageNav.tsx
새로운 문의 상세 페이지 컴포넌트 추가
  • 문의 세부 사항에 대한 플레이스홀더 컴포넌트 생성
src/pages/mypage/investor/MyInquiresDetailPage.tsx

연결된 이슈에 대한 평가

이슈 목표 해결됨 설명
#127 투자자의 마이페이지 문의 섹션에 대한 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 CSS styling and routing for the investor's inquiry page in the mypage section. The implementation includes a table-based layout for displaying inquiries with pagination, and adds new routes for both the inquiry list and detail pages. #### Class diagram for MyInquiriesPage and MyInquiresDetailPage ```mermaid classDiagram class MyInquiriesPage { +myInquirie: Array +investorMypageWrapper: css +titleWrapper: css +tableWrapper: css +rowStyle: css +headerStyle: css +inquirieTitleStyle: css +traderInfoStyle: css +statusStyle(status: string): css } class MyInquiresDetailPage { +render(): JSX.Element } MyInquiriesPage --> MyInquiresDetailPage : "navigates to" ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented the inquiry list page UI with styled components using emotion/css |
  • Created a table layout with grid template columns for displaying inquiries
  • Added styling for inquiry title, trader info, and status indicators
  • Implemented responsive text truncation with ellipsis
  • Added status indicators with different styles for 'waiting' and 'completed' states
  • Integrated pagination component
| `src/pages/mypage/investor/MyInquiriesPage.tsx` | | Updated routing structure for inquiry pages |
  • Added new route for inquiry detail page
  • Split inquiry routes into LIST and DETAIL paths
  • Updated navigation links to use new route constants
| `src/route/Router.tsx`
`src/constants/routes.ts`
`src/components/navigation/InvestorMypageNav.tsx` | | Added new inquiry detail page component |
  • Created a placeholder component for inquiry details
| `src/pages/mypage/investor/MyInquiresDetailPage.tsx` | ### Assessment against linked issues | Issue | Objective | Addressed | Explanation | | ------ | ------- | ----- | ----- | | #127 | Implement CSS styling for the investor's mypage inquiry section | ✅ | | ### Possibly linked issues - **#127**: PR addresses the CSS styling for '나의 문의' as described in the issue. ---
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 6 days ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit 91495c8a07b1addf87feb1dd5d0f756e9f79856d
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/673c3ba7f28a380008322f24
Deploy Preview https://deploy-preview-154--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.