Admin.js 15.1 KB
Newer Older
김민수's avatar
김민수 committed
1
import React, { useState } from 'react';
김민수's avatar
0810    
김민수 committed
2

김민수's avatar
김민수 committed
3
4
5
6
7
8
9
10
11
12
// import { Link } from 'react-router-dom';

function Admin() {


    // let QnAadmin = []
    // let Q = []
    // let choose = []
    // let N = []

김민수's avatar
0810    
김민수 committed
13

김민수's avatar
김민수 committed
14
15
16
    const [question, setQuestion] = useState('')
    const [choose, setChoose] = useState('')
    const [answer, setAnswer] = useState('')
김민수's avatar
0810    
김민수 committed
17
18
19
    const [password, setPassword] = useState('')
    const [adminpassword, setAdminPassword] = useState('')
    const [time, setTime] = useState('')
김민수's avatar
0810    
김민수 committed
20
21
    const [addQuiz, setaddQuiz] = useState('')
    const [selectOption, setselectOption] = useState('')
김민수's avatar
0810    
김민수 committed
22

김민수's avatar
김민수 committed
23
24
    const [done, setDone] = useState(false)

김민수's avatar
0810    
김민수 committed
25
26

    const handleChangeQuestion = (event) => {
김민수's avatar
김민수 committed
27
28
29
30
31
32
33
34
        setQuestion(event.target.value)
    }
    const handleChangechoose = (event) => {
        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {
        setAnswer(event.target.value)
    }
김민수's avatar
0810    
김민수 committed
35
36
37
38
39
40
41
42
43
44
    const handleChangePassword = (event) => {
        setPassword(event.target.value)
    }
    const handleChangeAdminPassword = (event) => {
        setAdminPassword(event.target.value)
    }
    const handleChangeTime = (event) => {
        setTime(event.target.value)
    }

김민수's avatar
김민수 committed
45
46
47
48
49
50
51

    function handleClick() {

        alert('입력이 완료되었습니다')
        localStorage.setItem('Q', question)
        localStorage.setItem('Choose', choose)
        localStorage.setItem('Answer', answer)
김민수's avatar
0810    
김민수 committed
52
53
54
55
        localStorage.setItem('P', password)
        localStorage.setItem('AP', adminpassword)
        localStorage.setItem('T', time * 1000)

김민수's avatar
김민수 committed
56
        setDone(true)
김민수's avatar
김민수 committed
57
    }
김민수's avatar
김민수 committed
58
59


김민수's avatar
0810    
김민수 committed
60
61
62
63
64
65
66
67
    function addSelectOption() {
        let list = function () {
            return <div className="input-group">
                <div className="input-group-prepend">
                    <div className="input-group-text">
                        <input type="radio" id="option" />
                    </div>
                </div>
김민수's avatar
김민수 committed
68
                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
김민수's avatar
0810    
김민수 committed
69
70
71
            </div>
        }
        setselectOption(list)
김민수's avatar
김민수 committed
72
    }
김민수's avatar
김민수 committed
73

김민수's avatar
0810    
김민수 committed
74
    function handleClickQuiz() {
김민수's avatar
0810    
김민수 committed
75
        let addQuiz = function () {
김민수's avatar
김민수 committed
76
            return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz4" role="tab" >Quiz</a>
김민수's avatar
0810    
김민수 committed
77
78
79
        }
        setaddQuiz(addQuiz)
    }
김민수's avatar
김민수 committed
80
81
82
83

    return (
        <>
            {done ? alert('모두 입력되었습니다.') : ''}
김민수's avatar
김민수 committed
84
85
86
            <div className="row justify-content-md-center mt-5 ">
                <div className="col-2 text-center border">
                    <div className="container-fluid ">
김민수's avatar
0810    
김민수 committed
87

김민수's avatar
김민수 committed
88
                        <p className="border-bottom h3">관리자 페이지</p>
김민수's avatar
0810    
김민수 committed
89

김민수's avatar
김민수 committed
90
91
                        
                            <p className="border-bottom h5">관리자 설정 변경하기</p>
김민수's avatar
0810    
김민수 committed
92

김민수's avatar
김민수 committed
93
                            <a className="" id="setting-tab" data-toggle='pill' href="#setting" role="tab">Setting</a>
김민수's avatar
김민수 committed
94

김민수's avatar
0810    
김민수 committed
95

김민수's avatar
김민수 committed
96
97
98
99
100
                            <p className="border-bottom h5">Quiz 입력하기</p>

                            <a className="nav-link" id="Quiz1-tab" data-toggle="pill" href="#Quiz1" role="tab" >Quiz1</a>
                            <a className="nav-link" id="Quiz2-tab" data-toggle="pill" href="#Quiz2" role="tab" >Quiz2</a>
                            <a className="nav-link" id="Quiz3-tab" data-toggle="pill" href="#Quiz3" role="tab" >Quiz3</a>
김민수's avatar
0810    
김민수 committed
101
                            {addQuiz}
김민수's avatar
김민수 committed
102
                            <button className="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
김민수's avatar
0810    
김민수 committed
103

김민수's avatar
김민수 committed
104

김민수's avatar
김민수 committed
105
                        
김민수's avatar
0810    
김민수 committed
106
107
                    </div>
                </div>
김민수's avatar
김민수 committed
108
                <div className="col-8">
김민수's avatar
0810    
김민수 committed
109
                    <div className="tab-content" id="v-pills-tabContent">
김민수's avatar
김민수 committed
110
                        <div className="tab-pane fade show active" id="setting" role="tabpanel" >
김민수's avatar
0810    
김민수 committed
111
112
113
114
                            <div>
                                <div className="container">
                                    <div className="row d-flex justify-content-center">
                                        <div className="col-8">
김민수's avatar
김민수 committed
115

김민수's avatar
김민수 committed
116
                                            <h1 className="p-3 border">관리자 설정 변경 </h1>
김민수's avatar
0810    
김민수 committed
117
                                            <div className="p-3 border">
김민수's avatar
김민수 committed
118
119
                                                <h2>변경할 비밀번호를 입력하세요</h2>
                                                <input type="text" onChange={handleChangePassword} placeholder="New Password" />
김민수's avatar
김민수 committed
120

김민수's avatar
0810    
김민수 committed
121
122
                                            </div>
                                            <div className="p-3 border">
김민수's avatar
김민수 committed
123
124
                                                <h2>변경할 관리자 비밀번호를 입력하세요</h2>
                                                <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
김민수's avatar
0810    
김민수 committed
125
126
127

                                            </div>
                                            <div className="p-3 border">
김민수's avatar
김민수 committed
128
129
                                                <h2>타이머를 설정하세요(초단위)</h2>
                                                <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
김민수's avatar
0810    
김민수 committed
130
131
132
133
134
135
136
137
138
139
140

                                            </div>


                                            <label for="inputLogin" className="d-flex justify-content-center">
                                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                                            </label>

                                        </div>
                                    </div>
                                </div>
김민수's avatar
김민수 committed
141
142
143

                            </div>

김민수's avatar
0810    
김민수 committed
144
                        </div>
김민수's avatar
0810    
김민수 committed
145

김민수's avatar
김민수 committed
146
                        <div className="tab-pane fade" id="Quiz1" role="tabpanel" >
김민수's avatar
0810    
김민수 committed
147
148
149
150
151

                            <div className="container">
                                <div className="row d-flex justify-content-center">
                                    <div className="col-8">

김민수's avatar
김민수 committed
152
                                        <h2 className="p-3 border text-center">문제만들기</h2>
김민수's avatar
0810    
김민수 committed
153

김민수's avatar
0810    
김민수 committed
154
155
156
157
                                        <div className="p-3 borber">
                                            <div className="p-3 ">
                                                <span className="font-weight-bold mr-2 h3">1.</span>
                                                {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
김민수's avatar
김민수 committed
158
                                                <input type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
김민수's avatar
김민수 committed
159

김민수's avatar
0810    
김민수 committed
160
                                            </div>
김민수's avatar
0810    
김민수 committed
161

김민수's avatar
0810    
김민수 committed
162
163
164
                                            <div className="p-3 ">
                                                <div className="input-group">
                                                    <div className="input-group-prepend">
김민수's avatar
김민수 committed
165
                                                        <div className="input-group-text">
김민수's avatar
0810    
김민수 committed
166
167
168
                                                            <input type="radio" id="option" />
                                                        </div>
                                                    </div>
김민수's avatar
김민수 committed
169
                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
김민수's avatar
0810    
김민수 committed
170
171
                                                </div>
                                                {selectOption}
김민수's avatar
0810    
김민수 committed
172

김민수's avatar
0810    
김민수 committed
173
174
175
                                                <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>

                                            </div>
김민수's avatar
0810    
김민수 committed
176

김민수's avatar
0810    
김민수 committed
177
178
                                            <div className="p-3 ">
                                                <span className="font-weight-bold mr-2 h3">정답:</span>
김민수's avatar
김민수 committed
179
                                                <input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
김민수's avatar
0810    
김민수 committed
180
                                            </div>
김민수's avatar
0810    
김민수 committed
181

김민수's avatar
0810    
김민수 committed
182
183
184
185
186
                                            <label for="inputLogin" className="d-flex justify-content-center">
                                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                                            </label>

                                        </div>
김민수's avatar
0810    
김민수 committed
187
188
                                    </div>
                                </div>
김민수's avatar
김민수 committed
189

김민수's avatar
김민수 committed
190
191
192
193
194
195
196
197
198
199
200
201
202
203
                                <div className="p-3 ">
                                    <div className="input-group">
                                        <div className="input-group-prepend">
                                            <div className="input-group-text">
                                                <input type="radio" id="option" />
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                    </div>
                                    {selectOption}

                                    <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>

                                </div>
김민수's avatar
0810    
김민수 committed
204
205
                            </div>

김민수's avatar
김민수 committed
206
                            <div className="tab-pane fade" id="Quiz2" role="tabpanel">
김민수's avatar
0810    
김민수 committed
207

김민수's avatar
김민수 committed
208
209
210
                                <div className="container">
                                    <div className="row d-flex justify-content-center">
                                        <div className="col-8">
김민수's avatar
0810    
김민수 committed
211

김민수's avatar
김민수 committed
212
                                            <h2 className="p-3 border text-center">문제만들기</h2>
김민수's avatar
0810    
김민수 committed
213

김민수's avatar
김민수 committed
214
215
216
217
218
                                            <div className="p-3 borber">
                                                <div className="p-3 ">
                                                    <span className="font-weight-bold mr-2 h3">1.</span>
                                                    {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
                                                    <input type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
김민수's avatar
0810    
김민수 committed
219

김민수's avatar
김민수 committed
220
                                                </div>
김민수's avatar
0810    
김민수 committed
221

김민수's avatar
김민수 committed
222
223
224
225
226
227
                                                <div className="p-3 ">
                                                    <div className="input-group">
                                                        <div className="input-group-prepend">
                                                            <div className="input-group-text">
                                                                <input type="radio" id="option" />
                                                            </div>
김민수's avatar
0810    
김민수 committed
228
                                                        </div>
김민수's avatar
김민수 committed
229
                                                        <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
김민수's avatar
0810    
김민수 committed
230
                                                    </div>
김민수's avatar
김민수 committed
231
                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
김민수's avatar
0810    
김민수 committed
232
233
                                                </div>
                                                {selectOption}
김민수's avatar
0810    
김민수 committed
234

김민수's avatar
김민수 committed
235
                                                <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
김민수's avatar
0810    
김민수 committed
236

김민수's avatar
김민수 committed
237
                                            </div>
김민수's avatar
0810    
김민수 committed
238

김민수's avatar
김민수 committed
239
240
                                            <div className="p-3 ">
                                                <span className="font-weight-bold mr-2 h3">정답:</span>
김민수's avatar
김민수 committed
241
                                                <input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
김민수's avatar
김민수 committed
242
                                            </div>
김민수's avatar
0810    
김민수 committed
243

김민수's avatar
김민수 committed
244
245
246
                                            <label for="inputLogin" className="d-flex justify-content-center">
                                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                                            </label>
김민수's avatar
0810    
김민수 committed
247
248

                                        </div>
김민수's avatar
0810    
김민수 committed
249
250
251
                                    </div>
                                </div>
                            </div>
김민수's avatar
김민수 committed
252
                        </div>
김민수's avatar
김민수 committed
253
254
255
256
257
                    </div>
                    <div className="tab-pane fade" id="Quiz3" role="tabpanel">
                        <div className="container">
                            <div className="row d-flex justify-content-center">
                                <div className="col-8">
김민수's avatar
0810    
김민수 committed
258

김민수's avatar
김민수 committed
259
                                    <h2 className="p-3 border text-center">문제만들기</h2>
김민수's avatar
0810    
김민수 committed
260

김민수's avatar
김민수 committed
261
262
263
264
265
                                    <div className="p-3 borber">
                                        <div className="p-3 ">
                                            <span className="font-weight-bold mr-2 h3">1.</span>
                                            {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
                                            <input type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
김민수's avatar
0810    
김민수 committed
266

김민수's avatar
김민수 committed
267
                                        </div>
김민수's avatar
0810    
김민수 committed
268

김민수's avatar
김민수 committed
269
270
271
272
273
                                        <div className="p-3 ">
                                            <div className="input-group">
                                                <div className="input-group-prepend">
                                                    <div className="input-group-text">
                                                        <input type="radio" id="option" />
김민수's avatar
0810    
김민수 committed
274
275
                                                    </div>
                                                </div>
김민수's avatar
김민수 committed
276
                                                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
김민수's avatar
김민수 committed
277
                                            </div>
김민수's avatar
김민수 committed
278
279
280
                                            <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                        </div>
                                        {selectOption}
김민수's avatar
0810    
김민수 committed
281

김민수's avatar
김민수 committed
282
                                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
김민수's avatar
0810    
김민수 committed
283

김민수's avatar
김민수 committed
284
                                    </div>
김민수's avatar
0810    
김민수 committed
285

김민수's avatar
김민수 committed
286
287
288
                                    <div className="p-3 ">
                                        <span className="font-weight-bold mr-2 h3">정답:</span>
                                        <input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
김민수's avatar
김민수 committed
289
                                    </div>
김민수's avatar
김민수 committed
290
291
292
293
294

                                    <label for="inputLogin" className="d-flex justify-content-center">
                                        <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                                    </label>

김민수's avatar
0810    
김민수 committed
295
296
297
                                </div>
                            </div>
                        </div>
김민수's avatar
김민수 committed
298
299
300
                    </div>
                </div>
            </div>
김민수's avatar
0810    
김민수 committed
301

김민수's avatar
김민수 committed
302
303
304
305
306
        </>
    )
}

export default Admin