[fix] styled-components unknown prop warning 제거

frontend/src/components/ClubLogo/ClubLogo.tsx

@@ -4,8 +4,8 @@ import styled, { css } from 'styled-components';
 type LogoVariant = 'main' | 'detail';
 
 interface ClubLogoProps {
-  imageSrc?: string;
-  variant?: LogoVariant;
+  $imageSrc?: string;
+  $variant?: LogoVariant;
 }
 
 const presets = {
@@ -19,28 +19,31 @@ const presets = {
   },
 };
 
-const StyledClubLogo = styled.div<{ variant: LogoVariant; imageSrc?: string }>`
-  ${({ variant, imageSrc }) => css`
-    width: ${presets[variant].desktop.width};
-    height: ${presets[variant].desktop.height};
-    border-radius: ${presets[variant].desktop.radius};
+const StyledClubLogo = styled.div<{
+  $variant: LogoVariant;
+  $imageSrc?: string;
+}>`
+  ${({ $variant, $imageSrc }) => css`
+    width: ${presets[$variant].desktop.width};
+    height: ${presets[$variant].desktop.height};
+    border-radius: ${presets[$variant].desktop.radius};
     background-color: #efefef;
     background-size: cover;
     background-position: center;
-    background-image: ${imageSrc ? `url(${imageSrc})` : 'none'};
+    background-image: ${$imageSrc ? `url(${$imageSrc})` : 'none'};
   `}
 
   @media (max-width: 480px) {
-    ${({ variant }) => css`
-      width: ${presets[variant].mobile.width};
-      height: ${presets[variant].mobile.height};
-      border-radius: ${presets[variant].mobile.radius};
+    ${({ $variant }) => css`
+      width: ${presets[$variant].mobile.width};
+      height: ${presets[$variant].mobile.height};
+      border-radius: ${presets[$variant].mobile.radius};
     `}
   }
 `;
 
-const ClubLogo = ({ imageSrc, variant = 'main' }: ClubLogoProps) => {
-  return <StyledClubLogo imageSrc={imageSrc} variant={variant} />;
+const ClubLogo = ({ $imageSrc, $variant = 'main' }: ClubLogoProps) => {
+  return <StyledClubLogo $imageSrc={$imageSrc} $variant={$variant} />;
 };
 
 export default ClubLogo;

frontend/src/components/ClubStateBox/ClubStateBox.tsx

@@ -22,7 +22,7 @@ const stateStyles: Record<
   },
 };
 
-const StyledBox = styled.div<{ bgColor: string; textColor: string }>`
+const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -31,8 +31,8 @@ const StyledBox = styled.div<{ bgColor: string; textColor: string }>`
   height: 30px;
   padding: 8px 21px;
   border-radius: 8px;
-  background-color: ${({ bgColor }) => bgColor};
-  color: ${({ textColor }) => textColor};
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
   font-size: 0.75rem;
   font-weight: 500;
 `;
@@ -49,7 +49,7 @@ const ClubStateBox = ({ state }: ClubStateBoxProps) => {
   };
 
   return (
-    <StyledBox bgColor={style.backgroundColor} textColor={style.color}>
+    <StyledBox $bgColor={style.backgroundColor} $textColor={style.color}>
       {style.text}
     </StyledBox>
   );

frontend/src/components/common/SearchBox/SearchBox.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const SearchBoxContainer = styled.form<{ isFocused: boolean }>`
+export const SearchBoxContainer = styled.form<{ $isFocused: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,8 +17,8 @@ export const SearchBoxContainer = styled.form<{ isFocused: boolean }>`
     padding: 6px 16px;
 
     border: 1px solid
-      ${({ isFocused }) =>
-        isFocused ? 'rgba(255, 84, 20, 0.8)' : 'transparent'};
+      ${({ $isFocused }) =>
+        $isFocused ? 'rgba(255, 84, 20, 0.8)' : 'transparent'};
   }
 `;
 
@@ -48,7 +48,7 @@ export const SearchInputStyles = styled.input`
   }
 `;
 
-export const SearchButton = styled.button<{ isFocused: boolean }>`
+export const SearchButton = styled.button<{ $isFocused: boolean }>`
   flex-shrink: 0;
   border: none;
   background-color: transparent;
@@ -67,8 +67,8 @@ export const SearchButton = styled.button<{ isFocused: boolean }>`
     width: 14px;
     height: 14px;
 
-    filter: ${({ isFocused }) =>
-      isFocused
+    filter: ${({ $isFocused }) =>
+      $isFocused
         ? 'invert(36%) sepia(83%) saturate(746%) hue-rotate(359deg) brightness(95%) contrast(92%)'
         : 'none'};
   }

frontend/src/components/common/SearchBox/SearchBox.tsx

