Merged
Conversation
* chore:VE 세팅을 위한 TailwindCSS 설정 주석 처리 * chore:모바일레이아웃 및 뷰포트 세팅 * chore:컬러 팔레트 세팅 * chore:컬러 시스템 적용 * chore:테스트용 라우팅 설정 * chore: alias 설정?
- vite-plugin-svgr 의존성 및 플러그인 설정 추가 - SVG to React 컴포넌트 변환 스크립트 추가 - 아이콘 SVG 파일 및 SVGR 생성 컴포넌트 추가 - 미사용 react.svg 에셋 삭제
- 홈 페이지 컴포넌트 및 라우트 추가
HomeBanner를 HomeGreetingSection으로 교체하고 HomeWallet 컴포넌트 추가. 모바일 프레임 배경색 조정.
Summary of ChangesHello @theSnackOverflow, 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은 애플리케이션의 핵심 UI인 홈, 시장, 종목 상세 페이지를 구현합니다. 사용자에게 개인화된 주식 정보, 시장 동향, 그리고 특정 종목에 대한 심층적인 데이터를 제공하는 데 중점을 둡니다. 새로운 라우팅 시스템과 스타일링 솔루션을 도입하여 확장 가능하고 유지보수하기 쉬운 프론트엔드 아키텍처를 구축했습니다. 또한, 사용자 경험을 향상시키기 위한 드래그앤드롭 정렬 및 SVG 아이콘 처리와 같은 기능도 포함되어 있습니다. Highlights
Changelog
Activity
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
전반적으로 Home 페이지의 UI 구현이 잘 이루어졌습니다. 컴포넌트 구조화와 vanilla-extract를 사용한 스타일링이 인상적입니다. 몇 가지 수정이 필요한 부분과 개선점을 발견하여 아래에 코멘트를 남겼습니다. 특히 tsconfig.node.json의 오타와 app.css.ts의 잘못된 CSS 속성 값은 빌드 또는 런타임 오류를 유발할 수 있으니 확인이 필요합니다. 또한, 여러 컴포넌트에서 아이콘이 인라인 SVG로 작성되어 있는데, svgr 설정을 활용하여 컴포넌트로 분리하면 코드 가독성과 유지보수성을 높일 수 있을 것입니다.
Comment on lines
+25
to
+45
| <button className={styles.iconButton} aria-label="Search"> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <path d="M20.9984 21.0004L16.6484 16.6504" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| </svg> | ||
| </button> | ||
| <button className={styles.iconButton} aria-label="Bell"> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M18 9C18 7.4087 17.3679 5.88258 16.2426 4.75736C15.1174 3.63214 13.5913 3 12 3C10.4087 3 8.88258 3.63214 7.75736 4.75736C6.63214 5.88258 6 7.4087 6 9C6 16 3 18 3 18H21C21 18 18 16 18 9Z" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <path d="M13.7295 20C13.5537 20.3031 13.3014 20.5547 12.9978 20.7295C12.6941 20.9044 12.3499 20.9965 11.9995 20.9965C11.6492 20.9965 11.3049 20.9044 11.0013 20.7295C10.6977 20.5547 10.4453 20.3031 10.2695 20" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <circle cx="17" cy="6" r="4" fill="#F46163"/> | ||
| </svg> | ||
| </button> | ||
| <button className={styles.iconButton} aria-label="Menu"> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M3 12H21" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <path d="M3 6H21" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <path d="M3 18H21" stroke="#1A1A1A" strokeLinecap="round" strokeLinejoin="round"/> | ||
| </svg> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
아이콘을 인라인 SVG로 직접 사용하고 있습니다. vite-plugin-svgr이 설정되어 있으므로, SVG 파일들을 아이콘 컴포넌트로 변환하여 사용하는 것이 일관성 있고 유지보수하기 좋습니다. 아이콘들을 src/assets/icons/components와 같은 곳에 컴포넌트로 추가하고 임포트해서 사용하면 코드가 더 깔끔해질 것입니다. BottomAppBar.tsx 파일에도 동일하게 적용할 수 있습니다.
src/pages/home/components/HomeGreetingSection/HomeGreetingSection.tsx
Outdated
Show resolved
Hide resolved
| className={styles.ctaMyWalletVector} | ||
| /> | ||
| </button> | ||
| <div className={styles.currentTime}>20:42 기준</div> |
There was a problem hiding this comment.
기준 시간이 "20:42 기준"으로 하드코딩되어 있습니다. 이 부분은 실제 데이터가 표시될 때 동적으로 생성되어야 합니다. 현재 시간을 포맷팅하여 표시하는 유틸리티 함수를 만들어 사용하는 것을 추천합니다.
Suggested change
| <div className={styles.currentTime}>20:42 기준</div> | |
| <div className={styles.currentTime}>{new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })} 기준</div> |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- tsconfig.node.json에서 src 제거 (tsconfig.app.json에서만 처리) - @vanilla-extract/css를 devDependencies에 명시 추가 - useIndexInfo 미사용 setError 변수 제거
- React 플러그인 추가 및 vendor chunk 분리 (react, react-router-dom) - 전 페이지 React.lazy 동적 import 적용 - 1.3MB Base64 SVG 컴포넌트를 img 태그로 교체 - 단일 번들 1,728KB에서 초기 로드 ~306KB로 감소
Collaborator
|
고생하셨습니다! [gemini-code-assist] 피드백 확인 후 merge 해도 될 것 같습니다! |
|
안녕하세요, @tmdcks1103 님! PR에 대한 피드백을 확인해 주셔서 감사합니다. 요청하신 대로 전체 변경 사항에 대한 상세 리뷰를 진행했습니다. 전반적으로 이번 PR은 몇 가지 사소한 개선 사항이 있지만, 전체적인 기능 구현과 코드 품질은 매우 훌륭합니다. 아래에 발견된 몇 가지 사항을 공유드립니다. 발견된 개선 사항
위의 사항들은 훌륭한 작업에 감사드립니다! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request Title
feat: Home 페이지 UI 구현
PR 설명
Home 페이지의 전체 UI를 구현했습니다.
스크린샷
UI 변경이 있을 경우 스크린샷을 첨부해주세요.
추가 설명
styleVariants로 가로형(한국/미국)과 세로형(CRYPTO) 레이아웃을 분기합니다