refactor: BalanceGameButton의 outline 스타일 분리

JECT-Study · Dec 18, 2024 · 73244b0 · 73244b0
1 parent d026d07
commit 73244b0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.style.ts b/src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.style.ts
@@ -2,20 +2,25 @@ import { css } from '@emotion/react';
 import color from '@/styles/color';
 import typo from '@/styles/typo';
 
-export const buttonWrapStyle = (option: 'A' | 'B', isSelected: boolean) =>
-  css({
-    all: 'unset',
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '305px',
-    backgroundColor: color.WT,
-    borderRadius: '10px',
-    overflow: 'hidden',
-    outline: isSelected
-      ? `2px solid ${option === 'A' ? color.RED : color.BLUE}`
-      : 'none',
+export const buttonWrapStyle = css({
+  all: 'unset',
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '305px',
+  backgroundColor: color.WT,
+  borderRadius: '10px',
+  overflow: 'hidden',
+});
+
+export const getOutlineStyle = (option: 'A' | 'B', isSelected: boolean) => {
+  if (!isSelected) return css({});
+
+  return css({
+    outline:
+      option === 'A' ? `2px solid ${color.RED}` : `2px solid ${color.BLUE}`,
   });
+};
 
 export const nameWrapper = css({
   display: 'flex',

diff --git a/src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.tsx b/src/components/mobile/atoms/BalanceGameButton/BalanceGameButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { RedCheckIcon, BlueCheckIcon } from '@/assets';
 import * as S from './BalanceGameButton.style';
@@ -34,7 +33,7 @@ const BalanceGameButton = ({
   return (
     <button
       type="button"
-      css={S.buttonWrapStyle(optionType, isSelected)}
+      css={[S.buttonWrapStyle, S.getOutlineStyle(optionType, isSelected)]}
       onClick={handleClick}
     >
       <div css={S.nameWrapper}>