feat: 카테고리 버튼 이미지 추가

src/components/LikeButton.tsx

@@ -21,7 +21,7 @@ export default function LikeButton({
   const [likeCount, setLikeCount] = useState(initialLikeCount);
 
   const token =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Iuq5gOycpOydvCIsInN1YiI6IjM1NWI3YWUxLWM1MmEtNDg2Yi04NThiLTIwMjkwM2Q5OWJhOSIsImlhdCI6MTcyOTE2NDE4NCwiZXhwIjoxNzI5MTY3Nzg0fQ.dJDtN7gVar54PxzDLst8u9l-IsF9co4X6H6_p601niw';
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Iuq5gOycpOydvCIsInN1YiI6IjM1NWI3YWUxLWM1MmEtNDg2Yi04NThiLTIwMjkwM2Q5OWJhOSIsImlhdCI6MTcyOTI0MjM3NiwiZXhwIjoxNzI5MjQ1OTc2fQ.8ewtuF-R56rTD3u7Os_NIhbC_MgLA1WNC7P5bTpDJ4Y';
   const handleLikeClick = async (
     e: React.MouseEvent<HTMLButtonElement>,
     missionId: string

src/components/layout/Footer.tsx

@@ -15,35 +15,40 @@ export default function Footer() {
           </p>
           <p>Copyright (C) 2024 Recoder University. All Rights Reserved</p>
         </div>
-        <div css={siteInputContainer}>
+        {/* <div css={siteInputContainer}>
           <input type="text" placeholder="SITE" />
-        </div>
+        </div> */}
       </div>
     </footer>
   );
 }
 
 const footerContainer = css`
-  background-color: #3b3b3b;
+  background: #f7f7fa;
   color: white;
-  padding: 20px;
   text-align: center;
   font-size: 12px;
   width: 100%;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 3;
+  margin: auto auto 0;
+  padding: 0 50px 70px;
 `;
 
 const footerContent = css`
   display: flex;
+  border-top: 1px solid #ebedf2;
   justify-content: space-between;
   align-items: center;
   margin: 0 auto;
+  margin-top: 18px;
+  padding: 20px 0 22px;
 `;
 
 const footerInfo = css`
+  /* border-top: 1px solid #ebedf2; */
+
+  color: #949494;
+  font-size: 12px;
+  line-height: 21px;
   text-align: left;
 
   p {

src/components/layout/Header.tsx

@@ -13,6 +13,9 @@ export default function Header() {
             <a href="/login">Login</a>
           </button>
           {/* <a href="/myprofile">MyPage</a> */}
+          <button css={headerLoginButton}>
+            <a href="/sign">SignUp</a>
+          </button>
         </nav>
       </div>
     </header>

src/components/main/MainContent.tsx

@@ -3,7 +3,10 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import SelectedMissionModal from '../modal/SelectedMissionModal';
 import LikeButton from '../LikeButton';
-import ReactLogo from '/assets/images/react-logo.png';
+import ReactLogo from '/assets/images/react-logo.svg';
+import JavaScriptLogo from '/assets/images/javascript-logo.png';
+import Globe from '/assets/images/globe.png';
+import Like from '/assets/images/like.svg';
 interface Post {
   id: string;
   type: string | number;
@@ -104,6 +107,7 @@ export default function MainContent() {
                   css={filterButtonStyle}
                   onClick={() => setFilter('all')}
                 >
+                  <img css={filterImageStyle} src={Globe} />
                   <span css={filterButtonText}>All</span>
                 </button>
               </li>
@@ -112,6 +116,7 @@ export default function MainContent() {
                   css={filterButtonStyle}
                   onClick={() => setFilter('like')}
                 >
+                  <img css={filterImageStyle} src={Like} />
                   <span css={filterButtonText}>Like</span>
                 </button>
               </li>
@@ -120,6 +125,7 @@ export default function MainContent() {
                   css={filterButtonStyle}
                   onClick={() => setFilter('VANILLA_TODO')}
                 >
+                  <img css={filterImageStyle} src={JavaScriptLogo} />
                   <span css={filterButtonText}>VANILLA_TODO</span>
                 </button>
               </li>
@@ -128,6 +134,7 @@ export default function MainContent() {
                   css={filterButtonStyle}
                   onClick={() => setFilter('REACT_TODO')}
                 >
+                  <img css={filterImageStyle} src={ReactLogo} />
                   <span css={filterButtonText}>REACT_TODO</span>
                 </button>
               </li>
@@ -314,14 +321,16 @@ const contentWrapper = css`
     transform: translateY(-5px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
     h2 {
-      color: #212121;
+      color: #fff;
       display: block;
       font-size: 19px;
       font-weight: 900;
       line-height: 23px;
     }
 
+    background: linear-gradient(134deg, #07d8e2 54.07%, #35e99d 99.24%);
     span {
+      color: #fff;
       font-size: 16px;
       font-weight: 500;
     }