합치자2

package.json

@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
+    "chart.js": "^2.9.4",
     "node": "^15.4.0",
     "react": "^17.0.1",
+    "react-chartjs-2": "^2.11.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "react-svg-radar-chart": "^1.2.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/Influencer.css

@@ -0,0 +1,72 @@
+.Influencer {
+  min-height: 100vh;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.list_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.influencer_container {
+  max-width: 400px;
+  cursor: pointer;
+  margin: 1rem;
+}
+
+.influencer_container img {
+  width: 400px;
+}
+.influencer_container p {
+  width: inherit;
+}
+/*
+input[id="menuicon"] + label {
+  cursor: pointer;
+  transition: all 0.35s;
+  z-index: 100;
+}
+*/
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  transition: all 0.5s;
+  z-index: 100000;
+
+  opacity: 0;
+  visibility: hidden;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+}
+
+.background img {
+  height: 600px;
+  margin: 1rem;
+  object-fit: cover;
+}
+/*
+input#menuicon:checked ~ .background {
+  opacity: 1;
+  visibility: visible;
+}
+*/
+
+.detail_text {
+  max-width: 600px;
+  margin: 1rem;
+}

src/Influencer.js

@@ -0,0 +1,94 @@
+import React from "react";
+import "./Influencer.css";
+
+class Influencer extends React.Component {
+  state = {
+    data: null,
+    person: 1,
+    opacity: 0,
+    visibility: "hidden",
+    scroll: "scroll",
+  };
+
+  showDetails = (prop) => {
+    console.log(prop + "Selected!!!");
+
+    this.setState({
+      person: prop,
+      opacity: 1,
+      visibility: "visible",
+    });
+  };
+
+  render() {
+    return (
+      <div className="Influencer">
+        <div
+          className="background"
+          onClick={() => this.setState({ opacity: 0, visibility: "hidden" })}
+          style={{
+            opacity: this.state.opacity,
+            visibility: this.state.visibility,
+          }}
+        >
+          <img src="./people.png" />
+          <div className="detail_text">
+            <h3>Influencer {this.state.person}</h3>
+            <p>
+              Lorem Ipsum em. Aenean lacinia efficitur ex, eget lobortis purus
+              venem. Aenean lacinia efficitur ex, eget lobortis purus ven em.
+              Aenean lacinia efficitur ex, eget lobortis purus venem. Aenean
+              lacinia efficitur ex, eget lobortis purus ven em. Aenean lacinia
+              efficitur ex, eget lobortis purus venem. Aenean lacinia efficitur
+              ex, eget lobortis purus ven
+            </p>
+          </div>
+        </div>
+        <h1>이런 인플루언서도 있어요...</h1>
+        <div className="list_container">
+          <div
+            onClick={() => {
+              this.showDetails(1);
+            }}
+            className="influencer_container"
+          >
+            <img src="./people.png" />
+            <p>LOREM</p>
+            <p>
+              em. Aenean lacinia efficitur ex, eget lobortis purus venem. Aenean
+              lacinia efficitur ex, eget lobortis purus ven
+            </p>
+          </div>
+          <div
+            onClick={() => {
+              this.showDetails(2);
+            }}
+            className="influencer_container"
+          >
+            <img src="./people.png" />
+            <p>IPSUM</p>
+            <p>
+              em. Aenean lacinia efficitur ex, eget lobortis purus venem. Aenean
+              lacinia efficitur ex, eget lobortis purus ven
+            </p>
+          </div>
+          <div
+            onClick={() => {
+              this.showDetails(3);
+            }}
+            className="influencer_container"
+          >
+            <img src="./people.png" />
+            <p>DOLOR</p>
+            <p>
+              em. Aenean lacinia efficitur ex, eget lobortis purus ven em.
+              Aenean lacinia efficitur ex, eget lobortis purus ven
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Influencer;

src/StatChart.css

@@ -0,0 +1,33 @@
+.shape:hover {
+  fill-opacity: 0.3;
+}
+
+.Chart path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: dash 4s linear forwards, filling 4s ease-in forwards;
+}
+
+.caption {
+  font-size: 1rem;
+  text-shadow: none;
+}
+
+@keyframes dash {
+  from {
+    stroke-opacity: 0.3;
+  }
+  to {
+    stroke-dashoffset: 0;
+    stroke-opacity: 1;
+  }
+}
+
+@keyframes filling {
+  from {
+    fill-opacity: 0;
+  }
+  to {
+    fill-opacity: 0.3;
+  }
+}

src/StatChart.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import Chart from "chart.js";
+import "./StatChart.css";
+
+function StyleChart() {
+    useEffect(() => {
+        const ctx = document.getElementById("myChart");
+        new Chart(ctx, {
+            type: "pie",
+            data: {
+                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+                datasets: [
+                    {
+                        label: "# of Votes",
+                        data: [12, 19, 3, 5, 2, 3],
+                        backgroundColor: [
+                            "Red",
+                            "Blue",
+                            "Yellow",
+                            "Green",
+                            "Purple",
+                            "Orange",
+                        ],
+                        borderColor: [
+                            "Red",
+                            "Blue",
+                            "Yellow",
+                            "Green",
+                            "Purple",
+                            "Orange",
+                        ],
+                        borderWidth: 1,
+                    },
+                ],
+            },
+        });
+    });
+    return (
+        <div className="StyleChart">
+            <canvas id="myChart" width="50" height="50" />
+        </div>
+    );
+}
+
+export default StyleChart;

src/StyleStat.js

@@ -1,26 +1,99 @@
-function StyleStat() {
+import React from "react";
+import RadarChart from "react-svg-radar-chart";
+import "react-svg-radar-chart/build/css/index.css";
+import "./StatChart.css";
+
+const data = [
+  {
+    data: {
+      battery: 0.7,
+      design: 0.8,
+      useful: 0.9,
+      speed: 0.67,
+      weight: 0.8,
+      hello: 0.7,
+      hallo: 0.5,
+      hbello: 0.7,
+      hcello: 0.5,
+      hdello: 0.6,
+    },
+    meta: { color: "blue" },
+  },
+  {
+    data: {
+      battery: 0.6,
+      design: 0.85,
+      useful: 0.5,
+      speed: 0.6,
+      weight: 0.7,
+      hello: 0.6,
+      hallo: 0.7,
+      hbello: 0.6,
+      hcello: 0.55,
+      hdello: 0.7,
+    },
+    meta: { color: "red" },
+  },
+];
+
+const captions = {
+  // columns
+  battery: "Battery Capacity",
+  design: "Design",
+  useful: "Usefulness",
+  speed: "Speed",
+  weight: "Weight",
+  hello: "hello",
+  hallo: "hallo",
+  hbello: "hbello",
+  hcello: "hcello",
+  hdello: "hdello",
+};
+
+class StyleStat extends React.Component {
+  state = {
+    data: null,
+  };
+
+  componentDidMount() {
+    this.setState({});
+  }
+
+  render() {
     return (
-        <div className="StyleView">
-            <h1>스타일 유형에 대한 설명</h1>
-            <div className="view_container">
-                <div className="view_text">
-                    <h3>스타일 유형</h3>
-                    <p>
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing
-                        elit. Pellentesque nec leo neque. Pellentesque sed"
-                    </p>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Pellentesque nec leo neque. Pellentesque sed est mattis,
-                        rhoncus elit eu,tortor quis interdum fermentum, magna
-                        leo pulvinar arcu, cursus rhoncus nulla turpis quis sem.
-                        Aenean lacinia efficitur ex, eget lobortis purus ven
-                    </p>
-                </div>
-                <img src="./5.png" className="photo"></img>
-            </div>
+      <div className="StyleView">
+        {/*<div className="Chart">
+                    <StyleChart />
+                </div>*/}
+
+        <h1>스타일 유형에 대한 설명</h1>
+        <div className="view_container">
+          <div className="view_text">
+            <h3>스타일 유형</h3>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque nec leo neque. Pellentesque sed"
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque nec leo neque. Pellentesque sed est mattis, rhoncus
+              elit eu,tortor quis interdum fermentum, magna leo pulvinar arcu,
+              cursus rhoncus nulla turpis quis sem. Aenean lacinia efficitur ex,
+              eget lobortis purus ven
+            </p>
+          </div>
+          <div className="Chart">
+            <RadarChart
+              captions={captions}
+              data={data}
+              size={450}
+              dots={true}
+            />
+          </div>
         </div>
+      </div>
     );
+  }
 }
 
 export default StyleStat;