yesjin-git · haemoo · Nov 2, 2019
diff --git a/2week/class/package.json b/2week/class/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "materialize-css": "^1.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"

diff --git a/2week/class/src/App.css b/2week/class/src/App.css
@@ -0,0 +1,5 @@
+.App {
+    /* background-color: skyblue; */
+    /* display: inline-block;
+    padding: 30px 15px; */
+}
diff --git a/2week/class/src/App.js b/2week/class/src/App.js
@@ -1,70 +1,81 @@
 import React, {Component} from "react"
+import Note from "./Note.js";
+import Writing from "./Writing.js";
+import "./App.css";
+import "./Note.css";
+// import "materialize-css";
+import "materialize-css/dist/css/materialize.min.css"; //css경우 경로를 일일이 써줘야 함
+
 
 class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
       //state의 초기값을 설정합니다.
-      savedNotes: [{content: "default1"}, {content: "default2"}]
+      savedNotes: [
+        {id: 0, title: "title1", content: "default1", view: true}, 
+        {id: 1, title: "title1", content: "default2", view: false},
+        {id: 2, title: "title1", content: "default3", view: true}
+    ] //(2019.10.26)모든 데이터를 saveNotes 에 저장된다
     }
   }
-
-  save = (content) => {
+  // {view ? (true) : (false) }
+  save = WritingState => {
     //설계한 함수의 상태를 확인하기 위해 save를 표시하도록 해봅시다.
-    console.log(content + "is saved")
-  }
 
+    const {savedNotes} = this.state;
+    console.log(savedNotes);
+    const lastNoteId = savedNotes.length !=0 ? savedNotes[savedNotes.length - 1].id: 0;
+    this.setState({
+      // (2019.10.26) spread operand
+      // (2019.10.26) 전개연산자 [...savedNotes, {추가하고싶은 데이터}}] savedNotes안으로 추가하고싶은 데이터가 추가된다
+      // savedNotes: [...savedNotes, { content: content }]
+      savedNotes: [
+        ...savedNotes,
+        {
+          id: lastNoteId + 1,
+          title: WritingState.title,
+          content: WritingState.content
+        }
+      ]
+
+    });
+  }
+
+  delete = (index) => {
+    console.log(index);
+    const {savedNotes} = this.state;
+    const filteredNotes = savedNotes.filter(note => note.id !== index);
+    this.setState({
+      savedNotes: filteredNotes
+    });
+  }
   render() {
     return (
       <div className='App'>
         <Writing save={this.save} />
         {/* 원래 노트를 여러개 보내므로, Notes라고 하는게 좋겠지만 추후에 Note 컴포넌트로 활용할 예정이기 때문에 Note로 명명해 줍시다.*/}
-        <Note content={this.state.savedNotes[0].content} />
+        <div className="row">
+        {this.state.savedNotes.map((note, index) => (
+            // <Note content={note.content} key={index} /> // 자바스크립트에서 () 소괄호는 바로 리턴을 의미, 노트들을 배열로 만들어 뿌려준다
+            <Note
+              delete={this.delete}
+              title={note.title}
+              content={note.content}
+              view={note.view}
+              key={note.id} 
+              index={note.id}
+            />
+        ))}
+        </div>
+
       </div>
-    )
+    );
   }
 }
 
-class Writing extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      content: ""
-    }
-  }
 
-  handleChange = (e) => {
-    console.log("changed")
-  }
 
-  handleSubmit = (e) => {
-    this.props.save("content")
-  }
 
-  render() {
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <input
-          type='text'
-          value={this.state.content}
-          onChange={this.handleChange}
-        />
-        <input type='submit' />
-      </form>
-    )
-  }
-}
-
-class Note extends Component {
-  render() {
-    const { content } = this.props
-
-    return (
-      <div>
-        {content}
-      </div>
-    )
-  }
-}
 
 export default App
