Merge branch 'develop'

README.md

@@ -1,19 +1,66 @@
-# React + Vite 프로젝트 초기 설정
+# 쉽게🎫티켓
 
-## Install dependencies
+### 누구나 쉽게 배우는 티켓팅 플랫폼, 쉽게티켓😎
 
-```
-npm i
-```
+![main](public/assets/images/main.png)
+
+## 프로젝트 소개
+
+현재 다양한 이벤트, 공연, 스포츠 경기 등의 티켓 예매는 대부분 온라인에서 이루어지고 있습니다. 그러나 인터넷 사용에 익숙하지 않은 어르신분들 또는 사회적 약자들은 이러한 온라인 티켓팅에서 어려움을 겪고 있으며, 결과적으로 문화생활을 즐길 기회를 얻지 못하는 경우가 많습니다.
+
+쉽게티켓은 이러한 문제를 해결하고자 합니다. 사용자들이 티켓팅 과정을 연습하면서 다양한 난이도의 문제를 경험하여 실제 상황에서의 대응 능력을 기를 수 있도록 도와줍니다. 디지털 격차 없이 누구나 예매 과정을 쉽게 배울 수 있습니다.
+
+## 주요 기능
+
+(ppt 사진으로 대체?)
+
+- 연습모드
+
+  - 다양한 난이도에 맞춰 티켓팅 연습을 할 수 있는 모드입니다.
+  - 사용자는 난이도에 따라 점진적으로 어려워지는 티켓팅 문제를 해결하며 예매 기술을 향상시킬 수 있습니다.
+
+- 실전모드
+  - 실제 티켓팅과 유사한 화면을 구성하여, 제한 시간 내에 티켓팅에 성공하도록 유도하는 모드입니다.
+  - 실제 상황에서의 티켓팅 경험을 제공하여 실전 감각을 익힐 수 있습니다.
+
+## 팀 소개
 
