Merge pull request #105 from softeerbootcamp4th/feature/multiful-issues

[Feature] event2 결과창 이슈
softeerbootcamp4th · Aug 23, 2024 · 0ae996d · 0ae996d
2 parents a09637a + 6121274
commit 0ae996d
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 49 deletions.
diff --git a/public/share.html b/public/share.html
@@ -179,20 +179,25 @@
         const uid = urlParams.get("UID");
 
         try {
-          await fetch(`lots/link&UID=${uid}`);
+          await fetch(
+            `https://d1zb0qi5v6qyks.cloudfront.net/lots/link&UID=${uid}`,
+          );
         } catch (error) {
           console.error("Error posting answers:", error);
           return null;
         }
 
         try {
-          const response = await fetch("/lots/typeId", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
+          const response = await fetch(
+            "https://d1zb0qi5v6qyks.cloudfront.net/lots/typeId",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ resultTypeId: id }),
             },
-            body: JSON.stringify({ resultTypeId: id }),
-          });
+          );
 
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);

diff --git a/src/client/components/mainPage/InfoScreen/WordCloud.tsx b/src/client/components/mainPage/InfoScreen/WordCloud.tsx
@@ -1,15 +1,44 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import * as echarts from "echarts";
 import "echarts-wordcloud";
+import { Word } from "../../../types/InfoScreen";
+import { fetchWordCloudData } from "../../../api/fetch";
+import { useErrorBoundary } from "react-error-boundary";
+import carMask from "../../../../common/assets/images/wordcloud.png?as=webp";
+
+const WordCloud = () => {
+  const { showBoundary } = useErrorBoundary();
+  const [wordCloudData, setWordCloudData] = useState<Word[] | null>(null);
+
+  useEffect(() => {
+    const tryFetch = async () => {
+      try {
+        await fetchData();
+      } catch (error) {
+        if (error instanceof Error) {
+          if (error.message === "Failed to fetch") return;
+          showBoundary(error);
+        }
+      }
+    };
+    tryFetch();
+  }, []);
+
+  const fetchData = async () => {
+    const data = await fetchWordCloudData();
+
+    setWordCloudData(data.result.wordList);
+  };
 
-const WordCloud = ({ data, maskImage }: any) => {
   const chartRef = useRef(null);
 
   useEffect(() => {
+    if (wordCloudData === null) return;
+
     const chart = echarts.init(chartRef.current);
 
     const maskImg = new Image();
-    maskImg.src = maskImage;
+    maskImg.src = carMask;
 
     maskImg.onload = function () {
       const option = {
@@ -28,7 +57,7 @@ const WordCloud = ({ data, maskImage }: any) => {
                 return colors[Math.floor(Math.random() * colors.length)];
               },
             },
-            data: data,
+            data: wordCloudData,
           },
         ],
       };
@@ -39,7 +68,7 @@ const WordCloud = ({ data, maskImage }: any) => {
     return () => {
       chart.dispose();
     };
-  }, [data]);
+  }, [wordCloudData]);
 
   return <div ref={chartRef} style={{ width: "88rem", height: "36rem" }}></div>;
 };

diff --git a/src/client/constants/common.ts b/src/client/constants/common.ts
@@ -9,4 +9,5 @@ export const LONG_BUTTON_TEXT = {
   NO_AUTH: "본인인증하고 이벤트 참여하기",
   EVENT_END: "이벤트 참여 완료",
   START_EVENT: "이벤트 참여하기",
+  ALREADY_END: "이미 참여하셨습니다",
 };
diff --git a/src/client/pages/mainPage/NotificationScreen/NotificationScreen.tsx b/src/client/pages/mainPage/NotificationScreen/NotificationScreen.tsx
@@ -1,37 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
-import carMask from "../../../../common/assets/images/wordcloud.png?as=webp";
 import Button from "../../../components/common/Button/Button";
 import { useNavigate } from "react-router";
 import { EVENT_TERMS } from "../../../constants/EventData";
-import { fetchWordCloudData } from "../../../api/fetch";
 import WordCloud from "../../../components/mainPage/InfoScreen/WordCloud";
