From 7a67d62f0821eb2891c134633c8230d36db10c50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=8B=A4=EC=9D=80?= <drechsu@gmail.com>
Date: Sun, 8 Sep 2024 23:51:31 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20step5=EC=97=90=EC=84=9C=20=EC=97=B0?=
 =?UTF-8?q?=EC=8A=B5=ED=9A=9F=EC=88=98atom=20=EC=A6=9D=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProgressContents.jsx         | 16 ++++++++--------
 src/pages/practiceMode/step5/Step5.jsx | 26 +++++++++++++++++++++++---
 src/pages/selectMode/SelectMode.jsx    |  2 +-
 src/store/atom.js                      |  9 ++++++++-
 src/util/resetAtom.js                  |  1 +
 5 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/pages/ProgressContents.jsx b/src/pages/ProgressContents.jsx
index 3ec1634f..841fb6b1 100644
--- 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
index 9c0b857b..77acb656 100644
--- 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
index baf58688..2fac5006 100644
--- 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
index e783b315..69bd7e4c 100644
--- 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
index 13049b46..ae3b86cb 100644
--- 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;