fix: rendering the colorpicker portal branch

Author: ssi02014

src/components/ColorPicker/index.tsx

@@ -84,8 +84,9 @@ const ColorPicker = ({
         isBorder={true}>
         {children}
       </IconButton>
-      <Portal>
-        {isOpenColorPicker && (
+
+      {isOpenColorPicker && (
+        <Portal>
           <div ref={colorRef} style={colorPickerWrapperStyle}>
             <PaletteColorPicker
               width={250}
@@ -97,8 +98,8 @@ const ColorPicker = ({
               dark
             />
           </div>
-        )}
-      </Portal>
+        </Portal>
+      )}
     </div>
   );
 };

src/components/TG.styled.ts src/components/TG/TG.styled.tssrc/components/TG.styled.ts renamed to src/components/TG/TG.styled.ts

@@ -5,24 +5,24 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import Select from './Select';
-import SelectItem from './Select/SelectItem';
-import TextInput from './Inputs/TextInput';
-import Icon from './Icon';
-import FileInput from './Inputs/FileInput';
-import Divider from './Divider';
-import Accordion from './Accordion';
-import Canvas from './Canvas';
-import ColorPicker from './ColorPicker';
-import InputRange from './Inputs/RangeInput';
-import Header from './Layout/Header';
+import Select from '../Select';
+import SelectItem from '../Select/SelectItem';
+import TextInput from '../Inputs/TextInput';
+import Icon from '../Icon';
+import FileInput from '../Inputs/FileInput';
+import Divider from '../Divider';
+import Accordion from '../Accordion';
+import Canvas from '../Canvas';
+import ColorPicker from '../ColorPicker';
+import InputRange from '../Inputs/RangeInput';
+import Header from '../Layout/Header';
 import {
   fontFamilies,
   fontSizes,
   imageTypes,
   strokeTypes,
 } from '@constants/select';
-import { CanvasState } from '../types/canvas';
+import { CanvasState } from '../../types/canvas';
 import {
   fill,
   font,
@@ -33,10 +33,10 @@ import {
   alignEnd,
 } from '@assets/icons';
 import { Color, useColor } from 'react-color-palette';
-import { BodyWrapper, ContentWrapper, InnerWrapper } from './Layout/styled';
+import { BodyWrapper, ContentWrapper, InnerWrapper } from '../Layout/styled';
 import * as S from './TG.styled';
 import { downloadCanvas, getValidMessage, ValidType } from '@utils/common';
-import { IconButton } from './Icon/styled';
+import { IconButton } from '../Icon/styled';
 
 interface TGProps {
   additionalFontFamily?: string[];

src/components/TG.tsx src/components/TG/index.tsxsrc/components/TG.tsx renamed to src/components/TG/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import TG from '@components/TG';
-import { TGOpenButton } from '@components/TG.styled';
 import { toggleButton } from '@assets/icons';
 import { Position, getIconSize } from '@utils/style';
 import { Portal } from '@devgrace/react';
 import Icon from '@components/Icon';
 import { Global } from '@emotion/react';
 import reset from '@css/reset';
+import TG from '@components/TG';
+import { TGOpenButton } from '@components/TG/TG.styled';
 
 interface ThumbnailGeneratorProps {
   isDefaultOpen?: boolean;