Refactor : dropdown header css 수정 (#115)

* Feat: 톱니바퀴 아이콘 추가 사용할 톱니바퀴아이콘컴포넌트 추가. * Refactor: Dropdown header 수정 className 비매칭 문제 해결 close button css 조정. dropdown body와 padding 같게 맞춰줌. * Refactor: x 버튼 수정 해상도 문제로 png 파일에서 svg로 변경. * Refact: 드롭다운 테두리 색 수정 body에 있는 선과 색이 같도록 드롭다운 색을 변경.
boostcamp-2020 · Nov 9, 2020 · 0af308a · 0af308a
1 parent 4d083ce
commit 0af308a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 9 deletions.
diff --git a/front/src/components/Icon/CloseButtonIconComponent.js b/front/src/components/Icon/CloseButtonIconComponent.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const CloseButtonIconComponent = () => {
+  return (
+    <svg
+      aria-label="Close menu"
+      className="octicon octicon-x"
+      viewBox="0 0 16 16"
+      version="1.1"
+      width="16"
+      height="16"
+      role="img"
+    >
+      <path
+        fillRule="evenodd"
+        d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+      />
+    </svg>
+  );
+};
+
+export default CloseButtonIconComponent;
diff --git a/front/src/components/Icon/GearIconComponent.js b/front/src/components/Icon/GearIconComponent.js
diff --git a/front/src/components/Icon/index.js b/front/src/components/Icon/index.js
@@ -1,3 +1,5 @@
 export { default as OpenIconComponent } from './OpenIconComponent';
 export { default as CheckIconComponent } from './CheckIconComponent';
 export { default as ClosedIconComponent } from './ClosedIconComponent';
+export { default as GearIconComponent } from './GearIconComponent';
+export { default as CloseButtonIconComponent } from './CloseButtonIconComponent';
diff --git a/front/src/components/dropdown/Dropdown.js b/front/src/components/dropdown/Dropdown.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import color from '../../libs/color';
+import { CloseButtonIconComponent } from '../Icon';
 
 const DropdownContainer = styled.div`
   display: inline-flex;
@@ -17,7 +18,7 @@ const DropdownMenu = styled.div`
   flex-direction: column;
   margin-top: 1.8rem;
   position: absolute;
-  border: 1px solid ${color.boldBlue};
+  border: 1px solid ${color.lightGray};
   border-radius: 0.2rem;
   background-color: white;
   z-index: 11;
@@ -30,7 +31,7 @@ const DropdownBody = styled.div`
 const Header = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 0.3rem;
+  padding: 0.2rem 1rem;
   font-weight: bolder;
   .header-title {
     min-width: max-content;
@@ -48,7 +49,7 @@ const DropdownOverlay = styled.div`
 
 const CloseButton = styled.div`
   width: fit-content;
-  margin-left: 4rem;
+  margin-left: auto;
   &:hover {
     cursor: pointer;
   }
@@ -83,13 +84,9 @@ const Dropdown = ({ headerText, button, children }) => {
 const DropdownHeader = ({ headerText, toggleHandler }) => {
   return (
     <Header>
-      <div className="dropdown-header">{headerText}</div>
+      <div className="header-title">{headerText}</div>
       <CloseButton className="dropdown-button-close" onClick={toggleHandler}>
-        <img
-          className="button-image"
-          src="https://img.icons8.com/material-rounded/24/000000/delete-sign.png"
-          alt="close"
-        />
+        <CloseButtonIconComponent />
       </CloseButton>
     </Header>
   );