♻️ Refactor: 스타일 컴포넌트 prop 앞에 '$' 표기

Author: wonill

src/components/GenderSelectButton/index.tsx

@@ -11,8 +11,8 @@ interface GenderSelectButtonProps {
 
 export default function GenderSelectButton({ gender, isActive, onClick }: GenderSelectButtonProps) {
   return (
-    <S.GenderBtn isActive={isActive} onClick={onClick}>
-      <S.GenderIcon isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
+    <S.GenderBtn $isActive={isActive} onClick={onClick}>
+      <S.GenderIcon $isActive={isActive} src={gender === 'male' ? Male : Female} alt='성별' />
       <Typo17 weight={isActive ? '700' : '400'}>{gender === 'male' ? '남' : '여'}</Typo17>
     </S.GenderBtn>
   )

src/components/GenderSelectButton/styles.ts

@@ -1,10 +1,10 @@
 import { styled } from 'styled-components'
-export const GenderBtn = styled.button<{ isActive: boolean }>`
-  border: solid 2px ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
+export const GenderBtn = styled.button<{ $isActive: boolean }>`
+  border: solid 2px ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.gc_1)};
   border-radius: 8px;
   width: auto;
   height: 102px;
-  color: ${({ isActive, theme }) => (isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
+  color: ${({ $isActive, theme }) => ($isActive ? theme.colors.brand.darken : theme.colors.grayscale.font_3)};
 
   display: flex;
   flex-direction: column;
@@ -13,9 +13,9 @@ export const GenderBtn = styled.button<{ isActive: boolean }>`
   gap: 0.2rem;
 `
 
-export const GenderIcon = styled.img<{ isActive: boolean }>`
+export const GenderIcon = styled.img<{ $isActive: boolean }>`
   filter: ${props =>
-    props.isActive
+    props.$isActive
       ? 'invert(12%) sepia(70%) saturate(924%) hue-rotate(351deg) brightness(96%) contrast(97%)'
       : 'invert(31%) sepia(4%) saturate(61%) hue-rotate(332deg) brightness(99%) contrast(97%)'};
 `

src/components/Toast/index.tsx

@@ -1,4 +1,3 @@
-// components/Toast/index.tsx
 import * as S from './styles'
 import { useEffect } from 'react'
 import { useToastStore } from '~/stores/toastStore'
@@ -16,7 +15,7 @@ export default function Toast() {
   }, [isVisible])
 
   return (
-    <S.ToastWrapper isVisible={isVisible}>
+    <S.ToastWrapper $isVisible={isVisible}>
       <S.Toast>{content}</S.Toast>
     </S.ToastWrapper>
   )

src/components/Toast/styles.ts

@@ -1,15 +1,15 @@
 import { styled } from 'styled-components'
 
-export const ToastWrapper = styled.div<{ isVisible: boolean }>`
+export const ToastWrapper = styled.div<{ $isVisible: boolean }>`
   position: absolute;
   top: -50px;
 
   width: 100%;
   display: flex;
   justify-content: center;
 
-  visibility: ${({ isVisible }) => (isVisible ? 'visiblie' : 'hidden')};
-  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
+  visibility: ${({ $isVisible }) => ($isVisible ? 'visiblie' : 'hidden')};
+  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
   transition:
     opacity 0.3s ease,
     visibility 0.3s ease;

src/modals/DatePickerModal/index.tsx

@@ -40,7 +40,7 @@ export default function DatePickerModal({ date, setDate }: DatePickerModalProps)
 
   return (
     <S.ModalOverlay onClick={close}>
-      <S.DatePickerModal isExiting={isExiting} onClick={handleModalClick}>
+      <S.DatePickerModal $isExiting={isExiting} onClick={handleModalClick}>
         <S.ConfirmBtn onClick={handleConfirmBtn}>확인</S.ConfirmBtn>
         <S.Divider />
         <DatePicker

src/modals/DatePickerModal/styles.ts

@@ -30,11 +30,11 @@ export const ModalOverlay = styled.div`
   align-items: flex-end;
 `
 
-export const DatePickerModal = styled.div<{ isExiting: boolean }>`
+export const DatePickerModal = styled.div<{ $isExiting: boolean }>`
   background-color: white;
   width: 100%;
 
-  animation: ${({ isExiting }) => (isExiting ? slideDown : slideUp)} 0.3s ease-out;
+  animation: ${({ $isExiting }) => ($isExiting ? slideDown : slideUp)} 0.3s ease-out;
 
   > div {
     padding: 1rem;

src/modals/RegisterDogModal/DogProfileDetailSection/index.tsx

@@ -85,14 +85,14 @@ export default function DogProfileDetailSection() {
             />
           </S.GenderSelectBtnWrapper>
           <S.CheckboxWrapper onClick={() => setDogProfile({ isNeutered: !dogProfile.isNeutered })}>
-            <S.CheckboxCircle isChecked={dogProfile.isNeutered}>
+            <S.CheckboxCircle $isChecked={dogProfile.isNeutered}>
               {dogProfile.isNeutered && <img src={Check} alt='check'></img>}
             </S.CheckboxCircle>
-            <S.CheckboxLabel isChecked={dogProfile.isNeutered}>중성화 했어요</S.CheckboxLabel>
+            <S.CheckboxLabel $isChecked={dogProfile.isNeutered}>중성화 했어요</S.CheckboxLabel>
           </S.CheckboxWrapper>
         </S.GenderBtnArea>
         <S.InputArea>
-          <S.PickerBtn onClick={() => pushModal(<SearchModal />)} hasBreed={!!dogProfile.breed}>
+          <S.PickerBtn onClick={() => pushModal(<SearchModal />)} $hasBreed={!!dogProfile.breed}>
             {dogProfile.breed || '견종 입력'}
           </S.PickerBtn>
           <S.WeightInput
@@ -102,7 +102,7 @@ export default function DogProfileDetailSection() {
             onChange={onChangeWeightInput}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            hasWeight={!!dogProfile.weight}
+            $hasWeight={!!dogProfile.weight}
           />
         </S.InputArea>
         <S.ToastWrapper>

src/modals/RegisterDogModal/DogProfileDetailSection/styles.ts

@@ -48,10 +48,10 @@ export const CheckboxWrapper = styled.div`
   gap: 0.5rem;
 `
 
-export const CheckboxCircle = styled.div<{ isChecked: boolean }>`
+export const CheckboxCircle = styled.div<{ $isChecked: boolean }>`
   width: 24px;
   height: 24px;
-  border: 2px solid ${({ isChecked }) => (isChecked ? '#000' : '#ccc')};
+  border: 2px solid ${({ $isChecked }) => ($isChecked ? '#000' : '#ccc')};
   border-radius: 50%;
 
   display: flex;
@@ -60,8 +60,8 @@ export const CheckboxCircle = styled.div<{ isChecked: boolean }>`
   cursor: pointer;
 `
 
-export const CheckboxLabel = styled.span<{ isChecked: boolean }>`
-  color: ${({ isChecked }) => (isChecked ? '#000' : '#ccc')};
+export const CheckboxLabel = styled.span<{ $isChecked: boolean }>`
+  color: ${({ $isChecked }) => ($isChecked ? '#000' : '#ccc')};
 `
 
 export const InputArea = styled.div`
@@ -74,25 +74,25 @@ export const InputArea = styled.div`
   }
 `
 
-export const PickerBtn = styled.div<{ hasBreed: boolean }>`
+export const PickerBtn = styled.div<{ $hasBreed: boolean }>`
   width: 100%;
   border: none;
   text-align: center;
   padding: 17px 32px;
   font-size: ${({ theme }) => theme.typography._20};
-  color: ${({ theme, hasBreed }) => (hasBreed ? 'black' : theme.colors.grayscale.font_3)};
-  font-weight: ${({ hasBreed }) => (hasBreed ? 'bold' : 'default')};
+  color: ${({ theme, $hasBreed }) => ($hasBreed ? 'black' : theme.colors.grayscale.font_3)};
+  font-weight: ${({ $hasBreed }) => ($hasBreed ? 'bold' : 'default')};
   cursor: pointer;
 `
 
-export const WeightInput = styled.input<{ hasWeight: boolean }>`
+export const WeightInput = styled.input<{ $hasWeight: boolean }>`
   width: 100%;
   border: none;
   text-align: center;
   padding: 17px 32px;
   border-radius: 12px;
   font-size: ${({ theme }) => theme.typography._20};
-  font-weight: ${({ hasWeight }) => (hasWeight ? 'bold' : 'default')};
+  font-weight: ${({ $hasWeight }) => ($hasWeight ? 'bold' : 'default')};
   &:focus {
     box-shadow: ${({ theme }) => `inset 0 0 0 1px ${theme.colors.grayscale.font_1}`};
   }

src/modals/RegisterDogModal/DogProfileSection/DogImageUploader.tsx

@@ -27,7 +27,7 @@ export default function DogImageUploader({ image, setImage }: DogImageUploaderPr
         <img src={AddDogPicture} alt='반려견 사진 추가' />
         <div>반려견 사진 추가</div>
         <HiddenFileInput type='file' ref={fileInputRef} onChange={handleImageChange} />
-        {image && <DogImage src={image} alt='반려견 사진' hasImage />}
+        {image && <DogImage src={image} alt='반려견 사진' $hasImage />}
       </AddDogPictureBtn>
     </AddDogPictureBtnWrapper>
   )

src/modals/RegisterDogModal/DogProfileSection/index.tsx

@@ -61,7 +61,7 @@ export default function DogProfileSection() {
             value={dogProfile.name}
             onChange={e => setDogProfile({ name: e.target.value })}
           />
-          <S.DatePickerBtn onClick={handleDatePickerOpen} hasBirth={!!dogProfile.birth}>
+          <S.DatePickerBtn onClick={handleDatePickerOpen} $hasBirth={!!dogProfile.birth}>
             {dogProfile.birth || '생년월일 선택'}
           </S.DatePickerBtn>
           <TwoLineInput