[feat/checkbox] - 체크박스 컴포넌트 추가 + *Card-Image 컴포넌트 삭제*

[ramong26]

📝 PR 제목

체크박스 컴포넌트 추가 + Card-Image 컴포넌트 삭제

---

🛠 변경 내용

• 체크박스 컴포넌트 추가 + Card-Image 컴포넌트 삭제
• PR 템플릿 오류 수정

---

🎯 목적 / 이유

• newspaper에 맞는 체크박스 생성
• 로그인 / 회원가입 등ㅇ ㅔ쓰임

---

✅ 확인 사항

• 빌드 통과 ✅
• 테스트 통과 ✅
• 불필요한 console.log 제거 ✅

+) 추가 정보
feat/card-image
원래 브랜치 이름

[gemini-code-assist]

Summary of Changes

Hello @ramong26, I'm Gemini Code Assist¹! 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 요소의 다양성을 확장하고, 기존 버튼 컴포넌트의 스타일링 로직을 SASS 모듈 시스템을 활용하도록 리팩토링하여 코드의 재사용성과 유지보수성을 향상시키는 것을 목표로 합니다. 또한, SASS 유틸리티를 개선하여 디자인 시스템의 일관성을 강화했습니다. PR 제목에 언급된 Card-Image 컴포넌트 삭제에 대한 변경 사항은 제공된 패치에서 확인되지 않습니다.

Highlights

• 체크박스 컴포넌트 추가: 새로운 체크박스 컴포넌트가 src/componets/Checkbox 경로에 추가되었습니다. 이 컴포넌트에는 전용 SCSS 스타일, Storybook 스토리, 그리고 단위 테스트가 포함되어 있습니다. 체크박스 아이콘으로 사용될 Chevron_down.svg 파일도 src/assets에 추가되었습니다.
• 버튼 컴포넌트 리팩토링: 기존 버튼 컴포넌트의 SCSS 스타일(src/componets/Button/Button.scss)이 SASS 모듈 시스템을 활용하도록 리팩토링되었습니다. 하드코딩된 색상 값들이 s.color() 함수 호출로 대체되었고, .xp-btn 클래스 이름이 .btn으로 변경되었습니다. 또한, Storybook에 Secondary 버튼 스토리가 추가되었습니다.
• SASS 유틸리티 개선: SASS 스타일링 유틸리티가 확장되었습니다. src/styles/_functions.scss 파일에 $colors 맵에서 색상 값을 가져오는 color() 함수가 추가되었고, src/styles/_mixins.scss에는 색상 인자를 받을 수 있는 text-style-extended 믹스인이 추가되었습니다. _variables.scss 파일에는 새로운 회색 및 빨간색 버튼 관련 색상 변수들이 정의되었습니다.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[Copilot]

Pull Request Overview

This PR adds a new Checkbox component and improves the existing design system by removing the Card-Image component and enhancing SCSS styling infrastructure.

• Added a complete Checkbox component with TypeScript interface, tests, and Storybook stories
• Enhanced SCSS design system with new color tokens, functions, and improved mixins
• Updated Button component to use the new design system tokens and improved class naming

Reviewed Changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/styles/index.scss	Added functions import to the main style entry point
src/styles/_variables.scss	Added new gray color tokens and red button state colors
src/styles/_mixins.scss	Updated to use new Sass modules syntax and added color-aware typography mixin
src/styles/_functions.scss	New color function utility for consistent color token usage
src/componets/Checkbox/Checkbox.tsx	New Checkbox component with TypeScript interface
src/componets/Checkbox/Checkbox.test.tsx	Unit tests for the Checkbox component
src/componets/Checkbox/Checkbox.stories.tsx	Storybook stories for the Checkbox component
src/componets/Checkbox/Checkbox.scss	Styling for the Checkbox component using design tokens
src/componets/Button/Button.tsx	Updated to use interface instead of type and improved class naming
src/componets/Button/Button.test.tsx	Code style improvements with consistent quote usage
src/componets/Button/Button.stories.tsx	Added Secondary story variant
src/componets/Button/Button.scss	Refactored to use design system tokens and functions

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The argTypes is set up for 'onClick' but checkboxes typically use 'onChange' event. This should be 'onChange: { action: 'changed' }' to properly track checkbox state changes in Storybook.

Suggested change

	argTypes: { onClick: { action: 'clicked' } }
	argTypes: { onChange: { action: 'changed' } }

[gemini-code-assist]

Code Review

이 PR은 새로운 체크박스 컴포넌트를 추가하고, 버튼 컴포넌트를 새로운 SCSS 디자인 토큰 시스템을 사용하도록 리팩터링하는군요. 유지보수성과 일관성을 위한 훌륭한 개선입니다. 새로운 체크박스 컴포넌트는 접근성을 고려하여 잘 구현되었습니다. SCSS 변수, 함수, 믹스인을 사용한 리팩터링은 확장 가능한 디자인 시스템을 향한 견고한 단계입니다.