-## Run
+[팀 노션 바로가기](https://abyss-2.notion.site/ac49d8e6e597422ba111bc38594ba2f4?pvs=4)
+
+## 팀원 소개
+
+| 고다은                                                             | 이영주                                                            | 이한희                                                             |
+| ------------------------------------------------------------------ | ----------------------------------------------------------------- | ------------------------------------------------------------------ |
+| ![profile1](https://avatars.githubusercontent.com/u/141714293?v=4) | ![profile2](https://avatars.githubusercontent.com/u/77565980?v=4) | ![profile3](https://avatars.githubusercontent.com/u/168459001?v=4) |
+| [Daeun-100](https://github.com/Daeun-100)                          | [abyss-s](https://github.com/abyss-s)                             | [hanheel](https://github.com/hanheel)                              |
+| FE                                                                 | FE                                                                | FE                                                                 |
+
+## 기술 스택
+
+| 카테고리      | 스택                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Environment   | <img src="https://img.shields.io/badge/React-61DAFB.svg?&style=flat-square&logo=React&logoColor=white"/> <img src="https://img.shields.io/badge/Vite-646CFF.svg?&style=flat-square&logo=Vite&logoColor=white"/>                                                                                                                                                                                                                            |
+| Common        | <img src="https://img.shields.io/badge/Eslint-4B32C3.svg?&style=flat-square&logo=Eslint&logoColor=white"/> <img src="https://img.shields.io/badge/Prettier-F7B93E.svg?&style=flat-square&logo=Prettier&logoColor=white"/>                                                                                                                                                                                                                  |
+| Language      | <img src="https://img.shields.io/badge/Javascript-F7DF1E.svg?&style=flat-square&logo=Javascript&logoColor=white"/> <img src="https://img.shields.io/badge/CSS3-1572B6.svg?&style=flat-square&logo=CSS3&logoColor=white"/>                                                                                                                                                                                                                  |
+| Style         | <img src="https://img.shields.io/badge/Styled_Components-DB7093.svg?&style=flat-square&logo=styled-components&logoColor=white"/>                                                                                                                                                                                                                                                                                                           |
+| Backend       | <img src="https://img.shields.io/badge/Firebase-FFCA28.svg?&style=flat-square&logo=Firebase&logoColor=black"/>                                                                                                                                                                                                                                                                                                                             |
+| Collaboration | <img src ="https://img.shields.io/badge/Git-F24E1E.svg?&style=flat-square&logo=Figma&logoColor=white"/> <img src="https://img.shields.io/badge/Trello-0052CC.svg?&style=flat-square&logo=Trello&logoColor=white"/> <img src="https://img.shields.io/badge/Notion-000000.svg?&style=flat-square&logo=Notion&logoColor=white"/> <img src="https://img.shields.io/badge/Discord-5865F2.svg?&style=flat-square&logo=Discord&logoColor=white"/> |
+
+## 기획 및 디자인
+
+(피그마 링크 or 사진 첨부)
+
+### 플로우차트
+
+### 와이어프레임
+
+## 프로젝트 실행
 
 ```
+npm i
 npm run dev
 ```
 
-## Lint and fix all
+## 코멘트
 
-```
-npm run lint
-```
+(각자 배운점, 아쉬운점 같은 부분 적기)

src/components/SeatCount.jsx

@@ -59,7 +59,9 @@ const SeatCount = () => {
   const handleSeatCountChange = (event) => {
     setSeatCount(Number(event.target.value));
   };
-
+  useEffect(() => {
+    setSeatCount(0);
+  }, []);
   useEffect(() => {
     if (seatCount === 0 && level === "low") {
       setFocus(true);

src/components/card/settings/vertical/VerticalFront.jsx

@@ -5,7 +5,7 @@ import { CardWrap, Number } from "../CardStyles";
 const VerticalFront = () => {
   return (
     <CardWrap>
-      {/*카드 앞부분 */}s
+      {/*카드 앞부분 */}
       <CardBFront />
     </CardWrap>
   );

src/components/errorText/errorText.jsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import InfoIcon from "/public/assests/images/icons/errorInfo.svg?react";
+
+const ErrorTextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+`;
+
+const ErrorTextMessage = styled.span`
+  color: var(--point-color);
+  font-size: 18px;
+`;
+
+const ErrorText = ({ text }) => {
+  return (
+    <ErrorTextContainer>
+      <InfoIcon />
+      <ErrorTextMessage>{text}</ErrorTextMessage>
+    </ErrorTextContainer>
+  );
+};
+
+export default ErrorText;

src/components/seatChart/SeatChart1.jsx

@@ -9,6 +9,12 @@ const SectionName = styled.div`
   font-family: "pretendardB";
   margin: 20px;
 `;
+const SeatChartContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
 
 const SeatChart = () => {
   const allowedSection = useAtomValue(allowedSectionAtom);
@@ -26,10 +32,10 @@ const SeatChart = () => {
   useFakeAllowedSeat(0, 9, 9);
 
   return (
-    <>
+    <SeatChartContainer>
       <SectionName>{allowedSection}구역</SectionName>
       <SeatGrid rows={10} columns={10} gridIndex={0} />
-    </>
+    </SeatChartContainer>
   );
 };
 

src/components/seatInfo/SeatInfo.jsx

@@ -2,6 +2,7 @@ import Button from "../button/Button";
 import { useAtomValue, useAtom } from "jotai";
 import {
   isSeatSelectedAtom,
+  isSectionSelectedAtom,
   allowedSeatAtom,
   levelAtom,
   postersAtom,
@@ -30,6 +31,7 @@ import { useLocation } from "react-router-dom";
 
 const SeatInfo = () => {
   const isSeatSelected = useAtomValue(isSeatSelectedAtom);
+  const isSectionSelected = useAtomValue(isSectionSelectedAtom);
   const allowedSeat = useAtomValue(allowedSeatAtom);
   const level = useAtomValue(levelAtom);
   const posters = useAtomValue(postersAtom);
@@ -61,18 +63,21 @@ const SeatInfo = () => {
   const nav = useNavigate();
 
   const handleButtonClick = () => {
-    if (themeSite === "practice") {
-      nav("../step3-1");
-      return;
-    }
     if (isSeatSelected) {
       if (path.includes("challenge")) {
         nav("../step3/step4");
-      } else {
-        nav("../step3-1");
+        return;
       }
-    } else {
+      nav("../step3-1");
+    }
+
+    if (!isSectionSelected) {
+      alert("구역을 선택해주세요.");
+      return;
+    }
+    if (!isSeatSelected) {
       alert("좌석을 선택해주세요.");
+      return;
     }
   };
 

src/hooks/useBookingValidate.js

@@ -20,7 +20,7 @@ export const useBookingValidate = (
     // 연습모드
     // 좌석 매수가 0일 경우 경고창 출력
     if (seatCount === 0) {
-      alert("좌석을 선택해주세요.");
+      alert("좌석매수를 선택해주세요.");
       return;
     }
     addStage(2);

src/pages/ProgressContents.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { useNavigate, useLocation, Outlet } from "react-router-dom";
+import { useLocation, Outlet } from "react-router-dom";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import Button from "../components/button/Button";
 import Modal from "../components/modal/Modal";
@@ -75,19 +75,33 @@ const ProgressContents = ({ text, practiceMode, challengeMode }) => {
     useState(false);
   // 일시정지 모달창 제어
   const [isPaused, setIsPaused] = useState(false);
-
-  const path = useLocation().pathname;
+  const [isLoading, setIsLoading] = useState(true);
+  const location = useLocation();
+  const path = location.pathname;
   // 현재 경로가 step0인지 확인하기 위한 변수 정의
-  const isStep0Path = location.pathname.includes("step0");
+  const isStep0Path = path.includes("step0");
 
   // 시간이 초과되었을 때 타임아웃 모달 열리도록 설정
+  useEffect(() => {
+    // 초기 로딩이 완료되면 로딩 상태를 false로 설정
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 100); // 0.1초 딜레이
+
+    return () => clearTimeout(timer);
+  }, []);
+
   useEffect(() => {
     // 남은 시간 0 이하일 때만 모달이 열리도록 설정
-    if (timeSpent <= 0 && !isStep0Path) {
+    if (isLoading) return; // 로딩 중일 때는 useEffect 실행하지 않음
+
+    if (isStep0Path) {
+      setIsTimeoutModalContentsOpen(false);
+    } else if (timeSpent <= 0 && level == "high") {
       setIsTimeoutModalContentsOpen(true);
       setTimerControl(false); // 타이머 정지
     }
-  }, [timeSpent, setTimerControl]);
+  }, [timeSpent, isStep0Path, isLoading, setTimerControl]);
 
   const handleModalOpen = () => {
     setIsModalOpen(true);
@@ -129,53 +143,61 @@ const ProgressContents = ({ text, practiceMode, challengeMode }) => {
   return (
     <ProgressContentsContainer>
       {/*프로그래스 바*/}
-      <ProgressBarBox>
-        <ProgressBar />
-      </ProgressBarBox>
-      {/*고급 level일 경우에만 Timer 설정 */}
-      {/*모달이 열렸을 경우 Timer 정지 - isModalOpen, isPaused*/}
-      {level === "high" && themeSite === "practice" && <Timer second={1800} />}
-      {themeSite !== "practice" && <Timer type={"minute"} second={900} />}
-      {!path.includes("challenge") && <TextBox>{stepText}</TextBox>}
-      <ContentsBox>
-        {/*도움말 버튼 */}
-        {showHelpButton && (
-          <ButtonContainer>
-            <Button
-              onClick={handleModalOpen}
-              text="도움이 필요하신가요?"
-              type="help"
-            />
-          </ButtonContainer>
-        )}
-        {/*일시정지 모달창 */}
-        {isPaused && (
-          <Modal
-            contents={<EscModalContents setIsPaused={setIsPaused} />}
-            buttonShow={false}
-            width="350px"
-            height="400px"
-          />
-        )}
-        {/*도움말 모달창*/}
-        {isModalOpen && (
-          <Modal onClick={handleModalClose} contents={helpText} />
-        )}
-        {/*타임아웃 모달창*/}
-        {isTimeoutModalContentsOpen && (
-          <Modal
-            contents={
-              <TimeoutModalContents
-                setIsModalContentsOpen={setIsTimeoutModalContentsOpen}
+      {isLoading ? (
+        <p></p>
+      ) : (
+        <>
+          <ProgressBarBox>
+            <ProgressBar />
+          </ProgressBarBox>
+          {/*고급 level일 경우에만 Timer 설정 */}
+          {/*모달이 열렸을 경우 Timer 정지 - isModalOpen, isPaused*/}
+          {level === "high" && themeSite === "practice" && (
+            <Timer second={1800} />
+          )}
+          {themeSite !== "practice" && <Timer type={"minute"} second={900} />}
+          {!path.includes("challenge") && <TextBox>{stepText}</TextBox>}
+          <ContentsBox>
+            {/*도움말 버튼 */}
+            {showHelpButton && (
+              <ButtonContainer>
+                <Button
+                  onClick={handleModalOpen}
+                  text="도움이 필요하신가요?"
+                  type="help"
+                />
+              </ButtonContainer>
+            )}
+            {/*일시정지 모달창 */}
+            {isPaused && (
+              <Modal
+                contents={<EscModalContents setIsPaused={setIsPaused} />}
+                buttonShow={false}
+                width="350px"
+                height="400px"
+              />
+            )}
+            {/*도움말 모달창*/}
+            {isModalOpen && (
+              <Modal onClick={handleModalClose} contents={helpText} />
+            )}
+            {/*타임아웃 모달창*/}
+            {isTimeoutModalContentsOpen && (
+              <Modal
+                contents={
+                  <TimeoutModalContents
+                    setIsModalContentsOpen={setIsTimeoutModalContentsOpen}
+                  />
+                }
+                buttonShow={false}
+                width="400px"
+                height="450px"
               />
-            }
-            buttonShow={false}
-            width="400px"
-            height="450px"
-          />
-        )}
-        <Outlet />
-      </ContentsBox>
+            )}
+            <Outlet />
+          </ContentsBox>
+        </>
+      )}
     </ProgressContentsContainer>
   );
 };

src/pages/challengeMode/selectSeat/SelectSeatChallangeMode.jsx

@@ -3,9 +3,10 @@ import styled from "styled-components";
 import SecureModalContents from "../../../components/modal/modalContents/SecureModalContents";
 import SeatChart from "../../../components/seatChart/SeatChart1";
 import SeatSection from "../../../components/seatSection/SeatSection";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import {
   isSectionSelectedAtom,
+  isSeatSelectedAtom,
   progressAtom,
   themeSiteAtom
 } from "../../../store/atom";
@@ -27,17 +28,23 @@ const SeatInfoContainer = styled.div`
 
 const TooltipText = styled.div`
   width: 380px;
+  font-size: 16px;
   font-family: PretendardM;
 `;
 
 const SelectSeatChallengeMode = () => {
   const [isModalOpen, setIsModalOpen] = useState(true);
-  const isSectionSelected = useAtomValue(isSectionSelectedAtom);
+  const [isSectionSelected, setIsSectionSelected] = useAtom(
+    isSectionSelectedAtom
+  );
+  const [isSeatSelected, setIsSeatSelected] = useAtom(isSeatSelectedAtom);
   const setProgress = useSetAtom(progressAtom);
   const themeSite = useAtomValue(themeSiteAtom);
 
   useEffect(() => {
     setProgress(2);
+    setIsSectionSelected(false);
+    setIsSeatSelected(false);
   }, []);
 
   const closeModal = () => {