LC-2845 USER 마이페이지 가이드북 카드 구현#2159
Hidden character warning
Conversation
- 리펙토링 이유: 무료 자료집 등 비프로그램 타입도 동일 카드 레이아웃으로 확장 가능하도록 구조 정비 - CareerGrowthItem: 뷰모델로 데이터 구조 정리 - 카드용 Config 및 매퍼 유틸(careerGrowthCard) 분리 - CareerGrowthList: config 기반 렌더링으로 변경
- toGuidebookCardConfig 추가 - 변수명 추가 정리: CareerGrowthItem에 맞게 program → item, programs → items
github-actions
Bot
changed the title
Summary of ChangesHello, 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 컴포넌트의 재사용성을 높이고 새로운 콘텐츠 유형을 쉽게 통합할 수 있는 기반을 마련했습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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
안녕하세요. LC-2845 티켓의 'USER 마이페이지 가이드북 카드 구현' PR에 대한 리뷰입니다.
전반적으로 커리어 성장 섹션의 아이템들을 CareerGrowthCardConfig라는 뷰 모델을 통해 렌더링하도록 리팩터링하신 점이 인상 깊습니다. 이로 인해 UI 컴포넌트와 데이터 로직의 분리가 명확해졌고, 코드의 재사용성과 테스트 용이성이 향상되었습니다. 특히 가이드북 카드 구현을 위해 기존 구조를 확장 가능하게 변경하신 점이 좋습니다.
리뷰에서는 몇 가지 개선점을 제안했습니다.
- UX 개선: 현재는 기능이 구현되지 않은 버튼이 활성화되어 있어 사용자에게 혼란을 줄 수 있습니다. 기능 구현 전까지는 비활성화하는 것을 제안합니다.
- 가독성 및 유지보수성: 매직 스트링을 상수(constant)로 대체하고,
if문을switch문으로 변경하여 코드의 명확성을 높이는 방안을 제안했습니다. - 잠재적 버그 수정:
null일 수 있는 ID에 기본값0을 할당하는 부분은 React에서 중복key문제로 이어질 수 있어 수정이 필요합니다.
자세한 내용은 각 파일의 리뷰 코멘트를 참고해 주세요. 좋은 코드를 작성해주셔서 감사합니다.
| export const toCareerGrowthCardConfigs = ( | ||
| items: CareerGrowthItem[], | ||
| category: ApplicationCategory, | ||
| ): CareerGrowthCardConfig[] => { | ||
| if (category === 'PROGRAM') { | ||
| return items.map((p) => toProgramCardConfig(p)); | ||
| } | ||
| if (category === 'GUIDEBOOK') { | ||
| return items.map((p) => toGuidebookCardConfig(p)); | ||
| } | ||
| return []; | ||
| }; |
There was a problem hiding this comment.
toCareerGrowthCardConfigs 함수에서 if 문을 연속으로 사용하여 카테고리별로 분기하고 있습니다. 가이드라인의 '가독성 - 눈의 이동 줄이기' 섹션에서 권장하는 switch 문을 사용하면 코드를 더 구조적이고 간결하게 만들 수 있습니다. 이는 각 케이스를 명확하게 구분하여 가독성을 높여줍니다.
export const toCareerGrowthCardConfigs = (
items: CareerGrowthItem[],
category: ApplicationCategory,
): CareerGrowthCardConfig[] => {
switch (category) {
case 'PROGRAM':
return items.map(toProgramCardConfig);
case 'GUIDEBOOK':
return items.map(toGuidebookCardConfig);
default:
return [];
}
};References
- 관련 있는 로직은 한곳에 모아두어 코드의 컨텍스트를 파악하기 위해 시선이 여러 곳으로 이동하는 것을 최소화해야 합니다.
switch문이나 정책 객체(policy object)를 사용하여 분기 로직을 인라인으로 배치하면 코드의 흐름을 위에서 아래로 자연스럽게 읽을 수 있어 가독성이 향상됩니다. (link)
- S3 사용 시 직접 다운로드 불가 → 새 탭으로 열리도록 처리 - 가이드북 다운로드 PATCH 기록 연동 및 409만 무시
1 participant
연관 작업