diff --git a/2week/class/src/Note.css b/2week/class/src/Note.css
@@ -0,0 +1,20 @@
+
+.Note {
+    position: relative;
+}
+
+.DeleteBtn {
+    position: absolute;
+    left: 80%;
+    top: -5%;
+    z-index: 2;
+}
+
+#Icon {
+    vertical-align: middle;
+    font-size: 1em;
+}
+
+.btn-floating {
+    position: static!important;
+}
diff --git a/2week/class/src/Note.js b/2week/class/src/Note.js
@@ -0,0 +1,70 @@
+import React, {Component} from "react"
+
+class Note extends Component {
+    handleClickDelete = () => {
+        this.props.delete(this.props.index)
+    }
+
+    noteClick = () => {
+        console.log(this.props.view);
+        // this.setState({
+        //   view:false
+        // })
+    }
+
+
+    render() {
+      const { title, content, view } = this.props
+
+      return (
+        <div className="Note col s12 m4 l3">
+          <div className="DeleteBtn">
+            <div className="DeleteBtn btn-floating btn-large">
+              <i id="Icon" className="material-icons" onClick={this.handleClickDelete}>delete</i>
+            </div>
+          </div>
+          <div className="card yellow lighten-4" onClick={this.noteClick}>
+            {view ?
+            (
+            <>
+            <div className="card-content black-text">
+              <span className="card-title">
+                {title}
+              </span>
+              <p>{content}</p>
+            </div>
+            </>
+            )
+            :
+            (
+            <>
+            <div className="card-content black-text">
+            <form onSubmit={this.handleSubmit}>
+              <input
+                type='text'
+                name='title'
+                value={title}
+                onChange={this.handleChange}
+              />
+              <input
+                type='text'
+                name='content'
+                value={content}
+                onChange={this.handleChange}
+              />
+              <input
+                type="submit"
+                value="submit"
+              />
+            </form>
+          </div>
+          </>
+            )
+            }
+          </div>
+        </div>
+      )
+    }
+  }
+
+export default Note;
diff --git a/2week/class/src/Writing.js b/2week/class/src/Writing.js
@@ -0,0 +1,73 @@
+import React, {Component} from "react"
+
+class Writing extends Component {
+    constructor(props) {
+      super(props)
+      this.state = {
+        title: "",
+        content: "이 곳에 입력해주세요."
+      }
+    }
+
+    handleChange = (e) => {
+      console.log("changed")
+      console.log(e);
+      console.log(e.target);
+      // (2019.10.26) setState 키보드를 입력 할 때 마다 이벤트(e)를 받아 input안의 value 값을 받아온다
+      this.setState({
+        [e.target.name]: e.target.value
+      });
+    }
+
+    handleSubmit = (e) => {
+      this.props.save(this.state);
+      this.setState({
+          title: "",
+          content: ""
+      });
+      e.preventDefault(); // (2019.10.26) onSubmit 했을 때 화면이 새로고침(원치 않는 이벤트)를 방지한다.
+    }
+
+
+    resetContent = () => {
+      setTimeout(() => {
+        this.setState({
+          content: ""
+        });
+      }, 4000)
+    }
+
+    componentDidMount() {
+      this.resetContent();
+    }
+
+    render() {
+      return (
+        <div>
+        <form onSubmit={this.handleSubmit}>
+          <div className='input-field'>
+            <input
+              type='text'
+              name='title'
+              value={this.state.title}
+              onChange={this.handleChange}
+            />
+          </div>
+
+          <div className='input-field'>
+            <input
+              type='text'
+              name='content'
+              value={this.state.content}
+              onChange={this.handleChange}
+            />
+          </div>
+
+          <input type='submit' value='작성' />
+        </form>
+      </div>
+      )
+    }
+  }
+
+export default Writing;
diff --git a/2week/class/yarn.lock b/2week/class/yarn.lock
@@ -5170,6 +5170,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+materialize-css@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-1.0.0.tgz#8d5db1c4a81c6d65f3b2e2ca83a8e08daa24d1be"
+  integrity sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -6859,14 +6864,15 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dom@16.7.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
+react-dom@^16.7.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
+  integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0"
+    scheduler "^0.17.0"
 
 react-error-overlay@^5.1.2:
   version "5.1.2"
@@ -6926,14 +6932,14 @@ react-scripts@2.1.3:
   optionalDependencies:
     fsevents "1.2.4"
 
-react@16.7.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
+react@^16.7.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
+  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.12.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -7327,9 +7333,10 @@ saxes@^3.1.3:
   dependencies:
     xmlchars "^1.3.1"
 
-scheduler@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b"
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1