[refactor/slider-switch] - 슬라이더 on off 색깔 변경 및 스위치 스타일 재수정 #21

ramong26 · 2025-09-20T05:22:59Z

📝 PR 제목

슬라이더 on off 색깔 변경 및 스위치 스타일 재수정

🛠 변경 내용

슬라이더 on off 색깔 변경
스위치 스타일 재수정

🎯 목적 / 이유

스위치 스타일 이상해짐
슬라이더 on off 시각적 구분 필요함

✅ 확인 사항

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

gemini-code-assist · 2025-09-20T05:23:11Z

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은 슬라이더와 스위치 컴포넌트의 시각적 일관성과 사용자 경험을 개선하는 데 중점을 둡니다. 기존에 스위치 스타일이 이상했던 문제를 해결하고, 슬라이더의 on/off 상태를 색상으로 명확하게 구분하여 사용자가 현재 상태를 쉽게 인지할 수 있도록 하였습니다.

Highlights

슬라이더 색상 변경: 슬라이더의 on/off 상태에 따른 시각적 구분을 명확히 하기 위해 색상이 변경되었습니다.
스위치 스타일 재조정: 스위치 컴포넌트의 스타일이 재조정되어, 기본 상태와 활성화 상태의 색상이 명확하게 구분됩니다.

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

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.

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 refactors the Switch and Slider components to improve visual styling and color differentiation. The changes focus on enhancing the switch's on/off visual states and restructuring the slider's cross-browser styling approach.

Modified switch thumb colors to provide better visual distinction between on/off states
Restructured slider CSS to use separate webkit and moz selectors for improved cross-browser compatibility
Updated slider dimensions and styling properties for consistency

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/Switch/Switch.scss	Updated thumb colors for better on/off state distinction
src/components/Slider/Slider.scss	Restructured CSS with separate track and thumb selectors for cross-browser support

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

Copilot · 2025-09-20T05:23:22Z

src/components/Slider/Slider.scss

+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      margin-top: -8px;
+      appearance: none;


The appearance: none property is redundant since -webkit-appearance: none already handles this for webkit browsers. Consider removing the duplicate declaration.

Suggested change

appearance: none;

Copilot · 2025-09-20T05:23:23Z

src/components/Slider/Slider.scss

+      background: s.color(white) url('../../assets/paper.png');
      background-size: cover;
+      cursor: pointer;
+      border-radius: 0;


The Firefox thumb selector is missing the hover state and transition properties that are defined for the webkit version. This creates inconsistent behavior across browsers.

Suggested change

border-radius: 0;

border-radius: 0;

transition: all 0.15s ease-in-out;

&:hover {

background: s.color(yellow-600) url('../../assets/paper.png');

transform: scale(1.1);

}

gemini-code-assist

Code Review

이 PR은 슬라이더와 스위치 컴포넌트의 스타일을 개선하는 내용을 담고 있습니다. 슬라이더의 경우, 브라우저 호환성을 위해 각기 다른 의사 요소(pseudo-element) 스타일을 분리한 점이 좋습니다. 스위치는 on/off 상태에 따라 색상이 변경되도록 수정하여 시각적 구분이 명확해졌습니다.

코드 리뷰에서는 몇 가지 개선점을 제안했습니다.

Slider.scss에서 코드 중복을 줄이고 브라우저 간 일관성을 높이는 방법을 제안했습니다. 특히 반응형 스타일에서 발생할 수 있는 문제를 지적했습니다.
Switch.scss에서는 색상 변경 애니메이션이 부드럽게 동작하도록 transition 속성을 수정할 것을 제안했습니다.

전반적으로 컴포넌트의 사용성과 유지보수성을 향상시키는 좋은 리팩터링이라고 생각합니다.

gemini-code-assist · 2025-09-20T05:24:24Z

src/components/Slider/Slider.scss

+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      margin-top: -8px;
+      appearance: none;
+      width: 20px;
+      height: 20px;
      border: 2px solid s.color(black);
      background: s.color(white) url('../../assets/paper.png');
      background-size: cover;
      cursor: pointer;
      transition: all 0.15s ease-in-out;
+      border-radius: 0;

      &:hover {
        background: s.color(yellow-600) url('../../assets/paper.png');
        transform: scale(1.1);
      }
    }

-    &::-moz-range-track {
-      height: 10px;
+    &::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
      border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
      background-size: cover;
+      cursor: pointer;
+      border-radius: 0;
    }


