Merge pull request #16 from NullFull/response-page

후보자가 답변하는 페이지 제작(call21st 코드 가져옴)

package.json

@@ -12,6 +12,7 @@
  "firebase-admin": "^12.0.0",
  "isomorphic-unfetch": "^4.0.2",
  "next": "14.1.0",
+ "next-ga": "^2.3.4",
  "react": "^18",
  "react-dom": "^18",
  "react-select": "^5.8.0",

pages/_app.js

@@ -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)

pages/answer.css

@@ -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);
+ }
+}

pages/answer.js

@@ -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>강간죄 구성요건을 &apos;동의&apos;여부로 바꾸는데 동의하십니까?</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;

pages/layout.css

@@ -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;
+}