feat/SlidePage 구현과 ScriptBox 애니메이션 변화#19
Conversation
Summary of ChangesHello @wonellyho, 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! 이 PR은 SlidePage를 구현하고 ScriptBox의 애니메이션 동작을 개선하는 것을 목표로 합니다. ScriptBox의 레이아웃 구조를 재정비하여 반응성과 애니메이션을 향상시키고, SlidePage의 레이아웃을 재설계하여 ScriptBox의 접힘 상태에 따라 슬라이드 영역이 독립적으로 움직이도록 했습니다. 또한, Layout 컴포넌트의 전반적인 화면 높이 계산 방식을 개선하여 스크롤 관리를 더욱 효율적으로 만들었습니다. 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
이번 PR은 SlidePage를 구현하고 ScriptBox의 애니메이션을 개선하는 중요한 변경사항을 담고 있네요. 전체적인 레이아웃 구조를 fixed 방식에서 부모 컴포넌트 기준의 absolute 레이어로 변경하고, 상태를 부모로 끌어올려 연동된 애니메이션을 구현한 점이 인상적입니다. 코드의 가독성과 유지보수성을 높이기 위해 몇 가지 제안을 드립니다. ScriptBox 컴포넌트의 높이 값 오류로 인한 레이아웃 문제를 수정하고, SlidePage에서 하드코딩된 숫자들(매직 넘버)을 상수로 추출하여 관리하는 것을 제안했습니다. 이를 통해 코드를 더 명확하게 만들고 향후 변경에 유연하게 대응할 수 있을 것입니다. 전체적으로 복잡한 UI 로직을 깔끔하게 개선하려는 노력이 돋보이는 좋은 작업입니다.
| <ScriptBoxContent /> | ||
| <div className={clsx('w-full rounded-t-lg bg-white shadow-sm', isCollapsed ? 'h-10' : 'h-80')}> | ||
| {/* 헤더는 그대로 */} | ||
| <div className="h-12 relative"> |
There was a problem hiding this comment.
헤더를 감싸는 div의 높이가 h-12(48px)로 설정되어 있습니다. 하지만 ScriptBox가 접혔을 때 부모 div의 높이는 h-10(40px)이고, ScriptBoxHeader 컴포넌트 자체의 높이도 h-10입니다. 이로 인해 자식 요소가 부모 요소보다 커져 레이아웃이 깨질 수 있습니다. h-10으로 수정하여 높이를 일치시키는 것이 좋아 보입니다.
| <div className="h-12 relative"> | |
| <div className="h-10 relative"> |
src/pages/SlidePage.tsx
Outdated
| style={{ | ||
| paddingBottom: isScriptCollapsed ? 40 : 100, | ||
|
|
||
| paddingTop: 50, | ||
| }} |
There was a problem hiding this comment.
스크립트 박스가 펼쳐졌을 때(isScriptCollapsed가 false) paddingBottom이 100으로 설정되어 있습니다. ScriptBox의 실제 높이는 320px이므로, 이 값은 슬라이드 하단이 ScriptBox에 의해 가려지게 만듭니다. 접혔을 때의 높이 40px와 일관되게, 펼쳐졌을 때의 높이 320px를 paddingBottom으로 설정하여 레이아웃이 깨지지 않도록 하는 것을 제안합니다.
| style={{ | |
| paddingBottom: isScriptCollapsed ? 40 : 100, | |
| paddingTop: 50, | |
| }} | |
| style={{ | |
| paddingBottom: isScriptCollapsed ? 40 : 320, | |
| paddingTop: 50, | |
| }} |
src/pages/SlidePage.tsx
Outdated
| style={{ | ||
| paddingBottom: isScriptCollapsed ? 40 : 100, | ||
|
|
||
| paddingTop: 50, | ||
| }} | ||
| > | ||
| {/* 슬라이드 컨테이너 | ||
| - ScriptBox 접힘 상태에 따라 translateY로 "조금만" 이동 | ||
| - 레이아웃 계산이 아닌 명시적 이동을 사용 */} | ||
| <div | ||
| className="w-[2200px] flex flex-col items-center" | ||
| style={{ | ||
| // ✅ 여기서 '독립적으로' 내려가게 만듦 (원하는 만큼만) | ||
| transform: `translateY(${isScriptCollapsed ? 120 : 0}px)`, | ||
| transition: 'transform 300ms ease-out', | ||
| }} |
There was a problem hiding this comment.
레이아웃 및 애니메이션과 관련된 여러 숫자 값들(padding, transform, 너비/높이 등)이 코드 곳곳에 "매직 넘버"로 하드코딩되어 있습니다. (예: 40, 50, 120, 2200, 1238) 이는 코드의 가독성을 떨어뜨리고, 나중에 값을 일관성 있게 변경하기 어렵게 만듭니다.
이러한 값들을 컴포넌트 상단에 의미있는 이름의 상수로 선언하여 사용하면 코드의 의도를 더 명확히 하고 유지보수성을 크게 향상시킬 수 있습니다.
예시:
const SCRIPT_BOX_COLLAPSED_HEIGHT = 40;
const SCRIPT_BOX_EXPANDED_HEIGHT = 320; // 이전 댓글에서 제안한 수정값
const SLIDE_AREA_TOP_PADDING = 50;
const SLIDE_TRANSLATE_Y_ON_COLLAPSE = 120;
const SLIDE_WIDTH = 2200;
const SLIDE_HEIGHT = 1238;
AndyH0ng
changed the title
|
✨ 변경 내용
🔧 참고 사항
<큰 모니터> |
2 participants
📌 관련 이슈
✨ 변경 내용
💡 참고 사항
아래 1/3 comment 확인!