Merge pull request #103 from softeerbootcamp4th/refactor/optimization

[Refactor] 최적화 및 오류 수정
softeerbootcamp4th · Aug 23, 2024 · bf4ca53 · bf4ca53
2 parents b460add + 1987a8b
commit bf4ca53
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 41 deletions.
diff --git a/public/share.css b/public/share.css
@@ -310,6 +310,10 @@ body {
   transition-duration: 300ms;
 }
 
+.whitespace-pre {
+  white-space: pre;
+}
+
 /* 특수 효과 */
 .text-glow-white {
   text-shadow:

diff --git a/public/share.html b/public/share.html
@@ -138,14 +138,17 @@
                 </div>
               </div>
               <div
-                class="margin-top-2-25-rem flex-column gap-1-rem flex flex-center"
+                class="margin-top-2-25-rem flex-column gap-1-rem flex-center"
               >
-                <p class="color-gray-200 font-kia-signature">
-                  이벤트 응모하고<span
-                    class="color-gray-50 font-kia-signature-bold"
-                    >시그니엘 숙박권</span
-                  >받자!!
-                </p>
+                <div
+                  class="color-gray-200 whitespace-pre font-kia-signature flex-center"
+                >
+                  <span>이벤트 응모하고</span
+                  ><span
+                    class="color-gray-50 whitespace-pre font-kia-signature-bold"
+                    >&nbsp시그니엘 숙박권</span
+                  ><span>&nbsp받자!!</span>
+                </div>
                 <button
                   class="position-relative height-6-25-rem width-94-rem border-radius-3xl background-primary color-gray-950 group overflow-hidden flex-center"
                   onclick="window.location.href='https://www.hyundaiseltos.site/event2/0';"
@@ -254,7 +257,7 @@
 
         descriptionTextElement.innerHTML = descriptionList
           .map((item) => {
-            return `<span class="${item.highlighted ? "color-gray-50" : "color-gray-400"}">${item.content} </span>`;
+            return `<span class="${item.highlighted ? "color-gray-50" : "color-gray-400"} whitespace-pre">${item.content} </span>`;
           })
           .join("");
 

diff --git a/src/client/api/fetch.ts b/src/client/api/fetch.ts
@@ -163,7 +163,6 @@ export const postEvent2Answers = async (
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: decodeURI(Cookies.get("auth") || ""),
       },
       body: JSON.stringify(answers),
     });

diff --git a/src/client/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.tsx b/src/client/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.tsx
@@ -6,36 +6,36 @@ interface DriveDescriptionItemProps {
   img: string;
   tailwind?: string;
   isSelected?: boolean;
-  noneSelected?: boolean;
 }
 
-const DriveDescriptionItem = ({
-  title,
-  description,
-  img,
-  tailwind,
-  isSelected,
-  noneSelected,
-}: DriveDescriptionItemProps) => {
-  return (
-    <div
-      role="article"
-      className={`flex h-[20.875rem] w-[30rem] flex-col gap-700 flex-center ${tailwind}`}
-    >
+const DriveDescriptionItem = React.memo(
+  ({
+    title,
+    description,
+    img,
+    tailwind,
+    isSelected,
+  }: DriveDescriptionItemProps) => {
+    return (
       <div
-        role="figure"
-        className={`flex h-full w-full justify-center break-keep bg-cover bg-center px-8 pt-8 font-kia-signature text-body-1-regular text-gray-50 ${noneSelected ? "text-opacity-0" : isSelected ? "text-opacity-100" : "text-opacity-0"} transition-all duration-200`}
-        style={{
-          backgroundImage: `${noneSelected ? `url(${img})` : isSelected ? `linear-gradient(180deg,  rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url(${img})` : `url(${img})`}`,
-        }}
+        role="article"
+        className={`flex h-[20.875rem] w-[30rem] flex-col gap-700 flex-center ${tailwind}`}
       >
-        {description}
+        <div
+          role="figure"
+          className={`flex h-full w-full justify-center break-keep bg-cover bg-center px-8 pt-8 font-kia-signature text-body-1-regular text-gray-50 ${isSelected ? "text-opacity-100" : "text-opacity-0"} transition-all duration-200`}
+          style={{
+            backgroundImage: `${isSelected ? `linear-gradient(180deg,  rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url(${img})` : `url(${img})`}`,
+          }}
+        >
+          {description}
+        </div>
+        <div className="font-kia-signature-bold text-title-4 text-gray-950">
+          {title}
+        </div>
       </div>
-      <div className="font-kia-signature-bold text-title-4 text-gray-950">
-        {title}
-      </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
 export default DriveDescriptionItem;
diff --git a/src/client/pages/mainPage/InfoScreen/DriveSection/DriveSection.tsx b/src/client/pages/mainPage/InfoScreen/DriveSection/DriveSection.tsx
@@ -41,7 +41,6 @@ const DriveSection = () => {
               description={description}
               img={image}
               isSelected={index === selectedIndex}
-              noneSelected={selectedIndex === -1}
               tailwind={`${isInView ? "opacity-100 scale-100" : "opacity-0 scale-90"} transition-all duration-[200ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)] origin-bottom-right ${animationDelay[index as keyof typeof animationDelay]} `}
             />
           </div>

diff --git a/src/client/pages/randomEventResultPage/RandomMainSection/RandomMainSection.tsx b/src/client/pages/randomEventResultPage/RandomMainSection/RandomMainSection.tsx
@@ -34,6 +34,7 @@ const RandomMainSection = ({
   const getUniqueUrl = async () => {
     if (isAuth)
       try {
+        console.log("getURL");
         const { result } = await postRandomResult(resultTypeId);
         setShareUrl(result.uniqueLink);
       } catch (error) {
@@ -57,11 +58,10 @@ const RandomMainSection = ({
   const handleEventParticipation = async () => {
     if (isAuth) {
       getUniqueUrl();
+      setIsRandomEnd(true);
     } else {
       navigate("/auth-modal", { state: { background: location, event: 2 } });
     }
-
-    setIsRandomEnd(true);
   };
 
   useEffect(() => {
@@ -91,12 +91,12 @@ const RandomMainSection = ({
 
         <div className="flex font-kia-signature-bold text-title-3">
           {description.map((item, index) => (
-            <span
+            <div
               key={index}
-              className={`${item.highlighted ? "text-gray-50" : "text-gray-400"}`}
+              className={`${item.highlighted ? "text-gray-50" : "text-gray-400"} whitespace-pre`}
             >
               {item.content}
-            </span>
+            </div>
           ))}
         </div>