Merge branch 'main' of https://github.com/rerise-platform/rerise-fe

Author: imdodobby

public/images/char.3.png

@@ -27,7 +27,7 @@
 .back-button {
   width: 32px;
   height: 24px;
-  background: transparent;
+
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -553,3 +553,20 @@
     margin-right: auto;
   }
 }
+
+/* EmotionPage: 전역 back-button 규칙 무력화 */
+.emotion-header .back-button {
+  position: static !important;
+  top: auto !important;
+  left: auto !important;
+  transform: none !important;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  vertical-align: top;
+}
+.greeting-text {
+  display: inline-block; /* 텍스트 바로 왼쪽 붙이기 */
+}

public/images/char3.png

@@ -538,24 +538,25 @@ const EmotionPage = () => {
     <div className="emotion-container">
       {/* 헤더 */}
       <div className="emotion-header fade-in">
-        <button className="back-button" onClick={() => navigate("/main")}>
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15 18L9 12L15 6"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
         <div className="header-greeting">
+          <button className="back-button" onClick={() => navigate("/main")}>
+            <svg
+              width="24"
+              height="24"
+              marginRight="10"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15 18L9 12L15 6"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>{" "}
           <div className="greeting-text">
             {nickname}님,
             <br />

src/features/emotion/pages/EmotionPage.css

@@ -70,6 +70,7 @@ body {
   color: rgba(168, 177, 170, 1);
   margin: 0;
   padding: 2px;
+  font-size: clamp(18px, 2vw, 20px);
 }
 /* 잠금 해제(완료 반영) 상태일 때 p를 연두색으로 */
 .reward.unlocked p {
@@ -102,14 +103,14 @@ body {
   margin-top: 15px;
 }
 .mission-card p {
-  margin-bottom: 15px;
-  font-size: 14px;
+  margin: 0 0 15px 0;
+  font-size: clamp(14px, 2vw, 15px);
   color: #333;
 }
 .mission-card button {
   width: 100%;
   padding: 5px;
-
+  height: clamp(25px, 2vw, 30px);
   align-items: center;
   background: rgba(64, 234, 135, 1);
   border: none;
@@ -381,9 +382,10 @@ body {
 .modal-header {
   position: relative;
   padding: 14px 18px;
-  font-weight: 800;
+  font-weight: 500;
   color: #2f3a34;
   border-bottom: 1px solid #f0f5f2;
+  font-size: clamp(14px, 10vw, 17px);
 }
 
 .modal-close {
@@ -406,13 +408,14 @@ body {
 .modal-body {
   padding: 18px;
   color: #2f3a34;
-  font-size: 14px;
+  font-size: clamp(16px, 2vw, 18px);
   line-height: 1.6;
 }
 
 .modal-title {
   font-weight: 700;
   color: rgba(65, 96, 76, 1);
+  font-size: clamp(12px, 10vw, 20px);
 }
 
 .modal-actions {

src/features/emotion/pages/EmotionPage.jsx

@@ -54,6 +54,9 @@ const MissionMainPage = () => {
     return "/images/missionUnchecked.png";
   };
 
+  // ===== 업로드 개수 제한 상수 =====
+  const MAX_PHOTOS = 3;
+
   // ===== 최초 로드: 주간(로드맵) + 오늘의 데일리 =====
   useEffect(() => {
     (async () => {
@@ -95,23 +98,41 @@ const MissionMainPage = () => {
     setFeedbackById((prev) => ({ ...prev, [id]: value }));
   };
 
+  // ✅ 업로드 처리(최대 3장 유지)
   const handlePhotoChange = (id, e) => {
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
 
     const prevFiles = photoById[id] || [];
     const prevUrls = photoPreviewById[id] || [];
 
+    const remaining = MAX_PHOTOS - prevFiles.length;
+    if (remaining <= 0) {
+      alert(`사진은 최대 ${MAX_PHOTOS}장까지 업로드할 수 있어요.`);
+      e.target.value = "";
+      return;
+    }
+
+    // 남은 칸만큼만 받기
+    const incoming = files.slice(0, remaining);
+
     const nextFiles = [...prevFiles];
     const nextUrls = [...prevUrls];
 
-    files.forEach((f) => {
+    incoming.forEach((f) => {
       nextFiles.push(f);
       nextUrls.push(URL.createObjectURL(f));
     });
 
     setPhotoById((prev) => ({ ...prev, [id]: nextFiles }));
     setPhotoPreviewById((prev) => ({ ...prev, [id]: nextUrls }));
+
+    // 남는 파일이 있었으면 안내
+    if (files.length > remaining) {
+      alert(
+        `사진은 최대 ${MAX_PHOTOS}장까지 업로드할 수 있어요. (초과분은 제외됐어요)`
+      );
+    }
     e.target.value = "";
   };
 
@@ -333,7 +354,7 @@ const MissionMainPage = () => {
                       <textarea
                         className="feedback-textarea"
                         rows={5}
-                        placeholder="간단한 후기(5자 이상)와 사진을 업로드해주세요!"
+                        placeholder="간단한 후기(5자 이상)와 사진(1~3장)을 업로드해주세요!"
                         value={feedbackById[m.id] || ""}
                         onChange={(e) => handleTextChange(m.id, e.target.value)}
                       />
@@ -348,14 +369,28 @@ const MissionMainPage = () => {
                             style={{ display: "none" }}
                             onChange={(e) => handlePhotoChange(m.id, e)}
                           />
+                          {/* ✅ 라벨 기본 동작만 사용 + onMouseDown으로 사전 검사/차단 */}
                           <label
                             htmlFor={`file-${m.id}`}
                             className="upload-btn"
                             title="사진 업로드"
+                            onMouseDown={(e) => {
+                              const count = photoById[m.id]?.length || 0;
+                              if (count >= MAX_PHOTOS) {
+                                e.preventDefault(); // 파일창 열림 자체를 막음
+                                alert(
+                                  `사진은 최대 ${MAX_PHOTOS}장까지 업로드할 수 있어요. 기존 사진을 삭제해 주세요.`
+                                );
+                              }
+                            }}
                           >
                             <img src="/images/imageUpload.png" alt="upload" />
                           </label>
 
+                          <span className="upload-counter">
+                            {photoById[m.id]?.length || 0} / {MAX_PHOTOS}
+                          </span>
+
                           <div className="preview-list">
                             {previews.map((url, idx) => (
                               <div key={`${url}-${idx}`} className="thumb">
@@ -445,6 +480,8 @@ const MissionMainPage = () => {
               <div>
                 <span className="modal-title">“{roadmapToConfirm.title}”</span>
                 <br /> 후기 작성을 완료하셨나요?
+                <br />
+                추후 관리자 승인을 통해 포인트가 지급됩니다.
               </div>
             </div>
             <div className="modal-actions">