2020-07-28

src/Home.js

@@ -2,19 +2,35 @@ import React from 'react'
 import { Link } from 'react-router-dom';
 
 
-function Home() {
+function Home() {        
     return (
-        <div className="Box">
-            <div className="Name">
-                이름을 입력하세요
-            <input onChange={(event) => { console.log(event.target.value) }} />
+        <>
+            <div classXName="Box">
+                <div className="Name">
+                    이름을 입력하세요
+            <input onChange={(event) => sessionStorage.setItem('name',event.target.value)} />
+                </div>
+                <button onClick={(event) =>  checking(event)}>이름입력완료</button>
+
+                {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+            </div>
+            
+            <div className='Box2'>
+                <Link to="/quiz">
+                    <button className="QuizStart">Quiz Start !</button>
+                </Link>
             </div>
-            <Link to="/quiz">
-                <button className="QuizStart">Quiz Start !</button>
-            </Link>
-        </div>
+        </>
 
     )
 }
+function checking(event) {
+
+    if (sessionStorage.getItem('name') === null||'') {
+        alert('이름을 입력하세요')
+
+        // alert('입력하신 이름은'+event.target+'입니다.')
+    }
+}
 
 export default Home;
\ No newline at end of file

src/Quiz.js

 import React from 'react'
 import { Link } from 'react-router-dom';
-import Timer from 'react-compound-timer';
+import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
 
 const question = [
-    { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
-    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
-    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
+    { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "", N:1 },
+    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N:2 },
+    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", N:3 }
 ]
 
 class Quiz extends React.Component {
@@ -13,10 +13,13 @@ class Quiz extends React.Component {
         super(props)
         this.setQuestion = this.setQuestion.bind(this)
         this.answerbox = this.answerbox.bind(this)
+        // this.enterkey = this.enterkey(this)
         this.state = {
             ...question[0],
             i: 0,
             page: 0,
+            question
+
         }
     }
     setQuestion() {
@@ -37,28 +40,36 @@ class Quiz extends React.Component {
             }
         }
     }
+    // enterkey() {
+    //     if ( window.event === 13 ) {
+    //         alert("Enter Key 입력 감지 \n함수 실행.");
+    //     }
+    // }
 
     render() {
         return (
             <div className="Quiz">
                 <h2>Q:{this.state.Q}</h2>
                 {this.answerbox()}
+                <div>
                 {this.state.Choose.map((a) =>
-                    <div>
+                    <div>{this.state.N}
                         <input type="radio" name='answer'  id={'anwer'+a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
                         <label for={a}>{a}</label>
                     </div>)                   
 
                 }
+                </div>
                 <div className="App" class='left'>정답을 입력하세요</div>
 
                 
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
                 {(this.state.page === question.length-1)
                     ? <Link to="/end">제출</Link>
-                    : <button type="button" onClick={this.setQuestion}>다음</button>
+                    : <button type="button" onClick={this.setQuestion} >다음</button>
                     
                 }
+                {/* <input onKeyPress="this.enterkey()"/> */}
                                 
                <Timer
                     initialTime={5000}
@@ -66,7 +77,8 @@ class Quiz extends React.Component {
                     checkpoints={[
                         {
                             time: 0,
-                            callback: () =>  this.setQuestion,
+                            callback: () => console.log('콜백실행')
+                            //  history.go(1)
                         }
                     ]}
                 >

src/setupTests.js

@@ -3,3 +3,17 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+
+<Segment color='blue'>
+    <Form>
+        <Form.Field>
+            정답
+        </Form.Field>
+        {this.rateScore.map(rate=>(
+            <Form.Field>
+                <Radio value={rate} checked={} onCange={}/>
+                {this.renderStar(rate)}
+            </Form.Field>
+        ))}
+    </Form>
+</Segment>