[add] react-icon 인스톨, FaqStar 컴포넌트 추가

Author: devSeung0v0

package-lock.json

@@ -25,6 +25,7 @@
     "react-daum-postcode": "^3.0.1",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
+    "react-icons": "^4.3.1",
     "react-particles-js": "^3.6.0",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.0-beta.6",

package.json

@@ -1,9 +1,10 @@
 /*customer > FQA 페이지 */
 
-import React, { useState, useEffect } from "react";
+import React, { useState} from "react";
 import './faq.css'
 import FaqAcco from './FaqAcco';
 import Customer from './Customer';
+import FaqStar from './FaqStar';
 
 
 export default function Faq() {
@@ -24,6 +25,9 @@ export default function Faq() {
     }
 
 
+
+
+
     return(
         <>
 
@@ -60,7 +64,7 @@ export default function Faq() {
             </div>{/* e: submenu */}
 
             <FaqAcco currentMenu={currentMenu}/>
-            
+            <FaqStar />
         </div>
         <div className='faqBottomBanner'>
             <img src="/images/academy/007.png" alt="배너이미지" />

src/components/customer/Faq.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { FaStar } from 'react-icons/fa';
+import styled from 'styled-components';
+const ARRAY = [0, 1, 2, 3, 4];
+
+function Rating() {
+  const [clicked, setClicked] = useState([false, false, false, false, false]);
+
+  const handleStarClick = index => {
+    let clickStates = [...clicked];
+    for (let i = 0; i < 5; i++) {
+      clickStates[i] = i <= index ? true : false;
+    }
+    setClicked(clickStates);
+  };
+  return (
+    <Wrap>
+      <RatingText>보고 계신 답변에 얼마나 만족하시나요? 별점을 남겨주세요!</RatingText>
+      <Stars className='faqStar'>
+        {ARRAY.map((el, idx) => {
+          return (
+            <FaStar
+              key={idx}
+              size="25"
+              onClick={() => handleStarClick(el)}
+              className={clicked[el] && 'yellowStar'}
+            />
+          );
+        })}
+        
+      </Stars>
+      <RatingBtn onClick={()=>{alert('별점이 등록되었습니다.')}}>별점 남기기</RatingBtn>
+    </Wrap>
+  );
+}
+
+export default Rating;
+
+const Wrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 15px;
+  margin: 0 0 150px 60px;
+`;
+
+const RatingText = styled.div`
+  color: #787878;
+  font-size: 16px;
+  padding-left: 10px;
+  border-left: 2px solid #5ebf92;
+  
+
+`;
+
+const Stars = styled.div`
+  display: flex;
+  padding-top: 20px;
+
+  & svg {
+    fill: gray;
+    cursor: pointer;
+  }
+
+  :hover svg {
+    fill: #fcc419;
+  }
+
+  & svg:hover ~ svg {
+    fill: gray;
+  }
+
+  .yellowStar {
+    fill: #fcc419;
+  }
+`;
+
+const RatingBtn = styled.button`
+  color: #636363;
+  font-size: 14px;
+  width: 110px;
+  height:30px;
+  border: 1px solid #5ebf92;
+  border-radius: 5px;
+  margin-top: 15px;
+
+  :hover{
+    background-color : #5ebf92;
+    opacity: 0.8;
+  }
+`

src/components/customer/FaqStar.js

@@ -78,7 +78,7 @@
   /* FaqAcco.js */
 
   .accoBox {
-    margin: 0 50px 150px 50px;
+    margin: 0 50px 50px 50px;
   }
   .accoBox .accoImg {
     width: 25px;

src/components/customer/faq.css

@@ -3825,6 +3825,13 @@
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   "version" "2.2.0"
 
+"bindings@^1.5.0":
+  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
+  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
+  "version" "1.5.0"
+  dependencies:
+    "file-uri-to-path" "1.0.0"
+
 "bluebird@^3.5.5":
   "integrity" "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
   "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -6726,6 +6733,19 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^1.2.7":
+  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
+  "version" "1.2.13"
+  dependencies:
+    "bindings" "^1.5.0"
+    "nan" "^2.12.1"
+
+"fsevents@^2.1.2", "fsevents@^2.3.2", "fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -9710,6 +9730,11 @@
   "resolved" "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz"
   "version" "0.0.7"
 
+"nan@^2.12.1":
+  "integrity" "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
+  "resolved" "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz"
+  "version" "2.15.0"
+
 "nanoid@^3.3.1":
   "integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
@@ -11375,6 +11400,11 @@
   "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
   "version" "3.2.0"
 
+"react-icons@^4.3.1":
+  "integrity" "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
+  "version" "4.3.1"
+
 "react-is@^16.12.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"