fix: 스터디 공지 수정, 삭제 모달창 구현

apps/admin/app/studies/[study]/@modal/(.)announcement-delete/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Flex } from "@styled-system/jsx";
+import { Modal, Space, Text } from "@wow-class/ui";
+import { useModalRoute } from "@wow-class/ui/hooks";
+import { studyInfoApi } from "apis/study/studyInfoApi";
+import { tags } from "constants/tags";
+import { useSearchParams } from "next/navigation";
+import { customRevalidateTag } from "utils/customRevalidateTag";
+import Button from "wowds-ui/Button";
+
+const AnnouncementDeleteModal = () => {
+  const searchParams = useSearchParams();
+
+  const studyAnnouncementId = searchParams.get("studyAnnouncementId");
+
+  const { closeModal } = useModalRoute();
+
+  const handleClickDeleteButton = async () => {
+    const result = await studyInfoApi.deleteStudyAnnouncement(
+      Number(studyAnnouncementId)
+    );
+    if (result.success) {
+      await customRevalidateTag(tags.announcements);
+      closeModal();
+    }
+  };
+
+  return (
+    <Modal onClose={closeModal}>
+      <Flex direction="column" textAlign="center" width="21rem">
+        <Text typo="h1">공지를 삭제하시겠어요?</Text>
+        <Space height={33} />
+
+        <Flex gap="sm">
+          <Button variant="outline" onClick={closeModal}>
+            취소
+          </Button>
+          <Button onClick={handleClickDeleteButton}>삭제하기</Button>
+        </Flex>
+      </Flex>
+    </Modal>
+  );
+};
+
+export default AnnouncementDeleteModal;

apps/admin/app/studies/[study]/@modal/(.)announcement-modify/page.tsx

@@ -1,58 +1,71 @@
 "use client";
 
-import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Modal, Space, Text } from "@wow-class/ui";
 import { useModalRoute } from "@wow-class/ui/hooks";
+import { studyInfoApi } from "apis/study/studyInfoApi";
 import { tags } from "constants/tags";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
+import type { StudyAnnouncementType } from "types/entities/studyAnnouncement";
+import { customRevalidateTag } from "utils/customRevalidateTag";
 import Button from "wowds-ui/Button";
