[Feat] 나의 과제 페이지 Tooltip, Popover 컴포넌트 구현

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmetBoxInfo.tsx

@@ -4,6 +4,7 @@ import { padWithZero, parseISODate } from "@wow-class/utils";
 import Image from "next/image";
 import type { Assignment } from "types/dtos/studyDetail";
 
+import { FailurePopover } from "./FailurePopover";
 interface AssignmentSubmissionInfoProps {
   assignment: Assignment;
 }
@@ -39,6 +40,7 @@ export const AssignmentSubmissionInfo = ({
           <styled.div color={isFailure ? "error" : "primary"}>
             {isFailure ? failMapping[submissionFailureType] : "글자수 충족"}
           </styled.div>
+          <FailurePopover submissionFailureType={submissionFailureType} />
         </Flex>
       )}
     </>

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/FailurePopover.tsx

@@ -0,0 +1,67 @@
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import Popover from "components/Popover";
+import type { SubmissionFailureType } from "types/entities/common/assignment";
+import { Help as HelpIcon } from "wowds-icons";
+
+interface FailurePopoverProps {
+  submissionFailureType: SubmissionFailureType;
+}
+export const FailurePopover = ({
+  submissionFailureType,
+}: FailurePopoverProps) => {
+  if (
+    submissionFailureType === "NONE" ||
+    submissionFailureType === "NOT_SUBMITTED"
+  )
+    return null;
+  return (
+    <Popover trigger={<HelpIcon fill="sub" stroke="sub" style={iconStyle} />}>
+      <Flex direction="column" gap="xs">
+        <Text color="textWhite" typo="body3">
+          {submissionFailureType === "WORD_COUNT_INSUFFICIENT" &&
+            "Q. 글자수가 부족하다고 나와요."}
+          {submissionFailureType === "LOCATION_UNIDENTIFIABLE" &&
+            'Q. "위치 확인 불가" 라고 나와요.'}
+        </Text>
+        <Text as="div" color="outline" typo="body3">
+          {submissionFailureType === "LOCATION_UNIDENTIFIABLE" && (
+            <>
+              아래 조건에 맞게 WIL.md 파일을 제출했는지 확인해주세요. <br />
+              <br />
+              <ul style={ulStyle}>
+                <li>본인의 레포지터리가 맞는지</li>
+                <li>제출한 브랜치 이름이 main인지</li>
+                <li>파일 위치가 `WeekN/WIL.md` 가 맞는지</li>
+                <li>파일 위치가 `WeekN/WIL.md` 가 맞는지</li>
+              </ul>
+              <br />
+              <br />
+              커밋 후 원격 저장소에 push까지 완료했는지 제대로 제출한 후에도
+              계속 "경로 확인 불가"라고 나온다면,GDSC Hongik 카카오톡 채널로
+              문의해주세요.
+            </>
+          )}
+          {submissionFailureType === "WORD_COUNT_INSUFFICIENT" && (
+            <>
+              WIL.md 파일에 배운 내용을 최소 300자 이상 작성해야 해요. <br />
+              <br />
+              제대로 제출한 후에도 계속 글자수가 부족하다고 나온다면,
+              <br />
+              GDSC Hongik 카카오톡 채널로 문의해주세요.
+            </>
+          )}
+        </Text>
+      </Flex>
+    </Popover>
+  );
+};
+
+const iconStyle = {
+  cursor: "pointer",
+};
+
+const ulStyle = {
+  listStyleType: "disc",
+  paddingLeft: "15px",
+};

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentDescription.tsx

@@ -0,0 +1,43 @@
+import { css } from "@styled-system/css";
+import { studyDetailApi } from "apis/studyDetailApi";
+import Tooltip from "components/Tooltip";
+import { studyDashBoardData } from "constants/assignmentMockData";
+import Link from "next/link";
+
+export const AssignmentDescription = async () => {
+  //const studyDashboard = await studyDetailApi.getStudyDetailDashboard(1);
+
+  const studyDashboard = studyDashBoardData;
+  return (
+    <>
+      <p>
+        제출 완료하기 버튼을 누르면 등록한{" "}
+        {studyDashboard.isLinkEditable ? (
+          <span className={githubTextStyle}>GitHub 레포지토리</span>
+        ) : (
+          <Tooltip
+            content={
+              <Link
+                href="https://github.com/123456789012345678"
+                target="_blank"
+              >
+                https://github.com/123456789012345678
+              </Link>
+            }
+          >
+            <span className={githubTextStyle}>GitHub 레포지토리</span>
+          </Tooltip>
+        )}
+        의 main 브랜치에서 가장 최신 상태의 WIL.md 파일이 제출돼요. <br />
+        과제는 기한 내에 여러 번 제출할 수 있으나, 가장 마지막 제출만 최종
+        제출로 인정해요.
+      </p>
+    </>
+  );
+};
+
+const githubTextStyle = css({
+  color: "blueHover",
+  cursor: "pointer",
+  textDecoration: "underline",
+});

apps/client/app/(afterLogin)/my-study/my-assignment/page.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { AssignmentHistory } from "@/(afterLogin)/my-study/my-assignment/_components";
 
 import { AssignmentContent } from "./_components/AssignmentContent";