::-webkit-slider-thumb와 ::-moz-range-thumb에 중복되는 스타일이 많습니다. 믹스인을 사용해 중복을 줄일 수 있습니다.

더 중요한 점은, ::-moz-range-thumb에 transition과 :hover 효과가 누락되어 브라우저 간에 시각적 불일치가 발생합니다. 일관된 사용자 경험을 위해 이를 추가하는 것이 좋습니다.

또한, 이 파일의 미디어 쿼리(@include s.mq(...)) 내에서 ::-webkit-slider-thumb와 ::-moz-range-thumb가 쉼표로 구분되어 함께 선택되어 있는데, 이는 일부 브라우저에서 스타일이 적용되지 않는 원인이 될 수 있습니다. 여기서 분리하신 것처럼 미디어 쿼리 안에서도 각 브라우저별 선택자를 분리하여 스타일을 적용해야 합니다.

gemini-code-assist · 2025-09-20T05:24:24Z

src/components/Slider/Slider.scss

+    &::-webkit-slider-runnable-track {
+      height: 8px;
+      border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
+      background-size: cover;
+    }
+
+    // 트랙 (파이어폭스)
+    &::-moz-range-track {
+      height: 8px;
+      border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
+      background-size: cover;
+    }


::-webkit-slider-runnable-track와 ::-moz-range-track의 스타일이 동일합니다. 코드 중복을 줄이고 유지보수성을 높이기 위해 SCSS 믹스인(mixin)을 활용하는 것을 고려해 보세요.

예시:

@mixin slider-track-styles { height: 8px; border: 2px solid s.color(black); background: s.color(white) url('../../assets/paper.png'); background-size: cover; } .slider__input { // ... &::-webkit-slider-runnable-track { @include slider-track-styles; } &::-moz-range-track { @include slider-track-styles; } }

gemini-code-assist · 2025-09-20T05:24:24Z

src/components/Switch/Switch.scss

      height: $thumb-size;
-      background: s.color(red-300);
+      background: s.color(gray-500);
      transition: left 0.3s;


스위치가 켜질 때 배경색이 바뀌도록 수정하셨는데, ::before 요소의 transition 속성에 background가 포함되지 않아 색상 변경이 즉시 일어납니다. 부드러운 전환 효과를 위해 transition 속성을 수정하는 것이 좋습니다.

Suggested change

transition: left 0.3s;

transition: left 0.3s, background 0.3s;

refactor/slider-switch - 슬라이더 on off 색깔 변경 경 우치 타이 저

8243b18

ramong26 requested a review from Copilot September 20, 2025 05:22

ramong26 self-assigned this Sep 20, 2025

ramong26 added the refactor refatoring code or style label Sep 20, 2025

ramong26 linked an issue Sep 20, 2025 that may be closed by this pull request

[refactor/slider-switch] #20

Closed

Copilot AI reviewed Sep 20, 2025

View reviewed changes

gemini-code-assist bot reviewed Sep 20, 2025

View reviewed changes

refactor/slider-switch - 슬라이더 스위치 리펙토링

5f253df

ramong26 merged commit 6682098 into main Sep 20, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[refactor/slider-switch] - 슬라이더 on off 색깔 변경 및 스위치 스타일 재수정 #21

[refactor/slider-switch] - 슬라이더 on off 색깔 변경 및 스위치 스타일 재수정 #21

Uh oh!

ramong26 commented Sep 20, 2025

Uh oh!

gemini-code-assist bot commented Sep 20, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 20, 2025

Uh oh!

Copilot AI Sep 20, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Sep 20, 2025

Uh oh!

gemini-code-assist bot Sep 20, 2025

Uh oh!

gemini-code-assist bot Sep 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	transition: left 0.3s;
	transition: left 0.3s, background 0.3s;

[refactor/slider-switch] - 슬라이더 on off 색깔 변경 및 스위치 스타일 재수정 #21

[refactor/slider-switch] - 슬라이더 on off 색깔 변경 및 스위치 스타일 재수정 #21

Uh oh!

Conversation

ramong26 commented Sep 20, 2025

📝 PR 제목

슬라이더 on off 색깔 변경 및 스위치 스타일 재수정

🛠 변경 내용

🎯 목적 / 이유

✅ 확인 사항

Uh oh!

gemini-code-assist bot commented Sep 20, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants