Merge pull request #92 from Easy-Ti-cket/feature/practicecount

Feat: 연습모드 완료시(step5 도달시) 연습횟수 증가
Easy-Ti-cket · Sep 13, 2024 · 5ebef7c · 5ebef7c
2 parents 3912d44 + 7a67d62
commit 5ebef7c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/src/pages/ProgressContents.jsx b/src/pages/ProgressContents.jsx
@@ -80,14 +80,14 @@ const ProgressContents = ({ text, practiceMode, challengeMode }) => {
   // 현재 경로가 step0인지 확인하기 위한 변수 정의
   const isStep0Path = location.pathname.includes("step0");
 
-  // 시간이 초과되었을 때 타임아웃 모달 열리도록 설정
-  useEffect(() => {
-    // 남은 시간 0 이하일 때만 모달이 열리도록 설정
-    if (timeSpent <= 0 && !isStep0Path) {
-      setIsTimeoutModalContentsOpen(true);
-      setTimerControl(false); // 타이머 정지
-    }
-  }, [timeSpent, setTimerControl]);
+  // // 시간이 초과되었을 때 타임아웃 모달 열리도록 설정
+  // useEffect(() => {
+  //   // 남은 시간 0 이하일 때만 모달이 열리도록 설정
+  //   if (timeSpent <= 0 && !isStep0Path) {
+  //     setIsTimeoutModalContentsOpen(true);
+  //     setTimerControl(false); // 타이머 정지
+  //   }
+  // }, [timeSpent, setTimerControl]);
 
   const handleModalOpen = () => {
     setIsModalOpen(true);

diff --git a/src/pages/practiceMode/step5/Step5.jsx b/src/pages/practiceMode/step5/Step5.jsx
@@ -1,8 +1,14 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import Button from "../../../components/button/Button";
 import { useAtom, useSetAtom } from "jotai";
-import { levelAtom, progressAtom, themeSiteAtom } from "../../../store/atom";
+import {
+  levelAtom,
+  progressAtom,
+  themeSiteAtom,
+  practiceCountAtom,
+  isPracticeCountIncreasedAtom
+} from "../../../store/atom";
 import { useNavigate } from "react-router-dom";
 import resetAtom from "../../../util/resetAtom";
 const Step5Container = styled.div`
@@ -48,9 +54,23 @@ const Step5 = () => {
 
   const setThemeSite = useSetAtom(themeSiteAtom);
 
+  //연습 횟수 증가 로직
+  const [practiceCount, setPracticeCount] = useAtom(practiceCountAtom);
+  const [isPracticeCountIncreased, setIsPracticeCountIncreased] = useAtom(
+    isPracticeCountIncreasedAtom
+  );
+  const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     setProgress(5);
-  }, [setProgress]);
+    if (!isLoaded) {
+      setIsLoaded(true);
+    }
+    // 연습 횟수 증가 여부 확인후 증가
+    if (!isPracticeCountIncreased && isLoaded) {
+      setPracticeCount((prev) => prev + 1);
+      setIsPracticeCountIncreased(true);
+    }
+  }, [isLoaded]);
 
   // 난이도 선택 창으로
   const handlePracticeModeClick = () => {

diff --git a/src/pages/selectMode/SelectMode.jsx b/src/pages/selectMode/SelectMode.jsx
@@ -37,7 +37,7 @@ const SelectMode = () => {
   const PracticeCount = useAtomValue(practiceCountAtom);
   const nav = useNavigate();
 
-  const recommendedMode = PracticeCount < 10 ? "연습모드" : "실전모드";
+  const recommendedMode = PracticeCount < 15 ? "연습모드" : "실전모드";
   const modes = ["연습모드", "실전모드"];
 
   const handleClick = (mode) => {

diff --git a/src/store/atom.js b/src/store/atom.js
@@ -74,7 +74,14 @@ export const userNameAtom = atomWithStorage("userName", "", storage);
 export const userNameErrorAtom = atom(false);
 
 //연습모드 완료 횟수
-export const practiceCountAtom = atomWithStorage("practiceCount", 0, storage);
+export const practiceCountAtom = atomWithStorage("practiceCount", 0);
+
+//practiceCount 증가 완료
+export const isPracticeCountIncreasedAtom = atomWithStorage(
+  "isPracticeCountIncreased",
+  false,
+  storage
+);
 
 //좌석 매수 개수
 export const seatCountAtom = atomWithStorage("seatCount", 0, storage);

diff --git a/src/util/resetAtom.js b/src/util/resetAtom.js
@@ -13,6 +13,7 @@ const resetAtom = () => {
   sessionStorage.removeItem("minute");
   sessionStorage.removeItem("helpTextNumber");
   sessionStorage.removeItem("fakeAllowedSeat");
+  sessionStorage.removeItem("isPracticeCountIncreased");
 };
 
 export default resetAtom;