refactor: styled-components 의 props 경고를 제거한다

frontend/src/components/common/Box/Box.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import Text from '@common/Text';
-
+import Text from '../Text';
 import type { BoxProps } from './Box';
 import Box from './Box';
 

frontend/src/components/common/Box/Box.tsx

@@ -1,8 +1,7 @@
 import type { CSSProp } from 'styled-components';
 import styled from 'styled-components';
 
-import type { Ref } from 'react';
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 
 import type { SpacingProps } from '@common/systems';
 import { spacing } from '@common/systems';
@@ -51,12 +50,8 @@ const BoxWrapper = styled.div<BoxProps>`
   ${({ css }) => css};
 `;
 
-const Box = ({ children, ...props }: BoxProps, ref: Ref<HTMLDivElement>) => {
-  return (
-    <BoxWrapper ref={ref} {...props}>
-      {children}
-    </BoxWrapper>
-  );
+const Box = ({ children, ...props }: BoxProps) => {
+  return <BoxWrapper {...props}>{children}</BoxWrapper>;
 };
 
-export default forwardRef(Box);
+export default Box;

frontend/src/components/common/Button/Button.tsx

@@ -39,16 +39,20 @@ export const BUTTON_FONT_SIZE = {
   xl: '2.2rem',
 } as const;
 
-const Button = ({ children, ...props }: ButtonProps) => {
+const Button = ({ children, noRadius, ...props }: ButtonProps) => {
   return (
-    <S.Button type="button" {...props}>
+    <S.Button type="button" $noRadius={noRadius} {...props}>
       {children}
     </S.Button>
   );
 };
 
+export type StyledButtonType = Omit<ButtonProps, 'noRadius'> & {
+  $noRadius: BorderRadiusDirectionType;
+};
+
 const S = {
-  Button: styled.button<ButtonProps>`
+  Button: styled.button<StyledButtonType>`
     width: ${({ width }) => getSize(width)};
     height: ${({ height }) => getSize(height)};
     padding: ${({ size }) => BUTTON_PADDING_SIZE[size] || 0};
@@ -61,7 +65,7 @@ const S = {
     border-radius: 1.2rem;
     text-align: center;
 
-    ${({ noRadius }) => noRadius && borderRadius(noRadius)};
+    ${({ $noRadius }) => $noRadius && borderRadius($noRadius)};
     ${({ variant }) => {
       switch (variant) {
         case 'pill':

frontend/src/components/common/FlexBox/FlexBox.tsx

@@ -1,8 +1,7 @@
 import type { CSSProp } from 'styled-components';
 import styled from 'styled-components';
 
-import type { ForwardedRef } from 'react';
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 
 import type { SpacingProps } from '@common/systems';
 import { spacing } from '@common/systems';
@@ -37,12 +36,43 @@ export interface FlexBoxProps extends HTMLAttributes<HTMLDivElement>, SpacingPro
   children: ReactNode;
 }
 
+export type StyledFlexBoxType = Omit<
+  FlexBoxProps,
+  'noRadius' | 'rowGap' | 'columnGap' | 'justifyContent' | 'alignItems' | 'alignContent'
+> & {
+  $noRadius: BorderRadiusDirectionType;
+  $rowGap: number;
+  $columnGap: number;
+  $justifyContent: keyof typeof FLEX_BOX_ITEM_POSITION;
+  $alignItems: keyof typeof FLEX_BOX_ITEM_POSITION;
+  $alignContent: keyof typeof FLEX_BOX_ITEM_POSITION;
+};
+
 // TODO: tag가 바뀌었을 때 ref의 타입을 바꾸는 로직을 추가한다.
-const FlexBox = ({ children, tag, ...props }: FlexBoxProps, ref: ForwardedRef<HTMLDivElement>) => {
+const FlexBox = ({
+  children,
+  tag,
+  noRadius,
+  rowGap,
+  columnGap,
+  justifyContent,
+  alignItems,
+  alignContent,
+  ...props
+}: FlexBoxProps) => {
   const changeableTag = tag || 'div';
 
   return (
-    <S.FlexBox as={changeableTag} {...props} ref={ref}>
+    <S.FlexBox
+      as={changeableTag}
+      $noRadius={noRadius}
+      $rowGap={rowGap}
+      $columnGap={columnGap}
+      $justifyContent={justifyContent}
+      $alignItems={alignItems}
+      $alignContent={alignContent}
+      {...props}
+    >
       {children}
     </S.FlexBox>
   );
@@ -60,28 +90,29 @@ const getGap = ({ gap, rowGap, columnGap }: Pick<FlexBoxProps, 'gap' | 'rowGap'
 };
 
 const S = {
-  FlexBox: styled.div<FlexBoxProps>`
+  FlexBox: styled.div<StyledFlexBoxType>`
     ${spacing};
 
     width: ${({ width }) => getSize(width)};
     height: ${({ height }) => getSize(height)};
     flex-wrap: ${({ nowrap }) => (nowrap ? 'nowrap' : 'wrap')};
     flex-direction: ${({ direction }) => (direction ? direction : 'row')};
-    justify-content: ${({ justifyContent }) => FLEX_BOX_ITEM_POSITION[justifyContent]};
-    align-items: ${({ alignItems }) => FLEX_BOX_ITEM_POSITION[alignItems]};
-    align-content: ${({ alignContent }) => FLEX_BOX_ITEM_POSITION[alignContent]};
-    gap: ${({ gap, rowGap, columnGap }) => getGap({ gap, rowGap, columnGap })};
+    justify-content: ${({ $justifyContent }) => FLEX_BOX_ITEM_POSITION[$justifyContent]};
+    align-items: ${({ $alignItems }) => FLEX_BOX_ITEM_POSITION[$alignItems]};
+    align-content: ${({ $alignContent }) => FLEX_BOX_ITEM_POSITION[$alignContent]};
+    gap: ${({ gap, $rowGap, $columnGap }) =>
+      getGap({ gap, rowGap: $rowGap, columnGap: $columnGap })};
     ${({ background }) => background && `background: ${background};`}
     border: ${({ outlined }) => (outlined ? '0.15rem solid #000' : 'none')};
 
     display: flex;
     border-radius: 1rem;
     font-size: 1.5rem;
 
-    ${({ noRadius }) => noRadius && borderRadius(noRadius)};
+    ${({ $noRadius }) => $noRadius && borderRadius($noRadius)};
 
     ${({ css }) => css};
   `,
 };
 
-export default forwardRef(FlexBox);
+export default FlexBox;

frontend/src/components/common/List/List.stories.tsx

@@ -1,8 +1,7 @@
 import type { Meta } from '@storybook/react';
 
-import ListItem from '@common/ListItem';
-import Text from '@common/Text';
-
+import ListItem from '../ListItem';
+import Text from '../Text';
 import type { ListProps } from './List';
 import List from './List';
 

frontend/src/components/common/ListItem/ListItem.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/react';
 
-import List from '@common/List';
-import ListItem from '@common/ListItem';
-import type { ListItemProps } from '@common/ListItem/ListItem';
-import Text from '@common/Text';
+import List from '../List';
+import Text from '../Text';
+import type { ListItemProps } from './ListItem';
+import ListItem from './index';
 
 const meta = {
   title: 'Components/ListItem',

frontend/src/components/common/Loader/Loader.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react';
 
-import type { LoaderProps } from '@common/Loader/Loader';
-import Loader from '@common/Loader/index';
+import type { LoaderProps } from './Loader';
+import Loader from './index';
 
 const meta = {
   title: 'Components/Loader',

frontend/src/components/common/Modal/Modal.stories.tsx

@@ -2,9 +2,8 @@ import type { Meta } from '@storybook/react';
 
 import { useState } from 'react';
 
-import Button from '@common/Button';
-import Text from '@common/Text';
-
+import Button from '../Button';
+import Text from '../Text';
 import Modal from './Modal';
 
 const meta = {

frontend/src/components/common/Skeleton/Skeleton.tsx

@@ -23,21 +23,25 @@ const skeletonAnimation = keyframes`
   }
 `;
 
-const SkeletonWrapper = styled.div<SkeletonProps>`
+export type StyledSkeletonType = Omit<SkeletonProps, 'borderRadius'> & {
+  $borderRadius: string;
+};
+
+const SkeletonWrapper = styled.div<StyledSkeletonType>`
   ${spacing};
 
   width: ${({ width }) => width || '100%'};
   height: ${({ height }) => height || '1rem'};
   background: linear-gradient(-90deg, var(--lighter-color), #fafafa, var(--lighter-color), #fafafa);
   background-size: 400%;
   animation: ${skeletonAnimation} 5s infinite ease-out;
-  border-radius: ${({ borderRadius }) => borderRadius || '6px'};
+  border-radius: ${({ $borderRadius }) => $borderRadius || '6px'};
 
   ${({ css }) => css}
 `;
 
-const Skeleton = ({ ...props }: SkeletonProps) => {
-  return <SkeletonWrapper {...props} />;
+const Skeleton = ({ borderRadius, ...props }: SkeletonProps) => {
+  return <SkeletonWrapper $borderRadius={borderRadius} {...props} />;
 };
 
 export default Skeleton;

frontend/src/components/common/Text/Text.tsx

@@ -34,18 +34,22 @@ interface TextProps extends HTMLAttributes<HTMLElement>, SpacingProps {
   css?: CSSProp;
 }
 
-const Text = ({ children, tag, ...props }: TextProps) => {
+export type StyledTextType = Omit<TextProps, 'lineClamp'> & {
+  $lineClamp?: number;
+};
+
+const Text = ({ children, tag, lineClamp, ...props }: TextProps) => {
   const changeableTag = tag || 'p';
 
   return (
-    <S.Text as={changeableTag} {...props}>
+    <S.Text as={changeableTag} $lineClamp={lineClamp} {...props}>
       {children}
     </S.Text>
   );
 };
 
 const S = {
-  Text: styled.p<TextProps>`
+  Text: styled.p<StyledTextType>`
     ${spacing};
 
     ${({ align }) => {
@@ -134,14 +138,14 @@ const S = {
     font-weight: ${({ weight }) => (weight === 'regular' ? 500 : weight)};
     color: ${({ color }) => color};
 
-    ${({ lineClamp }) =>
-      lineClamp &&
+    ${({ $lineClamp }) =>
+      $lineClamp &&
       `
         display: -webkit-box;
         overflow: hidden;
         text-overflow: ellipsis;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${lineClamp};
+        -webkit-line-clamp: ${$lineClamp};
       `}
 
     ${({ css }) => css}

frontend/src/components/common/TextField/TextField.stories.tsx

@@ -2,8 +2,7 @@ import type { Meta } from '@storybook/react';
 
 import { useState } from 'react';
 
-import Text from '@common/Text';
-
+import Text from '../Text';
 import type { TextFieldProps } from './TextField';
 import TextField from './TextField';
 

frontend/src/components/common/Toast/Toast.stories.tsx

@@ -1,15 +1,11 @@
 import type { Meta } from '@storybook/react';
 import { styled } from 'styled-components';
 
-import { useExternalValue } from '@utils/external-state';
-
-import { toastActions, toastListStore } from '@stores/layout/toastStore';
-
-import ButtonNext from '@common/ButtonNext';
-import Text from '@common/Text';
-
-import type { Color } from '@type';
-
+import { toastActions, toastListStore } from '../../../stores/layout/toastStore';
+import type { Color } from '../../../types';
+import { useExternalValue } from '../../../utils/external-state';
+import ButtonNext from '../ButtonNext';
+import Text from '../Text';
 import type { ToastProps } from './Toast';
 import Toast, { getToastColor } from './Toast';
 

frontend/src/components/ui/ClientStationFilters.tsx

@@ -64,30 +64,30 @@ const ClientStationFilters = () => {
   const screen = useMediaQueries();
 
   return (
-    <Container left={navigationComponentWidth} basePanel={basePanel}>
+    <Container left={navigationComponentWidth} $basePanel={basePanel}>
       {screen.get('isMobile') ? <StationSearchBar /> : !basePanel && <StationSearchBar />}
       <FlexBox css={mobileFilterContainerCss}>
         <ClientFilterButton
           onClick={toggleAvailableStation}
-          isChecked={isAvailableStationFilterSelected}
+          $isChecked={isAvailableStationFilterSelected}
         >
           현재 사용 가능
         </ClientFilterButton>
         <ClientFilterButton
           onClick={toggleParkingFreeStation}
-          isChecked={isParkingFreeStationFilterSelected}
+          $isChecked={isParkingFreeStationFilterSelected}
         >
           주차 무료
         </ClientFilterButton>
         <ClientFilterButton
           onClick={toggleFastChargeStation}
-          isChecked={isFastChargeStationFilterSelected}
+          $isChecked={isFastChargeStationFilterSelected}
         >
           {CHARGING_SPEED.quick}
         </ClientFilterButton>
         <ClientFilterButton
           onClick={togglePrivateStation}
-          isChecked={isPrivateStationFilterSelected}
+          $isChecked={isPrivateStationFilterSelected}
         >
           외부인 개방
         </ClientFilterButton>
@@ -96,9 +96,9 @@ const ClientStationFilters = () => {
   );
 };
 
-const Container = styled.div<{ left: number; basePanel: Panels['basePanel'] }>`
+const Container = styled.div<{ left: number; $basePanel: Panels['basePanel'] }>`
   position: fixed;
-  top: ${({ basePanel }) => (basePanel ? '16.5px' : '14px')};
+  top: ${({ $basePanel }) => ($basePanel ? '16.5px' : '14px')};
   left: ${({ left }) => left}rem;
   z-index: 998;
   padding: 10px;
@@ -115,10 +115,10 @@ const Container = styled.div<{ left: number; basePanel: Panels['basePanel'] }>`
   }
 `;
 
-const ClientFilterButton = styled.button<{ isChecked: boolean }>`
+const ClientFilterButton = styled.button<{ $isChecked: boolean }>`
   padding: 0.6rem 1.2rem;
   margin-right: 0.4rem;
-  background: ${({ isChecked }) => (isChecked ? '#ccdaff' : '#ffffff')};
+  background: ${({ $isChecked }) => ($isChecked ? '#ccdaff' : '#ffffff')};
   box-shadow:
     0 1px 2px rgba(60, 64, 67, 0.3),
     0 1px 3px 1px rgba(60, 64, 67, 0.15);

frontend/src/components/ui/Star/Star.stories.tsx

@@ -2,10 +2,9 @@ import type { Meta } from '@storybook/react';
 
 import { useState } from 'react';
 
-import Text from '@common/Text';
-
-import Star from '@ui/Star';
-import type { StarProps } from '@ui/Star/Star';
+import Text from '../../common/Text';
+import type { StarProps } from './Star';
+import Star from './Star';
 
 const meta = {
   title: 'UI/Star',