Merge branch 'develop' into feature/home

src/App.jsx

@@ -3,7 +3,8 @@ import GlobalStyle from './GlobalStyle';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Home from './pages/home/Home';
 import Feed from './pages/feed/Feed';
-import My from './pages/my/My';
+import My from './pages/my/My'
+import MissionCertification from './MissionCertification';
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
           <Route path="/" element={<Home />}></Route>
           <Route path="/feed" element={<Feed />}></Route>
           <Route path="/my" element={<My />}></Route>
+          <Route path="/mission" element={<MissionCertification />}></Route>
         </Routes>
       </BrowserRouter>
     </>

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,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+// import './index.css';
+import './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>
+  );
+}
+
+export default MissionCertification;
+
+// function App() {
+//   return (
+//     <div className="app">
+//       <MissionCertification />
+//       {/* 이어서 미션 인증 페이지의 내용 추가하기. */}
+//     </div>
+//   );
+// }
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   document.getElementById('root')
+// );