-const ApplyModal = () => {
+import TextField from "wowds-ui/TextField";
+
+const AnnouncementModifyModal = () => {
   const searchParams = useSearchParams();
+  const [studyAnnouncement, setStudyAnnouncement] =
+    useState<StudyAnnouncementType>({
+      title: "",
+      link: "",
+    });
 
-  const title = searchParams.get("title");
-  const studyId = searchParams.get("studyId");
+  const studyAnnouncementId = searchParams.get("studyAnnouncementId");
 
-  const [applySuccess, setApplySuccess] = useState(false);
   const { closeModal } = useModalRoute();
 
-  const handleClickApplyButton = async () => {
-    // const result = await studyApplyApi.applyStudy(Number(studyId));
-    // if (result.success) {
-    //   customRevalidateTag(tags.studyApply);
-    //   setApplySuccess(true);
-    // }
+  const handleClickModifyButton = async () => {
+    const result = await studyInfoApi.modifyStudyAnnouncement(
+      Number(studyAnnouncementId),
+      studyAnnouncement
+    );
+    if (result.success) {
+      await customRevalidateTag(tags.announcements);
+      closeModal();
+    }
   };
 
   return (
     <Modal onClose={closeModal}>
       <Flex direction="column" textAlign="center" width="21rem">
-        {applySuccess ? (
-          <Text typo="h1">
-            <span className={titleStyle}>{title}</span>
-            <br />
-            신청이 완료되었어요.
-          </Text>
-        ) : (
-          <>
-            <Text typo="h1">
-              <span className={titleStyle}>{title}</span>을(를) <br />
-              신청하시겠습니까?
-            </Text>
-            <Space height={22} />
-            <Text color="sub">한 번에 하나의 강의만 수강할 수 있어요.</Text>
-            <Space height={28} />
-            <Button onClick={handleClickApplyButton}>수강 신청하기</Button>
-          </>
-        )}
+        <Text typo="h1">공지를 수정해주세요</Text>
+        <Space height={29} />
+        <Flex direction="column" gap="1.125rem">
+          <TextField
+            label="공지 제목"
+            placeholder="입력해주세요"
+            onChange={(value) => {
+              setStudyAnnouncement({ ...studyAnnouncement, title: value });
+            }}
+          />
+          <TextField
+            label="공지 링크"
+            placeholder="http://example.com"
+            onChange={(value) => {
+              setStudyAnnouncement({ ...studyAnnouncement, link: value });
+            }}
+          />
+        </Flex>
+        <Space height={28} />
+        <Flex gap="sm">
+          <Button variant="outline" onClick={closeModal}>
+            취소
+          </Button>
+          <Button onClick={handleClickModifyButton}>수정하기</Button>
+        </Flex>
       </Flex>
     </Modal>
   );
 };
 
-export default ApplyModal;
-
-const titleStyle = css({
-  color: "primary",
-});
+export default AnnouncementModifyModal;

apps/admin/app/studies/[study]/@modal/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/admin/app/studies/[study]/_components/StudyAnnouncement.tsx

@@ -2,6 +2,7 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Space, Table, Text } from "@wow-class/ui";
 import { studyInfoApi } from "apis/study/studyInfoApi";
+import { routerPath } from "constants/router/routerPath";
 import Image from "next/image";
 import Link from "next/link";
 import { space } from "wowds-tokens";
@@ -68,7 +69,9 @@ const StudyAnnouncement = async ({ studyId }: { studyId: string }) => {
                   </Table.Left>
                   <Table.Right style={{ flex: "1" }}>
                     <Flex gap="sm">
-                      <Link href="">
+                      <Link
+                        href={`${studyId}/${routerPath["announcement-delete"].href}?studyAnnouncementId=${studyAnnounceId}`}
+                      >
                         <Button
                           size="sm"
                           style={{ minWidth: "81px" }}
@@ -77,7 +80,9 @@ const StudyAnnouncement = async ({ studyId }: { studyId: string }) => {
                           삭제
                         </Button>
                       </Link>
-                      <Link href="">
+                      <Link
+                        href={`${studyId}/${routerPath["announcement-modify"].href}?studyAnnouncementId=${studyAnnounceId}`}
+                      >
                         <Button
                           size="sm"
                           style={{ minWidth: "81px" }}

apps/admin/app/studies/[study]/announcement-delete/page.tsx

@@ -0,0 +1,8 @@
+import { routerPath } from "constants/router/routerPath";
+import { redirect } from "next/navigation";
+
+const AnnouncementDeletePage = () => {
+  return redirect(routerPath.root.href);
+};
+
+export default AnnouncementDeletePage;

apps/admin/app/studies/[study]/announcement-modify/page.tsx

@@ -0,0 +1,7 @@
+import { routerPath } from "constants/router/routerPath";
+import { redirect } from "next/navigation";
+const AnnouncementModifyPage = () => {
+  return redirect(routerPath.root.href);
+};
+
+export default AnnouncementModifyPage;

apps/admin/app/studies/[study]/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/admin/app/studies/[study]/layout.tsx

@@ -0,0 +1,16 @@
+const StudyLayout = ({
+  children,
+  modal,
+}: Readonly<{
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}>) => {
+  return (
+    <>
+      {children}
+      {modal}
+    </>
+  );
+};
+
+export default StudyLayout;

apps/admin/app/studies/create-study/_components/CreateStudyButton.tsx

@@ -1,7 +1,7 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
-import { studyRouterPath } from "constants/router/study";
+import { routerPath } from "constants/router/routerPath";
 import Link from "next/link";
 import isAdmin from "utils/isAdmin";
 import { Plus } from "wowds-icons";
@@ -12,7 +12,7 @@ const CreateStudyButton = async () => {
   if (!adminStatus) return null;
 
   return (
-    <Link href={studyRouterPath.createStudy.href}>
+    <Link href={routerPath.createStudy.href}>
       <button className={createStudyButtonStyle}>
         <Flex gap="xs">
           <Text color="sub" typo="label1">

apps/admin/constants/router/routerPath.ts

@@ -0,0 +1,20 @@
+const rootPath = "studies";
+
+export const routerPath = {
+  createStudy: {
+    description: "스터디 개설 페이지로 이동합니다",
+    href: `/${rootPath}/create-study`,
+  },
+  root: {
+    description: "멘토/어드민 페이지 접속화면입니다.",
+    href: `/${rootPath}`,
+  },
+  "announcement-modify": {
+    description: "스터디 공지를 수정할 수 있는 모달창입니다.",
+    href: `/announcement-modify`,
+  },
+  "announcement-delete": {
+    description: "스터디 공지를 삭제하기 위해 확인하는 모달창입니다.",
+    href: `/announcement-delete`,
+  },
+};