[Refactor] Primary40, Outlined36 컴포넌트 추가 및 수정, card hover 시 에니메이션 추가 외

src/components/common/Buttons/BackToPostButton.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function BackToPostButton({ moveLink, btnName }) {
   const navigate = useNavigate();

src/components/common/Buttons/DeleteRecipientButton.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import { deleteRecipient } from '../../../api/DeleteApi';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function DeleteRecipientButton() {
   const navigate = useNavigate();

src/components/common/Buttons/EditButton.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function EditButton() {
   const navigate = useNavigate();

src/components/common/Buttons/EditMessageButton.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function EditMessageButton({ messageID }) {
   const navigate = useNavigate();

src/components/common/Buttons/PostButton.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function PostButton({ onSubmit, btnDisable }) {
   const navigate = useNavigate();

src/components/common/Buttons/PutPatchButton.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function PutPatchButton({ onSubmit, btnDisable }) {
   const navigate = useNavigate();

src/components/common/Buttons/movePageButton.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
 
 function MovePageButton({ moveLink, btnName }) {
   const navigate = useNavigate();

src/components/common/Header.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { Outlined40 } from '../../styles/ButtonStyle';
 
 const StyledNav = styled.nav`
   width: 100%;
@@ -25,20 +26,8 @@ const StyledHeader = styled.div`
   }
 `;
 
-const ButtonContainer = styled.div`
-  button {
-    height: 40px;
-    border-radius: 6px;
-    padding: 8px 16px;
-    border: 1px solid #ccc;
-    background: #fff;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: -0.16px;
-    text-align: center;
-  }
-`;
+const Button = styled(Outlined40)``;
+
 const LogoURL = styled.a`
   display: flex;
   padding: 6px 0;
@@ -65,9 +54,7 @@ function Header({ showButton }) {
         </LogoURL>
         {showButton && (
           <Link to="/post">
-            <ButtonContainer>
-              <button type="button">롤링 페이퍼 만들기</button>
-            </ButtonContainer>
+            <Button>롤링 페이퍼 만들기</Button>
           </Link>
         )}
       </StyledHeader>

src/components/common/ModalWindow.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { Primary40 } from '../../styles/ButtonStyle';
 // import { useKakaoShare } from './useKakaoShare';
 
 const ModalBox = styled.div`
@@ -25,18 +26,8 @@ const ModalBody = styled.div`
   transform: translate(-50%, -30%);
 `;
 
-const CloseBtn = styled.button`
-  display: flex;
+const CloseBtn = styled(Primary40)`
   width: 120px;
-  padding: 7px 16px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  background: var(--purple600);
-  color: #fff;
-  font-size: 16px;
-  line-height: 26px; /* 162.5% */
-  letter-spacing: -0.16px;
   position: absolute;
   bottom: 40px;
 

src/components/modal/CardModal.jsx

@@ -26,7 +26,6 @@ function CardModal({
 }) {
   const location = useLocation();
   const isEditRoute = location.pathname.includes('/edit');
-  console.log(id, isEditRoute);
 
   const createdDays = new Date(cardCreatedAt);
   const fontClass = {

src/components/post/Card.jsx

@@ -27,6 +27,10 @@ export const CardContentWrapper = styled.div`
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
 
   cursor: pointer;
+  transition: all 0.5s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
 
   @media (max-width: 1023px) {
     width: 50%;

src/components/post/SubHeader.jsx

@@ -8,6 +8,7 @@ import ShareToggle from '../modal/ShareToggle';
 import KakaoModal from '../modal/KakaoModal';
 import ModalPortal from '../modal/ModalPortal';
 import Toast from '../common/Toast';
+import { Outlined36 } from '../../styles/ButtonStyle';
 import { getAllMessages } from '../../api/GetApi';
 
 const Text = css`
@@ -21,15 +22,6 @@ const FlexCenter = css`
   align-items: center;
 `;
 
-const Button = css`
-  ${FlexCenter}
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: 1px solid var(--gray300);
-  background: var(--white);
-  gap: 10px;
-`;
-
 const SubHeaderWrapper = styled.div`
   width: 100%;
   background-color: var(--white);
@@ -147,9 +139,7 @@ const SplitBarVertical2 = styled(SplitBarVertical)`
   margin: 0 13px;
 `;
 
-const ShareButton = styled.button`
-  ${Button}
-
+const ShareButton = styled(Outlined36)`
   @media (max-width: 470px) {
     padding: 6px 8px;
   }

src/components/post/postmake/ColorSelection.js

@@ -23,7 +23,10 @@ const ColorOption = styled.div`
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   cursor: pointer;
-
+  transition: all 0.4s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
   @media (max-width: 768px) {
     width: 154px;
     height: 154px;

src/components/post/postmake/ImageSelection.js

@@ -22,7 +22,10 @@ const ImageOption = styled.div`
   height: 168px;
   margin: 5px;
   cursor: pointer;
-
+  transition: all 0.4s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
   @media (max-width: 768px) {
     width: 154px;
     height: 154px;

src/components/post/postmake/ToggleButton.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Secondary } from '../../../styles/ButtonStyle';
 
 function ToggleButton({ state, handler, text1, text2 }) {
   return state ? (
@@ -20,7 +21,7 @@ const SelectToggle = styled.div`
   margin-top: 24px;
 `;
 
-const BtnCommon = styled.button`
+const BtnCommon = styled(Secondary)`
   display: flex;
   width: 122px;
   height: 40px;

src/components/post/subheader/EmojiDropDown.jsx

@@ -4,22 +4,14 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { submitEmojiPost } from '../../../api/PostApi';
 import { getEmojiData } from '../../../api/GetApi';
+import { Outlined36 } from '../../../styles/ButtonStyle';
 
 const FlexCenter = css`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
 
-const Button = css`
-  ${FlexCenter}
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: 1px solid var(--gray300);
-  background: var(--white);
-  gap: 10px;
-`;
-
 const EmojiGroup = styled.div`
   display: flex;
   gap: 8px;
@@ -93,17 +85,8 @@ const EmojiGroupInDropDown = styled(EmojiGroup)`
   grid-template-columns: 63px 63px 63px 63px;
 `;
 
-const EmojiAddButton = styled.div`
-  ${Button}
+const EmojiAddButton = styled(Outlined36)`
   position: relative;
-  cursor: pointer;
-
-  color: var(--gray-900, #181818);
-  font-family: Pretendard;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
 
   @media (max-width: 470px) {
     span {

src/pages/PostId.jsx

@@ -70,6 +70,10 @@ export const CardWrapper = styled.div`
 const CardAdd = styled(CardContentWrapper)`
   justify-content: center;
   position: relative;
+  transition: all 0.5s ease-out;
+  &:hover {
+    transform: translateY(-1.2rem);
+  }
 `;
 // eslint-disable-next-line
 const PlusIcon = styled.div`