[Design] 그룹 참여/가입 신청 페이지 UI 작성

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

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular16 } from '@/styles/font.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '0.8rem',
+  width: '100%',
+  padding: '1.6rem',
+  border: `1px solid ${vars.color.morakGreen}`,
+  borderRadius: '0.8rem',
+  textAlign: 'center',
+  wordBreak: 'break-all',
+  color: vars.color.morakGreen,
+});
+
+export const participants = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    gap: '0.4rem',
+    alignItems: 'center',
+    color: vars.color.grayscale200,
+  },
+]);

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

@@ -0,0 +1,24 @@
+import { ReactComponent as People } from '@/assets/icons/people.svg';
+import { fontStyle, vars } from '@/styles';
+
+import * as styles from './index.css';
+
+type GroupInfoProps = {
+  title: string;
+  participantsCount: number;
+};
+
+export function GroupInfo({ title, participantsCount }: GroupInfoProps) {
+  const { grayscale200 } = vars.color;
+  const { sansBold20 } = fontStyle;
+
+  return (
+    <div className={styles.container}>
+      <span className={sansBold20}>{title}</span>
+      <span className={styles.participants}>
+        <People width={24} height={24} fill={grayscale200} />
+        {participantsCount}
+      </span>
+    </div>
+  );
+}

app/frontend/src/hooks/useRouter.tsx

@@ -12,6 +12,8 @@ import {
   ProfilePage,
   NotFound,
 } from '@/pages';
+import { GroupJoinPage } from '@/pages/Group/Join';
+import { GroupLinkPage } from '@/pages/Group/Link';
 
 export const useRouter = () =>
   createBrowserRouter([
@@ -50,6 +52,14 @@ export const useRouter = () =>
           path: 'groups',
           element: <Groups />,
         },
+        {
+          path: 'group/join',
+          element: <GroupJoinPage />,
+        },
+        {
+          path: 'group/:id',
+          element: <GroupLinkPage />,
+        },
       ],
     },
     {

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

@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+
+export const confirmButtons = style({
+  display: 'flex',
+  gap: '1.6rem',
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3.6rem',
+  maxWidth: '80rem',
+  margin: '0 auto',
+});
+
+export const navLinkButton = style({
+  width: '100%',
+});
+
+export const section = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2.4rem',
+  position: 'relative',
+  opacity: 1,
+  transition: 'opacity 0.5s, transform 0.5s',
+
+  selectors: {
+    '& + &': {
+      paddingTop: '2.4rem',
+      borderTop: `1px solid ${vars.color.grayscale100}`,
+    },
+    '&.completed::before': {
+      position: 'absolute',
+      zIndex: 10,
+      width: '100%',
+      height: '100%',
+      background: vars.color.grayscaleWhite,
+      opacity: 0.75,
+      content: '',
+    },
+    '&.disabled': {
+      transform: 'translateY(-0.8rem)',
+      visibility: 'hidden',
+      opacity: 0,
+    },
+  },
+});

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

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import { Button, Input } from '@morak/ui';
+
+import { GroupInfo } from '@/components/GroupInfo';
+import { fontStyle } from '@/styles';
+
+import * as styles from './index.css';
+
+export function GroupJoinPage() {
+  const { sansBold36, sansBold24, sansRegular18 } = fontStyle;
+
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const getCurrentState = (step: number) => {
+    if (step > currentStep) {
+      return 'disabled';
+    }
+
+    if (step < currentStep) {
+      return 'completed';
+    }
+
+    return '';
+  };
+
+  return (
+    <div className={styles.container}>
+      <h2 className={sansBold36}>그룹 참여</h2>
+      <section className={`${styles.section} ${getCurrentState(1)}`}>
+        <h3 className={sansBold24}>1. 참여 방법 선택</h3>
+        <p className={sansRegular18}>어떤 방법으로 그룹에 참여할까요?</p>
+        <div className={styles.confirmButtons}>
+          <Button
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+            onClick={() => setCurrentStep(2)}
+          >
+            참여 코드로 참여할래요
+          </Button>
+          <NavLink to="/groups" className={styles.navLinkButton}>
+            <Button
+              type="button"
+              theme="primary"
+              shape="line"
+              size="large"
+              fullWidth
+            >
+              공개된 그룹을 둘러볼래요
+            </Button>
+          </NavLink>
+        </div>
+      </section>
+      <section className={`${styles.section} ${getCurrentState(2)}`}>
+        <h3 className={sansBold24}>2. 참여 코드 입력</h3>
+        <p className={sansRegular18}>참여 코드를 입력해 주세요.</p>
+        <Input />
+        <div className={styles.confirmButtons}>
+          <Button
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+            onClick={() => setCurrentStep(1)}
+          >
+            이전으로
+          </Button>
+          <Button
+            theme="primary"
+            shape="fill"
+            size="large"
+            fullWidth
+            onClick={() => setCurrentStep(3)}
+          >
+            확인
+          </Button>
+        </div>
+      </section>
+      <section className={`${styles.section} ${getCurrentState(3)}`}>
+        <h3 className={sansBold24}>3. 그룹 확인 및 가입 신청</h3>
+        <GroupInfo title="부스트캠프 웹·모바일 9기" participantsCount={160} />
+        <p className={sansRegular18}>이 그룹에 가입 신청할까요?</p>
+        <div className={styles.confirmButtons}>
+          <Button
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+            onClick={() => setCurrentStep(2)}
+          >
+            이전으로
+          </Button>
+          <Button theme="primary" shape="fill" size="large" fullWidth>
+            가입 신청
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}

app/frontend/src/pages/Group/Link/index.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+export const buttons = style({
+  display: 'flex',
+  gap: '0.8rem',
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3.6rem',
+  margin: '0 auto',
+  maxWidth: '80rem',
+});
+
+export const group = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '1.6rem',
+});

