From 2c09e9f494f6dafe98adffbda7312ca256ffcd64 Mon Sep 17 00:00:00 2001 From: Railine Date: Wed, 30 Oct 2019 23:14:13 +0900 Subject: [PATCH] jiwoo 2week --- 2week/class/package.json | 1 + 2week/class/src/App.css | 3 + 2week/class/src/App.js | 125 +++++++++++++++++++++++-------------- 2week/class/src/Edit.js | 58 +++++++++++++++++ 2week/class/src/Note.css | 14 +++++ 2week/class/src/Note.js | 56 +++++++++++++++++ 2week/class/src/Writing.js | 58 +++++++++++++++++ 2week/class/yarn.lock | 29 +++++---- 8 files changed, 287 insertions(+), 57 deletions(-) create mode 100644 2week/class/src/App.css create mode 100644 2week/class/src/Edit.js create mode 100644 2week/class/src/Note.css create mode 100644 2week/class/src/Note.js create mode 100644 2week/class/src/Writing.js diff --git a/2week/class/package.json b/2week/class/package.json index 471fac85d..6ba730739 100644 --- 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 new file mode 100644 index 000000000..c2cc86040 --- /dev/null +++ b/2week/class/src/App.css @@ -0,0 +1,3 @@ +.App{ + background-color: white; +} \ No newline at end of file diff --git a/2week/class/src/App.js b/2week/class/src/App.js index ff5fbe379..93f2c0f96 100644 --- a/2week/class/src/App.js +++ b/2week/class/src/App.js @@ -1,67 +1,100 @@ import React, {Component} from "react" +import "./App.css"; +import "materialize-css"; +import "materialize-css/dist/css/materialize.min.css"; +import Note from "./Note.js"; +import Writing from "./Writing.js"; +// import Edit from "./Edit.js"; class App extends Component { constructor(props) { super(props) - this.state = { - //state의 초기값을 설정합니다. - savedNotes: [{content: "default1"}, {content: "default2"}] + this.state = { + savedNotes: [ + {id:0, title: "title1", content: "default1", view:false}, + {id:1, title: "title2", content: "default2", view:true}, + {id:2, title: "title3", content: "default3", view:false} + ] } } + - save = (content) => { - //설계한 함수의 상태를 확인하기 위해 save를 표시하도록 해봅시다. - console.log(content + "is saved") + save = writingState => { + const { savedNotes } = this.state; //es6문법 디스트럭처링 , 객체 구조분해할당 + const lastNoteId = savedNotes.length != 0 ? savedNotes[savedNotes.length -1].id: 0; + this.setState({ + savedNotes: [...savedNotes, + { + id: lastNoteId +1, + title: writingState.title, + content: writingState.content, + view: writingState.content, + } + ] //스프레드 연산자 spread operand 전개연산자 ... savedNotes를 그대로 복사 깊은복사 얕은복사 + }); + console.log("save"); } - render() { - return ( -
- - {/* 원래 노트를 여러개 보내므로, Notes라고 하는게 좋겠지만 추후에 Note 컴포넌트로 활용할 예정이기 때문에 Note로 명명해 줍시다.*/} - -
- ) - } -} + -class Writing extends Component { - constructor(props) { - super(props) - this.state = { - content: "" - } - } + delete = index =>{ + // console.log(index); + const {savedNotes} = this.state + const filteredNotes = savedNotes.filter((note)=> note.id !== index) - handleChange = (e) => { - console.log("changed") - } + this.setState({ + savedNotes: filteredNotes + }); + }; + + edit = index =>{ + // console.log(index); + const {savedNotes} = this.state + const filteredNotes = savedNotes.findIndex(note=> note.id === index); + + const selected= savedNotes[filteredNotes]; + const nextNotes = [...savedNotes]; + + nextNotes[index] = { + ...selected, + view: !selected.checked + } + this.setState({ + savedNotes : nextNotes + }); + }; - handleSubmit = (e) => { - this.props.save("content") + edit2 = (writingState, index) =>{ + const { savedNotes } = this.state; + // const filteredNotes = savedNotes.findIndex(note=> note.id === index); + // const lastNoteId = savedNotes.length != 0 ? savedNotes[savedNotes.length -1].id: 0; + const changeArray = savedNotes.map(note => note.id === index ? ({...note, title:writingState.title, content:writingState.content}) : note); + this.setState({ + savedNotes : changeArray + }); } - render() { - return ( -
- - -
- ) - } -} -class Note extends Component { render() { - const { content } = this.props - return ( -
- {content} +
+ + {/* 원래 노트를 여러개 보내므로, Notes라고 하는게 좋겠지만 추후에 Note 컴포넌트로 활용할 예정이기 때문에 Note로 명명해 줍시다.*/} +
+ {this.state.savedNotes.map((note, index) => ( //소괄호() 바로 return 하겠다 + + ))} +
) } diff --git a/2week/class/src/Edit.js b/2week/class/src/Edit.js new file mode 100644 index 000000000..332720d1c --- /dev/null +++ b/2week/class/src/Edit.js @@ -0,0 +1,58 @@ +import React, {Component} from 'react'; + +class Edit extends Component{ + constructor(props) { + super(props) + this.state = { + title:this.props.title, + content:this.props.content, + view: this.props.view + } + } + + handleChange = (e) => { + this.setState({ + [e.target.name]: e.target.value + }); + }; + + handleSubmit = (e) => { + const {view} = this.props; + this.props.edit2(this.state, this.props.index); + console.log(this.state.title, this.state.content) + console.log(view); + // {view ? ('트루') : ('펄스')} + // this.setState({ + // view : 'false' + // }) + e.preventDefault(); + }; + + render(){ + return( +
+
+
+ +
+
+ +
+ +
+
+ ) + } +} + +export default Edit; \ No newline at end of file diff --git a/2week/class/src/Note.css b/2week/class/src/Note.css new file mode 100644 index 000000000..508c5a3c1 --- /dev/null +++ b/2week/class/src/Note.css @@ -0,0 +1,14 @@ +.Note{ + position: relative; +} + +.DeleteBtn{ + position: absolute; + left:80%; + top:-5%; +} + +#Icon{ + vertical-align: middle; + font-size: 1rem; +} \ No newline at end of file diff --git a/2week/class/src/Note.js b/2week/class/src/Note.js new file mode 100644 index 000000000..d63cdcd74 --- /dev/null +++ b/2week/class/src/Note.js @@ -0,0 +1,56 @@ +import React, {Component} from 'react'; +import "./Note.css"; +import Edit from './Edit.js'; + +class Note extends Component { + + handleClickDelete = () =>{ + this.props.delete(this.props.index); + }; + + noteClickFunc = () =>{ + this.props.edit(this.props.index); + } + + render() { + const { save,edit2,index,content,title,view } = this.props; + + return ( +
+
+
+ delete +
+
+
+
+ + {view ? ( + <> + + + ) : + ( + <> +

{title}

+

{content}

+ + ) + } + +
+
+
+ + ) + } + } + + export default Note; \ No newline at end of file diff --git a/2week/class/src/Writing.js b/2week/class/src/Writing.js new file mode 100644 index 000000000..02c490b95 --- /dev/null +++ b/2week/class/src/Writing.js @@ -0,0 +1,58 @@ +import React, {Component} from 'react'; + +class Writing extends Component { + constructor(props) { + super(props) + this.state = { + title:"", + content: "" + } + } + + + handleChange = (e) => { + //console.log(e); + this.setState({ + [e.target.name]: e.target.value + }); + }; + + handleSubmit = (e) => { + this.props.save(this.state); + this.setState({ + title:"", + content: "" + }); + e.preventDefault(); + }; + + render() { + return ( +
+
+
+ +
+ +
+ +
+ + +
+
+ ) + } + } + + export default Writing; \ No newline at end of file diff --git a/2week/class/yarn.lock b/2week/class/yarn.lock index b5a104a59..31eee6f7d 100644 --- 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"