refactor TagsChoosePopUp component

src/pages/Submit/components/TagsChoose/TagsChoose.js

@@ -3,7 +3,7 @@ import { FlexRow, Grid } from '../../../../utils/containers';
 import { Medium } from '../../../../utils/fonts';
 import ImageButton from '../../../../components/generic/ImageButton';
 import pencilIco from '../../../../assets/pencil_ico.svg';
-import TagsChoosePopUp from '../TagsChoosePopUp';
+import TagsChoosePopUp from '../TagsChoosePopup/TagsChoosePopUp';
 import { createPortal } from 'react-dom';
 import TagsChooseStyle from './TagsChooseStyle';
 

src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import PopUp from '../../../components/generic/PopUp';
-import { FlexColumn, FlexRow } from '../../../utils/containers';
-import Search from '../../../components/generic/Search';
-import theme from '../../../utils/theme';
-import Button from '../../../components/generic/Button';
+import PopUp from '../../../../components/generic/PopUp';
+import { FlexColumn, FlexRow } from '../../../../utils/containers';
+import Search from '../../../../components/generic/Search';
+import theme from '../../../../utils/theme';
+import Button from '../../../../components/generic/Button';
+import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
 
 const TagsChoosePopUp = (props) => {
   return (
@@ -13,26 +14,17 @@ const TagsChoosePopUp = (props) => {
       padding="36px 32px 0"
       closeHandler={() => props.setTagsPopUp(false)}
     >
-      <FlexColumn width="100%" alignmentY="flex-start" height="100%" gap="24px">
+      <TagsChoosePopUpStyle>
         <Search />
-        <FlexColumn
-          as="list"
-          alignmentY="flex-start"
-          height="80%"
-          width="100%"
-          overflowY="scroll"
-        >
+        <FlexColumn as="list" className="TagsChoosePopUpStyle__tags-list">
           {props.tags.map((tag, index) => {
             return (
               <FlexRow
                 key={`tag-${index}`}
-                height="48px"
-                width="100%"
-                alignmentX="flex-start"
+                className="TagsChoosePopUpStyle__tag-item"
                 backgroundColor={
                   index % 2 === 0 ? theme.colors.dark01 : theme.colors.white
                 }
-                padding="12px"
               >
                 {tag.name}
               </FlexRow>
@@ -59,7 +51,7 @@ const TagsChoosePopUp = (props) => {
             Cancel
           </Button>
         </FlexRow>
-      </FlexColumn>
+      </TagsChoosePopUpStyle>
     </PopUp>
   );
 };

src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../../../utils/containers';
+
+const TagsChoosePopUpStyle = styled(FlexColumn)`
+  width: 100%;
+  justify-content: flex-start;
+  height: 100%;
+  gap: 24px;
+
+  .TagsChoosePopUpStyle__tags-list {
+    height: 80%;
+    width: 100%;
+    overflow-y: scroll;
+    justify-content: flex-start;
+  }
+
+  .TagsChoosePopUpStyle__tag-item {
+    height: 48px;
+    width: 100%;
+    justify-content: flex-start;
+    padding: 12px;
+  }
+`;
+
+export default TagsChoosePopUpStyle;

src/pages/Submit/components/TagsChoosePopup/index.js

@@ -0,0 +1 @@
+export { default } from './TagsChoosePopUp';