Merge branch 'develop' into feature/test-refactor

src/components/mainPage/InfoScreen/WordCloud.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+
+const WordCloud = ({ data, maskImage }: any) => {
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    const chart = echarts.init(chartRef.current);
+
+    const maskImg = new Image();
+    maskImg.src = maskImage;
+
+    maskImg.onload = function () {
+      const option = {
+        series: [
+          {
+            type: "wordCloud",
+            gridSize: 8,
+            sizeRange: [16, 120],
+            rotationRange: [0, 0],
+            shape: "circle",
+            maskImage: maskImg,
+            textStyle: {
+              fontFamily: "Kia-Signature-Regular",
+              color: function () {
+                const colors = ["#4B7C83", "#4C7DC4", "#C9C9C9"];
+                return colors[Math.floor(Math.random() * colors.length)];
+              },
+            },
+            data: data,
+          },
+        ],
+      };
+
+      chart.setOption(option);
+    };
+
+    return () => {
+      chart.dispose();
+    };
+  }, [data]);
+
+  return <div ref={chartRef} style={{ width: "88rem", height: "36rem" }}></div>;
+};
+
+export default WordCloud;

src/components/mainPage/MainScreen/EventHeader/EventHeader.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import EventHeader from "./EventHeader";
+
+describe("EventHeader", () => {
+  const title = "Test Title";
+  const description = "This is a test description";
+
+  test("제목은 title로 넘겨준 값이 올바르게 랜더링 되어야 한다", () => {
+    render(<EventHeader title={title} description={description} />);
+
+    const titleElement = screen.getByText(title);
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  test("내용은 description으로 넘겨준 값이 올바르게 랜더링 되어야 한다", () => {
+    render(<EventHeader title={title} description={description} />);
+
+    const descriptionElement = screen.getByText(description);
+    expect(descriptionElement).toBeInTheDocument();
+  });
+});

src/components/mainPage/MainScreen/EventSelectOptions/EventSelectOptions.test.tsx

@@ -1,45 +1,64 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import EventSelectOptions from "./EventSelectOptions";
-import { expect } from "@storybook/test";
 import userEvent from "@testing-library/user-event";
+import EventSelectOptions from "./EventSelectOptions";
+import { EventSelectOptionsProps } from "../../../../types/InfoScreen";
 
+const mockButtonClick = jest.fn();
 const setHoveredIndex = jest.fn();
 
-describe("EventSelectOption Component", () => {
-  test("EventSelectOption 은 올바르게 랜더링되어야 한다. ", () => {
-    render(
-      <EventSelectOptions
-        index={0}
-        hoveredIndex={null}
-        setHoveredIndex={setHoveredIndex}
-        title="event 1."
-        description={`매일 선착순 100명! \n퀴즈 풀고 스타벅스 커피 받아가자!`}
-        img={""}
-        buttonInfo={{ size: "small", isEnabled: true, onClick: () => {} }}
-      />,
-    );
+const defaultProps: EventSelectOptionsProps = {
+  index: 0,
+  hoveredIndex: null,
+  setHoveredIndex: setHoveredIndex,
+  title: "event 1.",
+  description: "매일 선착순 100명! \n퀴즈 풀고 스타벅스 커피 받아가자!",
+  img: "",
+  buttonInfo: {
+    onClick: mockButtonClick,
+    size: "small",
+    isEnabled: true,
+  },
+};
+
+describe("EventSelectOptions Component", () => {
+  test("defaultProps에 따라 올바르게 랜더링 되어야 한다.", () => {
+    render(<EventSelectOptions {...defaultProps} />);
 
     expect(
       screen.getByText("매일 선착순 100명! 퀴즈 풀고 스타벅스 커피 받아가자!"),
     ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("button", { name: /참여하기/i }),
+    ).toBeInTheDocument();
   });
-  test("참여하기 버튼을 누르면 해당 이벤트 페이지로 스크롤 되어야 한다.", async () => {
-    const handleClick = jest.fn();
-
-    render(
-      <EventSelectOptions
-        index={0}
-        hoveredIndex={null}
-        setHoveredIndex={setHoveredIndex}
-        title="event 1."
-        description={`매일 선착순 100명! \n퀴즈 풀고 스타벅스 커피 받아가자!`}
-        img={""}
-        buttonInfo={{ size: "small", isEnabled: true, onClick: handleClick }}
-      />,
-    );
-
-    await userEvent.click(screen.getByRole("button"));
-    expect(handleClick).toBeCalled();
+
+  test("참여하기 버튼을 누르면 onClick 핸들러가 호출되어야 한다.", async () => {
+    render(<EventSelectOptions {...defaultProps} />);
+
+    const button = screen.getByRole("button", { name: /참여하기/i });
+    await userEvent.click(button);
+
+    expect(mockButtonClick).toHaveBeenCalled();
+  });
+
+  test("마우스가 요소 위로 올라가면 setHoveredIndex가 호출되어야 한다.", async () => {
+    render(<EventSelectOptions {...defaultProps} />);
+
+    const optionContainer = screen.getByText("event 1.").closest("div");
+
+    await userEvent.hover(optionContainer!);
+    expect(setHoveredIndex).toHaveBeenCalledWith(0);
+
+    await userEvent.unhover(optionContainer!);
+    expect(setHoveredIndex).toHaveBeenCalledWith(null);
+  });
+
+  test("hoveredIndex가 index와 맞지 않을 때 올바른 opacity가 적용되어야 한다.", () => {
+    render(<EventSelectOptions {...defaultProps} hoveredIndex={1} />);
+
+    const optionContainer = screen.getByRole("option");
+    expect(optionContainer).toHaveClass("opacity-30");
   });
 });

src/components/mainPage/MainScreen/EventSelectOptions/EventSelectOptions.tsx

@@ -1,19 +1,7 @@
-import React, { MouseEventHandler } from "react";
+import React from "react";
 import Button from "../../../common/Button/Button";
-
-interface EventSelectOptionsProps {
-  index: number;
-  hoveredIndex: number | null;
-  setHoveredIndex: Function;
-  title: string;
-  description: string;
-  img: string;
-  buttonInfo: {
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    size: "big" | "small" | "long";
-    isEnabled: boolean;
-  };
-}
+import { EventSelectOptionsProps } from "../../../../types/InfoScreen";
+import { GRADIENT_TEXT_STYLE } from "../../../../styles/tailwind";
 
 const EventSelectOptions = ({
   index,
@@ -24,37 +12,29 @@ const EventSelectOptions = ({
   img,
   buttonInfo: { size, onClick, isEnabled },
 }: EventSelectOptionsProps) => {
-  const onMouseEnterHandler = () => {
-    setHoveredIndex(index);
-  };
-  const onMouseLeaveHandler = () => {
-    setHoveredIndex(null);
-  };
+  const isHovered = hoveredIndex === index;
+  const isDimmed = hoveredIndex !== null && !isHovered;
+
+  const handleMouseEnter = () => setHoveredIndex(index);
+  const handleMouseLeave = () => setHoveredIndex(null);
+
   return (
     <div
-      className={`flex h-full w-1/2 flex-col items-center pb-10 pt-44 font-kia-signature-bold text-title-3 text-gray-50 transition-all duration-200 ${hoveredIndex !== null && hoveredIndex !== index && "opacity-30"}`}
+      role="option"
+      className={`flex h-full w-1/2 flex-col items-center pb-10 pt-44 font-kia-signature-bold text-title-3 text-gray-50 transition-all duration-200 ${
+        isDimmed && "opacity-30"
+      }`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
-      <div
-        className="flex flex-col items-center justify-around"
-        onMouseEnter={onMouseEnterHandler}
-        onMouseLeave={onMouseLeaveHandler}
-      >
+      <div className="flex flex-col items-center justify-around">
         <div className="flex-col gap-6 flex-center">
           <div
-            className={`rounded-full bg-opacity-10 px-6 py-4 transition-all duration-200 flex-center ${hoveredIndex === index ? "bg-white bg-opacity-100" : "bg-white/10"}`}
+            className={`rounded-full bg-opacity-10 px-6 py-4 transition-all duration-200 flex-center ${
+              isHovered ? "bg-white bg-opacity-100" : "bg-white/10"
+            }`}
           >
-            <span
-              style={{
-                background:
-                  "linear-gradient(93.7deg, #505861 0%, #4B7C83 33.5%, #1B3F72 66.5%, #F2F2F2 100%)",
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-                backgroundClip: "text",
-                color: "transparent",
-              }}
-            >
-              {title}
-            </span>
+            <span style={GRADIENT_TEXT_STYLE}>{title}</span>
           </div>
           <div className="whitespace-pre-wrap text-center">{description}</div>
         </div>

src/constants/RandomEventData.ts

@@ -74,3 +74,13 @@ export const ERROR_MSG = {
   short: "20자 이상 답변을 작성해주세요.",
   inappropriate: "부적절한 답변입니다. 다시 작성해주세요.",
 };
+
+export const TEXT_CONTENT = {
+  EVENT_PARTICIPATION: {
+    PROMPT: "이벤트 응모하고",
+    PRIZE_TEXT: "시그니엘 숙박권",
+    PRIZE_SUFFIX: "받자!!",
+  },
+};
+
+export const TOOLTIP_CONTENT = "클립보드에 URL이 복사되었습니다";