diff --git a/package.json b/package.json index 6067205..25beb88 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..2fde2db --- /dev/null +++ b/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) diff --git a/pages/answer.css b/pages/answer.css new file mode 100644 index 0000000..e122166 --- /dev/null +++ b/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); + } +} diff --git a/pages/answer.js b/pages/answer.js new file mode 100644 index 0000000..6fe0c10 --- /dev/null +++ b/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 ( +
+
+
+ ) +} + + +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 ( +
+
+

+ 제22대 국회의원 후보자에게 묻습니다 +

+
+
+
+ {/*

답변할 수 있는 시한이 지났습니다.

*/} +

강간죄 구성요건을 '동의'여부로 바꾸는데 동의하십니까?

+
+ +
+
+ +
+ +
+ +
+ {loading && } +
+
+ ) +} + +export default Answer; diff --git a/pages/layout.css b/pages/layout.css new file mode 100644 index 0000000..9ee1103 --- /dev/null +++ b/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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 665fc41..2c69c17 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,9 +4,22 @@ import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); +const title: string = "제22대 국회에 요구한다" +const desc: string = "제22대 국회의원 후보자들에게 묻습니다" + export const metadata: Metadata = { - title: "제22대 국회에 요구한다", - description: "제22대 국회의원 후보자들에게 묻습니다", + title: title, + description: desc, + openGraph: { + type: "website", + url: "https://call22nd.works", + siteName: title, + description: desc, + images: [ + "./opengraph-image.png", + ], + + } }; export default function RootLayout({ diff --git a/src/app/main.css b/src/app/main.css index 943bdca..8b6a228 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -21,9 +21,10 @@ } .logo { + display: flex; + flex-direction: row; width: 360px; height: 100px; - position: relative; font-family: 'Abel', 'Noto Sans KR', 'Pretendard'; } @@ -34,6 +35,12 @@ position: relative; } +.listTitle { + width: 360px; + margin-top: 30px; + position: relative; +} + .worker { font-size: x-large; word-break: keep-all; @@ -52,18 +59,19 @@ } .purpleButton { + margin-top: 16px; background-color: #E38FDD; - width: 240px; - height: 66px; + width: 320px; + height: 64px; border: none; - border-radius: 33px; + border-radius: 32px; } .whiteButton { background-color: rgba(255, 255, 255, 0.15); border: 2px solid white; border-radius: 40px; - width: 288px; + width: 320px; height: 80px; margin: auto; left: 0; @@ -90,28 +98,36 @@ } .circle { - width: 60px; - height: 60px; - line-height: 60px; - border-radius: 50%; - display: block; - color: white; - text-align: center; - position: absolute; + display: flex; + width: 64px; + height: 64px; + margin-left: 20px; + margin-right: auto; + margin-top: 16px; + border-radius: 32px; + gap: 0px; +} + +.circleTitle { margin: auto; - left: 60px; - top: 0; - bottom: 0; + font-family: Abel; + font-size: 16px; + font-weight: 400; + line-height: 17px; + letter-spacing: -0.01em; + color: #FFFFFF; + text-align: center; } .year { + margin-left: auto; + margin-right: 20px; color: rgba(255, 255, 255, 0.2); - font-size: 60px; - display: block; - text-align: center; - position: absolute; - right: 60px; - top: 12px; + font-family: Abel; + font-size: 80px; + font-weight: 400; + line-height: 100px; + text-align: left; } .message { @@ -128,11 +144,39 @@ position: relative; } +.speech { + width: 320px; + background-color: #ffffff 15%; + margin-bottom: 24px; + padding-top: 24px; + padding-bottom: 24px; + + box-shadow: 2px 2px 12px 0px #00000040; + border: 3px solid #ffffff; + + font-size: 18px; + font-weight: 700; + line-height: 32px; + + background: #FFFFFF26; +} + .worker { - padding-top: 100px; - padding-bottom: 100px; + background: #f7f7f7; + margin: 24px; + border-radius: 8px; + padding: 16px 10px 16px 10px; +} + +.contactText { + font-size: 16px; + font-weight: 700; + line-height: 22px; + margin-bottom: 24px; } -.subtitle { - margin-bottom: 50px; +.contactEmail { + font-size: 16px; + font-weight: 400; + line-height: 21.79px; } \ No newline at end of file diff --git a/src/app/opengraph-image.alt.txt b/src/app/opengraph-image.alt.txt new file mode 100644 index 0000000..0947972 --- /dev/null +++ b/src/app/opengraph-image.alt.txt @@ -0,0 +1 @@ +우리동네 국회의원들에게 강간죄 개정&여가부 유지할 건지 물어보러 가기 \ No newline at end of file diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png new file mode 100644 index 0000000..4fe470b Binary files /dev/null and b/src/app/opengraph-image.png differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 0e7307e..b35e996 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,13 +1,12 @@ -import dynamic from 'next/dynamic'; +import dynamic from "next/dynamic"; import Image from "next/image"; import "@/app/main.css" import PurpleButton from "@/components/PurpleButton"; -import WhiteButton from "@/components/WhiteButton"; import WhiteButtonTitle from "@/components/WhiteButtonTitle"; import MiniStar from "@/components/MiniStar"; -import Ask from '@/components/Ask'; -// import ScrollToTop from '@/components/ScrollToTop'; +import Ask from "@/components/Ask"; +import Result from "@/components/Result"; const Scroll = dynamic( () => { @@ -21,22 +20,20 @@ export default function Home() {
+
+ Call 22 +
2024 - Call 22
-
- -
-
- -
+ +
-

우리 동네 국회의원
후보자들은
불평등한 강간죄를
바꿔 볼 생각이 있는 걸까?

- -

21대에 이어
22대 국회의원 후보자들에게
또다시 질문하러
콜22 팀이 돌아왔습니다!

- -

저희는 강간죄의 구성요건을
피해자의 '동의' 여부로
개정할 의사가 있는지
궁금해하는 시민들의 질문을
167,398번 발송했고

- law -

당선된 21대 국회의원들 중
206명이 응답해
비동의 강간죄를 도입하는 데
찬성한다는
의견을 보내주셨습니다.

+

+ 나는 오늘 성평등에
+ 투표합니다. +

-

이후 21대 국회에서는
총 2건의 개정안이
발의되었지만
해당 법안들은 무관심 속에
본회의까지 도달하지 못했으며,
현재 21대 국회의
법안 처리 기한이 만료되어
기회를 또다시 잃었습니다.

+

+ 강간죄의 구성요건을
+ '동의여부'로 바꾸고,
+ 성평등 전담부처
+ 강화하는데 동의하십니까? +

+ -

이상한 나라의 대한민국은
판사를 잘 만나야
자신의 강간 피해를
사법적으로 해결할 수 있는
나라이기에
수많은 피해 사건들이
지금 이 순간에도
법망을 빠져나가고 있습니다.

-
- -
-
- +
+

+ 윤석열:
+ “구조적인 성차별은 없다.
+ 차별은 개인적 문제”
+
+ 권성동:
+ “비동의 간음죄 도입?
+ 무고가 늘어날거에요.
+ 이래서 여가부 폐지하자는 겁니다.”
+
+ 한동훈:
+ “어려운 면이 있습니다.
+ 이 부분에서 억울한 사람이 처벌받게
+ 해서는 안되지 않겠습니까?”
+
+ 법무부:
+ “법무부는 소위 ‘비동의간음죄’ 개정
+ 계획이 없음을 알려드립니다.”
+
+ 여성가족부:
+ “비동의 간음죄 개정 검토와
+ 관련하여 정부는 개정 계획이
+ 없음을 알려드린다”
+

- qna -

우리 동네
국회의원 후보자들에게
강간죄를 개정할 뜻이 있는지
물어봐 주세요.

+ +

+ 22대 국회는
+ 성평등 퇴보를 막을 수 있습니까? +

-

콜22 팀이 여러분의 질문을
대신 전해드립니다.

-
+

+ 현재까지 000개의 질문과 함께
+ 하고 있습니다.
+
+ 클릭 한 번으로 '성평등'을 위한 + 발걸음에 함께 해주세요! +

+
+ + {/*
+ +
*/}
-

국회의원 후보에게 질문하기

-

Contact Us

-

call22ndworks@gmail.com

+

Contact Us

+

call22ndworks@gmail.com

@@ -158,7 +161,7 @@ export default function Home() { link={"#main"} />
-
-
+ +
); } diff --git a/src/components/PurpleButton.tsx b/src/components/PurpleButton.tsx index 18ad675..6673210 100644 --- a/src/components/PurpleButton.tsx +++ b/src/components/PurpleButton.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Image from 'next/image'; import Link from 'next/link'; -const PurpleButton = (props: {link: string, message: string}) => { +const PurpleButton = (props: { link: string, message: string }) => { return (