Merge pull request #82 from Team-Remini/feat/#70

feat/#70/구독모델
Team-Remini · Dec 19, 2023 · de9c401 · de9c401
2 parents cd41510 + 8416cc5
commit de9c401
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 28 deletions.
diff --git a/src/components/CompleteWriting/KPT.tsx b/src/components/CompleteWriting/KPT.tsx
@@ -26,7 +26,7 @@ function CompleteWritingKPT({ isEditMode }: isEditModeTypeProps) {
     null
   );
 
-  const [editMode, setIsEditMode] = useState(false);
+  // const [editMode, setIsEditMode] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {

diff --git a/src/components/Modal/SubscribeModal.tsx b/src/components/Modal/SubscribeModal.tsx
@@ -1,29 +1,29 @@
-import React, { Dispatch, SetStateAction } from "react";
+import React from "react";
 import ModalWrap from "./ModalWrap.tsx";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 
 // 구독 모델 변경 모달
 const SubscribeModal: React.FC<{
-  model: string;
+  state: string;
+  toBeState: string;
   closeModal: () => void;
-  setModel: Dispatch<SetStateAction<string>>;
-}> = ({ model, closeModal, setModel }) => {
+  expirationDate: string | null;
+}> = ({ state, closeModal, toBeState, expirationDate }) => {
   const navigate = useNavigate();
 
-  // 현재 월의 마지막 일자 반환
-  const getLastDayOfMonth = (): string => {
-    const date = new Date();
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const lastDay = new Date(year, month, 0).getDate();
-    return `${month}월 ${lastDay}일`;
-  };
-
   // 구독 모델 변경
   const handleBtnClick = () => {
     const accessToken = localStorage.getItem("accessToken");
-    const newModelState = model === "STANDARD" ? "PREMIUM" : "STANDARD";
+    let newModelState = "";
+
+    if (state === "STANDARD") {
+      newModelState = "PREMIUM";
+    } else if (state === "PREMIUM" && toBeState === "STANDARD") {
+      newModelState = "PREMIUM";
+    } else if (state === "PREMIUM" && toBeState === "PREMIUM") {
+      newModelState = "STANDARD";
+    }
 
     const axiosInstance = axios.create({
       baseURL: "https://www.remini.store",
@@ -37,7 +37,6 @@ const SubscribeModal: React.FC<{
       .patch("/api/user/state", { state: newModelState })
       .then((response) => {
         console.log("Model state updated successfully:", response.data);
-        setModel(newModelState);
         closeModal();
         document.body.style.overflow = ""; // 스크롤 활성화
         navigate("/my-page");
@@ -49,28 +48,39 @@ const SubscribeModal: React.FC<{
 
   return (
     <ModalWrap>
-      {model === "STANDARD" ? (
+      {state === "STANDARD" ? (
         <div>
           <h1>Premium으로 변경하시겠어요?</h1>
           <p>오늘부터 Premium 혜택이 적용됩니다.</p>
         </div>
-      ) : (
+      ) : state === "PREMIUM" && toBeState === "PREMIUM" ? (
         <div>
           <h1>Standard로 변경하시겠어요?</h1>
           <p>
-            {getLastDayOfMonth()}
+            {expirationDate}
             까지 Premium 혜택이 유지되고,
             <br />
             이후 Standard로 자동 전환됩니다.
           </p>
         </div>
+      ) : (
+        <div>
+          <h1>해지를 취소하시겠어요?</h1>
+          <p>
+            기존 자동 결제일에 결제가 되며 구독 기간은 동일하게 적용됩니다.{" "}
+            <br></br>
+            다음 결제일 : {expirationDate}
+          </p>
+        </div>
       )}
       <div className="btn_container">
         <button className="cancel_btn" onClick={closeModal}>
           아니요
         </button>
         <button className="main_btn" onClick={handleBtnClick}>
-          네, 변경할게요
+          {state === "PREMIUM" && toBeState === "STANDARD"
+            ? "네, 취소할게요"
+            : "네, 변경할게요"}
         </button>
       </div>
     </ModalWrap>

diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -19,6 +19,7 @@ interface UserData {
   nickName: string;
   profileImageUrl: string;
   state: string;
+  toBeState: string;
   alarmTime: number[];
 }
 
@@ -62,6 +63,7 @@ export const MyPage: React.FC = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const calendarRef = useRef<HTMLDivElement>(null);
+  const [expirationDate, setExpirationDate] = useState<string | null>(null);
 
   // selectedDate가 없으면 현재 날짜로 설정
   const today = new Date();
@@ -150,6 +152,16 @@ export const MyPage: React.FC = () => {
         setToggleOn(false);
       }
 
+      // userData가 설정된 이후에 expirationDate 설정
+      if (user.expirationDate) {
+        const date = new Date(user.expirationDate);
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        const formattedDate = `${year}.${month}.${day}`;
+        setExpirationDate(formattedDate);
+      }
+
       // 개인 회고 목록 조회(3개)
       const retroResponse = await axios.get(
         "https://www.remini.store/api/remini/private?pageNumber=0&pageSize=3",
@@ -434,6 +446,16 @@ export const MyPage: React.FC = () => {
                     : "Premium"}
                 </h3>
                 <h4>이용 중</h4>
+                {userData &&
+                  userData.state == "PREMIUM" &&
+                  userData.toBeState == "PREMIUM" && (
+                    <h5>{expirationDate} 갱신 예정</h5>
+                  )}
+                {userData &&
+                  userData.state == "PREMIUM" &&
+                  userData.toBeState == "STANDARD" && (
+                    <h5>{expirationDate} 만료 예정</h5>
+                  )}
               </div>
               <button onClick={goToSubscribe}>구독 변경하기</button>
             </div>
@@ -645,6 +667,18 @@ const MyPageWrap = styled.div<toggleProps>`
         top: 44px;
         left: 142px;
       }
+      h5 {
+        color: rgba(255, 255, 255, 0.38);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+
+        position: absolute;
+        top: 77px;
+        left: 30px;
+      }
+
       button {
         padding: 13px 32px;
         border-radius: 16px;

diff --git a/src/pages/Subscribe.tsx b/src/pages/Subscribe.tsx
@@ -8,7 +8,9 @@ import axios from "axios";
 
 // 구독 모델 변경페이지
 export const Subscribe: React.FC = () => {
-  const [model, setModel] = useState("STANDARD");
+  const [state, setState] = useState("STANDARD");
+  const [toBeState, setToBeState] = useState("");
+  const [expirationDate, setExpirationDate] = useState<string | null>(null);
   const [showModal, setShowModal] = useState(false); // 모달 표시 여부를 관리하는 상태
 
   const handleShowModal = () => {
@@ -55,7 +57,18 @@ export const Subscribe: React.FC = () => {
       const user = userResponse.data;
       console.log("state : " + user.state);
       console.log("toBeState : " + user.toBeState);
-      setModel(user.state);
+      setState(user.state);
+      setToBeState(user.toBeState);
+
+      // userData가 설정된 이후에 expirationDate 설정
+      if (user.expirationDate) {
+        const date = new Date(user.expirationDate);
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        const formattedDate = `${year}.${month}.${day}`;
+        setExpirationDate(formattedDate);
+      }
     } catch (error) {
       console.error("Error fetching user data:", error);
     }
@@ -67,9 +80,10 @@ export const Subscribe: React.FC = () => {
       {showModal && (
         <>
           <SubscribeModal
-            model={model}
+            state={state}
+            toBeState={toBeState}
             closeModal={closeModal}
-            setModel={setModel}
+            expirationDate={expirationDate}
           />
           <ModalOverlay onClick={handleOverlayClick} />
         </>
@@ -91,9 +105,16 @@ export const Subscribe: React.FC = () => {
               <button
                 className="standard-btn"
                 onClick={handleShowModal}
-                disabled={model === "STANDARD"}
+                disabled={
+                  state === "STANDARD" ||
+                  (state === "PREMIUM" && toBeState === "STANDARD")
+                }
               >
-                {model === "STANDARD" ? "현재 사용 중" : "시작하기"}
+                {state === "STANDARD"
+                  ? "현재 사용 중"
+                  : toBeState === "STANDARD"
+                  ? `${expirationDate}부터 적용`
+                  : "시작하기"}
               </button>
             </div>
             <div className="subscribe-box">
@@ -107,9 +128,13 @@ export const Subscribe: React.FC = () => {
               <button
                 className="premium-btn"
                 onClick={handleShowModal}
-                disabled={model === "PREMIUM"}
+                disabled={state === "PREMIUM" && toBeState === "PREMIUM"}
               >
-                {model === "PREMIUM" ? "현재 사용 중" : "시작하기"}
+                {state === "PREMIUM" && toBeState === "PREMIUM"
+                  ? "현재 사용 중"
+                  : state === "PREMIUM" && toBeState === "STANDARD"
+                  ? "해지 취소"
+                  : "시작하기"}
               </button>
             </div>
           </div>