feature: 다운로드 페이지 추가#54
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @FlashingFuture, 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은 사용자가 애플리케이션의 APK를 다운로드할 수 있는 전용 홈 페이지를 도입합니다. 이 페이지는 앱의 주요 기능을 시각적으로 매력적인 별자리 애니메이션 배경과 함께 소개하며, GitHub Releases를 통해 직접 APK를 다운로드할 수 있는 링크를 제공합니다. 이를 통해 사용자 접근성을 향상시키고 앱의 첫인상을 개선합니다. 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}
| <A href={DL_URL} rel="noopener"> | ||
| <span>📱 Android APK (v1.0.0)</span> | ||
| <span>⬇</span> | ||
| </A> |
There was a problem hiding this comment.
HTML 표준에 따르면 <ul> 태그의 직계 자식 요소로는 <li>만 올 수 있습니다. 현재 <a> 태그가 <ul> 바로 아래에 있어 시맨틱 웹 규칙에 어긋납니다. <a> 태그를 <li> 태그로 감싸주세요.
<li>
<A href={DL_URL} rel="noopener">
<span>📱 Android APK (v1.0.0)</span>
<span>⬇</span>
</A>
</li>
| const stars: { x: number; y: number; vx: number; vy: number; r: number }[] = | ||
| []; |
There was a problem hiding this comment.
스타일 가이드에 따라 stars 배열의 타입을 인라인으로 정의하는 대신, 별도의 interface나 type으로 분리하는 것이 좋습니다.1 아래와 같이 Star 인터페이스를 훅 외부나 파일 상단에 정의하고 사용하면 코드 가독성이 향상되고 타입 재사용이 용이해집니다.
interface Star {
x: number;
y: number;
vx: number;
vy: number;
r: number;
}| const stars: { x: number; y: number; vx: number; vy: number; r: number }[] = | |
| []; | |
| const stars: Star[] = []; |
Style Guide References
Footnotes
-
Props, State, Navigation Param 등은 interface 또는 type alias로 관리합니다. ↩
| const DL_URL = | ||
| 'https://github.com/prgrms-fullstack-devcourse/Runova_FE/releases/download/v1.0.0/runova.apk'; |
| const gen = () => { | ||
| stars.length = 0; | ||
| const { clientWidth: w, clientHeight: h } = canvas; | ||
| const count = Math.floor((w * h) / 14000); // 화면 크기에 따른 밀도 |
There was a problem hiding this comment.
| ctx.globalAlpha = 0.9; | ||
| ctx.beginPath(); | ||
| ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); | ||
| ctx.fillStyle = '#fff'; |
| const Wrap = styled.main` | ||
| position: relative; | ||
| min-height: 100dvh; | ||
| display: grid; | ||
| place-items: center; | ||
| gap: 18px; | ||
| padding: 24px 16px 40px; | ||
| background: #000; | ||
| color: #fff; | ||
| overflow: hidden; | ||
| `; |
There was a problem hiding this comment.
스타일 가이드에 따라 색상, 간격(spacing), 폰트 크기 등 재사용 가능한 스타일 속성은 theme 또는 constants 파일로 관리하는 것이 좋습니다.1 현재 Wrap, Card 등 여러 컴포넌트에 스타일 값이 하드코딩되어 있습니다. 예를 들어 gap: 18px, padding: 24px 16px 40px, background: #000 등을 theme.spacing.md, theme.colors.black와 같이 theme 객체를 참조하도록 리팩토링하면 일관성 유지와 유지보수에 도움이 됩니다.
Style Guide References
Footnotes
-
재사용 가능한 색상, 폰트, spacing은 theme 또는 constants 파일로 관리합니다. ↩
| const H = styled.h3` | ||
| margin: 0 0 6px; | ||
| font-size: 16px; | ||
| line-height: 1.3; | ||
| `; | ||
|
|
||
| const P = styled.p` | ||
| margin: 0; | ||
| color: #cfcfcf; | ||
| font-size: 13px; | ||
| line-height: 1.5; | ||
| `; |
There was a problem hiding this comment.
컴포넌트의 이름을 H, P와 같이 한 글자로 지정하면 코드의 가독성을 해칠 수 있습니다. 다른 개발자가 코드를 이해하기 어렵게 만들고, 유지보수를 어렵게 할 수 있습니다. FeatureTitle, FeatureDescription과 같이 역할이 명확히 드러나는 이름으로 변경하고, JSX에서도 <H> 대신 <FeatureTitle>로 사용하는 것을 권장합니다.
|
|
||
| const FeatImg = styled.img` | ||
| width: 100%; | ||
| height: 380px; |
There was a problem hiding this comment.
height: 380px로 높이를 고정하면 다양한 화면 크기에서 이미지 비율이 왜곡될 수 있습니다. aspect-ratio 속성을 사용하여 이미지의 종횡비를 유지하거나, height: auto로 설정하여 자연스러운 크기를 유지하는 것을 고려해 보세요. 이는 반응형 디자인에 더 적합합니다.
1 participant
작업 내용