docs: add responsive toggle button and update preview to iframe #258
Conversation
…demo functionality
…oved functionality
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @MaxLee-dev, 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 significantly upgrades the website's component demonstration capabilities by implementing a responsive preview system. It introduces a new toggle group for device selection and transitions component examples to an iframe-based rendering, allowing users to accurately visualize how UI components adapt to different screen dimensions. This enhancement aims to provide a more robust and user-friendly documentation experience. 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은 문서 사이트의 컴포넌트 예시에 반응형 토글 기능을 추가하고, 이를 위해 iframe을 사용한 미리보기로 업데이트하는 변경 사항을 담고 있습니다. 전반적으로 코드 구조가 개선되고 새로운 기능이 잘 구현되었지만, 몇 가지 중요한 보안 및 스타일 가이드 관련 개선점이 필요합니다. 특히, 동적 컴포넌트 로딩 시 경로 조작 취약점이 발견되어 수정이 시급합니다. 또한, 새로 추가된 컴포넌트에서 스타일 가이드에 맞지 않는 하드코딩된 색상 값과 default export 사용이 확인되었습니다. 코드 리뷰 의견을 참고하여 수정하시면 코드의 안정성과 일관성을 더욱 높일 수 있을 것입니다.
| if (!componentPath) { | ||
| setError('No component path provided'); | ||
| setIsLoading(false); | ||
| return; | ||
| } |
There was a problem hiding this comment.
보안 취약점: componentPath를 동적 import에 사용하기 전에 유효성 검사를 추가해야 합니다. 현재 코드는 searchParams에서 받은 경로를 그대로 사용하므로 경로 조작(Path Traversal) 공격에 취약할 수 있습니다.
componentPath에 ../와 같은 문자가 포함되어 있는지 확인하고, 허용된 문자(예: 영문, 숫자, -, /, _)만으로 구성되었는지 검증하는 로직을 이 부분에 추가하는 것을 권장합니다.
| useEffect(() => { | ||
| // Small delay to ensure DOM is updated and mask is centered properly | ||
| const timer = setTimeout(() => { | ||
| updateMaskPosition(selectedValue); | ||
| }, 0); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| }, [selectedValue]); |
There was a problem hiding this comment.
DOM 레이아웃 정보를 읽어 스타일을 업데이트하는 로직에는 useEffect보다 useLayoutEffect를 사용하는 것이 더 적합합니다. useEffect는 비동기적으로 실행되므로, 렌더링 후 마스크 위치가 업데이트되기까지 미세한 딜레이가 발생하여 깜빡임(flicker) 현상을 유발할 수 있습니다. useLayoutEffect는 브라우저가 화면을 그리기 전에 동기적으로 실행되므로, 이러한 문제를 방지하고 더 부드러운 시각적 경험을 제공합니다. setTimeout을 사용하는 현재 방식 대신 useLayoutEffect로 변경하고, React import 구문에 useLayoutEffect를 추가하는 것을 권장합니다.
| <div | ||
| ref={containerRef} | ||
| className="resizable-preview-container" | ||
| style={{ | ||
| width: `${getInitialWidth()}px`, | ||
| maxWidth: '100%', | ||
| minWidth: '320px', | ||
| margin: '0 auto', | ||
| resize: 'horizontal', | ||
| overflow: 'hidden', | ||
| border: '2px dashed #e5e7eb', | ||
| borderRadius: '8px', | ||
| backgroundColor: 'white', | ||
| position: 'relative', | ||
| }} |
There was a problem hiding this comment.
컴포넌트 내에 인라인 스타일이 광범위하게 사용되었습니다. 프로젝트에서는 Vanilla Extract를 통한 스타일링을 지향하고 있으므로, 일관성 및 유지보수성 향상을 위해 이 스타일들을 별도의 .css.ts 파일로 분리하고 recipe나 style 함수를 사용하여 클래스로 관리하는 것을 권장합니다. 이렇게 하면 테마 변수 활용도 용이해집니다.
| export default function Page({ searchParams }: PreviewPageProps) { | ||
| const resolvedSearchParams = React.use(searchParams); | ||
| const componentPath = resolvedSearchParams.path; | ||
|
|
||
| return ( | ||
| <Suspense fallback={<div>Loading...</div>}> | ||
| <DynamicComponent componentPath={componentPath} /> | ||
| </Suspense> | ||
| ); | ||
| } |
There was a problem hiding this comment.
page for render demo examples with iframe
…ures in IframePreview and Preview
ZeroChoi2781
left a comment
ZeroChoi2781
left a comment
There was a problem hiding this comment.
Nit
Unnecessary comments should be removed.
…-block-responsive
fix(button-toggle-group): update background color and text color for better visibility fix(source.config): change dark theme from 'slack-dark' to 'github-dark'
2 participants
Related Issues
N/A
Description of Changes
Checklist
Before submitting the PR, please make sure you have checked all of the following items.