-import { useErrorBoundary } from "react-error-boundary";
-import { Word } from "../../../types/InfoScreen";
 
 const NotificationScreen = () => {
-  const { showBoundary } = useErrorBoundary();
   const navigate = useNavigate();
-  const [wordCloudData, setWordCloudData] = useState<Word[] | null>(null);
-
-  useEffect(() => {
-    const tryFetch = async () => {
-      try {
-        await fetchData();
-      } catch (error) {
-        if (error instanceof Error) {
-          if (error.message === "Failed to fetch") return;
-          showBoundary(error);
-        }
-      }
-    };
-    tryFetch();
-  }, []);
-
-  const fetchData = async () => {
-    const data = await fetchWordCloudData();
-
-    setWordCloudData(data.result.wordList);
-  };
 
   return (
     <div className="snap-start flex-col flex-center">
@@ -44,9 +18,9 @@ const NotificationScreen = () => {
             EVENT 2를 통해 기대평을 작성하실 수 있습니다.
           </p>
         </div>
-        {wordCloudData && (
-          <WordCloud data={wordCloudData} maskImage={carMask}></WordCloud>
-        )}
+
+        <WordCloud></WordCloud>
+
         <Button
           size="small"
           onClick={() => {

diff --git a/src/client/pages/randomEventResultPage/RandomExpectations/RandomExpectations.tsx b/src/client/pages/randomEventResultPage/RandomExpectations/RandomExpectations.tsx
@@ -1,8 +1,15 @@
-import React, { ChangeEvent, forwardRef, useState } from "react";
+import React, {
+  ChangeEvent,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useErrorBoundary } from "react-error-boundary";
 import { postComment } from "../../../api/fetch";
 import Toast from "../../../components/common/Toast/Toast";
 import { ERROR_MSG } from "../../../constants/RandomEventData";
+import WordCloud from "../../../components/mainPage/InfoScreen/WordCloud";
 
 const RandomExpectations = forwardRef<HTMLDivElement>((props, ref) => {
   const [error, setError] = useState<
@@ -11,6 +18,7 @@ const RandomExpectations = forwardRef<HTMLDivElement>((props, ref) => {
   const [expectation, setExpectation] = useState<string>("");
   const [toastKey, setToastKey] = useState(0);
   const { showBoundary } = useErrorBoundary();
+  const wordCloudRef = useRef<HTMLDivElement>(null);
 
   const onClickHandler = async () => {
     if (expectation.length < 20) setError("short");
@@ -33,6 +41,15 @@ const RandomExpectations = forwardRef<HTMLDivElement>((props, ref) => {
     setExpectation(e.target.value);
   };
 
+  useEffect(() => {
+    if (error === "success" && wordCloudRef.current) {
+      wordCloudRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [error]);
+
   return (
     <div className="mb-[4.5rem] w-[94rem]" ref={ref}>
       <hr className="h-[1px] bg-gray-400" />
@@ -44,13 +61,14 @@ const RandomExpectations = forwardRef<HTMLDivElement>((props, ref) => {
           onChange={handleTextArea}
           value={expectation}
           placeholder="최소 20자 이상 입력하세요."
+          maxLength={200}
           className="ml-8 h-[12.25rem] w-[77.25rem] resize-none border-none bg-gray-950 text-gray-50 outline-none"
         ></textarea>
         <button
           onClick={onClickHandler}
-          className="h-[15.375rem] w-[12.25rem] rounded-[1.75rem] bg-primary font-kia-signature-bold text-title-3 text-gray-950 flex-center"
+          className={`h-[15.375rem] w-[12.25rem] rounded-[1.75rem] ${error === "success" ? "pointer-events-none bg-secondary text-gray-300" : "bg-primary"} font-kia-signature-bold text-title-3 text-gray-950 flex-center`}
         >
-          참여하기
+          {error === "success" ? "참여완료" : "참여하기"}
         </button>
         {error && (
           <Toast
@@ -64,6 +82,16 @@ const RandomExpectations = forwardRef<HTMLDivElement>((props, ref) => {
           />
         )}
       </div>
+      <div className="flex-col flex-center" ref={wordCloudRef}>
+        {error === "success" && (
+          <>
+            <p className="my-4 font-kia-signature-bold text-title-4 text-gray-50">
+              작성한 기대평은 워드 클라우드에 반영됩니다
+            </p>
+            <WordCloud></WordCloud>
+          </>
+        )}
+      </div>
     </div>
   );
 });

diff --git a/src/client/pages/randomEventResultPage/RandomMainSection/RandomMainSection.tsx b/src/client/pages/randomEventResultPage/RandomMainSection/RandomMainSection.tsx
@@ -26,6 +26,7 @@ const RandomMainSection = ({
 
   const [isCopied, setIsCopied] = useState(false);
   const [shareUrl, setShareUrl] = useState("https://www.hyundaiseltos.site/");
+  const [isAlreadyEnd, setIsAlreadyEnd] = useState(false);
 
   const handleRetry = () => {
     navigate("/event2/0");
@@ -37,6 +38,8 @@ const RandomMainSection = ({
         console.log("getURL");
         const { result } = await postRandomResult(resultTypeId);
         setShareUrl(result.uniqueLink);
+        console.log("setState");
+        if (!result.applied) setIsAlreadyEnd(true);
       } catch (error) {
         if (error instanceof Error) {
           if (error.message === "Failed to fetch") return;
@@ -64,10 +67,6 @@ const RandomMainSection = ({
     }
   };
 
-  useEffect(() => {
-    getUniqueUrl();
-  }, [isAuth]);
-
   const setText = () => {
     if (isAuth === false) return LONG_BUTTON_TEXT.NO_AUTH;
     if (isRandomEnd === true) return LONG_BUTTON_TEXT.EVENT_END;
@@ -134,7 +133,11 @@ const RandomMainSection = ({
           size="long"
           onClick={handleEventParticipation}
           defaultText={setText()}
-          disabledText={LONG_BUTTON_TEXT.EVENT_END}
+          disabledText={
+            isAlreadyEnd
+              ? LONG_BUTTON_TEXT.ALREADY_END
+              : LONG_BUTTON_TEXT.EVENT_END
+          }
           isEnabled={!isAuth || !isRandomEnd}
         />
       </div>

diff --git a/src/client/types/RandomEvent.ts b/src/client/types/RandomEvent.ts
@@ -78,6 +78,7 @@ export interface ScenarioInterface {
 
 export interface SharedLinkInterface {
   uniqueLink: string;
+  applied: boolean;
 }
 
 export interface TooltipInterface {