[Feat] 그룹 참여/가입 신청 UI 추가

app/frontend/src/components/Group/GroupButton.tsx

@@ -5,18 +5,25 @@ import { useGroupModal } from './hooks/useGroupModal';
 
 type GroupButtonProps = {
   id: string;
-  owned: boolean;
+  closed: boolean;
   joined: boolean;
+  owned: boolean;
 };
 
-export function GroupButton({ id, owned, joined }: GroupButtonProps) {
+export function GroupButton({ id, closed, joined, owned }: GroupButtonProps) {
   const { handleLeave, handleJoin } = useGroupJoinAndLeave();
-  const { openLeaveModal, openJoinModal } = useGroupModal();
+  const { openLeaveModal, openJoinModal, openApplyModal } = useGroupModal();
 
   const onClickLeave = () =>
     openLeaveModal({ onClickConfirm: () => handleLeave(id) });
   const onClickJoin = () =>
     openJoinModal({ onClickConfirm: () => handleJoin(id) });
+  const onClickApply = () =>
+    openApplyModal({
+      onClickConfirm: () => {
+        // 가입 신청 API 연동
+      },
+    });
 
   return (
     <>
@@ -42,9 +49,9 @@ export function GroupButton({ id, owned, joined }: GroupButtonProps) {
             theme="primary"
             shape="fill"
             size="medium"
-            onClick={onClickJoin}
+            onClick={closed ? onClickApply : onClickJoin}
           >
-            참여하기
+            {closed ? '가입 신청' : '참여하기'}
           </Button>
         ))}
     </>

app/frontend/src/components/Group/hooks/useGroupModal.tsx

@@ -1,9 +1,9 @@
+import { Modal } from '@/components';
 import { useModal } from '@/hooks';
 
-import { Modal } from '../../Modal';
-
 export const useGroupModal = () => {
   const { openModal } = useModal();
+
   const openLeaveModal = ({
     onClickConfirm,
   }: {
@@ -25,13 +25,28 @@ export const useGroupModal = () => {
   }) => {
     openModal(
       <Modal
-        title="그룹에서 참여하시겠습니까?"
+        title="그룹에 참여하시겠습니까?"
         content={`현재 속해 있는 그룹이 있다면,\n그 그룹에서 자동으로 나가게 됩니다.`}
         buttonType="double"
         onClickConfirm={onClickConfirm}
       />,
     );
   };
 
-  return { openLeaveModal, openJoinModal };
+  const openApplyModal = ({
+    onClickConfirm,
+  }: {
+    onClickConfirm: () => void;
+  }) => {
+    openModal(
+      <Modal
+        title="그룹에 가입 신청할까요?"
+        content={`비공개 그룹은\n관리자의 승인 후 참여 처리됩니다.`}
+        buttonType="double"
+        onClickConfirm={onClickConfirm}
+      />,
+    );
+  };
+
+  return { openLeaveModal, openJoinModal, openApplyModal };
 };

app/frontend/src/components/Group/index.tsx

@@ -1,27 +1,29 @@
 import { ReactComponent as Crown } from '@/assets/icons/crown.svg';
-// import { ReactComponent as Count } from '@/assets/icons/people.svg';
-// import { vars } from '@/styles';
+import { ReactComponent as Lock } from '@/assets/icons/lock.svg';
+import { vars } from '@/styles';
 
 import { GroupButton } from './GroupButton';
 import * as styles from './index.css';
 
-// const { grayscale200 } = vars.color;
+const { grayscale200 } = vars.color;
 
 type GroupProps = {
   id: string;
-  owned?: boolean;
-  joined?: boolean;
   name: string;
+  closed: boolean;
+  joined: boolean;
+  owned?: boolean;
 };
-export function Group({ id, owned = false, name, joined = false }: GroupProps) {
+export function Group({ id, name, closed, joined, owned = false }: GroupProps) {
   return (
     <div className={styles.container}>
       <div className={styles.titleWrapper}>
         <div className={styles.nameWrapper}>
           {owned && <Crown />}
           <div className={styles.title}>{name}</div>
+          {closed && <Lock width={24} height={24} fill={grayscale200} />}
         </div>
-        <GroupButton id={id} owned={owned} joined={joined} />
+        <GroupButton id={id} closed={closed} joined={joined} owned={owned} />
       </div>
       {/* <div className={styles.count}>
         <Count width={16} height={16} fill={grayscale200} />

app/frontend/src/components/Modal/index.css.ts

@@ -74,4 +74,5 @@ export const textArea = style({
   justifyContent: 'center',
   alignItems: 'center',
   gap: '0.8rem',
+  lineHeight: 'normal',
 });

app/frontend/src/hooks/useRouter.tsx

@@ -11,6 +11,7 @@ import {
   Groups,
   ProfilePage,
   NotFound,
+  GroupJoinPage,
 } from '@/pages';
 
 export const useRouter = () =>
@@ -50,6 +51,10 @@ export const useRouter = () =>
           path: 'groups',
           element: <Groups />,
         },
+        {
+          path: 'group/join',
+          element: <GroupJoinPage />,
+        },
       ],
     },
     {

app/frontend/src/pages/Groups/Join/index.css.ts

@@ -0,0 +1,75 @@
+import { style } from '@vanilla-extract/css';
+
+import { fontStyle, vars } from '@/styles';
+
+const { grayscale200, morakGreen } = vars.color;
+const { sansRegular18, sansRegular16, sansBold20 } = fontStyle;
+
+export const buttons = style({
+  display: 'flex',
+  gap: '0.8rem',
+});
+
+export const closedText = style([
+  sansRegular18,
+  {
+    textAlign: 'center',
+    lineHeight: '2.4rem',
+  },
+]);
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  maxWidth: '80rem',
+  margin: '0 auto',
+  gap: '2.4rem',
+});
+
+export const form = style([
+  sansRegular18,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.6rem',
+    alignItems: 'center',
+  },
+]);
+
+export const group = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '0.8rem',
+  padding: '1.2rem',
+  border: `1px solid ${morakGreen}`,
+  borderRadius: '1.6rem',
+  color: morakGreen,
+});
+
+export const groupTitle = style([
+  sansBold20,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.4rem',
+  },
+]);
+
+export const participants = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    gap: '0.4rem',
+    alignItems: 'center',
+    color: grayscale200,
+  },
+]);
+
+export const subText = style([
+  sansRegular16,
+  {
+    color: grayscale200,
+  },
+]);

app/frontend/src/pages/Groups/Join/index.tsx

@@ -0,0 +1,78 @@
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Button } from '@morak/ui';
+
+import { ReactComponent as Lock } from '@/assets/icons/lock.svg';
+import { ReactComponent as People } from '@/assets/icons/people.svg';
+import { useGroupJoinAndLeave } from '@/components/Group/hooks/useGroupJoinLeave';
+import { useGroupModal } from '@/components/Group/hooks/useGroupModal';
+import { fontStyle, vars } from '@/styles';
+
+import * as styles from './index.css';
+
+const { sansBold36 } = fontStyle;
+const { grayscale200 } = vars.color;
+
+export function GroupJoinPage() {
+  const navigate = useNavigate();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { access_code: accessCode } = useParams();
+
+  const { openJoinModal } = useGroupModal();
+  const { handleJoin } = useGroupJoinAndLeave();
+
+  // accessCode로 그룹 정보 페칭 필요
+  const { id, closed } = { id: '1', closed: true };
+
+  const goBack = () => navigate(-1);
+
+  const onClickJoin = () =>
+    openJoinModal({ onClickConfirm: () => handleJoin(id) });
+
+  return (
+    <div className={styles.container}>
+      <h2 className={sansBold36}>그룹 참여</h2>
+      <div className={styles.group}>
+        <div className={styles.groupTitle}>
+          <span>부스트캠프 웹·모바일 9기</span>
+          {closed && <Lock width={24} height={24} fill={grayscale200} />}
+        </div>
+        <span className={styles.participants}>
+          <People width={24} height={24} fill={grayscale200} />
+          120
+        </span>
+      </div>
+      <div className={styles.form}>
+        {closed ? (
+          <div className={styles.closedText}>
+            <div>그룹에 가입 신청할까요?</div>
+            <div className={styles.subText}>
+              비공개 그룹은 그룹장의 승인 후 참여 처리됩니다.
+            </div>
+          </div>
+        ) : (
+          '이 그룹에 참여할까요?'
+        )}
+        <div className={styles.buttons}>
+          <Button theme="primary" shape="line" size="large" onClick={goBack}>
+            취소
+          </Button>
+          {closed ? (
+            <Button theme="primary" shape="fill" size="large">
+              가입 신청
+            </Button>
+          ) : (
+            <Button
+              theme="primary"
+              shape="fill"
+              size="large"
+              onClick={onClickJoin}
+            >
+              참여하기
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/frontend/src/pages/Groups/index.tsx

@@ -36,6 +36,7 @@ export function Groups() {
               name={group.title}
               id={group.id}
               joined={group.id === joinedGroup?.id}
+              closed={group.groupTypeId === 1}
             />
           ))
         )}

app/frontend/src/pages/Profile/MyGroup/index.css.ts

@@ -2,6 +2,10 @@ import { style } from '@vanilla-extract/css';
 
 import * as parentStyle from '../index.css';
 
+export const groupButton = style({
+  width: '100%',
+});
+
 export const groupButtons = style({
   display: 'flex',
   gap: '1.2rem',

app/frontend/src/pages/Profile/MyGroup/index.tsx

@@ -1,8 +1,8 @@
 import { NavLink } from 'react-router-dom';
 
+import { Button } from '@morak/ui';
 import { useQuery } from '@tanstack/react-query';
 
-import { ReactComponent as ArrowLeft } from '@/assets/icons/arrow_left.svg';
 import { Error, Group, LoadingIndicator } from '@/components';
 import { queryKeys } from '@/queries';
 import { vars } from '@/styles';
@@ -32,24 +32,44 @@ export function MyGroup() {
           />
         )}
         {isSuccess &&
-          myGroup.length > 0 &&
-          myGroup?.map((group) => (
-            <Group key={group.id} id={group.id} name={group.title} joined />
+          myGroup?.length > 0 &&
+          myGroup.map((group) => (
+            <Group
+              key={group.id}
+              id={group.id}
+              name={group.title}
+              joined
+              closed={group.groupTypeId === 1}
+            />
           ))}
         {isSuccess && myGroup.length === 0 && (
           <Error message="현재 속한 그룹이 없습니다. 그룹에 참여해 주세요." />
         )}
       </ul>
-      <NavLink to="/groups" className={styles.navLinkButton}>
-        <ArrowLeft
-          fill={vars.color.morakGreen}
-          width={24}
-          height={24}
-          className={styles.rotateArrow}
-        />
-        그룹 리스트 보기
-      </NavLink>
-      <div className={styles.groupButtons}>{/* <Button /> */}</div>
+      <div className={styles.groupButtons}>
+        <NavLink to="/groups" className={styles.groupButton}>
+          <Button
+            type="button"
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+          >
+            그룹 참여
+          </Button>
+        </NavLink>
+        <NavLink to="/group/new" className={styles.groupButton}>
+          <Button
+            type="button"
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+          >
+            새 그룹 생성
+          </Button>
+        </NavLink>
+      </div>
     </section>
   );
 }

app/frontend/src/pages/index.ts

@@ -1,5 +1,6 @@
 export * from './Calendar';
 export * from './Groups';
+export * from './Groups/Join';
 export * from './Main';
 export * from './Map';
 export * from './Mogaco';