Merge pull request #494 from js43o/label-color

[Refactor] 모각코 상태에 따라 라벨 색상 변경
boostcampwm2023 · Dec 28, 2023 · 447f80a · 447f80a
2 parents cc3a252 + c8b051c
commit 447f80a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/app/frontend/src/components/MogacoItem/index.css.ts b/app/frontend/src/components/MogacoItem/index.css.ts
@@ -109,6 +109,6 @@ export const title = style([
 export const titleArea = style({
   display: 'flex',
   alignItems: 'center',
-  gap: '0.4rem',
+  gap: '0.8rem',
   width: '100%',
 });
diff --git a/app/frontend/src/components/MogacoItem/index.tsx b/app/frontend/src/components/MogacoItem/index.tsx
@@ -30,7 +30,11 @@ export function MogacoItem({
   status,
 }: MogacoProps) {
   const MogacoLabel = (
-    <Label theme="primary" shape="fill" disabled={status === '마감'}>
+    <Label
+      theme={status === '모집 중' ? 'primary' : 'danger'}
+      shape="fill"
+      disabled={status === '모집 마감'}
+    >
       {status}
     </Label>
   );

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx
@@ -9,7 +9,11 @@ export function TitleWrapper({
 }: Pick<ResponseMogacoDto, 'title' | 'status'>) {
   return (
     <div className={styles.titleWrapper}>
-      <Label theme="primary" shape="fill">
+      <Label
+        theme={status === '모집 중' ? 'primary' : 'danger'}
+        shape="fill"
+        disabled={status === '모집 마감'}
+      >
         {status}
       </Label>
       <span className={styles.title}>{title}</span>

diff --git a/packages/morak-ui/src/components/Label/index.css.ts b/packages/morak-ui/src/components/Label/index.css.ts
@@ -6,10 +6,11 @@ const { grayscale50, morakGreen, morakRed, grayscale200 } = vars.color;
 export const container = recipe({
   base: {
     display: 'inline-flex',
+    flexShrink: 0,
     justifyContent: 'center',
     alignItems: 'center',
-    minWidth: '3.5rem',
-    padding: '0.4rem 1.5rem',
+    minWidth: '3.6rem',
+    padding: '0.4rem 1.4rem',
     borderRadius: '100rem',
     whiteSpace: 'pre',
   },