Merge pull request #44 from SUIN-BUNDANG-LINE/develop

v0.1.0 프론트엔드 배포 수정본 5
SUIN-BUNDANG-LINE · Aug 14, 2024 · 8c6c4dc · 8c6c4dc
2 parents 97df81c + 8624b84
commit 8c6c4dc
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 23 deletions.
diff --git a/src/app/s/[surveyId]/p/page.tsx b/src/app/s/[surveyId]/p/page.tsx
@@ -28,6 +28,7 @@ export default function Page({ params }: { params: { surveyId: string } }) {
   const { data: survey, isLoading, isError, refetch } = useSurveysProgress(surveyId);
   const mutation = useSurveysResponse(surveyId);
   const [surveyState] = useState(getSurveyState(surveyId));
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const { history: initialHistory, responses: initialResponses } = useMemo(() => {
     return loadInteractions(surveyId);
@@ -131,6 +132,7 @@ export default function Page({ params }: { params: { surveyId: string } }) {
       if (!userResponse) return;
 
       const visitorId = visitorData?.visitorId || undefined;
+      setIsSubmitting(true);
 
       mutation.mutate(
         { ...userResponse, visitorId },
@@ -142,6 +144,7 @@ export default function Page({ params }: { params: { surveyId: string } }) {
           },
           onError: (error) => {
             showToast('error', (error.cause as ErrorCause).message);
+            setIsSubmitting(false);
           },
         }
       );
@@ -153,10 +156,13 @@ export default function Page({ params }: { params: { surveyId: string } }) {
         <Navigator
           backText="응답 수정"
           backAction={() => setUserResponse(null)}
-          nextText="제출"
+          nextText={isSubmitting ? '제출 중...' : '제출'}
           nextAction={onSubmit}
+          disablePrev={isSubmitting}
+          disableNext={isSubmitting}
           centered
         />
+        {isSubmitting}
       </>
     );
   }

diff --git a/src/components/survey-details/index.tsx b/src/components/survey-details/index.tsx
@@ -7,7 +7,7 @@ import Wrapper from '@/components/layout/Wrapper';
 import Button from '@/components/ui/button/Button';
 import Tooltip from '@/components/ui/tooltip/Tooltip';
 import type { SurveysDetailsResponse } from '@/services/surveys/types';
-import { yymmdd } from '@/utils/dates';
+import { convertToKst } from '@/utils/dates';
 import { writeClipboard } from '@/utils/misc';
 import styles from './index.module.css';
 
@@ -34,7 +34,18 @@ interface Props {
 export default function DetailsViewer({ data, surveyId, state }: Props) {
   const router = useRouter();
 
-  const { title, description, status, finishedAt, currentParticipants, targetParticipants, rewards, thumbnail } = data;
+  const {
+    title,
+    description,
+    status,
+    finishedAt: rawFinishedAt,
+    currentParticipants,
+    targetParticipants,
+    rewards,
+    thumbnail,
+  } = data;
+
+  const finishedAt = convertToKst(rawFinishedAt);
 
   const copyUrl = () => {
     writeClipboard(window.location.href);
@@ -50,6 +61,7 @@ export default function DetailsViewer({ data, surveyId, state }: Props) {
     <>
       <Wrapper outerColor="#fff">
         <div className={styles.image_headline}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img className={styles.image} src={thumbnail} alt="" width={180} height={180} />
           <div className={styles.headline}>
             <h1 className={styles.title}>{title}</h1>
@@ -92,7 +104,9 @@ export default function DetailsViewer({ data, surveyId, state }: Props) {
               </div>
               <div>
                 <FaCalendarAlt />
-                <div>{yymmdd(finishedAt)} 자동 마감</div>
+                <div>
+                  {finishedAt.year}년 {finishedAt.month}월 {finishedAt.date}일 {finishedAt.hour}시 자동 마감
+                </div>
               </div>
               <div>
                 <FaUserGroup />

diff --git a/src/components/survey-p/farewell/Farewell.module.css b/src/components/survey-p/farewell/Farewell.module.css
@@ -32,6 +32,7 @@
 .title {
   padding: 8px;
   margin-bottom: 8px;
+  font-weight: 500;
 }
 
 .message {

diff --git a/src/components/survey-p/farewell/Farewell.tsx b/src/components/survey-p/farewell/Farewell.tsx
@@ -11,7 +11,7 @@ export default function Farewell({ message }: Props) {
       <div className={styles.container}>
         <h1>응답 완료!</h1>
         <div className={styles.creator}>
-          <div className={styles.title}>제작자의 메시지</div>
+          <div className={styles.title}>&lt;제작자의 메시지&gt;</div>
           <div className={styles.message}>{message}</div>
         </div>
         <div className={styles.submit}>제출하면 설문 참여가 완료됩니다.</div>

diff --git a/src/components/survey-p/ui/navigator/Navigator.tsx b/src/components/survey-p/ui/navigator/Navigator.tsx
@@ -7,17 +7,27 @@ interface Props {
   nextAction: () => void;
   backText: string;
   nextText: string;
+  disablePrev?: boolean;
+  disableNext?: boolean;
   centered?: true;
 }
 
-export default function Navigator({ backAction, nextAction, backText, nextText, centered }: Props) {
+export default function Navigator({
+  backAction,
+  nextAction,
+  backText,
+  nextText,
+  disablePrev,
+  disableNext,
+  centered,
+}: Props) {
   return (
     <Wrapper>
       <div className={`${styles.navigator} ${centered ? styles.centered : ''}`}>
-        <Button variant="primary" onClick={backAction} width={96}>
+        <Button variant="primary" onClick={backAction} width={96} disabled={disablePrev || false}>
           {backText}
         </Button>
-        <Button variant="primary" onClick={nextAction} width={96}>
+        <Button variant="primary" onClick={nextAction} width={96} disabled={disableNext || false}>
           {nextText}
         </Button>
       </div>

diff --git a/src/components/survey-result/index.tsx b/src/components/survey-result/index.tsx
@@ -14,22 +14,26 @@ export default function SurveyResult({ surveyId, reward }: Props) {
       {reward && <div>{reward} 당첨!</div>}
       {reward && (
         <div>
-          📅 <strong>2024년 8월 18일</strong>까지 리워드를 지급할 예정입니다.
+          📅 <strong>2024년 8월 19일</strong>까지 리워드를 지급할 예정입니다.
         </div>
       )}
-      <hr />
-      <div>
-        <h3>설문이용 이용 경험에 대해 이야기해주세요!</h3>
-        <a target="_blank" href="https://forms.gle/zrCakugWRjredYq89" rel="noreferrer">
-          https://forms.gle/zrCakugWRjredYq89
-        </a>
-        <p>
-          위 설문까지 답변해 주신 분들 중 세 분을 추첨해
-          <br />
-          가장 많은 선택을 받은 <strong>치킨 기프티콘</strong>을 드립니다.
-        </p>
-      </div>
-      <hr />
+      {surveyId === 'c7b29789-54e9-46b6-a896-5ab29e5a30a6' && (
+        <>
+          <hr />
+          <div>
+            <h3>설문이용 이용 경험에 대해 이야기해주세요!</h3>
+            <a target="_blank" href="https://forms.gle/zrCakugWRjredYq89" rel="noreferrer">
+              https://forms.gle/zrCakugWRjredYq89
+            </a>
+            <p>
+              위 설문까지 답변해 주신 분들 중 세 분을 추첨해
+              <br />
+              가장 많은 선택을 받은 <strong>치킨 기프티콘</strong>을 드립니다.
+            </p>
+          </div>
+          <hr />
+        </>
+      )}
       <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around' }}>
         <Link href={`/s/${surveyId}`}>설문조사 첫 페이지로</Link>
         <Link href="/">설문이용 메인으로</Link>

diff --git a/src/utils/dates.ts b/src/utils/dates.ts
@@ -20,6 +20,30 @@ function dateParser(dateString: string) {
   return { valid: true, sign, dayDiff, hourDiff, minuteDiff };
 }
 
+function convertToKst(dateString: string) {
+  const inputDate = new Date(dateString);
+
+  if (Number.isNaN(inputDate.getTime())) {
+    return {
+      year: 'invalid',
+      month: 'invalid',
+      date: 'invalid',
+      hour: 'invalid',
+      minute: 'invalid',
+    };
+  }
+
+  const kstDate = new Date(inputDate.toLocaleString('en-US', { timeZone: 'Asia/Seoul' }));
+
+  return {
+    year: kstDate.getFullYear(),
+    month: kstDate.getMonth() + 1,
+    date: kstDate.getDate(),
+    hour: kstDate.getHours(),
+    minute: kstDate.getMinutes(),
+  };
+}
+
 function yymmdd(dateString: string): string {
   const inputDate = new Date(dateString);
 
@@ -47,4 +71,4 @@ function dateReader(dateString: string): string {
   return `마감된 설문`;
 }
 
-export { dateParser, yymmdd, dateReader };
+export { dateParser, yymmdd, dateReader, convertToKst };