-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- token 유효성 검사 로직이 없음
- Loading branch information
Showing
4 changed files
with
235 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react' | ||
import App from 'next/app' | ||
import Router from 'next/router' | ||
import withGA from 'next-ga' | ||
|
||
|
||
export default withGA('G-FN3CMH8E3K', Router)(App) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
.submit { | ||
width: 100%; | ||
font-size: 1.1rem; | ||
padding: 12px 16px 12px 16px; | ||
color: #fff; | ||
background: #5a4d46; | ||
} | ||
input { | ||
border: 1px solid #5A4D46; | ||
border-radius: 4px; | ||
margin-right: 8px; | ||
} | ||
.loader { | ||
background-color: rgba(0,0,0,0.75); | ||
position: fixed; | ||
left: 0; | ||
right: 0; | ||
top: 0; | ||
bottom: 0; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
.loader div { | ||
width: 48px; | ||
height: 48px; | ||
animation: load 1.1s infinite linear; | ||
border-top: 8px solid rgba(255,255,255,0.2); | ||
border-right: 8px solid rgba(255,255,255,0.2); | ||
border-bottom: 8px solid rgba(255,255,255,0.2); | ||
border-left: 8px solid #fff; | ||
border-radius: 50%; | ||
} | ||
@-moz-keyframes load { | ||
0% { | ||
transform: rotate(0deg); | ||
} | ||
100% { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
@-webkit-keyframes load { | ||
0% { | ||
transform: rotate(0deg); | ||
} | ||
100% { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
@-o-keyframes load { | ||
0% { | ||
transform: rotate(0deg); | ||
} | ||
100% { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
@keyframes load { | ||
0% { | ||
transform: rotate(0deg); | ||
} | ||
100% { | ||
transform: rotate(360deg); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import React from 'react' | ||
import client from '@/utils/client' | ||
import { useRouter } from 'next/router' | ||
import './answer.css' | ||
import './layout.css' | ||
|
||
|
||
const LoadingSpinner = () => { | ||
return ( | ||
<div className="loader"> | ||
<div /> | ||
</div> | ||
) | ||
} | ||
|
||
|
||
const Answer = () => { | ||
const router = useRouter() | ||
const query = router.query | ||
const [choice, setChoice] = React.useState(null) | ||
const [loading, setLoading] = React.useState(false) | ||
|
||
const response = async () => { | ||
if (!choice) { | ||
alert('동의 여부를 선택해주세요.') | ||
return | ||
} | ||
|
||
try { | ||
setLoading(true) | ||
await client().post(`/api/responses`, { | ||
token: query.token, | ||
choice | ||
}) | ||
alert('답변이 저장되었습니다.\n답변이 홈페이지에 반영되기까지 다소 시간이 걸릴 수 있습니다.') | ||
} catch (e) { | ||
alert('오류가 발생했습니다. 다시 시도해주세요.') | ||
} finally { | ||
setLoading(false) | ||
} | ||
} | ||
|
||
return ( | ||
<div style={{color: '#463E39', marginTop: '8px'}}> | ||
<div className="logo"> | ||
<h3> | ||
<span>제22대 국회의원 후보자에게 묻습니다</span> | ||
</h3> | ||
</div> | ||
<hr /> | ||
<div className="container"> | ||
{/* <h3>답변할 수 있는 시한이 지났습니다.</h3> */} | ||
<h3>강간죄 구성요건을 '동의'여부로 바꾸는데 동의하십니까?</h3> | ||
<div style={{margin: '6px 0', fontSize: '1.2rem'}}> | ||
<label> | ||
<input | ||
type="radio" | ||
value={'yes'} | ||
checked={choice === 'yes'} | ||
onChange={e => setChoice(e.target.value)} | ||
/> | ||
동의합니다. | ||
</label> | ||
</div> | ||
<div style={{margin: '6px 0', fontSize: '1.2rem'}}> | ||
<label> | ||
<input | ||
type="radio" | ||
value={'no'} | ||
checked={choice === 'no'} | ||
onChange={e => setChoice(e.target.value)} | ||
/> | ||
동의하지 않습니다. | ||
</label> | ||
</div> | ||
|
||
<div style={{marginTop: '20px'}}> | ||
<button className="submit" onClick={() => response()}>저장</button> | ||
</div> | ||
{loading && <LoadingSpinner />} | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default Answer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
:global html, | ||
:global body, | ||
:global div, | ||
:global ul, | ||
:global li, | ||
:global input, | ||
:global h1, | ||
:global h2, | ||
:global h3, | ||
:global h4, | ||
:global h5 { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
:global body { | ||
font-family: "Noto Sans KR", sans-serif; | ||
} | ||
:global li { | ||
list-style: none; | ||
} | ||
:global a { | ||
color: inherit; | ||
} | ||
:global strong { | ||
background: #ffc700; | ||
color: color-strong; | ||
} | ||
:global input, | ||
:global button { | ||
border: 1px solid color-secondary; | ||
border-radius: 4px; | ||
} | ||
.container { | ||
margin: 0 auto; | ||
padding: 20px 20px 40px 20px; | ||
max-width: 640px; | ||
} | ||
.container > h1 { | ||
margin: 20px 0 20px 0; | ||
text-align: left; | ||
} | ||
.container > h1 > span { | ||
display: inline-block; | ||
} | ||
.container > h3 { | ||
margin: 20px 0 20px 0; | ||
text-align: center; | ||
} | ||
.logo { | ||
position: relative; | ||
max-width: 720px; | ||
margin: auto; | ||
text-align: right; | ||
font-size: 0; | ||
} | ||
.logo h3 { | ||
height: 32px; | ||
} | ||
.logo h3 a { | ||
display: block; | ||
position: absolute; | ||
top: 8px; | ||
right: 8px; | ||
width: 58px; | ||
height: auto; | ||
} | ||
.logo h3 a img { | ||
margin: 4px; | ||
} | ||
.logo h3 span { | ||
position: absolute; | ||
top: 12px; | ||
left: 8px; | ||
font-size: 10px; | ||
color: color-secondary; | ||
} |