Fix/profile card

[dasosann]

No description provided.

[qodo-code-review]

Review Summary by Qodo

프로필 슬라이더 상태 관리 및 레이아웃 개선

✨ Enhancement 🐞 Bug fix

Walkthroughs

Description

• 프로필 카드 확장 상태를 부모 컴포넌트에서 관리하도록 리팩토링
• 슬라이더 카드 너비 및 간격 계산 로직 개선
• 다음 카드 미리보기(peek) 기능 추가 구현
• 스크롤 인덱스 계산 시 카드 너비 동적 반영

Diagram

flowchart LR
  A["ProfileSlider<br/>상태 관리"] -->|"isExpanded<br/>onToggleExpanded"| B["ProfileCard<br/>Props 전달"]
  A -->|"PEEK_WIDTH<br/>CARD_GAP"| C["카드 너비<br/>계산"]
  C -->|"동적 스타일"| D["스크롤 레이아웃<br/>개선"]

Loading

File Changes

1. app/main/_components/ProfileCard.tsx ✨ Enhancement +9/-4

프로필 카드 확장 상태 Props 기반 관리

• isExpanded와 onToggleExpanded를 Props로 변경하여 상태 관리 책임 분리
• 로컬 상태(useState) 제거 및 콜백 함수 활용
• 클릭 및 키보드 이벤트에서 onToggleExpanded() 호출로 통일

app/main/_components/ProfileCard.tsx

---

2. app/main/_components/ProfileSlider.tsx ✨ Enhancement +31/-6

슬라이더 레이아웃 및 상태 관리 개선

• PEEK_WIDTH(16px)와 CARD_GAP(8px) 상수 추가로 레이아웃 일관성 확보
• isExpanded 상태와 toggleExpanded 콜백을 슬라이더에서 관리
• 카드 너비를 동적으로 계산하여 다음 카드 미리보기 기능 구현
• 스크롤 이벤트 핸들러에서 프로필 개수에 따른 카드 너비 반영
• 마지막 카드에 marginRight 추가로 우측 여백 처리

app/main/_components/ProfileSlider.tsx

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. diagram: the PR sequence diagram (if enabled). Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Active index drift 🐞 Bug ✓ Correctness

Description

ProfileSlider calculates activeIndex using a per-card width that is CARD_GAP pixels larger than the
actual scroll step implied by the rendered card width and flex gap. This causes activeIndex to
increasingly lag behind the real visible card (e.g., after enough cards), breaking the indicator dot
highlight/positioning.

Code

app/main/_components/ProfileSlider.tsx[R28-34]

    const handleScroll = () => {
-      const index = Math.round(el.scrollLeft / el.clientWidth);
+      const cardWidth =
+        profiles.length > 1
+          ? el.clientWidth - PEEK_WIDTH + CARD_GAP
+          : el.clientWidth;
+      const index = Math.round(el.scrollLeft / cardWidth);
      setActiveIndex(index);

Evidence

The rendered step between successive card start positions is (card width + flex gap). The code sets
card width to 100% - (PEEK_WIDTH + CARD_GAP) and also sets container gap: CARD_GAP, so the step
becomes clientWidth - PEEK_WIDTH. However, the scroll handler divides by `clientWidth - PEEK_WIDTH
+ CARD_GAP, which is larger than the real step, so scrollLeft / cardWidth` underestimates the
index and the error accumulates as index grows; activeIndex then drives the indicator
transform/color.

app/main/_components/ProfileSlider.tsx[24-35]
app/main/_components/ProfileSlider.tsx[46-60]
app/main/_components/ProfileSlider.tsx[70-84]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`activeIndex` is computed with a `cardWidth` divisor that does not match the rendered snap step. Because each card is rendered with width `clientWidth - (PEEK_WIDTH + CARD_GAP)` and the container adds `gap: CARD_GAP`, the step between card starts is `clientWidth - PEEK_WIDTH`. The current divisor adds `+ CARD_GAP`, causing `activeIndex` to lag as you scroll through many cards.

### Issue Context
This value feeds the indicator transform/highlight, so an incorrect index desynchronizes the UI.

### Fix Focus Areas
- app/main/_components/ProfileSlider.tsx[24-39]
- app/main/_components/ProfileSlider.tsx[46-60]

### Suggested change (one approach)
- Change the divisor to match the step, e.g.:
 - `const step = profiles.length > 1 ? el.clientWidth - PEEK_WIDTH : el.clientWidth;`
 - `const index = Math.round(el.scrollLeft / step);`
- Clamp:
 - `setActiveIndex(Math.max(0, Math.min(profiles.length - 1, index)));`

(Alternative: derive step from DOM measurements, e.g. first child `offsetWidth` plus computed `gap`, to avoid future layout drift.)

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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 refactors the ProfileCard component to operate as a controlled component, allowing its expansion state to be externally managed. The ProfileSlider component was subsequently updated to control the expansion of the profile cards it renders, enhancing the interactivity and visual presentation. Additionally, the slider's layout was improved to show a 'peek' of the next card, providing a more intuitive browsing experience.

Highlights

• ProfileCard Refactoring: The ProfileCard component was refactored to be a controlled component, receiving its expansion state (isExpanded) and a toggle function (onToggleExpanded) as props from its parent.
• ProfileSlider Enhancements: The ProfileSlider component now manages the expansion state of its child ProfileCard components and implements a visual 'peek' effect for adjacent cards, improving the user experience.
• Dynamic Card Sizing and Scroll Logic: Constants for card gap and peek width were introduced, and the scroll event handler was updated to dynamically calculate the active card index based on these new layout parameters.

Changelog

• app/main/_components/ProfileCard.tsx
  • Updated ProfileCardProps interface to include isExpanded and onToggleExpanded properties.
  • Modified the ProfileCard component to accept isExpanded and onToggleExpanded as props.
  • Replaced internal state management for isExpanded with calls to the onToggleExpanded prop.
• app/main/_components/ProfileSlider.tsx
  • Imported useCallback and added isExpanded state and toggleExpanded callback.
  • Defined PEEK_WIDTH and CARD_GAP constants for layout calculations.
  • Adjusted the scroll event handler to calculate the active index considering the new card dimensions and peek effect.
  • Passed the isExpanded state and toggleExpanded function as props to each ProfileCard instance.
  • Applied dynamic styling to the ProfileCard wrappers to create the 'peek' effect for adjacent cards.

Activity

• No specific activity has been recorded for this pull request yet.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

안녕하세요. 프로필 카드 관련 수정사항 리뷰를 진행했습니다. ProfileCard의 확장 상태(isExpanded)를 부모 컴포넌트인 ProfileSlider로 끌어올려 제어하도록 변경하신 점은 좋은 방향이라고 생각합니다. 이를 통해 슬라이더 내에서 카드들의 상태를 중앙에서 관리할 수 있게 되었습니다.

다만, ProfileSlider에서 모든 카드에 동일한 확장 상태를 공유하도록 구현되어 있어, 카드 하나를 클릭하면 모든 카드가 함께 열리고 닫히는 버그가 발생합니다. 각 카드가 독립적으로 확장/축소될 수 있도록 상태 관리 로직을 수정해야 합니다.

추가적으로, 스크롤 위치에 따라 현재 활성화된 카드의 인덱스를 계산하는 로직에서 카드 너비 계산에 작은 오류가 있어 수정이 필요합니다. 자세한 내용은 각 코드 라인에 남겨드린 코멘트를 참고해주세요.