Design: 미션페이지 상단, 하단바 완료

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1",

src/MissionCertification.css

@@ -1,25 +1,72 @@
 /* MissionCertification.css */
 
 .mission-header {
-    background-color: #007bff; /* 바의 배경색을 원하는 색상으로 설정합니다. */
-    color: #fff; /* 텍스트 색상을 흰색 또는 원하는 색상으로 설정합니다. */
+    background-color: #fff; /* 바 배경색 설정 */
+    color: #000; /* 텍스트 색상 */
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
+    border-bottom: 1px solid #ccc; /* 상단바 그레이 구분선 */
   }
 
   .mission-header-content {
-    font-size: 24px; /* 헤더 텍스트의 글자 크기를 조절합니다. */
-    font-weight: bold; /* 텍스트를 볼드체로 설정합니다. */
+    font-size: 24px; /* 헤더 텍스트의 글자 크기 */
   }
 
   .icon-button {
     background: none;
     border: none;
-    color: #fff; /* 아이콘 색상을 흰색 또는 원하는 색상으로 설정합니다. */
-    font-size: 24px; /* 아이콘 크기를 조절합니다. */
+    color: #000; /* 아이콘 색상*/
+    font-size: 24px; /* 아이콘 크기 */
     cursor: pointer;
-    margin-right: 10px; /* 아이콘 간의 간격을 조절합니다. */
+    margin-right: 10px; /* 아이콘 간의 간격을 조절 */
   }
-
+
+/* 미션인증 글씨 스타일 */
+.ms-txt{
+    font-size: 24px; 
+    font-weight: bold;
+}
+
+
+
+
+/* 하단바 스타일 */
+.bottom-bar {
+    position: fixed; /* 화면 하단에 고정 */
+    bottom: 0; /* 하단에 위치 */
+    width: 28%; /* 화면 가로폭에 맞게 너비 설정 */
+    border-top: 1px solid #ccc; /* 상단과 구분하는 그레이 선 추가 */
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    justify-content: center; /* 가로 가운데 정렬 */
+    align-items: center; /* 세로 가운데 정렬 */
+  }
+
+
+
+  /* 업로드 버튼 스타일 */
+  .upload-button {
+    width: 100%;
+    background-color: #02B550; /* 녹색 배경색을 원하는 색상으로 설정 */
+    color: #fff; /* 버튼 텍스트 색상 */
+    border: none;
+    border-radius: 50px; /* 버튼을 타원형으로 만들기 위한 값 */
+    padding: 20px 20px; /* 버튼 내부 여백 설정 */
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  /* 업로드 버튼에 호버 효과 추가 (선택 사항) */
+  .upload-button:hover {
+    background-color: #45a049; /* 마우스 호버 시 배경색 변경 */
+  }
+
+
+
+
+
+
+

src/MissionCertification.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // import './index.css';
 import './MissionCertification.css';
-// import { FaArrowLeft, FaTimes } from 'react-icons/fa'; // 아이콘 라이브러리에서 아이콘을 가져오기.
+import { FaArrowLeft, FaTimes } from 'react-icons/fa'; // 아이콘 라이브러리에서 아이콘을 가져오기.
+
+
 
 function MissionCertification() {
   const handleGoBack = () => {
@@ -15,21 +17,33 @@ function MissionCertification() {
   };
 
   return (
-    <header className="mission-header">
-      <div className="mission-header-content">
-        <button className="icon-button" onClick={handleGoBack}>
-          {/* 이전 페이지로 가는 아이콘 */}
-          {/* <FaArrowLeft />  */}
-        </button>
-        미션 인증
+    <div>
+      {/* 상단 바 부분 시작!---------------------------------------- */}
+      <header className="mission-header">
+        <div className="mission-header-content">       
+          <button className="icon-button" onClick={handleGoBack}>
+            {/* 이전 페이지로 가는 아이콘 */}
+            <FaArrowLeft />
+          </button>
+        </div>
+
+        <div className="ms-txt">미션인증</div>
+
         <button className="icon-button" onClick={handleClose}>
           {/* 화면을 닫는 아이콘 */}
-          {/* <FaTimes /> */}
+          <FaTimes />
         </button>
-      </div>
-    </header>
+      </header>
+      {/* 상단 바 부분 끝!---------------------------------------- */}
+
+      <footer className="bottom-bar">
+        <button className="upload-button">챌린지 피드에 업로드하기</button>
+      </footer>
+    </div>
   );
+
 }
+
 
 export default MissionCertification;