From f6a0fda65775bb910c5e256fdae9b7b0544e672b Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Sat, 3 Feb 2024 19:00:31 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=EA=B7=B8=EB=A3=B9=20=EC=B0=B8?=
 =?UTF-8?q?=EC=97=AC=20=EC=BD=94=EB=93=9C=20=EB=A7=81=ED=81=AC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/hooks/useRouter.tsx          |  5 ++
 .../src/pages/Groups/Join/index.css.ts        | 75 ++++++++++++++++++
 app/frontend/src/pages/Groups/Join/index.tsx  | 78 +++++++++++++++++++
 app/frontend/src/pages/index.ts               |  1 +
 4 files changed, 159 insertions(+)
 create mode 100644 app/frontend/src/pages/Groups/Join/index.css.ts
 create mode 100644 app/frontend/src/pages/Groups/Join/index.tsx

diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx
index 75f2a8cba..2f362e635 100644
--- a/app/frontend/src/hooks/useRouter.tsx
+++ b/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 />,
+        },
       ],
     },
     {
diff --git a/app/frontend/src/pages/Groups/Join/index.css.ts b/app/frontend/src/pages/Groups/Join/index.css.ts
new file mode 100644
index 000000000..951a99f41
--- /dev/null
+++ b/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,
+  },
+]);
diff --git a/app/frontend/src/pages/Groups/Join/index.tsx b/app/frontend/src/pages/Groups/Join/index.tsx
new file mode 100644
index 000000000..63a821320
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts
index be3bc46ce..e9577523a 100644
--- a/app/frontend/src/pages/index.ts
+++ b/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';