Merge pull request #501 from academic-relations/451-add-button-on-clu…

…bs-detail-page-for-member-registration-perio 451 add button on clubs detail page for member registration perio
academic-relations · Jul 29, 2024 · 924ef15 · 924ef15
2 parents 07cbedd + 4c3dc29
commit 924ef15
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 33 deletions.
diff --git a/packages/web/src/app/clubs/[id]/page.tsx b/packages/web/src/app/clubs/[id]/page.tsx
@@ -11,10 +11,18 @@ const ClubDetail = () => {
   const { id } = useParams();
   const { data, isLoading, isError } = useGetClubDetail(id as string);
 
+  // 임의로 등록 기간인지 여부를 확인하는 변수를 만들었어요.
+  const isRegistrationPeriod = false;
+
   return (
     <UseClientProvider>
       <AsyncBoundary isLoading={isLoading} isError={isError}>
-        {data && <ClubDetailMainFrame club={data} />}
+        {data && (
+          <ClubDetailMainFrame
+            club={data}
+            isRegistrationPeriod={isRegistrationPeriod}
+          />
+        )}
       </AsyncBoundary>
     </UseClientProvider>
   );

diff --git a/packages/web/src/common/components/PageHead/index.tsx b/packages/web/src/common/components/PageHead/index.tsx
@@ -9,6 +9,7 @@ interface PageHeadProps {
   items: { name: string; path: string }[];
   title: string;
   enableLast?: boolean;
+  action?: React.ReactNode;
 }
 
 const PageHeadWrapper = styled.div`
@@ -19,14 +20,25 @@ const PageHeadWrapper = styled.div`
   align-self: stretch;
 `;
 
+const TitleWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 const PageHead: React.FC<PageHeadProps> = ({
   items,
   title,
   enableLast = false,
+  action = null,
 }) => (
   <PageHeadWrapper>
     <BreadCrumb items={items} enableLast={enableLast} />
-    <PageTitle>{title}</PageTitle>
+    <TitleWrapper>
+      <PageTitle>{title}</PageTitle>
+      {action && <div>{action}</div>}
+    </TitleWrapper>
   </PageHeadWrapper>
 );
 

diff --git a/packages/web/src/features/clubDetails/frames/ClubDetailMainFrame.tsx b/packages/web/src/features/clubDetails/frames/ClubDetailMainFrame.tsx
@@ -1,12 +1,18 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
+
+import { overlay } from "overlay-kit";
 
 import styled from "styled-components";
 
+import Button from "@sparcs-clubs/web/common/components/Button";
 import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
+import Modal from "@sparcs-clubs/web/common/components/Modal";
+import CancellableModalContent from "@sparcs-clubs/web/common/components/Modal/CancellableModalContent";
 import PageHead from "@sparcs-clubs/web/common/components/PageHead";
 import SectionTitle from "@sparcs-clubs/web/common/components/SectionTitle";
+import Typography from "@sparcs-clubs/web/common/components/Typography";
 import ClubDetailCard from "@sparcs-clubs/web/features/clubDetails/components/ClubDetailCard";
 import ClubInfoCard from "@sparcs-clubs/web/features/clubDetails/components/ClubInfoCard";
 import PersonInfoCard from "@sparcs-clubs/web/features/clubDetails/components/PersonInfoCard";
@@ -15,6 +21,7 @@ import type { ApiClb002ResponseOK } from "@sparcs-clubs/interface/api/club/endpo
 
 interface ClubDetailMainFrameProps {
   club: ApiClb002ResponseOK;
+  isRegistrationPeriod: boolean;
 }
 
 const CardWrapper = styled.div`
@@ -31,45 +38,105 @@ const MoreInfoWrapper = styled.div`
   }
 `;
 
-const ClubDetailWrapper = styled.div`
+const ResisterInfoWrapper = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 20px;
+  flex-direction: row;
+  gap: 12px;
   flex: 1 0 0;
+  align-items: center;
 `;
 
-const ClubDetailMainFrame: React.FC<ClubDetailMainFrameProps> = ({ club }) => (
-  <FlexWrapper direction="column" gap={60}>
-    <PageHead
-      items={[
-        { name: "동아리 목록", path: "/clubs" },
-        { name: club.name, path: `/clubs/${club.id}` },
-      ]}
-      title={club.name}
-    />
-    <FlexWrapper direction="column" gap={20}>
-      <SectionTitle size="lg">동아리 정보</SectionTitle>
-      <CardWrapper>
-        <ClubInfoCard club={club} />
-      </CardWrapper>
-    </FlexWrapper>
+const ClubDetailMainFrame: React.FC<ClubDetailMainFrameProps> = ({
+  club,
+  isRegistrationPeriod,
+}) => {
+  // TODO : 해당 동아리 등록 신청 여부 받아오기
+  const [isRegistered, setIsRegistered] = useState(false);
+
+  const toggleRegistered = (close: () => void) => {
+    // TODO : 회원가입 승인 or 취소 로직 추가
+    setIsRegistered(prev => !prev);
+    close();
+  };
+
+  const submitHandler = () => {
+    overlay.open(({ isOpen, close }) => (
+      <Modal isOpen={isOpen} onClose={close}>
+        {isRegistered ? (
+          <CancellableModalContent
+            onClose={close}
+            onConfirm={() => {
+              toggleRegistered(close);
+            }}
+          >
+            2024학년도 봄학기 {club.type === 1 ? "정동아리" : "가동아리"}{" "}
+            {club.name}의<br />
+            회원 등록을 취소합니다.
+          </CancellableModalContent>
+        ) : (
+          <CancellableModalContent
+            onClose={close}
+            onConfirm={() => {
+              toggleRegistered(close);
+            }}
+          >
+            2024학년도 봄학기 {club.type === 1 ? "정동아리" : "가동아리"}{" "}
+            {club.name}의<br />
+            회원 등록 신청을 진행합니다.
+          </CancellableModalContent>
+        )}
+      </Modal>
+    ));
+  };
+
+  return (
+    <FlexWrapper direction="column" gap={60}>
+      <PageHead
+        items={[
+          { name: "동아리 목록", path: "/clubs" },
+          { name: club.name, path: `/clubs/${club.id}` },
+        ]}
+        title={club.name}
+        action={
+          isRegistrationPeriod ? (
+            <ResisterInfoWrapper>
+              <Typography fs={16} color="GRAY.600" fw="REGULAR">
+                등록 신청 {club.totalMemberCnt}명
+              </Typography>
+              <Button type="default" onClick={submitHandler}>
+                {isRegistered ? "회원 등록 취소" : "회원 등록 신청"}
+              </Button>
+            </ResisterInfoWrapper>
+          ) : (
+            isRegistered && <Button type="disabled">회원 승인 대기</Button>
+          )
+        }
+      />
 
-    <MoreInfoWrapper>
       <FlexWrapper direction="column" gap={20}>
-        <SectionTitle size="lg">인적 사항 </SectionTitle>
+        <SectionTitle size="lg">동아리 정보</SectionTitle>
         <CardWrapper>
-          <PersonInfoCard club={club} />
+          <ClubInfoCard club={club} />
         </CardWrapper>
       </FlexWrapper>
 
-      <ClubDetailWrapper>
-        <SectionTitle size="lg">동아리 설명</SectionTitle>
-        <CardWrapper>
-          <ClubDetailCard club={club} />
-        </CardWrapper>
-      </ClubDetailWrapper>
-    </MoreInfoWrapper>
-  </FlexWrapper>
-);
+      <MoreInfoWrapper>
+        <FlexWrapper direction="column" gap={20}>
+          <SectionTitle size="lg">인적 사항 </SectionTitle>
+          <CardWrapper>
+            <PersonInfoCard club={club} />
+          </CardWrapper>
+        </FlexWrapper>
+
+        <FlexWrapper direction="column" gap={20}>
+          <SectionTitle size="lg">동아리 설명</SectionTitle>
+          <CardWrapper>
+            <ClubDetailCard club={club} />
+          </CardWrapper>
+        </FlexWrapper>
+      </MoreInfoWrapper>
+    </FlexWrapper>
+  );
+};
 
 export default ClubDetailMainFrame;