app/frontend/src/pages/Group/Link/index.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@morak/ui';
+
+import { GroupInfo } from '@/components/GroupInfo';
+import { fontStyle } from '@/styles';
+
+import * as styles from './index.css';
+
+export function GroupLinkPage() {
+  const { sansBold36, sansRegular16 } = fontStyle;
+
+  const goBack = () => window.history.back();
+
+  return (
+    <div className={styles.container}>
+      <h2 className={sansBold36}>그룹 참여</h2>
+      <div className={styles.group}>
+        <GroupInfo title="부스트캠프 웹·모바일 9기" participantsCount={160} />
+        <span className={sansRegular16}>이 그룹에 참여할까요?</span>
+        <div className={styles.buttons}>
+          <Button theme="primary" shape="line" size="large" onClick={goBack}>
+            취소
+          </Button>
+          <Button theme="primary" shape="fill" size="large">
+            참여하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
-  maxWidth: '72rem',
+  maxWidth: '80rem',
   margin: '0 auto',
 });
 

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';
@@ -40,16 +40,30 @@ export function MyGroup() {
           <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="/group/join" className={styles.navLinkButton}>
+          <Button
+            type="button"
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+          >
+            그룹 참여
+          </Button>
+        </NavLink>
+        <NavLink to="." className={styles.navLinkButton}>
+          <Button
+            type="button"
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+          >
+            새 그룹 생성
+          </Button>
+        </NavLink>
+      </div>
     </section>
   );
 }

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

@@ -1,8 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
-import { vars } from '@/styles';
-import { sansBold16 } from '@/styles/font.css';
-
 export const container = style({
   display: 'flex',
   flexDirection: 'column',
@@ -26,16 +23,9 @@ export const loading = style({
   justifyContent: 'center',
 });
 
-export const navLinkButton = style([
-  sansBold16,
-  {
-    display: 'flex',
-    gap: 0,
-    alignItems: 'center',
-    alignSelf: 'end',
-    color: vars.color.morakGreen,
-  },
-]);
+export const navLinkButton = style({
+  width: '100%',
+});
 
 export const rotateArrow = style({
   transform: 'rotate(180deg)',