CEOS-Developers · LEE-SOOWAN65 · Oct 4, 2019 · MrKwon · Oct 5, 2019 · MrKwon
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.2"
+    "react-scripts": "3.1.2",
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/pureprofile.html b/public/pureprofile.html
@@ -0,0 +1,30 @@
+<html>
+
+<body>
+<h1>최수민</h1>
+<div>안녕하세요 저는 서강대학교의 컴퓨터공학과에 다니고 있습니다</div>안녕하세요 저는 서강대학교의 컴퓨터공학과에 다니고 있습니다</div>
+<div>올해는 25살인데 내년에는 26이에요</div>
+<div>지금 기분은 행복해요!</div>
+<h2>좋아하는 동물</h2>
+<li>사자</li>
+<li>토끼</li>
+<li>뱀</li>
+
+<h1>이한길</h1>
+<div>안녕하세요 저는 홍익대학교의 법학고에 다니고 있습니다.</div>
+<div>올해는 29살인데 내년엔 30이에요.</div>
+<div>지금 기분은 불행해요!</div>
+<h2>좋아하는 동물</h2>
+<li>펭귄</li>
+
+<h1>김서영</h1>
+<div>안녕하세요 저는 이화여자대학교의 사이버보안과에 다니고 있습니다.</div>
+<div>올해는 22살인데 내년에는 23이에요</div>
+<div>지금 기분은 불행해요!</div>
+<h2>좋아하는 동물</h2>
+<li>웜</li>
+<li>트로이목마</li>
+
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,35 @@
 import React, {Component} from 'react';
+import Profiles from "./Component/Profiles";
+
 
 class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      members : [
+        {name:'최수민', school:'서강', major:'컴퓨터공학', 
+        age:25, emotion:'행복',animal:['사자','토끼','뱀']}, //최수민 정보
+
+        {name:'이한길', school:'홍익', major:'법학', 
+        age:29, emotion:'불행',animal:['펭귄']},  //이한길 정보
+
+        {name:'김서영', school:'이화여자', major:'사이버보안학', 
+        age:22, emotion:'불행', animal:['웜','트로이목마']}  //김서영 정보
+      ]
+    }
+  }
+
   render() {
-    return <div className="App">Hello React!</div>;
+
+    return <div className="App">
+
+      <Profiles data={this.state.members[0]}></Profiles>
-      <Profiles data={this.state.members[0]}></Profiles>
+      <Profile data={this.state.members[0]}/>
-      <Profiles data={this.state.members[0]}></Profiles>
+      <Profile data={this.state.members[0]}/>
+      <Profiles data={this.state.members[1]}></Profiles>
+      <Profiles data={this.state.members[2]}></Profiles>
+
+    </div>;
+
   }
 }
 
-export default App;
+export default App;
diff --git a/src/Component/Profiles.js b/src/Component/Profiles.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+class Profiles extends Component {
+    render() {
+        var data = this.props.data;
+        var lists = [];
+
+        var Animals = [];
+        var i= 0;
+        while (i < data.animal.length) {
+            Animals.push(<li key={data.animal[i]}>{data.animal[i]}</li>);
+            i = i+ 1;
+        }
+
+        lists.push(
+            <div key={data.name}>
+
+                <h1>{data.name}</h1>
+                <div>{`안녕하세요 저는 ${data.school}대학교의 ${data.major}과에 다니고 있습니다.`}</div>
+                <div>{`올해는 ${data.age}살인데 내년엔 ${(data.age)+1}예요.`}</div>
+                <div>{`지금 기분은 ${data.emotion}해요!`}</div>
+
+                <h3>좋아하는 동물</h3>
+                    {Animals}
+
+            </div>
+        );
+
+        return (
+
+                <article>
+                    {lists}
+                </article>
+        );
+    }
+}
+
+export default Profiles;