From 2e90689075e53d0f5d1970c254af807a9165ae2d Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sat, 12 Dec 2020 23:44:16 +0900
Subject: [PATCH 1/2] [Feature] Intall dependency react-icons

---
 package-lock.json | 5 +++++
 package.json      | 1 +
 2 files changed, 6 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b8f2fbf..0bd882b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11289,6 +11289,11 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-icons": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
+      "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 092e645..9de6f09 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "react-content-loader": "^5.1.4",
     "react-dom": "^17.0.1",
     "react-draft-wysiwyg": "^1.14.5",
+    "react-icons": "^4.1.0",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",

From 9b47f4efc7a44ea80bb875c881d1a004d4a5ae38 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sat, 12 Dec 2020 23:44:49 +0900
Subject: [PATCH 2/2] [Feature] Approved view

---
 .../introduce/ApplyStatusButton.jsx           |  4 +--
 src/styles/ApproveStatus.jsx                  | 29 ++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/introduce/ApplyStatusButton.jsx b/src/components/introduce/ApplyStatusButton.jsx
index e7a5e60..17ca69d 100644
--- a/src/components/introduce/ApplyStatusButton.jsx
+++ b/src/components/introduce/ApplyStatusButton.jsx
@@ -24,7 +24,7 @@ const ApplyStatusButton = ({
   if (!timeStatus && !checkConfirm(userStatus.confirm)) {
     return (
       <>
-        <ApproveStatus>
+        <ApproveStatus load>
           승인 대기중..
         </ApproveStatus>
         <StyledApplyStatusButton
@@ -41,7 +41,7 @@ const ApplyStatusButton = ({
   if (!timeStatus && checkConfirm(userStatus.confirm)) {
     return (
       <>
-        <ApproveStatus>
+        <ApproveStatus approve>
           승인 완료!
         </ApproveStatus>
         <StyledApplyStatusButton
diff --git a/src/styles/ApproveStatus.jsx b/src/styles/ApproveStatus.jsx
index d9b5e40..5de1297 100644
--- a/src/styles/ApproveStatus.jsx
+++ b/src/styles/ApproveStatus.jsx
@@ -1,6 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
+import { ImCheckmark } from 'react-icons/im';
+
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import palette from './palette';
@@ -11,8 +14,15 @@ const ApproveStatusWrapper = styled.div`
   font-weight: bold;
   line-height: 0;
   font-size: 1rem;
-  color: ${palette.violet[4]};
   padding: 0.8rem 1rem;
+
+  ${({ load }) => load && css`
+    color: ${palette.violet[4]};
+  `};
+
+  ${({ approve }) => approve && css`
+    color:#40c057;
+  `};
 `;
 
 const LoadingContent = styled.span`
@@ -32,11 +42,16 @@ const LoadingContent = styled.span`
   }
 `;
 
-const ApproveStatus = ({ children, ...props }) => (
-  <ApproveStatusWrapper {...props}>
-    {children}
-    <LoadingContent />
-  </ApproveStatusWrapper>
-);
+const ApproveStatus = ({ children, ...props }) => {
+  const { load, approve } = props;
+
+  return (
+    <ApproveStatusWrapper {...props}>
+      {children}
+      {load && <LoadingContent />}
+      {approve && <ImCheckmark style={{ marginLeft: 4 }} /> }
+    </ApproveStatusWrapper>
+  );
+};
 
 export default ApproveStatus;