[Fix] 과제 페이지 EmptyStudy 처리, 제출 실패 언노운 일 때 UI 수정 (#144)

* fix: studyid 가 없을 떄 emptystudy 컴포넌트 렌더링 * chore: 수정된 디자인 반영 * fix: 디자인 수정 반영 * chore: 버튼 whitespce nowrap 추가
GDSC-Hongik · Sep 8, 2024 · 88ec4e7 · 88ec4e7
1 parent 62871a8
commit 88ec4e7
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 29 deletions.
diff --git a/...y/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxInfo.tsx b/...y/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxInfo.tsx
@@ -55,5 +55,5 @@ const failMapping: Record<Assignment["submissionFailureType"], string> = {
   WORD_COUNT_INSUFFICIENT: "글자수 부족",
   NOT_SUBMITTED: "제출 안함",
   NONE: "없음",
-  UNKNOWN: "알 수 없음",
+  UNKNOWN: "제출 실패",
 };
diff --git a/...tudy/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/FailurePopover.tsx b/...tudy/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/FailurePopover.tsx
@@ -25,8 +25,7 @@ export const FailurePopover = ({
             "Q. 글자수가 부족하다고 나와요."}
           {submissionFailureType === "LOCATION_UNIDENTIFIABLE" &&
             'Q. "위치 확인 불가" 라고 나와요.'}
-          {submissionFailureType === "UNKNOWN" &&
-            'Q. "알 수 없음" 라고 나와요.'}
+          {submissionFailureType === "UNKNOWN" && 'Q. "제출 실패" 라고 나와요.'}
         </Text>
         <Text as="div" color="outline" typo="body3">
           {submissionFailureType === "LOCATION_UNIDENTIFIABLE" && (
@@ -56,13 +55,11 @@ export const FailurePopover = ({
           )}
           {submissionFailureType === "UNKNOWN" && (
             <p>
-              '위치 확인 불가' 나 '글자 수 부족' 외의 다른 이유로
+              제출이 실패한 이유를 파악할 수 없어요. <br />
               <br />
-              제출 실패를 한 경우에요. <br />
+              이름, 학번과 함께 어떤 상황인지
               <br />
-              제대로 제출한 후에도 계속 '알 수 없음' 이 뜬다면,
-              <br />
-              GDSC Hongik 카카오톡 채널로 문의해주세요.
+              GDSC Hongik 카카오톡 채널로 전달해주세요.
             </p>
           )}
         </Text>

diff --git a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/index.tsx b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/index.tsx
@@ -3,8 +3,6 @@ import { Flex } from "@styled-system/jsx";
 import { Space } from "@wow-class/ui";
 import { myStudyApi } from "apis/myStudyApi";
 import { studyDetailApi } from "apis/studyDetailApi";
-import { routePath } from "constants/routePath";
-import { redirect } from "next/navigation";
 
 import { AssignmentOverviewBox } from "./AssignmentOverviewBox";
 import { EmptyAssignmentBox } from "./EmptyAssignmentBox";
@@ -14,7 +12,7 @@ export const AssignmentContent = async () => {
   const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
 
   if (!myOngoingStudyInfoData?.studyId) {
-    return redirect(routePath["my-study"]);
+    return;
   }
   const studyDashboard = await studyDetailApi.getStudyDetailDashboard(
     myOngoingStudyInfoData.studyId

diff --git a/...fterLogin)/my-study/my-assignment/_components/AssignmentHistory/AssignmentHistoryItem.tsx b/...fterLogin)/my-study/my-assignment/_components/AssignmentHistory/AssignmentHistoryItem.tsx
@@ -58,11 +58,14 @@ export const AssignmentHistoryItem = ({
         </Flex>
       </Table.Left>
       <Table.Right>
-        <Flex className={buttonContainerStyle}>
+        <Flex className={textButtonContainerStyle}>
           {descriptionLink ? (
-            <Link href={descriptionLink} target="_blank">
-              <TextButton className={textButtonStyle} text="과제 명세 확인" />
-            </Link>
+            <TextButton
+              asProp={Link}
+              href={descriptionLink}
+              target="_blank"
+              text="과제 명세 확인"
+            />
           ) : (
             "-"
           )}
@@ -78,11 +81,15 @@ export const AssignmentHistoryItem = ({
         </div>
         <Flex className={buttonContainerStyle} minWidth="182px" paddingX="25px">
           {submissionLink ? (
-            <Link href={submissionLink} target="_blank">
-              <Button size="sm" variant="outline">
-                제출한 과제 확인
-              </Button>
-            </Link>
+            <Button
+              asProp={Link}
+              href={submissionLink}
+              size="sm"
+              target="_blank"
+              variant="outline"
+            >
+              제출한 과제 확인
+            </Button>
           ) : (
             "-"
           )}
@@ -119,6 +126,13 @@ const titleStyle = css({
   },
 });
 const buttonContainerStyle = css({
+  justifyContent: "center",
+  textStyle: "body1",
+  minWidth: "182px",
+  whiteSpace: "nowrap",
+});
+
+const textButtonContainerStyle = css({
   justifyContent: "center",
   textStyle: "body1",
   minWidth: "163px",
@@ -129,7 +143,7 @@ const buttonContainerStyle = css({
     minWidth: "133px",
   },
   "@media (max-width: 960px)": {
-    display: "none",
+    display: "none !important",
   },
 });
 
@@ -144,11 +158,6 @@ const tagContainerStyle = css({
   },
 });
 
-const textButtonStyle = css({
-  "@media (max-width: 960px)": {
-    display: "none",
-  },
-});
 const assignmentSubmissionMap: Record<
   "CANCELLED" | "FAILURE" | "SUCCESS",
   { tagText: string; tagColor: ComponentProps<typeof Tag>["color"] }
@@ -162,5 +171,5 @@ const failMapping: Record<Assignment["submissionFailureType"], string> = {
   WORD_COUNT_INSUFFICIENT: "글자수부족",
   NOT_SUBMITTED: "미제출",
   NONE: "",
-  UNKNOWN: "알수없음",
+  UNKNOWN: "제출실패",
 };
diff --git a/apps/client/app/(afterLogin)/my-study/my-assignment/page.tsx b/apps/client/app/(afterLogin)/my-study/my-assignment/page.tsx
@@ -1,12 +1,15 @@
 import { Space } from "@wow-class/ui";
+import { myStudyApi } from "apis/myStudyApi";
 
+import { EmptyStudy } from "../_components";
 import { AssignmentHistory } from "./_components";
 import { AssignmentContent } from "./_components/AssignmentContent";
 import { AssignmentDescription } from "./_components/AssignmentDescription";
 import { AssignmentHeader } from "./_components/AssignmentHeader";
 
-const MyAssignmentPage = () => {
-  return (
+const MyAssignmentPage = async () => {
+  const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
+  return myOngoingStudyInfoData?.studyId ? (
     <>
       <AssignmentHeader />
       <Space height={8} />
@@ -15,6 +18,8 @@ const MyAssignmentPage = () => {
       <AssignmentContent />
       <AssignmentHistory />
     </>
+  ) : (
+    <EmptyStudy />
   );
 };