Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

front/src/modules/spreadsheet-import/components/ContinueButton.tsx

@@ -4,7 +4,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { Modal } from '@/ui/modal/components/Modal';
 import { CircularProgressBar } from '@/ui/progress-bar/components/CircularProgressBar';
 
-const Footer = styled(Modal.Footer)`
+const StyledFooter = styled(Modal.Footer)`
   height: 60px;
   justify-content: center;
   padding: 0px;
@@ -12,7 +12,7 @@ const Footer = styled(Modal.Footer)`
   padding-right: ${({ theme }) => theme.spacing(30)};
 `;
 
-const Button = styled(MainButton)`
+const StyledButton = styled(MainButton)`
   width: 200px;
 `;
 
@@ -27,11 +27,11 @@ export const ContinueButton = ({
   title,
   isLoading,
 }: ContinueButtonProps) => (
-  <Footer>
-    <Button
+  <StyledFooter>
+    <StyledButton
       icon={isLoading && <CircularProgressBar size={16} barWidth={2} />}
       title={title}
       onClick={!isLoading ? onContinue : undefined}
     />
-  </Footer>
+  </StyledFooter>
 );

front/src/modules/spreadsheet-import/components/Heading.tsx

@@ -6,20 +6,20 @@ export type Props = React.ComponentProps<'div'> & {
   description?: string;
 };
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
 
-const Title = styled.span`
+const StyledTitle = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   text-align: center;
 `;
 
-const Description = styled.span`
+const StyledDescription = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -29,9 +29,9 @@ const Description = styled.span`
 
 export function Heading({ title, description, ...props }: Props) {
   return (
-    <Container {...props}>
-      <Title>{title}</Title>
-      {description && <Description>{description}</Description>}
-    </Container>
+    <StyledContainer {...props}>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
   );
 }

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -25,7 +25,7 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 
-const DropdownItem = styled.div`
+const StyledDropdownItem = styled.div`
   align-items: center;
   background-color: ${({ theme }) => theme.background.tertiary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -42,7 +42,7 @@ const DropdownItem = styled.div`
   }
 `;
 
-const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
+const StyledDropdownLabel = styled.span<{ isPlaceholder: boolean }>`
   color: ${({ theme, isPlaceholder }) =>
     isPlaceholder ? theme.font.color.tertiary : theme.font.color.primary};
   display: flex;
@@ -53,7 +53,7 @@ const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
   padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const FloatingDropdown = styled.div`
+const StyledFloatingDropdown = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
@@ -147,7 +147,7 @@ export const MatchColumnSelect = ({
 
   return (
     <>
-      <DropdownItem
+      <StyledDropdownItem
         id={name}
         ref={(node) => {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -158,14 +158,14 @@ export const MatchColumnSelect = ({
         onClick={handleDropdownItemClick}
       >
         {renderIcon(value?.icon)}
-        <DropdownLabel isPlaceholder={!value?.label}>
+        <StyledDropdownLabel isPlaceholder={!value?.label}>
           {value?.label ?? placeholder}
-        </DropdownLabel>
+        </StyledDropdownLabel>
         <IconChevronDown size={16} color={theme.font.color.tertiary} />
-      </DropdownItem>
+      </StyledDropdownItem>
       {isOpen &&
         createPortal(
-          <FloatingDropdown ref={refs.setFloating} style={floatingStyles}>
+          <StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
             <DropdownMenu
               ref={dropdownContainerRef}
               width={dropdownItemRef.current?.clientWidth}
@@ -210,7 +210,7 @@ export const MatchColumnSelect = ({
                 )}
               </DropdownMenuItemsContainer>
             </DropdownMenu>
-          </FloatingDropdown>,
+          </StyledFloatingDropdown>,
           document.body,
         )}
     </>

front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -6,7 +6,7 @@ import { IconButton } from '@/ui/button/components/IconButton';
 import { useDialog } from '@/ui/dialog/hooks/useDialog';
 import { IconX } from '@/ui/icon/index';
 
-const CloseButtonContainer = styled.div`
+const StyledCloseButtonContainer = styled.div`
   align-items: center;
   aspect-ratio: 1;
   display: flex;
@@ -39,12 +39,12 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
 
   return (
     <>
-      <CloseButtonContainer>
+      <StyledCloseButtonContainer>
         <IconButton
           icon={<IconX size={16} color={theme.font.color.tertiary} />}
           onClick={handleClose}
         />
-      </CloseButtonContainer>
+      </StyledCloseButtonContainer>
     </>
   );
 };