@@ -39,7 +39,7 @@ const SearchBox = () => {
 
   return (
     <Styled.SearchBoxContainer
-      isFocused={isSearchBoxClicked}
+      $isFocused={isSearchBoxClicked}
       onSubmit={handleSubmit}>
       <Styled.SearchInputStyles
         ref={inputRef}
@@ -53,7 +53,7 @@ const SearchBox = () => {
       />
       <Styled.SearchButton
         type='submit'
-        isFocused={isSearchBoxClicked}
+        $isFocused={isSearchBoxClicked}
         aria-label='검색'>
         <img src={SearchIcon} alt='Search Button' />
       </Styled.SearchButton>

frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx

@@ -21,7 +21,7 @@ const ClubProfile = ({
 }: ClubProfileProps) => {
   return (
     <Styled.ClubContainer>
-      <ClubLogo variant='detail' imageSrc={logo || defaultLogo} />
+      <ClubLogo $variant='detail' $imageSrc={logo || defaultLogo} />
       <Styled.ClubInfo>
         <Styled.ClubName>{name}</Styled.ClubName>
         <Styled.TagContainer>

frontend/src/pages/MainPage/components/Banner/Banner.styles.ts

@@ -43,12 +43,12 @@ export const BannerWrapper = styled.div<BannerProps>`
   }
 `;
 
-export const SlideWrapper = styled.div<{ isAnimating: boolean }>`
+export const SlideWrapper = styled.div<{ $isAnimating: boolean }>`
   display: flex;
   width: 100%;
   height: 100%;
-  ${({ isAnimating }) =>
-    isAnimating
+  ${({ $isAnimating }) =>
+    $isAnimating
       ? 'transition: transform 0.5s ease-in-out;'
       : 'transition: none;'}
 `;

frontend/src/pages/MainPage/components/Banner/Banner.tsx

@@ -110,7 +110,7 @@ const Banner = ({ desktopBanners, mobileBanners }: BannerComponentProps) => {
             <img src={SlideButton[1]} alt='Next Slide' />
           </Styled.SlideButton>
         </Styled.ButtonContainer>
-        <Styled.SlideWrapper ref={slideRef} isAnimating={isAnimating}>
+        <Styled.SlideWrapper ref={slideRef} $isAnimating={isAnimating}>
           {extendedBanners.map((banner, index) => (
             <Styled.BannerItem key={index}>
               <img src={banner.backgroundImage} alt={`banner-${index}`} />

frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const CardContainer = styled.div<{
-  state: string;
-  isClicked: boolean;
+  $state: string;
+  $isClicked: boolean;
 }>`
   display: flex;
   flex-direction: column;
@@ -11,20 +11,20 @@ const CardContainer = styled.div<{
   background-color: #fff;
   width: 100%;
   height: 170px;
-  box-shadow: ${({ state }) =>
-    state === 'open'
+  box-shadow: ${({ $state }) =>
+    $state === 'open'
       ? '0 0 14px rgba(0, 166, 255, 0.15)'
       : '0 0 14px rgba(0, 0, 0, 0.08)'};
 
   transition:
     transform 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
-  transform: ${({ isClicked }) => (isClicked ? 'scale(1.05)' : 'scale(1)')};
+  transform: ${({ $isClicked }) => ($isClicked ? 'scale(1.05)' : 'scale(1)')};
   cursor: pointer;
 
   &:hover {
-    transform: ${({ isClicked }) =>
-      isClicked ? 'scale(1.05)' : 'scale(1.03)'};
+    transform: ${({ $isClicked }) =>
+      $isClicked ? 'scale(1.05)' : 'scale(1.03)'};
   }
 
   &:active {

frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx

@@ -28,12 +28,12 @@ const ClubCard = ({ club }: { club: Club }) => {
 
   return (
     <Styled.CardContainer
-      state={club.recruitmentStatus}
-      isClicked={isClicked}
+      $state={club.recruitmentStatus}
+      $isClicked={isClicked}
       onClick={handleNavigate}>
       <Styled.CardHeader>
         <Styled.ClubProfile>
-          <ClubLogo imageSrc={club.logo || default_profile_image} />
+          <ClubLogo $imageSrc={club.logo || default_profile_image} />
           <Styled.ClubName>{club.name}</Styled.ClubName>
         </Styled.ClubProfile>
         <ClubStateBox state={club.recruitmentStatus} />

frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.styles.ts

@@ -10,17 +10,17 @@ export const RadioInput = styled.input`
   display: none;
 `;
 
-export const CustomRadio = styled.span<{ isActive: boolean }>`
+export const CustomRadio = styled.span<{ $isActive: boolean }>`
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 1px solid ${({ isActive }) => (isActive ? '#00a6ff' : '#ccc')};
+  border: 1px solid ${({ $isActive }) => ($isActive ? '#00a6ff' : '#ccc')};
   background-color: #d9d9d9;
   position: relative;
   margin-right: 8px;
 
-  ${({ isActive }) =>
-    isActive &&
+  ${({ $isActive }) =>
+    $isActive &&
     `
     background-color: #fff;
     &::after {
@@ -37,9 +37,9 @@ export const CustomRadio = styled.span<{ isActive: boolean }>`
   `}
 `;
 
-export const RadioText = styled.span<{ isActive: boolean }>`
+export const RadioText = styled.span<{ $isActive: boolean }>`
   font-size: 0.75rem;
-  color: ${({ isActive }) => (isActive ? '#818181' : '#aaa')};
+  color: ${({ $isActive }) => ($isActive ? '#818181' : '#aaa')};
   font-weight: 500;
   user-select: none;
 `;

frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx

@@ -30,8 +30,8 @@ const StatusRadioButton = ({ onChange }: StatusRadioButtonProps) => {
         checked={isActive}
         onChange={handleToggle}
       />
-      <Styled.CustomRadio isActive={isActive} />
-      <Styled.RadioText isActive={isActive}>
+      <Styled.CustomRadio $isActive={isActive} />
+      <Styled.RadioText $isActive={isActive}>
         모집중/모집예정 보기
       </Styled.RadioText>
     </Styled.RadioLabel>