Refactor/fe design#96
Conversation
Summary of ChangesHello @now-eat-krap, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request primarily focuses on enhancing the frontend design and user experience of the dashboard. Key changes include making UI elements more responsive, especially for mobile users, and streamlining the default theme. Additionally, it optimizes the development environment by reducing seed data, contributing to a more efficient workflow. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several frontend design changes and refactorings. Key changes include making headers non-sticky, setting a default light theme, and refactoring CSS classes for dialogs. A number of widget metadata properties related to minimum dimensions have been removed, standardizing widget resizing behavior.
However, there are a couple of issues to address:
- In
docker-compose.dev.yml, comments for seed data configuration are now outdated and need to be updated. - In the dashboard page, the tutorial dialog has been refactored, but this has resulted in the removal of the step description and the primary button to close the tutorial, which impacts user experience.
이 PR은 몇 가지 프론트엔드 디자인 변경 및 리팩토링을 도입합니다. 주요 변경 사항에는 헤더를 고정되지 않도록 만들고, 기본 라이트 테마를 설정하고, 대화 상자의 CSS 클래스를 리팩토링하는 것이 포함됩니다. 최소 치수와 관련된 여러 위젯 메타데이터 속성이 제거되어 위젯 크기 조정 동작이 표준화되었습니다.
하지만 해결해야 할 몇 가지 문제가 있습니다.
docker-compose.dev.yml에서 시드 데이터 구성에 대한 주석이 오래되어 업데이트가 필요합니다.- 대시보드 페이지에서 튜토리얼 대화 상자가 리팩토링되었지만, 이로 인해 단계 설명과 튜토리얼을 닫는 기본 버튼이 제거되어 사용자 경험에 영향을 미칩니다.
| {!isMobileView && ( | ||
| <Dialog | ||
| open={isTutorialOpen} | ||
| onOpenChange={(open) => { | ||
| if (!open) { | ||
| dismissTutorial() | ||
| } | ||
| }} | ||
| > | ||
| <DialogContent className={tutorialDialogClasses}> | ||
| <DialogHeader> | ||
| <DialogTitle>{tutorialContent.title}</DialogTitle> | ||
| <DialogDescription>{tutorialContent.subtitle}</DialogDescription> | ||
| </DialogHeader> | ||
| <div className="flex flex-1 flex-col gap-6 overflow-hidden"> | ||
| <div className="flex-1 rounded-xl border bg-muted/20 p-4"> | ||
| <div className={tutorialStepListClasses}> | ||
| {tutorialSlides.map((step, index) => { | ||
| const isActive = index === activeTutorialIndex | ||
| if (isMobileView && !isActive) { | ||
| return null | ||
| } | ||
| return ( | ||
| <button | ||
| key={`${step.title}-${index}`} | ||
| type="button" | ||
| className={`flex items-center gap-2 rounded-full border ${ | ||
| isMobileView ? "w-full justify-center px-4 py-3 text-base" : "px-4 py-2 text-sm" | ||
| } font-medium transition ${ | ||
| isActive | ||
| ? "border-primary bg-primary/10 text-primary" | ||
| : "border-border/70 bg-background text-muted-foreground hover:border-primary/40" | ||
| }`} | ||
| onClick={() => handleTutorialStepClick(index)} | ||
| > | ||
| {index + 1} | ||
| </span> | ||
| <span className={isMobileView ? "text-left text-sm font-semibold" : "hidden text-left sm:block"}> | ||
| {step.title} | ||
| </span> | ||
| </button> | ||
| ) | ||
| })} | ||
| </div> | ||
| <div className={tutorialPreviewContainerClasses}> | ||
| {!isMobileView && ( | ||
| <Button | ||
| variant="outline" | ||
| size="icon" | ||
| onClick={goToPreviousTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Previous tutorial preview" | ||
| className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 shadow-lg backdrop-blur" | ||
| > | ||
| <ChevronLeft className="h-5 w-5" /> | ||
| </Button> | ||
| )} | ||
| <img | ||
| src={activeTutorialImage} | ||
| alt={`${tutorialContent.imageAlt} - ${activeTutorialSlide?.title ?? ""}`} | ||
| className="h-full w-full object-contain" | ||
| /> | ||
| {!isMobileView && ( | ||
| <Button | ||
| variant="outline" | ||
| size="icon" | ||
| onClick={goToNextTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Next tutorial preview" | ||
| className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 shadow-lg backdrop-blur" | ||
| > | ||
| <ChevronRight className="h-5 w-5" /> | ||
| </Button> | ||
| )} | ||
| {isMobileView && ( | ||
| <div className="absolute inset-x-0 bottom-3 flex items-center justify-between px-4"> | ||
| <span | ||
| className={`flex h-9 w-9 items-center justify-center rounded-full text-base font-semibold ${ | ||
| isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground" | ||
| }`} | ||
| > | ||
| {index + 1} | ||
| </span> | ||
| <span className={isMobileView ? "text-left text-sm font-semibold" : "hidden text-left sm:block"}> | ||
| {step.title} | ||
| </span> | ||
| </button> | ||
| ) | ||
| })} | ||
| </div> | ||
| <div className={tutorialPreviewContainerClasses}> | ||
| {!isMobileView && ( | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| size="icon" | ||
| onClick={goToPreviousTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Previous tutorial preview" | ||
| className="rounded-full bg-background/90 shadow" | ||
| className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 shadow-lg backdrop-blur" | ||
| > | ||
| <ChevronLeft className="h-4 w-4" /> | ||
| <ChevronLeft className="h-5 w-5" /> | ||
| </Button> | ||
| )} | ||
| <img | ||
| src={activeTutorialImage} | ||
| alt={`${tutorialContent.imageAlt} - ${activeTutorialSlide?.title ?? ""}`} | ||
| className="h-full w-full object-contain" | ||
| /> | ||
| {!isMobileView && ( | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| size="icon" | ||
| onClick={goToNextTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Next tutorial preview" | ||
| className="rounded-full bg-background/90 shadow" | ||
| className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-background/80 shadow-lg backdrop-blur" | ||
| > | ||
| <ChevronRight className="h-4 w-4" /> | ||
| <ChevronRight className="h-5 w-5" /> | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className={tutorialDetailsCardClasses}> | ||
| <div> | ||
| <p className="text-base font-semibold text-foreground flex items-center gap-2"> | ||
| <span | ||
| className={`flex items-center justify-center rounded-full border border-primary bg-background text-primary ${ | ||
| isMobileView ? "h-8 w-8 text-base" : "h-10 w-10 text-lg" | ||
| }`} | ||
| > | ||
| {activeTutorialIndex + 1} | ||
| </span> | ||
| {activeTutorialSlide?.title} | ||
| </p> | ||
| <p className="mt-2 text-sm text-muted-foreground">{activeTutorialSlide?.description}</p> | ||
| {activeTutorialSlide?.details && ( | ||
| <p className="mt-2 text-sm text-muted-foreground opacity-90">{activeTutorialSlide.details}</p> | ||
| )} | ||
| </div> | ||
| <div | ||
| className={`flex flex-wrap items-center justify-between gap-4 ${ | ||
| isMobileView ? "flex-col items-stretch" : "" | ||
| }`} | ||
| > | ||
| <span className={`text-sm text-muted-foreground ${isMobileView ? "text-center" : ""}`}> | ||
| {totalTutorialSlides > 0 ? `${activeTutorialIndex + 1} / ${totalTutorialSlides}` : null} | ||
| </span> | ||
| <Button | ||
| variant="default" | ||
| onClick={dismissTutorial} | ||
| className={`${isMobileView ? "w-full" : "whitespace-nowrap"}`} | ||
| > | ||
| {tutorialContent.primaryCta} | ||
| </Button> | ||
| )} | ||
| {isMobileView && ( | ||
| <div className="absolute inset-x-0 bottom-3 flex items-center justify-between px-4"> | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={goToPreviousTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Previous tutorial preview" | ||
| className="rounded-full bg-background/90 shadow" | ||
| > | ||
| <ChevronLeft className="h-4 w-4" /> | ||
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={goToNextTutorialSlide} | ||
| disabled={totalTutorialSlides === 0} | ||
| aria-label="Next tutorial preview" | ||
| className="rounded-full bg-background/90 shadow" | ||
| > | ||
| <ChevronRight className="h-4 w-4" /> | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| </DialogContent> | ||
| </Dialog> | ||
| )} |
There was a problem hiding this comment.
The tutorial dialog is missing the section that displays the details of the current step (title, description) and the primary call-to-action button (e.g., "Start building") to dismiss the tutorial. While the dialog can be closed by other means (e.g., pressing Escape), removing the explicit button and the descriptive text is a significant regression in user experience for the tutorial.
튜토리얼 대화 상자에 현재 단계의 세부 정보(제목, 설명)와 튜토리얼을 닫기 위한 기본 CTA 버튼(예: "Start building")을 표시하는 섹션이 누락되었습니다. 다른 방법(예: Esc 키 누르기)으로 대화 상자를 닫을 수는 있지만, 명시적인 버튼과 설명 텍스트를 제거한 것은 튜토리얼의 사용자 경험에 있어 상당한 기능 저하입니다.
| # 시드 개수 / 기간 설정 | ||
| SEED_EVENT_COUNT: 50000 # 5만 개 | ||
| SEED_DAYS: 30 # 최근 30일 |
There was a problem hiding this comment.
The comments for SEED_EVENT_COUNT, SEED_DAYS, and SEED_BATCH_SIZE are outdated after the values were changed. Please update the comments to reflect the new values to avoid confusion.
SEED_EVENT_COUNT, SEED_DAYS, SEED_BATCH_SIZE의 값이 변경되어 주석이 현재 값과 일치하지 않습니다. 혼란을 방지하기 위해 주석을 업데이트하는 것이 좋습니다.
SEED_EVENT_COUNT: 1000 # 1천 개
SEED_DAYS: 8 # 최근 8일
SEED_BATCH_SIZE: 1000 # 1k 라인 단위로 나눠서 write1 participant
🧾 ApiLog
✏️ Summary
frontend design fix
📢 Motivation
📌 Type of Change
🛠️ Implementation Details
🧪 Testing
🖼️ Screenshots / Demos
💬 Notes for Reviewers
✅ Checklist