feat(미션인증): 미션인증 페이지 추가

src/MissionCertification.css

@@ -0,0 +1,25 @@
+/* MissionCertification.css */
+
+.mission-header {
+    background-color: #007bff; /* 바의 배경색을 원하는 색상으로 설정합니다. */
+    color: #fff; /* 텍스트 색상을 흰색 또는 원하는 색상으로 설정합니다. */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .mission-header-content {
+    font-size: 24px; /* 헤더 텍스트의 글자 크기를 조절합니다. */
+    font-weight: bold; /* 텍스트를 볼드체로 설정합니다. */
+  }
+
+  .icon-button {
+    background: none;
+    border: none;
+    color: #fff; /* 아이콘 색상을 흰색 또는 원하는 색상으로 설정합니다. */
+    font-size: 24px; /* 아이콘 크기를 조절합니다. */
+    cursor: pointer;
+    margin-right: 10px; /* 아이콘 간의 간격을 조절합니다. */
+  }
+

src/MissionCertification.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import './src/MissionCertification.css';
+import { FaArrowLeft, FaTimes } from 'react-icons/fa'; // 아이콘 라이브러리에서 아이콘을 가져오기.
+
+function MissionCertification() {
+  const handleGoBack = () => {
+    // 이전 페이지로 이동하는 로직 추가하기!
+    // 예: history.push('/previousPage');
+  };
+
+  const handleClose = () => {
+    // 화면을 닫는 로직을 추가하기!
+  };
+
+  return (
+    <header className="mission-header">
+      <div className="mission-header-content">
+        <button className="icon-button" onClick={handleGoBack}>
+          <FaArrowLeft /> {/* 이전 페이지로 가는 아이콘 */}
+        </button>
+        미션 인증
+        <button className="icon-button" onClick={handleClose}>
+          <FaTimes /> {/* 화면을 닫는 아이콘 */}
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function App() {
+  return (
+    <div className="app">
+      <MissionCertification />
+      {/* 이어서 미션 인증 페이지의 내용 추가하기. */}
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);