Merge pull request #415 from ttaerrim/408-group-bug

[Bug] 그룹 컴포넌트 버그 해결 및 디자인 수정
boostcampwm2023 · Dec 11, 2023 · 2e5b5a1 · 2e5b5a1
2 parents 9535681 + 74f2547
commit 2e5b5a1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/app/frontend/src/components/Group/index.css.ts b/app/frontend/src/components/Group/index.css.ts
@@ -29,8 +29,7 @@ export const container = style({
   borderRadius: '0.8rem',
   border: `1px solid ${grayscale200}`,
   backgroundColor: grayscaleWhite,
-  padding: '2rem',
-  paddingBottom: '1.6rem',
+  padding: '2rem 1.6rem',
   gap: '0.8rem',
   cursor: 'pointer',
 
@@ -39,6 +38,12 @@ export const container = style({
       backgroundColor: grayscale50,
     },
   },
+
+  '@media': {
+    'screen and (max-width:768px)': {
+      padding: '1.2rem',
+    },
+  },
 });
 
 export const copyButton = style({
@@ -61,16 +66,6 @@ export const count = style([
   },
 ]);
 
-export const desktop = style({
-  display: 'flex',
-
-  '@media': {
-    'screen and (max-width:768px)': {
-      display: 'none',
-    },
-  },
-});
-
 export const detail = style({
   display: 'flex',
   justifyContent: 'space-between',
@@ -91,17 +86,28 @@ export const mobile = style({
     },
   },
 });
+export const nameWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.4rem',
+});
 
 export const title = style([
   sansBold20,
   {
     color: grayscaleBlack,
+
+    '@media': {
+      'screen and (max-width:768px)': {
+        fontSize: '1.6rem',
+      },
+    },
   },
 ]);
 
 export const titleWrapper = style({
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'start',
+  alignItems: 'center',
   gap: '0.8rem',
 });
diff --git a/app/frontend/src/components/Group/index.tsx b/app/frontend/src/components/Group/index.tsx
@@ -17,11 +17,11 @@ export function Group({ id, owned = false, name, joined = false }: GroupProps) {
   return (
     <div className={styles.container}>
       <div className={styles.titleWrapper}>
-        {owned && <Crown />}
-        <div className={styles.title}>{name}</div>
-        <div className={styles.desktop}>
-          <GroupButton id={id} owned={owned} joined={joined} />
+        <div className={styles.nameWrapper}>
+          {owned && <Crown />}
+          <div className={styles.title}>{name}</div>
         </div>
+        <GroupButton id={id} owned={owned} joined={joined} />
       </div>
       {/* <div className={styles.count}>
         <Count width={16} height={16} fill={grayscale200} />
@@ -38,9 +38,6 @@ export function Group({ id, owned = false, name, joined = false }: GroupProps) {
               <Copy width={24} height={24} fill={grayscale200} />
             </button>
           </div>
-          <div className={styles.mobile}>
-            <GroupButton id={id} owned={owned} joined={joined} />
-          </div>
         </div>
       )} */}
     </div>