feat: MemeDetailPage에서 밈 꾸미기 버튼 추가 및 스타일 수정

- 밈 꾸미기 버튼을 추가하여 사용자에게 커스터마이징 기능 제공
- 버튼 스타일을 개선하고, 버튼 간의 간격 및 패딩 조정
- 버튼의 배경색 및 호버 효과를 수정하여 시각적 일관성 향상

Author: Cllaude99

apps/web/src/pages/MemeDetailPage/MemeDetailPage.styles.ts

@@ -26,35 +26,41 @@ const Image = styled.img`
 
 const ButtonContainer = styled.div`
   position: fixed;
-  max-width: 425px;
+  max-width: ${({ theme }) => theme.breakpoints.mobile};
   left: 50%;
   transform: translateX(-50%);
   bottom: 0;
   width: 100%;
-  padding: 24px 14px;
+  padding: 12px 14px;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};
   border-top: 1px solid ${({ theme }) => theme.palette.gray['gray-9']};
   display: flex;
-  gap: 10px;
+  gap: 8px;
   z-index: 10;
 `;
 
-const ActionButton = styled.button`
-  flex: 1;
+interface ActionButtonProps {
+  isPrimary?: boolean;
+}
+
+const ActionButton = styled.button<ActionButtonProps>`
+  flex: ${({ isPrimary }) => (isPrimary ? 1 : 2)};
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
-  background-color: ${({ theme }) => theme.palette.gray['gray-9']};
-  border: 1px solid ${({ theme }) => theme.palette.gray['gray-8']};
-  border-radius: 10px;
+  background-color: ${({ theme, isPrimary }) =>
+    isPrimary ? theme.palette.gray['gray-9'] : theme.palette.main.pink[50]};
+  border: none;
+  border-radius: 8px;
   cursor: pointer;
-  padding: 14px;
+  padding: 12px;
   ${({ theme }) => theme.typography.title.subhead2};
   color: ${({ theme }) => theme.palette.common.white};
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray['gray-8']};
+    background-color: ${({ theme, isPrimary }) =>
+      isPrimary ? theme.palette.gray['gray-8'] : theme.palette.main.pink[40]};
   }
 `;
 

apps/web/src/pages/MemeDetailPage/index.tsx

@@ -89,6 +89,18 @@ const MemeDetailPage = () => {
         </S.ContentContainer>
       </S.Container>
       <S.ButtonContainer>
+        <S.ActionButton
+          isPrimary
+          onClick={() => {
+            nativeBridge.customMeme({
+              title: memeDetail?.success.title ?? '',
+              image: memeDetail?.success.imgUrl ?? '',
+            });
+          }}
+        >
+          <MemeDesignPenIcon />
+          <span>밈 꾸미기</span>
+        </S.ActionButton>
         <S.ActionButton
           onClick={() => {
             if (isWebview) {
@@ -104,17 +116,6 @@ const MemeDetailPage = () => {
           <ShareIcon />
           <span>공유하기</span>
         </S.ActionButton>
-        <S.ActionButton
-          onClick={() => {
-            nativeBridge.customMeme({
-              title: memeDetail?.success.title ?? '',
-              image: memeDetail?.success.imgUrl ?? '',
-            });
-          }}
-        >
-          <MemeDesignPenIcon />
-          <span>밈 꾸미기</span>
-        </S.ActionButton>
       </S.ButtonContainer>
     </Layout>
   );