💄 그룹 참여 및 새 그룹 생성 버튼 추가

- '그룹 리스트 보기' => '그룹 참여'로 이름 변경
boostcampwm2023 · Feb 3, 2024 · 325ce97 · 325ce97
1 parent aad3f9b
commit 325ce97
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/app/frontend/src/pages/Profile/MyGroup/index.css.ts b/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',

diff --git a/app/frontend/src/pages/Profile/MyGroup/index.tsx b/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="/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>
   );
 }