feat: 인증완료 페이지 추가, 인증실패 부분 등 수정해야함.

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
+    "react-svg": "^16.1.24",
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1",
     "swiper": "^10.2.0"

src/App.jsx

@@ -6,6 +6,7 @@ import Home from './pages/home/Home';
 import Feed from './pages/feed/Feed';
 import My from './pages/my/My';
 import MissionCertification from './pages/mission/MissionCertification';
+import MissionComplete from './pages/mission/MissionComplete';
 import Redirection from './pages/Redirection';
 import Splash from './pages/splash/Splash';
 
@@ -20,6 +21,7 @@ function App() {
             <Route path="/feed" element={<Feed />}></Route>
             <Route path="/my" element={<My />}></Route>
             <Route path="/mission" element={<MissionCertification />}></Route>
+            <Route path="/mission2" element={<MissionComplete />}></Route>
             <Route path="/splash" element={<Splash />}></Route>
             <Route path="/kakao/callback" element={<Redirection />}></Route>
           </Routes>

src/pages/mission/MissionCertification.css

@@ -34,27 +34,26 @@
 
 /* 하단바 스타일 */
 .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; /* 세로 가운데 정렬 */
-  }
+  width: min(100%, 430px);
+  max-width: 100%;
+  border: none;
+  margin: auto auto 0;
+  padding: 20px;
+
+  z-index: 1; /* 다른 요소보다 위에 표시 */
+ background-color: #fff;
+} 
+
+
 
-
-
   /* 업로드 버튼 스타일 */
   .upload-button {
     width: 100%;
     background-color: #02B550; /* 녹색 배경색을 원하는 색상으로 설정 */
     color: #fff; /* 버튼 텍스트 색상 */
     border: none;
     border-radius: 50px; /* 버튼을 타원형으로 만들기 위한 값 */
-    padding: 20px 20px; /* 버튼 내부 여백 설정 */
+    padding: 15px 20px; /* 버튼 내부 여백 설정 */
     font-size: 16px;
     cursor: pointer;
   }
@@ -67,10 +66,6 @@
 
 
 
-
-
-  /* 새로 추가된 스타일 시작 */
-
 /* 미션 페이지 이미지 업로드 스타일 */
 input[type="file"] {
     display: none; /* 파일 업로드 인풋 숨김 */
@@ -93,9 +88,9 @@ input[type="file"] {
   /* MissionPage의 하단 바 스타일 */
   /* 하단 바 배경색 및 여백 설정 */
   .note1 {
-    font-size: 14px; /* 글자 크기 설정 */
-    color: #777; /* 글자 색상 설정 */
-    margin-top: 16px; /* 상단 여백 추가 */
+    font-size: 14px; 
+    color: #777; 
+    margin-top: 16px; 
     padding-left: 5%;
     padding-right: 5%;
   }
@@ -129,10 +124,10 @@ input[type="file"] {
 }
 
 .optional-text2 {
-    color: #888; /* 연한 회색 색상 */
-    font-weight: normal; /* 폰트 굵기 일반으로 설정 */
+    color: #888; 
+    font-weight: normal; 
 
-    margin-left: auto; /* 오른쪽으로 이동 */
+    margin-left: 72%; 
 }
 
 
@@ -144,11 +139,15 @@ input[type="file"] {
 .ms-box2{
     background-color: #f2f2f2c2;
 }
-.ms-txtarea{
-    background-color: #f2f2f2c2;
-    padding: 3%;
-    border-radius: 10px;
+.ms-txtarea {
+  background-color: #f2f2f2c2;
+  padding: 3%;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+}
 
+.ms-txtarea:focus {
+  border-color: #02B550 !important;
 }
 
 /* 글자수 제한 색깔표시 */
@@ -164,7 +163,7 @@ input[type="file"] {
  }
 
 
-  /* 새로 추가된 스타일 끝 */
+
 
 
 
@@ -241,16 +240,28 @@ input[type="file"] {
 
 
   .popup-content button.popup-close-button {
-    position: absolute; /* 절대 위치 설정 */
-    top: 40%; /* 위로 5px 올림 */
-    right: 40%; /* 오른쪽에서 떨어진 위치 */
-    font-size: 24px; /* 아이콘 크기 설정 */
-    border: none; /* 테두리 없음 */
-    background: none; /* 배경 없음 */
+
+    font-size: 24px; /
+    border: none; 
+    background: none; 
     cursor: pointer;
 
   }
 
+  /* 챌린지 제목 입력 상자 스타일 */
+.challenge-title-input {
+  margin: 20px 20px; /* 적절한 여백 설정 */
+}
+
+.challenge-title-input input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+  outline: none;
+}
+
 
 
 

src/pages/mission/MissionCertification.jsx

@@ -117,15 +117,15 @@ function MissionCertification() {
   };
 
   const handleClose = () => {
-    setShowPopup(true); // x 버튼 클릭 시 팝업을 엽니다.
+    setShowPopup(true); // x 버튼 클릭 시 팝업을 열기(true)
   };
 
   const handlePopupClose = () => {
     setShowPopup(false);
   };
 
   const handlePopupContinue = () => {
-    setShowPopup(false); // "계속 작성하기" 버튼 클릭 시 팝업을 닫습니다.
+    setShowPopup(false); // "계속 작성하기" 버튼 클릭 시 팝업을 닫기(false)
   };
 
   const handlePopupConfirm = () => {
@@ -146,6 +146,20 @@ function MissionCertification() {
           <FaTimes />
         </button>
       </header>
+
+
+      {/* 챌린지 제목 입력 상자 */}
+      <div className="challenge-title-input">
+      <div className="mission-feedback-title">챌린지</div>
+        <input
+          type="text"
+          placeholder="챌린지 제목을 입력하세요."
+          // 아래의 value에 챌린지 제목을 바인딩할 수 있습니다.
+          // 예: value={challengeTitle}
+          // onChange 핸들러로 challengeTitle 상태를 업데이트하세요.
+        />
+      </div>
+
       <MissionPage />
       <footer className="bottom-bar">
         <button className="upload-button">챌린지피드에 업로드하기</button>

src/pages/mission/MissionComplete.css

@@ -0,0 +1,68 @@
+/* MissionComplete.css */
+
+
+/* 하단바 스타일 */
+.gohome-bottom-bar {
+    width: min(100%, 430px);
+    max-width: 100%;
+    border: none;
+    margin: auto auto 0;
+    padding: 20px;
+
+    position: fixed;
+    bottom: 0;
+   background-color: #fff;
+  } 
+
+
+
+    /* 업로드 버튼 스타일 */
+    .gohome-button {
+      width: 100%;
+      background-color: #02B550; 
+      color: #fff;
+      border: none;
+      border-radius: 50px; 
+      padding: 15px 20px; 
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    .gohome-button:hover {
+      background-color: #45a049; 
+    }
+
+    .comp-title {
+        text-align: center;
+        font-weight: bold;
+        font-size: 24px;
+        margin-top: 20px;
+
+      }
+
+.comp-sub{
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+}
+.comp-sub2{
+    font-size: 12px;
+    text-align: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    justify-content: center; 
+    height: 80vh; 
+  }
+
+  .center-content {
+    text-align: center;
+  }
+
+
+
+
+