feat: 질문 및 답변 마감

Author: limkhl

src/app/answer/page.js

@@ -52,8 +52,8 @@ const Answer = () => {
                 </div>
                 <hr />
                 <div className={styles.container}>
-                    {/* <h3>답변할 수 있는 시한이 지났습니다.</h3> */}
-                    <h3>강간죄 구성 요건을 &apos;동의&apos; 여부로 바꾸는데 동의하십니까?</h3>
+                    <h3>답변할 수 있는 시한이 지났습니다.</h3>
+                    {/* <h3>강간죄 구성 요건을 &apos;동의&apos; 여부로 바꾸는데 동의하십니까?</h3>
                     <div style={{margin: '6px 0', fontSize: '1.2rem'}}>
                         <label>
                             <input
@@ -79,7 +79,7 @@ const Answer = () => {
 
                     <div style={{marginTop: '20px'}}>
                         <button className={styles.submit} onClick={() => response()}>저장</button>
-                    </div>
+                    </div> */}
                     {loading && <LoadingSpinner />}
                 </div>
             </div>

src/app/main.css

@@ -2,8 +2,81 @@
 @import url(https://fonts.googleapis.com/css2?family=Abel);
 
 .mainWrapper {
+  --top-padding: 48px;
+  padding-top: var(--top-padding);
+  position: relative;
   margin: 0 auto;
   background: linear-gradient(#1C63E9, 20%, #E690DD, 80%, #1C63E9);
+  overflow: hidden;
+}
+
+
+.notice {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: var(--top-padding);
+  background-color: red;
+  color: white;
+  font-family: 'Noto Sans KR';
+  z-index: 10;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+
+.marquee-wrapper {
+  --content-width: 475px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: var(--content-width);
+  height: 100%;
+}
+
+.marquee {
+  position: absolute;
+  width: 200%;
+  animation: marquee 10s linear infinite 2s;
+}
+
+@keyframes marquee {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
+.notice-content-wrapper {
+  display: flex;
+  float: left;
+  width: 50%;
+  padding-left: 20px;
+}
+
+@media (min-width: 500px) {
+  .notice {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .marquee-wrapper {
+    --content-width: 445px;
+  }
+
+  .marquee {
+    position: fixed;
+    animation: none;
+    overflow: hidden;
+  }
+
+  .notice-content-wrapper {
+    width: 50%;
+    padding-left: 0;
+  }
 }
 
 .main {

src/app/page.tsx

@@ -9,10 +9,32 @@ import Stats from "@/components/Stats";
 import Logo from "@/components/Logo";
 import Result from "@/components/Result";
 
+function TopNotice() {
+  return (
+    <div className="notice">
+      <div className="marquee-wrapper">
+        <div className="marquee">
+          <NoMoreContent />
+          <NoMoreContent />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function NoMoreContent() {
+  return (
+    <div className="notice-content-wrapper">
+      답변 가능 기간이 지나 더 이상 질문 메일 전송을 지원하지 않습니다.
+    </div>
+  )
+}
+
 
 export default function Home() {
   return (
     <div className="mainWrapper">
+      <TopNotice />
       <main className="main">
         <div className="header">
           <div className="logoArea">
@@ -99,9 +121,9 @@ export default function Home() {
           <Result />
         </div>
 
-        <div className="worker" id="askSection">
+        {/* <div className="worker" id="askSection">
           <Ask />
-        </div>
+        </div> */}
 
         <div className="footer">
           <p className="contactText">Contact Us</p>