fix: css prop에 $를 붙이도록 수정합니다.

dnd-side-project · Oct 1, 2024 · b2c13f6 · b2c13f6
1 parent 389af1a
commit b2c13f6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/app/(app)/my/job.tsx b/app/(app)/my/job.tsx
@@ -46,8 +46,8 @@ function JOB() {
           ) : (
             <S.JobSelectButton
               key={job}
-              selected={isSelected(job)}
               onPress={() => setSelectedJob(job)}
+              $selected={isSelected(job)}
               style={[
                 Platform.OS === 'ios' && {
                   shadowColor: isSelected(job) ? 'rgba(26, 117, 255, 0.20)' : 'rgba(0, 0, 0, 0.05)',
@@ -95,14 +95,14 @@ const S = {
     gap: 12px;
     margin-top: 34px;
   `,
-  JobSelectButton: styled.Pressable<{ selected: boolean }>`
+  JobSelectButton: styled.Pressable<{ $selected: boolean }>`
     justify-content: center;
     height: 64px;
     padding: 20px 16px;
-    background-color: ${({ theme, selected }) =>
-      selected ? theme.color.Blue[95] : theme.color.Common[100]};
-    border-color: ${({ theme, selected }) =>
-      selected ? theme.color.Primary.Normal : theme.color.Line.Neutral};
+    background-color: ${({ theme, $selected }) =>
+      $selected ? theme.color.Blue[95] : theme.color.Common[100]};
+    border-color: ${({ theme, $selected }) =>
+      $selected ? theme.color.Primary.Normal : theme.color.Line.Neutral};
     border-width: 1px;
     border-radius: 8px;
   `,

diff --git a/src/components/common/toggle/index.tsx b/src/components/common/toggle/index.tsx
@@ -31,7 +31,7 @@ function Toggle({ onToggle, isOn = true, disabled = false }: ToggleProps) {
       style={{ backgroundColor, opacity: disabled ? 0.5 : 1 }}>
       <S.Circle
         style={{ transform: [{ translateX }] }}
-        isOn={isOn}
+        $isOn={isOn}
       />
     </S.Container>
   );
@@ -49,12 +49,12 @@ const S = {
     padding: 2px;
     border-radius: 20px;
   `,
-  Circle: styled(Animated.View)<{ isOn: boolean }>`
+  Circle: styled(Animated.View)<{ $isOn: boolean }>`
     width: 20px;
     height: 20px;
     background-color: ${({ theme }) => theme.color.Common[100]};
-    ${({ isOn }) =>
-      isOn &&
+    ${({ $isOn }) =>
+      $isOn &&
       css`
         filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 10%));
       `}