버튼 반응형 전체 페이지 적용

src/components/common/Button/Button.jsx

@@ -51,7 +51,7 @@ const ButtonWrapper = styled.button`
   ${({ width }) =>
     width &&
     css`
-      width: ${width}px;
+      width: ${typeof width === "number" ? `${width}px` : width};
     `}
 `;
 

src/components/common/Emoji/Emoji.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useEffect } from "react";
 import EmojiPicker from "emoji-picker-react";
 import styled from "styled-components";
-import EmojiIcon from "../../../assets/images/emoji.png";
-import toggle from "../../../assets/images/toggle.png";
+import { ArrowDown } from "../../../assets/images/icon/IconIndex";
 import recipientsService from "../../../api/services/recipientsService";
 import { useParams } from "react-router-dom";
+import Button from "../Button/Button";
 
 const TOP_EMOJIS = 3;
 
@@ -83,14 +83,10 @@ function Emoji({ topReactions = [], setRecipientData }) {
         <ActionsContainer>
           {allReactions.length > TOP_EMOJIS && (
             <ShowMoreButton onClick={() => setShowAllEmojis(!showAllEmojis)}>
-              <Icon src={toggle} alt="더 보기" />
+              <ArrowDown alt="더 보기" />
             </ShowMoreButton>
           )}
-
-          <AddButton onClick={() => setShowPicker(!showPicker)}>
-            <Icon src={EmojiIcon} alt="EmojiIcon" />
-            추가
-          </AddButton>
+          <Button onClick={() => setShowPicker(!showPicker)} variant="outlined" image="add">추가</Button>
         </ActionsContainer>
       </Header>
 
@@ -118,11 +114,6 @@ function Emoji({ topReactions = [], setRecipientData }) {
 
 export default Emoji;
 
-const Icon = styled.img`
-  width: 24px;
-  height: 24px;
-`;
-
 const ServiceContainer = styled.div`
   top: 6px;
   display: flex;
@@ -184,19 +175,6 @@ const ShowMoreButton = styled.button`
   height: 36px;
 `;
 
-const AddButton = styled.button`
-  width: 88px;
-  height: 36px;
-  border-radius: 6px;
-  border: 1px solid ${(props) => props.theme.colors.grayScale[300]};
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-size: ${(props) => props.theme?.Typography?.[16]?.fontSize || "16px"};
-  padding: 6px 12px;
-  color: ${(props) => props.theme.colors.black};
-`;
-
 const PickerWrapper = styled.div`
   position: absolute;
   top: 44px;

src/components/common/InformationBar/InformationBar.jsx

@@ -2,11 +2,10 @@ import { useState, useRef, useEffect } from "react";
 import Emoji from "../Emoji/Emoji";
 import styled from "styled-components";
 import {
-  Share,
   Complete,
   Close,
 } from "../../../assets/images/icon/IconIndex.jsx";
-import Navbar from "../Navbar/Navbar.jsx";
+import IconButton from "../Button/IconButton.jsx";
 
 function InformationBar({
   name,
@@ -121,9 +120,7 @@ function InformationBar({
             setRecipientData={setRecipientData}
             />
           <Separator />
-          <Button ref={buttonRef} onClick={toggleModal}>
-            <ShareIcon />
-          </Button>
+          <IconButton ref={buttonRef} onClick={toggleModal} image="share" width="56" />
           {isModalOpen && (
             <Modal ref={modalRef}>
               <Option onClick={shareToKakao}> 카카오톡 공유</Option>
@@ -151,12 +148,6 @@ function InformationBar({
   );
 }
 
-const ShareIcon = styled(Share)`
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-`;
-
 const Separator = styled.span`
   display: inline-block;
   width: 1px;
@@ -283,20 +274,6 @@ const Avatar = styled.div`
   }
 `;
 
-const Button = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: transparent;
-  border: 1px solid ${({ theme }) => theme.colors.grayScale[300]};
-  width: 56px;
-  height: 36px;
-  border-radius: 6px;
-  padding: 6px 16px;
-  cursor: pointer;
-  font-size: 16px;
-`;
-
 const Modal = styled.div`
   padding: 10px 1px;
   position: absolute;

src/components/common/Input/Input/Input.jsx

@@ -29,15 +29,10 @@ const Picker = styled.div`
   width:100%;
 `;
 
-const StyledButton = styled(Button)`
-  background-color: ${({ disabled }) => (disabled ? "#ccc" : "#007BFF")};
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.grayScale[300]};
-    color: ${({ theme }) => theme.colors.white};
-    cursor: not-allowed;
-  }
-`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
 
 // To 전체적인 컴포넌
 function Input() {
@@ -105,15 +100,17 @@ function Input() {
           <ImgPicker onSelect={(img) => setCardContent(img)} />
         )}
       </Picker>
-      <StyledButton
+      <ButtonWrapper>
+      <Button
         variant="primary"
         size={56}
         width={720}
         onClick={goToPostId}
         state={condition ? "enabled" : "disabled"}
       >
         생성하기
-      </StyledButton>
+      </Button>
+      </ButtonWrapper>
     </Bone>
   );
 }

src/components/common/Input/ProfileInput/ProfileInput.jsx

@@ -10,15 +10,10 @@ import styled from "styled-components";
 import "../../../../styles/font.css";
 import recipientsService from "../../../../api/services/recipientsService"; // 서버 호출
 
-const StyledButton = styled(Button)`
-  background-color: ${({ disabled }) => (disabled ? "#ccc" : "#007BFF")};
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.grayScale[300]};
-    color: ${({ theme }) => theme.colors.white};
-    cursor: not-allowed;
-  }
-`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
 
 function ProfileInput() {
   const navigate = useNavigate();
@@ -103,17 +98,17 @@ function ProfileInput() {
         onError={setHasError}
         onFontSelect={setSelectedFont}
       />
-
-      <StyledButton
-        variant="primary"
-        size={56}
-        width={720}
-        onClick={handleSubmit}
-        state={condition ? "enabled" : "disabled"}
-      >
+      <ButtonWrapper>
+        <Button
+          variant="primary"
+          size={56}
+          width={720}
+          onClick={handleSubmit}
+          state={condition ? "enabled" : "disabled"}
+        >
         생성하기
-        </StyledButton>
-
+        </Button>
+      </ButtonWrapper>
     </Bone>
   );
 }

src/pages/Home/HomePage.jsx

@@ -1,10 +1,11 @@
 import { useNavigate } from "react-router-dom";
 import Button from "../../components/common/Button/Button";
-import { styled, css } from "styled-components";
+import { styled } from "styled-components";
 
 import cardExample from "../../assets/images/main-page/card-example.png";
 import emojiExample from "../../assets/images/main-page/emoji-example.png";
 import { textStyle } from "../../styles/textStyle";
+import { useEffect, useState, useCallback } from "react";
 
 const NAVBAR_HEIGHT = 65;
 
@@ -23,7 +24,7 @@ const ContentWrapper = styled.div`
   max-width: 1200px;
 
   @media (max-width: 1199px) {
-    max-width: 900px;
+    max-width: 100%;
   }
 
   @media (max-width: 767px) {
@@ -79,6 +80,10 @@ const TitleSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+
+  @media (max-width: 767px) {
+    gap: 4px;
+  }
 `;
 
 const Title = styled.h2`
@@ -123,20 +128,24 @@ const ButtonWrapper = styled.div`
 `;
 
 const StyledButton = styled(Button)`
-  width: ${({ width }) =>
-    typeof width === "number" ? `${width}px` : width || "280px"};
-
-  @media (max-width: 1199px) {
-    width: 100%;
-  }
-
-  @media (max-width: 767px) {
-    width: 100%;
-  }
+  width: ${({ isTablet }) => (isTablet ? "100%" : "280px")};
 `;
 
 function HomePage() {
   const navigate = useNavigate();
+  const [isTablet, setIsTablet] = useState(window.innerWidth <= 1199);
+
+  const handleResize = useCallback(() => {
+    setIsTablet(window.innerWidth <= 1199);
+  }, []);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize]);
 
   return (
     <HomeContainer>
@@ -171,7 +180,7 @@ function HomePage() {
           <StyledButton
             variant="primary"
             size="56"
-            width={280}
+            width={isTablet ? "100%" : 280}
             onClick={() => navigate("/list")}
           >
             구경해보기