FC-DEV-FinalProject / final-fe-team4

4조 프론트엔드 깃허브
0 stars 2 forks source link

[Feat] 홈 상단팝업 컨포넌트 #109

Closed miniseung closed 2 weeks ago

miniseung commented 2 weeks ago

홈 상단 팝업 컨포넌트 제작 및 workspace 렌더링 배경이미지 그룹으로 묶어서 추출을 못해서 추후 업데이트 예정

image

Sourcery에 의한 요약

홈 페이지 상단 팝업을 표시하기 위한 HomePopup 컴포넌트를 추가하고, WorkspacePage를 리팩토링하여 이 새로운 컴포넌트를 활용합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Add a HomePopup component to display a top popup on the home page and refactor WorkspacePage to utilize this new component. New Features: - Introduce a new HomePopup component for displaying a top popup on the home page. Enhancements: - Refactor the WorkspacePage to use the new HomePopup component instead of inline popup code.
sourcery-ai[bot] commented 2 weeks ago

리뷰어 가이드 by Sourcery

이 PR은 작업 공간 상단에 표시되는 새로운 홈 팝업 컴포넌트를 구현합니다. 구현에는 배경 이미지와 세 가지 기능을 보여주는 정보 카드가 포함된 메인 팝업 컨테이너가 포함됩니다. 팝업은 닫기 버튼을 통해 해제할 수 있으며 내부적으로 가시성 상태를 유지합니다.

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

파일 수준 변경 사항

변경 사항 세부 사항 파일
기능 카드가 있는 새로운 홈 팝업 컴포넌트 생성
  • 배경 이미지와 닫기 버튼이 있는 메인 팝업 컨테이너 구현
  • 팝업에 대한 제목 및 설명 텍스트 추가
  • 텍스트 음성 변환, 음성 변환 및 Concat을 위한 세 가지 기능 카드 생성
  • 가시성 토글 기능 구현
  • Tailwind CSS 클래스를 사용하여 스타일 추가
src/components/workspace/HomePopup.tsx
src/components/workspace/HomeCard.tsx
src/images/HomePopupbg.svg
기존 페이지에 홈 팝업 통합
  • WorkspacePage에서 이전 팝업 구현 제거
  • WorkspacePage에 HomePopup 컴포넌트 추가
  • ExamplePage에 HomePopup 통합
  • 임포트 업데이트 및 코드 정리
src/pages/WorkspacePage.tsx
src/pages/ExamplePage.tsx

관련 문제일 수 있음


팁 및 명령어 #### 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 a new home popup component that displays at the top of the workspace. The implementation includes a main popup container with a background image and three informational cards showcasing different features. The popup can be dismissed via a close button and maintains its visibility state internally. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Created new home popup component with feature cards |
  • Implemented main popup container with background image and close button
  • Added title and description text for the popup
  • Created three feature cards for Text to Speech, Voice Conversion, and Concat
  • Implemented visibility toggle functionality
  • Added styling using Tailwind CSS classes
| `src/components/workspace/HomePopup.tsx`
`src/components/workspace/HomeCard.tsx`
`src/images/HomePopupbg.svg` | | Integrated home popup into existing pages |
  • Removed old popup implementation from WorkspacePage
  • Added HomePopup component to WorkspacePage
  • Integrated HomePopup into ExamplePage
  • Updated imports and cleaned up code
| `src/pages/WorkspacePage.tsx`
`src/pages/ExamplePage.tsx` | ### Possibly linked issues - **#19**: The PR implements the popup component described in the issue for the main home screen. ---
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).
github-actions[bot] commented 2 weeks ago

Storybook 확인 바로가기

github-actions[bot] commented 2 weeks ago

Visit the preview URL for this PR (updated for commit e1ef465):

https://aipark-four-t--109-us3v23vz.web.app

(expires Mon, 18 Nov 2024 06:42:18 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 0a4b3ef6ecc2c695a6a0d6ade46651e032870a9f

github-actions[bot] commented 2 weeks ago

SonarQube 분석 결과 바로가기

❌ Quality Gate : ERROR

🛑 코드 품질 이슈 : 6

코드 품질향상을 위한 권장사항이며, 수정하지 않아도 무방합니다. 하지만 더 멋진 코드가 될 수 있습니다. 😉

github-actions[bot] commented 2 weeks ago

Storybook 확인 바로가기

nakyeonko3 commented 2 weeks ago

conflict이 발생해서 제거하고 merge 하시면 될 것 같습니다. 단순 import 문이 조금 달라져서 생긴 conflict이니 당황하지 말고 새로 추가된 경로가 있다면 수정해주시고, 아니라면 제거하면 됩니다.

github-actions[bot] commented 2 weeks ago

Storybook 확인 바로가기