한 가지 눈에 띄는 점은 components 디렉토리명이 componets로 오타가 있는 것 같습니다. 이는 향후 혼란을 야기할 수 있으므로 수정하는 것을 고려해 보시는 것이 좋겠습니다.

몇 가지 추가 개선을 위한 제안 사항을 코드에 남겼습니다.

[gemini-code-assist]

id를 label prop을 기반으로 생성하면, 페이지 내에 동일한 label을 가진 체크박스가 여러 개 있을 때 id가 중복될 수 있습니다. HTML에서 id는 고유해야 하며, 중복 id는 접근성 문제를 일으키고 예기치 않은 버그의 원인이 될 수 있습니다. React 18 이상을 사용하신다면 React.useId() 훅을 사용하여 고유 id를 생성하는 것을 강력히 권장합니다. 또한, <label>에 htmlFor 속성을 추가하여 input과 명시적으로 연결하면 접근성이 더욱 향상됩니다.

Suggested change

	const Checkbox: React.FC<CheckboxProps> = ({ label, ...rest }) => {
	const id = rest.id ?? `checkbox-${label}`;
	return (
	<label className="checkbox">
	<input id={id} type="checkbox" className="checkbox_input" {...rest} />
	<span className="checkbox_png" />
	{label}
	</label>
	);
	};
	const Checkbox: React.FC<CheckboxProps> = ({ label, ...rest }) => {
	const reactId = React.useId();
	const id = rest.id ?? reactId;
	return (
	<label htmlFor={id} className="checkbox">
	<input id={id} type="checkbox" className="checkbox_input" {...rest} />
	<span className="checkbox_png" />
	{label}
	</label>
	);
	};

[gemini-code-assist]

파일명이 아이콘의 내용과 일치하지 않습니다. 파일명은 Chevron_down.svg이지만, 실제 아이콘은 '체크' 표시입니다. 이는 다른 개발자들이 파일을 찾거나 사용할 때 혼란을 줄 수 있습니다. Checkmark.svg 또는 CheckIcon.svg와 같이 내용을 명확히 나타내는 이름으로 변경하는 것을 권장합니다.

[gemini-code-assist]

box-shadow의 색상 값이 리팩터링 과정에서 기존과 달라져 버튼의 시각적 디자인이 변경될 수 있습니다. 기존 그림자 색상인 #222는 s.color(gray-900) (#212121)에 더 가깝지만, s.color(gray-800) (#424242)으로 변경되었습니다. 의도된 변경이 아니라면, 기존 디자인과 일관성을 유지하기 위해 gray-900 변수를 사용하는 것을 고려해 보세요.

Suggested change

	inset 1px 1px 0 0 s.color(white),
	1px 1px 0 0 s.color(gray-600),
	2px 2px 0 0 s.color(gray-800);
	inset 1px 1px 0 0 s.color(white),
	1px 1px 0 0 s.color(gray-600),
	2px 2px 0 0 s.color(gray-900);

[gemini-code-assist]

classNames를 생성하는 현재 방식은 'secondary' variant에만 특정되어 있어 확장성이 떨어집니다. 예를 들어 'tertiary' 같은 새로운 variant가 추가될 경우, 이 로직을 수정해야 합니다. default가 아닌 모든 variant를 클래스 이름으로 동적으로 추가하도록 리팩터링하면 더 유연하고 유지보수하기 좋은 코드가 될 것입니다.

Suggested change

	const classNames = ['btn', variant === 'secondary' ? 'secondary' : '']
	.filter(Boolean)
	.join(' ');
	const classNames = ['btn', variant !== 'default' && variant]
	.filter(Boolean)
	.join(' ');

[gemini-code-assist]

mq 믹스인은 존재하지 않는 breakpoint 값을 받았을 때 아무런 동작 없이 조용히 넘어갑니다. 이는 개발 중 실수를 알아차리기 어렵게 만들 수 있습니다. text-style 믹스인처럼, 유효하지 않은 값이 전달되었을 때 @error를 발생시켜 문제를 즉시 인지할 수 있도록 개선하는 것이 좋습니다.

Suggested change

	@mixin mq($breakpoint) {
	@if map-has-key(v.$breakpoints, $breakpoint) {
	@media (min-width: map-get(v.$breakpoints, $breakpoint)) {
	@if map.has-key(v.$breakpoints, $breakpoint) {
	@media (min-width: map.get(v.$breakpoints, $breakpoint)) {
	@content;
	}
	}
	}
	@mixin mq($breakpoint) {
	@if map.has-key(v.$breakpoints, $breakpoint) {
	@media (min-width: map.get(v.$breakpoints, $breakpoint)) {
	@content;
	}
	} @else {
	@error "Unknown breakpoint: #{$breakpoint}";
	}
	}