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

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxInfo.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 AssignmentBoxInfoProps {
   assignment: Assignment;
 }
@@ -37,6 +38,7 @@ export const AssignmentBoxInfo = ({ assignment }: AssignmentBoxInfoProps) => {
           <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,69 @@
+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
+      triggerContent={<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" && (
+            <p>
+              WIL.md 파일에 배운 내용을 최소 300자 이상 작성해야 해요. <br />
+              <br />
+              제대로 제출한 후에도 계속 글자수가 부족하다고 나온다면,
+              <br />
+              GDSC Hongik 카카오톡 채널로 문의해주세요.
+            </p>
+          )}
+        </Text>
+      </Flex>
+    </Popover>
+  );
+};
+
+const iconStyle = {
+  cursor: "pointer",
+};
+
+const ulStyle = {
+  listStyleType: "disc",
+  paddingLeft: "15px",
+};

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

@@ -51,5 +51,6 @@ const textButtonstyle = {
 
 const boxStyle = {
   minWidth: "484px",
+  width: "484px",
   height: "fit-content",
 };

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

@@ -17,7 +17,7 @@ export const AssignmentContent = () => {
   const studyDashboard = studyDashBoardData;
   const currentAssignments = assignmentData;
   return (
-    <>
+    <section>
       <Flex className={boxContainerStyle} gap="lg">
         {studyDashboard.isLinkEditable && (
           <>
@@ -37,12 +37,13 @@ export const AssignmentContent = () => {
             <EmptyAssignmentBox week={4} />
           ))}
       </Flex>
-    </>
+    </section>
   );
 };
 
 const boxContainerStyle = css({
   overflowX: "auto",
   scrollBehavior: "smooth",
   scrollbarWidth: "none",
+  height: "450px", //FIXME: 팝오버가 Box Container 내부로 들어가면서 짤리는 문제가 생겨 임시로 높이값 고정
 });

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

@@ -0,0 +1,38 @@
+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/_components/AssignmentHeader.tsx

@@ -0,0 +1,18 @@
+import { Flex, styled } from "@styled-system/jsx";
+import Image from "next/image";
+
+export const AssignmentHeader = () => {
+  //TODO: 스터디 정보 연결, 내가 수강 중인 스터디 api 호출
+  //const studyId = await myStudyApi.getMyOngoingStudyInfo()
+  //const { title } = await myStudyApi.getBasicStudyInfo(studyId)
+
+  return (
+    <header>
+      <Flex gap="sm" textStyle="h1">
+        <styled.h1 color="textBlack">나의 과제</styled.h1>
+        <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+        <styled.h1 color="primary">기초 웹 스터디</styled.h1>
+      </Flex>
+    </header>
+  );
+};

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

@@ -13,7 +13,7 @@ export const AssignmentHistory = async () => {
   const studyHistories = history;
   if (studyHistories.length === 0) {
     return (
-      <>
+      <section>
         <Space height={133} />
         <Flex alignItems="center" direction="column" gap="xl">
           <Image
@@ -25,12 +25,12 @@ export const AssignmentHistory = async () => {
           <Text>진행된 과제가 없어요</Text>
         </Flex>
         <Space height={94} />
-      </>
+      </section>
     );
   }
 
   return (
-    <>
+    <section>
       <Text as="h2" typo="h2">
         과제 히스토리
       </Text>
@@ -43,6 +43,6 @@ export const AssignmentHistory = async () => {
           key={history.assignmentHistoryId}
         />
       ))}
-    </>
+    </section>
   );
 };

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

@@ -1,36 +1,19 @@
-import { Flex, styled } from "@styled-system/jsx";
 import { Space } from "@wow-class/ui";
-import Image from "next/image";
 
 import { AssignmentHistory } from "./_components";
 import { AssignmentContent } from "./_components/AssignmentContent";
+import { AssignmentDescription } from "./_components/AssignmentDescription";
+import { AssignmentHeader } from "./_components/AssignmentHeader";
 
 const MyAssignmentPage = () => {
   return (
     <>
-      <header>
-        <Flex gap="sm" textStyle="h1">
-          <styled.h1 color="textBlack">나의 과제</styled.h1>
-          <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
-          <styled.h1 color="primary">기초 웹 스터디</styled.h1>
-        </Flex>
-      </header>
+      <AssignmentHeader />
       <Space height={8} />
-      <p>
-        제출 완료하기 버튼을 누르면 등록한
-        <styled.span color="blueHover"> GitHub 레포지토리</styled.span>의 main
-        브랜치에서 가장 최신 상태의 WIL.md 파일이 제출돼요. <br />
-        과제는 기한 내에 여러 번 제출할 수 있으나, 가장 마지막 제출만 최종
-        제출로 인정해요.
-      </p>
+      <AssignmentDescription />
       <Space height={48} />
-      <section>
-        <AssignmentContent />
-      </section>
-      <Space height={64} />
-      <section>
-        <AssignmentHistory />
-      </section>
+      <AssignmentContent />
+      <AssignmentHistory />
     </>
   );
 };

apps/client/components/Popover.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { useClickOutside, useOpenState } from "@wow-class/ui/hooks";
+import type { PropsWithChildren, ReactNode } from "react";
+import { Close as CloseIcon } from "wowds-icons";
+
+interface PopoverProps extends PropsWithChildren {
+  triggerContent: ReactNode;
+}
+
+const Popover = ({ triggerContent, children }: PopoverProps) => {
+  const { open, setOpen, onClose } = useOpenState();
+
+  const popoverRef = useClickOutside<HTMLDivElement>(onClose);
+
+  const handleClickTrigger = () => {
+    setOpen((prev) => !prev);
+  };
+  const handleClickCloseButton = () => {
+    onClose();
+  };
+  return (
+    <div className={popoverContainerStyle}>
+      <button className={triggerStyle} onClick={handleClickTrigger}>
+        {triggerContent}
+      </button>
+      {open && (
+        <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: "rgba(0,0,0,0.6)",
+  zIndex: 10000,
+  paddingX: "md",
+  paddingY: "sm",
+  boxShadow: "mono",
+  backdropFilter: "blur(15px)",
+});
+
+const triggerStyle = css({
+  display: "flex",
+});
+const closeButtonStyle = css({
+  position: "absolute",
+  top: "sm",
+  right: "md",
+  cursor: "pointer",
+});

apps/client/components/Tooltip.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { useOpenState } from "@wow-class/ui/hooks";
+import type { PropsWithChildren, ReactNode } from "react";
+
+interface TooltipProps extends PropsWithChildren {
+  content: ReactNode;
+}
+
+const Tooltip = ({ content, children }: TooltipProps) => {
+  const { open, onOpen, onClose } = useOpenState();
+
+  const handleMouseEnter = () => {
+    onOpen();
+  };
+
+  const handleMouseLeave = () => {
+    onClose();
+  };
+
+  return (
+    <span
+      className={tooltipContainerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {open && <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: "rgba(0,0,0,0.6)",
+  zIndex: 10000,
+  paddingX: "md",
+  paddingY: "sm",
+  boxShadow: "mono",
+  backdropFilter: "blur(15px)",
+  color: "textWhite",
+});