feat: #13 버튼 스타일추가

Leets-Official · Jan 24, 2025 · 19b7597 · 19b7597
1 parent 303f47e
commit 19b7597
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/src/assets/images/ic_open_hand.svg → src/assets/images/ic_open hand.svg b/src/assets/images/ic_open_hand.svg → src/assets/images/ic_open hand.svg
diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts
@@ -7,13 +7,19 @@ export type ButtonVariant =
   | 'primary-outlineless'
   | 'secondary-main'
   | 'secondary-white';
-export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonRounded = 'none' | 'sm' | 'md' | 'lg';
 
 const sizeStyles: Record<
   ButtonSize,
   (svgIcon: boolean) => ReturnType<typeof css>
 > = {
+  xs: (svgIcon) => css`
+    width: 108px;
+    height: 43px;
+    font-size: 14px;
+    padding: ${svgIcon ? '0.2rem 0.5rem' : '0.7rem 0.5rem'};
+  `,
   sm: (svgIcon) => css`
     width: 154px;
     height: 49px;

diff --git a/src/components/common/Modal/MeetingGuideModal.tsx b/src/components/common/Modal/MeetingGuideModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import HandIcon from '@/assets/images/ic_open_hand.svg';
+import HandIcon from '@/assets/images/ic_open hand.svg';
+import Button from '../Button/Button';
 
 const ModalOverlay = styled.div`
   position: fixed;
@@ -24,23 +25,20 @@ const ModalContainer = styled.div`
   position: relative;
 `;
 
-const Title = styled.h2`
+const Title = styled.div`
   font-size: ${({ theme }) => theme.FONT_SIZE.md};
-  font-weight: bold;
   color: ${({ theme }) => theme.COLORS.black};
-  margin-bottom: 8px;
 `;
 
 const Icon = styled.img`
-  margin-bottom: 16px;
-  width: 60px;
-  height: 60px;
+  width: 100px;
+  margin-top: 10px;
 `;
 
 const RuleList = styled.ul`
+  margin-top: 15px;
   list-style: none;
-  margin: 0;
-  padding: 0;
+  padding: 0 15px;
   text-align: left;
 `;
 
@@ -61,25 +59,6 @@ const ButtonContainer = styled.div`
   margin-top: 20px;
 `;
 
-const Button = styled.button<{ primary?: boolean }>`
-  flex: 1;
-  padding: 12px 0;
-  border-radius: 8px;
-  font-size: ${({ theme }) => theme.FONT_SIZE.sm};
-  font-weight: 600;
-  cursor: pointer;
-  background: ${({ primary, theme }) =>
-    primary ? theme.COLORS.main : theme.COLORS.white};
-  border: ${({ primary, theme }) =>
-    primary ? 'none' : `1px solid ${theme.COLORS.main}`};
-  color: ${({ primary, theme }) =>
-    primary ? theme.COLORS.white : theme.COLORS.main};
-
-  &:first-child {
-    margin-right: 10px;
-  }
-`;
-
 interface MeetingGuidModalProps {
   onClose: () => void;
 }
@@ -92,20 +71,32 @@ const MeetingGuidModal: React.FC<MeetingGuidModalProps> = ({ onClose }) => {
         <Icon src={HandIcon} alt="손" />
         <RuleList>
           <RuleItem>
-            <strong>1. 존중과 예의를 지켜주세요</strong>
+            <Title>1. 존중과 예의를 지켜주세요</Title>
             <br />
             상대방에게 예의를 갖추고, 비방이나 공격적인 언행을 삼가주세요.
           </RuleItem>
           <RuleItem>
-            <strong>2. 약속 시간을 반드시 지켜주세요</strong>
+            <Title>2. 약속 시간을 반드시 지켜주세요</Title>
             <br />
             모임 시작 시간에 늦지 않도록 하고, 불참 시 미리 주최자에게
             알려주세요.
           </RuleItem>
         </RuleList>
         <ButtonContainer>
-          <Button onClick={onClose}>뒤로가기</Button>
-          <Button primary onClick={onClose}>
+          <Button
+            variant="secondary-white"
+            size="xs"
+            rounded="lg"
+            onClick={onClose}
+          >
+            뒤로가기
+          </Button>
+          <Button
+            variant="secondary-main"
+            size="xs"
+            rounded="lg"
+            onClick={onClose}
+          >
             확인했어요
           </Button>
         </ButtonContainer>