fix: accordion style fix & input, select hover style fix

src/components/Accordion/index.tsx

@@ -1,18 +1,31 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import * as S from './styled';
 import { arrowBottom, arrowTop } from '../../assets/icons';
-import TGIcon from '../../components/TGIcon';
+import Icon from '../../components/Icon';
 
 interface AccordionProps {
   title: string;
   children: React.ReactNode;
+  maxHeight?: number;
 }
 
-const Accordion = ({ title, children }: AccordionProps) => {
+const Accordion = ({ title, children, maxHeight = 200 }: AccordionProps) => {
+  const panelRef = useRef<HTMLDivElement>(null);
   const [isOpenPanel, setIsOpenPanel] = useState(false);
 
   const handleToggle = () => {
     setIsOpenPanel(!isOpenPanel);
+
+    if (!panelRef.current) return;
+    if (isOpenPanel) {
+      panelRef.current.style.overflow = 'hidden';
+
+      return;
+    }
+    setTimeout(() => {
+      if (!panelRef.current) return;
+      panelRef.current.style.overflow = 'visible';
+    }, 300);
   };
 
   return (
@@ -21,14 +34,16 @@ const Accordion = ({ title, children }: AccordionProps) => {
         <p>{title}</p>
         <span>
           {isOpenPanel ? (
-            <TGIcon src={arrowTop} width={14} height={14} />
+            <Icon src={arrowTop} width={14} height={14} />
           ) : (
-            <TGIcon src={arrowBottom} width={14} height={14} />
+            <Icon src={arrowBottom} width={14} height={14} />
           )}
         </span>
       </S.AccordionTopContainer>
       <S.AccordionPanelContainer
+        ref={panelRef}
         isOpen={isOpenPanel}
+        maxHeight={maxHeight}
         className={isOpenPanel ? 'active' : ''}>
         {children}
       </S.AccordionPanelContainer>

src/components/Accordion/styled.tsx

@@ -32,9 +32,12 @@ export const AccordionTopContainer = styled.div`
   }
 `;
 
-export const AccordionPanelContainer = styled.div<{ isOpen: boolean }>`
+export const AccordionPanelContainer = styled.div<{
+  isOpen: boolean;
+  maxHeight: number;
+}>`
   background-color: #fff;
   transition: max-height 0.2s linear;
-  overflow: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
-  max-height: ${({ isOpen }) => (isOpen ? '200px' : '0')};
+  overflow: hidden;
+  max-height: ${({ isOpen, maxHeight }) => (isOpen ? `${maxHeight}px` : '0')};
 `;

src/components/TG.styled.ts

@@ -86,6 +86,10 @@ export const TGHeaderWrapper = styled.div`
 
   button {
     cursor: pointer;
+    transition: transform 0.2s;
+    &:hover {
+      transform: rotate(90deg);
+    }
   }
 `;
 
@@ -115,7 +119,8 @@ export const TGTextarea = styled.textarea`
     color: #cccccc;
   }
 
-  &:focus {
+  &:focus,
+  &:hover {
     border: 1px solid #0e1b30;
   }
 `;
@@ -188,6 +193,10 @@ export const SelectInput = styled.div<{ isOpenSelect: boolean }>`
     justify-content: center;
     font-size: 0.9rem;
   }
+
+  &:hover {
+    border: 1px solid #0e1b30;
+  }
 `;
 
 export const SelectItemContainer = styled.ul`
@@ -235,19 +244,18 @@ export const TGInputTextContainer = styled.div<{ width: number | string }>`
     margin-top: 1px;
     width: ${({ width }) => `${width}px`};
 
-    &:focus {
+    &:focus,
+    &:hover {
       border: 1px solid #0e1b30;
     }
 
     &:disabled {
       color: #cccccc;
+      border: 1px solid #cccccc;
     }
   }
 `;
 
-// TG Icon
-export const TGIConImage = styled.img``;
-
 // TG InputFile
 export const TGInputFileWrapper = styled.div`
   background: #fff;

src/components/TGHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TGHeaderWrapper, TGLimitSizeText } from './TG.styled';
-import TGIcon from './TGIcon';
 import { close } from '../assets/icons';
 import { IconButton } from './Icon/styled';
+import Icon from './Icon';
 
 interface TGHeaderProps {
   onToggle: () => void;
@@ -17,10 +17,10 @@ const TGHeader = ({ onToggle }: TGHeaderProps) => {
           href="https://github.com/ssi02014/react-thumbnail-generator"
           target="_blank"
           rel="noreferrer">
-          Simple Thumbnail Generator
+          Thumbnail Generator
         </a>
         <IconButton onClick={onToggle} isBorder={false}>
-          <TGIcon src={close} width={20} height={20} />
+          <Icon src={close} width={20} height={20} />
         </IconButton>
       </div>
       <TGLimitSizeText>

src/components/TGSelect.tsx

@@ -7,7 +7,7 @@ import React, {
   ComponentProps,
 } from 'react';
 import { SelectWrapper, SelectInput, SelectItemContainer } from './TG.styled';
-import TGIcon from './TGIcon';
+import Icon from './Icon';
 
 interface SelectContextProps {
   color?: string;
@@ -79,9 +79,9 @@ const TGSelect = ({
           <p>{value}</p>
           <p>
             {isOpenSelect ? (
-              <TGIcon src={arrowTop} width={12} height={12} />
+              <Icon src={arrowTop} width={12} height={12} />
             ) : (
-              <TGIcon src={arrowBottom} width={12} height={12} />
+              <Icon src={arrowBottom} width={12} height={12} />
             )}
           </p>
         </SelectInput>

src/lib/ThumbnailGenerator.tsx

@@ -2,9 +2,9 @@ import TG from '../components/TG';
 import { TGOpenButton } from '../components/TG.styled';
 import React, { useState } from 'react';
 import { toggleButton } from '../assets/icons';
-import TGIcon from '../components/TGIcon';
 import { Position, getIconSize } from '../utils/style';
 import TGPortal from '../components/TGPortal';
+import Icon from '../components/Icon';
 
 interface ThumbnailGeneratorProps {
   id?: string;
@@ -42,7 +42,7 @@ const ThumbnailGenerator = ({
           />
         ) : (
           <TGOpenButton iconPosition={iconPosition} onClick={onToggleGenerator}>
-            <TGIcon src={iconSrc} width={tgIconSize} height={tgIconSize} />
+            <Icon src={iconSrc} width={tgIconSize} height={tgIconSize} />
           </TGOpenButton>
         )}
       </TGPortal>