+import { AssignmentDescription } from "./_components/AssignmentDescription";
 
 const MyAssignmentPage = () => {
   return (
@@ -17,13 +18,7 @@ const MyAssignmentPage = () => {
         </Flex>
       </header>
       <Space height={8} />
-      <p>
-        제출 완료하기 버튼을 누르면 등록한
-        <styled.span color="blueHover"> GitHub 레포지토리</styled.span>의 main
-        브랜치에서 가장 최신 상태의 WIL.md 파일이 제출돼요. <br />
-        과제는 기한 내에 여러 번 제출할 수 있으나, 가장 마지막 제출만 최종
-        제출로 인정해요.
-      </p>
+      <AssignmentDescription />
       <Space height={48} />
       <section>
         <AssignmentContent />

apps/client/components/Popover.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { useClickOutside } from "@wow-class/ui/hooks";
+import type { PropsWithChildren, ReactNode } from "react";
+import React, { useState } from "react";
+import { Close as CloseIcon } from "wowds-icons";
+
+interface PopoverProps extends PropsWithChildren {
+  trigger: ReactNode;
+}
+
+const Popover = ({ trigger, children }: PopoverProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const popoverRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false));
+
+  const handleClickTrigger = () => {
+    setIsOpen((prev) => !prev);
+  };
+  const handleClickCloseButton = () => {
+    setIsOpen(false);
+  };
+  return (
+    <div className={popoverContainerStyle}>
+      <button className={triggerStyle} onClick={handleClickTrigger}>
+        {trigger}
+      </button>
+      {isOpen && (
+        <div className={popoverStyle} id="popover" ref={popoverRef}>
+          <CloseIcon
+            className={closeButtonStyle}
+            height={14}
+            stroke="white"
+            width={14}
+            onClick={handleClickCloseButton}
+          />
+
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Popover;
+
+const popoverContainerStyle = css({
+  position: "relative",
+  display: "inline-block",
+});
+
+const popoverStyle = css({
+  position: "absolute",
+  width: "344px",
+  top: "100%",
+  left: 0,
+  transform: "translateY(8px)",
+  borderRadius: "md",
+  backgroundColor: "backgroundDimmer",
+  zIndex: 10000,
+  paddingX: "lg",
+  paddingY: "sm",
+  boxShadow: "mono",
+  backdropFilter: "blur(15px)",
+});
+
+const triggerStyle = css({
+  display: "flex",
+});
+const closeButtonStyle = css({
+  position: "absolute",
+  top: "sm",
+  right: "lg",
+  cursor: "pointer",
+});

apps/client/components/Tooltip.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import type { PropsWithChildren, ReactNode } from "react";
+import React, { useState } from "react";
+
+interface TooltipProps extends PropsWithChildren {
+  content: ReactNode;
+}
+
+const Tooltip = ({ content, children }: TooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsVisible(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <span
+      className={tooltipContainerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {isVisible && <span className={tooltipStyle}>{content}</span>}
+    </span>
+  );
+};
+
+export default Tooltip;
+
+const tooltipContainerStyle = css({
+  position: "relative",
+  display: "inline-block",
+});
+
+const tooltipStyle = css({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  borderRadius: "md",
+  backgroundColor: "backgroundDimmer",
+  zIndex: 10000,
+  paddingX: "md",
+  paddingY: "sm",
+  boxShadow: "mono",
+  backdropFilter: "blur(15px)",
+  color: "textWhite",
+});

apps/client/constants/assignmentMockData.ts

@@ -44,6 +44,18 @@ export const studyDashBoardData: StudyDetailDashboardDto = {
 };
 
 export const assignmentData: Assignment[] = [
+  {
+    studyDetailId: 125,
+    assignmentStatus: "OPEN",
+    week: 4,
+    title: "API Development",
+    assignmentSubmissionStatus: "FAILURE",
+    descriptionLink: "https://example.com/assignment/124",
+    deadline: "2024-08-25T23:59:59",
+    submissionLink: "https://github.com/GDSC-Hongik/wow-class",
+    submissionFailureType: "LOCATION_UNIDENTIFIABLE",
+    committedAt: "2024-08-20T14:30:00",
+  },
   {
     studyDetailId: 123,
     assignmentStatus: "OPEN",
@@ -80,6 +92,18 @@ export const assignmentData: Assignment[] = [
     submissionFailureType: "WORD_COUNT_INSUFFICIENT",
     committedAt: "sdf",
   },
+  {
+    studyDetailId: 125,
+    assignmentStatus: "OPEN",
+    week: 4,
+    title: "API Development",
+    assignmentSubmissionStatus: "FAILURE",
+    descriptionLink: "https://example.com/assignment/124",
+    deadline: "2024-08-25T23:59:59",
+    submissionLink: "https://github.com/GDSC-Hongik/wow-class",
+    submissionFailureType: "LOCATION_UNIDENTIFIABLE",
+    committedAt: "2024-08-20T14:30:00",
+  },
   //제출 안함/마감
   {
     studyDetailId: 124,
@@ -93,4 +117,16 @@ export const assignmentData: Assignment[] = [
     submissionFailureType: "NOT_SUBMITTED",
     committedAt: "2024-08-20T14:30:00",
   },
+  {
+    studyDetailId: 125,
+    assignmentStatus: "OPEN",
+    week: 4,
+    title: "API Development",
+    assignmentSubmissionStatus: "FAILURE",
+    descriptionLink: "https://example.com/assignment/124",
+    deadline: "2024-08-25T23:59:59",
+    submissionLink: "https://github.com/GDSC-Hongik/wow-class",
+    submissionFailureType: "LOCATION_UNIDENTIFIABLE",
+    committedAt: "2024-08-20T14:30:00",
+  },
 ];