Conversation
Summary of ChangesHello @marulog, 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은 랭킹 페이지의 사용자 경험을 개선하기 위해 두 가지 주요 기능을 도입합니다. 첫째, 랭킹 목록에서 새로 등록된 유저를 쉽게 식별할 수 있도록 시각적 표시를 추가했습니다. 둘째, 랭킹 데이터가 언제 마지막으로 업데이트되었는지 사용자에게 명확하게 보여주는 기능을 구현하여 데이터의 신뢰성을 높였습니다. 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}
| @@ -1,5 +1,6 @@ | |||
| import { getTierImageUrl } from "../../constants/tierMap"; | |||
| import { getTeamLabel, type TeamName } from "@/types/team"; | |||
| import newPng from "../../assets/images/new444.png"; | |||
There was a problem hiding this comment.
이미지 파일을 import 할 때 상대 경로(../../)를 사용하셨습니다. 프로젝트의 다른 부분에서는 경로 별칭(@/)을 일관되게 사용하고 있으므로, 유지보수성과 일관성을 위해 에셋 파일 경로에도 별칭을 사용하는 것이 좋습니다.
| import newPng from "../../assets/images/new444.png"; | |
| import newPng from "@/assets/images/new444.png"; |
| const formatUpdateTime = (value: string) => { | ||
| const m = value.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/); | ||
| if (!m) return `${value} KST 기준`; | ||
|
|
||
| const yyyy = Number(m[1]); | ||
| const mm = Number(m[2]); | ||
| const dd = Number(m[3]); | ||
| const hh = m[4]; | ||
| const mi = m[5]; | ||
|
|
||
| return `${yyyy}년 ${mm}월 ${dd}일 ${hh}:${mi} KST 기준`; | ||
| }; |
There was a problem hiding this comment.
formatUpdateTime 함수에서 정규식을 사용하여 날짜 문자열을 파싱하고 있습니다. 이 방식은 날짜 형식이 조금만 바뀌어도(예: 초 단위나 타임존 정보 포함) 코드가 깨지기 쉬운 단점이 있습니다. JavaScript/TypeScript의 내장 new Date() 생성자를 사용하는 것이 더 안정적이고 표준적인 방법입니다.
const formatUpdateTime = (value: string) => {
const date = new Date(value);
if (isNaN(date.getTime())) {
return `${value} KST 기준`;
}
const yyyy = date.getFullYear();
const mm = date.getMonth() + 1;
const dd = date.getDate();
const hh = String(date.getHours()).padStart(2, '0');
const mi = String(date.getMinutes()).padStart(2, '0');
return `${yyyy}년 ${mm}월 ${dd}일 ${hh}:${mi} KST 기준`;
};
| if (!updateTime) return null; | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-center mb-2"> |
There was a problem hiding this comment.
RankingUpdateTime 컴포넌트의 최상위 div에 mb-2 클래스가 적용되어 있습니다. 일반적으로 컴포넌트 자체에서 외부 여백을 지정하면 재사용성이 떨어집니다. 컴포넌트를 사용하는 부모가 레이아웃과 간격을 책임지는 것이 더 좋은 구조입니다. 이미 부모 컴포넌트인 RankingPage에서 gap-3를 사용해 간격을 조절하고 있으므로, 이 클래스는 불필요해 보입니다.
<div className="flex justify-center items-center">
|
1 participant
🍀 이슈 번호
✅ 작업 사항
신규 유저의 경우 css 적용 및 아이콘 추가 배치
현재, 과거 구간에 맞춰서 배치 스냅샷 기준 업데이트 시간 표시
⌨ 기타
제가 디자인은 볼 줄 몰라서 아이콘 2~4개 넣어놨습니다.
맘에 드는걸로 넣고 나머진 빼면 될 것 같아요.