Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

front/src/modules/ui/snack-bar/components/SnackBar.tsx

@@ -51,7 +51,7 @@ const StyledIconContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-const ProgressBarContainer = styled.div`
+const StyledProgressBarContainer = styled.div`
   height: 5px;
   left: 0;
   position: absolute;
@@ -59,7 +59,7 @@ const ProgressBarContainer = styled.div`
   top: 0;
 `;
 
-const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
+const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
   align-items: center;
   background-color: transparent;
   border: none;
@@ -162,20 +162,20 @@ export function SnackBar({
       variant={variant}
       {...rootProps}
     >
-      <ProgressBarContainer>
+      <StyledProgressBarContainer>
         <ProgressBar
           ref={progressBarRef}
           barHeight={5}
           barColor={rgba(theme.grayScale.gray0, 0.3)}
           duration={duration}
         />
-      </ProgressBarContainer>
+      </StyledProgressBarContainer>
       {icon && <StyledIconContainer>{icon}</StyledIconContainer>}
       {children ? children : message}
       {allowDismiss && (
-        <CloseButton variant={variant} onClick={closeSnackbar}>
+        <StyledCloseButton variant={variant} onClick={closeSnackbar}>
           <IconX aria-label="Close" size={theme.icon.size.md} />
-        </CloseButton>
+        </StyledCloseButton>
       )}
     </StyledMotionContainer>
   );

front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx

@@ -6,7 +6,7 @@ import { snackBarInternalState } from '../states/snackBarState';
 
 import { SnackBar } from './SnackBar';
 
-const SnackBarContainer = styled.div`
+const StyledSnackBarContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -15,7 +15,7 @@ const SnackBarContainer = styled.div`
   z-index: 99999999;
 `;
 
-const SnackBarMotionContainer = styled(motion.div)`
+const StyledSnackBarMotionContainer = styled(motion.div)`
   margin-right: ${({ theme }) => theme.spacing(3)};
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
@@ -68,9 +68,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
   return (
     <>
       {children}
-      <SnackBarContainer>
+      <StyledSnackBarContainer>
         {snackBarState.queue.map((snackBar) => (
-          <SnackBarMotionContainer
+          <StyledSnackBarMotionContainer
             key={snackBar.id}
             variants={reducedMotion ? reducedVariants : variants}
             initial="initial"
@@ -83,9 +83,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
               {...snackBar}
               onClose={() => handleSnackBarClose(snackBar.id)}
             />
-          </SnackBarMotionContainer>
+          </StyledSnackBarMotionContainer>
         ))}
-      </SnackBarContainer>
+      </StyledSnackBarContainer>
     </>
   );
 }