From 8416cc518341d5f4a3bfd81b69b8b0eba554e360 Mon Sep 17 00:00:00 2001 From: yueunfive <122276414+yueunfive@users.noreply.github.com> Date: Tue, 19 Dec 2023 09:42:52 +0900 Subject: [PATCH] =?UTF-8?q?feat/#70/=EA=B5=AC=EB=8F=85=EB=AA=A8=EB=8D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CompleteWriting/KPT.tsx | 2 +- src/components/Modal/SubscribeModal.tsx | 48 +++++++++++++++---------- src/pages/MyPage.tsx | 34 ++++++++++++++++++ src/pages/Subscribe.tsx | 41 ++++++++++++++++----- 4 files changed, 97 insertions(+), 28 deletions(-) diff --git a/src/components/CompleteWriting/KPT.tsx b/src/components/CompleteWriting/KPT.tsx index f272789..b9055aa 100644 --- 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 index 611836b..c5f5d24 100644 --- 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>; -}> = ({ 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 ( - {model === "STANDARD" ? ( + {state === "STANDARD" ? (

Premium으로 변경하시겠어요?

오늘부터 Premium 혜택이 적용됩니다.

- ) : ( + ) : state === "PREMIUM" && toBeState === "PREMIUM" ? (

Standard로 변경하시겠어요?

- {getLastDayOfMonth()} + {expirationDate} 까지 Premium 혜택이 유지되고,
이후 Standard로 자동 전환됩니다.

+ ) : ( +
+

해지를 취소하시겠어요?

+

+ 기존 자동 결제일에 결제가 되며 구독 기간은 동일하게 적용됩니다.{" "} +

+ 다음 결제일 : {expirationDate} +

+
)}
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index ecc56ed..4d51331 100644 --- 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(null); const [isCalendarOpen, setIsCalendarOpen] = useState(false); const calendarRef = useRef(null); + const [expirationDate, setExpirationDate] = useState(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"}

이용 중

+ {userData && + userData.state == "PREMIUM" && + userData.toBeState == "PREMIUM" && ( +
{expirationDate} 갱신 예정
+ )} + {userData && + userData.state == "PREMIUM" && + userData.toBeState == "STANDARD" && ( +
{expirationDate} 만료 예정
+ )} @@ -645,6 +667,18 @@ const MyPageWrap = styled.div` 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 index b730995..78b76a4 100644 --- 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(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 && ( <> @@ -91,9 +105,16 @@ export const Subscribe: React.FC = () => {
@@ -107,9 +128,13 @@ export const Subscribe: React.FC = () => {