배포환경 에러 메세지 기반 토큰 재발급 로직 임시 제거, 중간알람 유효성 추가 (#58)

* Update README.md * fix:토큰 재발급 error.tsx의 에러 메세지 기반 조건부 로직 임시 제거 * feat: 중간 알림 유효성 로직 추가
DDD-Community · May 29, 2024 · 86fe621 · 86fe621
1 parent eb46d84
commit 86fe621
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,36 +1,101 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Presen
 
-## Getting Started
+<div align="center">
+  <img width="700" alt="presen"  src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/5964d012-1a2f-4204-a14a-3eba921ef175">
+</div>
 
-First, run the development server:
+<br />
+<div align="center">
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+  <img src ="https://img.shields.io/badge/Next.js-000000?&style=flat-square&logo=Next.js&logoColor=white"/>      
+  <img src="https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=Typescript&logoColor=white"/>
+  <img src="https://img.shields.io/badge/ESLint-4B32C3?style=flat-square&logo=ESLint&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Prettier-F7B93E?style=flat-square&logo=Prettier&logoColor=white"/>
+  <img src ="https://img.shields.io/badge/reactquery-FF4154?&style=flat-square&logo=reactquery&logoColor=white"/>
+  <img src ="https://img.shields.io/badge/Vercel-000000?&style=flat-square&logo=Vercel&logoColor=white"/>
+
+  <br>
+  <img src="https://img.shields.io/badge/Kotlin-7F52FF?style=flat-square&logo=Kotlin&logoColor=white"/>
+  <img src="https://img.shields.io/badge/SpringBoot-6DB33F?style=flat-square&logo=SpringBoot&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Redis-DC382D?style=flat-square&logo=Redis&logoColor=white"/>
+  <img src="https://img.shields.io/badge/MySQL-4479A1?style=flat-square&logo=MySQL&logoColor=white"/>
+  <img src="https://img.shields.io/badge/NGINX-009639?style=flat-square&logo=NGINX&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=Docker&logoColor=white"/>
+  <br>
+  <img src="https://img.shields.io/badge/Github Actions-2088FF?style=flat-square&logo=Github Actions&logoColor=white"/>
+  <img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/>
+</div>
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+<br />
+<br />
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## 🟣 프로젝트 간단 소개
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+_그동안 막연히 대본만 보며 발표 준비를 하고 계셨나요?_
 
-## Learn More
+_그렇다면 **발표 암기 연습과 피드을 제공해주는 Presen**을 경험해 보세요!_
 
-To learn more about Next.js, take a look at the following resources:
+<br />
+<br />
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 🟣 주요 기능
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+### 📍 발표 자료 등록 및 타이머 설정🗒️
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+<img width="600" alt="presen"  src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/2c8f07e0-0edd-4008-9a59-671f9d46d09e">
+
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+<br/>
+<br/>
+
+### 📍 발표 연습 모드 선택 💻
+
+
+
+☑️ **주요 문장 가리기 or 모든 문장 보기**
+
+<img width="600" alt="presen" src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/f8c923e0-9081-4658-98f0-987f789d5192">
+
+☑️ **데스크탑 or 데스크탑+모바일**
+
+<img width="600" alt="presen" src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/a86e87bc-3f4f-409a-aea9-edf4a97d3d6c">
+
+
+<br/>
+<br/>
+
+
+### 📍 발표 녹음 및 피드백 💯
+
+
+
+☑️ **발표 대본에 맞춘 실제 발화 연습**
+
+ <img width="600" alt="presen" src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/5831a57b-81b4-451c-aef7-ed08c7f088ed">
+
+
+☑️ **AI 기반 발표 내용 피드백**
+
+ <img width="600" alt="presen" src="https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/01116e4c-3fc1-489b-9efe-20f789c8a537">
+
+
+<br />
+<br />
+
+## 🟣 기술 스택
+![image](https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/a77f105b-609e-403a-89f2-49ac32d29590)
+![image](https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/0e3b4271-18dc-4137-b86f-cfda698a6d74)
+
+<br />
+<br />
+
+## 🟣 아키텍쳐
+
+![image](https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/3cdfb863-18d7-4be3-82d4-b4e9622ef2b0)
+
+<br />
+<br />
+
+## 🟣 팀원
+![image](https://github.com/DDD-Community/DDD-10-KKEUNKKEUN-WEB/assets/78631876/70a78460-91e7-4327-9dd2-4e86ff977d52)
diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadTimer.module.scss b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadTimer.module.scss
@@ -57,3 +57,8 @@
     }
   }
 }
+
+.alarmWaring {
+  color: $red-7;
+  margin-right: 10px;
+}
diff --git a/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadTimer.tsx b/src/app/(afterlogin)/(common_navbar)/upload/[id]/_component/UploadTimer.tsx
@@ -1,8 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, Dispatch, SetStateAction, forwardRef } from 'react';
-
-import Input from '@/app/_components/_elements/Input';
+import { ChangeEventHandler, Dispatch, SetStateAction, forwardRef, useState } from 'react';
 
 import { UploadDataType, ValidtaionType } from '@/types/service';
 
@@ -20,6 +18,7 @@ interface UploadTimerProps {
 
 const UploadTimer = forwardRef<HTMLInputElement, UploadTimerProps>(
   ({ timeLimit, alertTime, setPresentationData, currentPageIndex, getValues }, ref) => {
+    const [warn, setWarn] = useState(false);
     const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
       let { name, value } = e.target;
       let changeValue = Number(value);
@@ -41,12 +40,31 @@ const UploadTimer = forwardRef<HTMLInputElement, UploadTimerProps>(
 
         if (name === 'alertTime_hour') {
           if (changeValue > 12) changeValue = 12;
-          alertTimeShallow['hours'] = changeValue;
+          const alarmHour = changeValue;
+          const alarmMinute = alertTimeShallow['minutes'] ?? 0;
+          const limitHour = timeLimitShallow['hours'] ?? 0;
+          const limitMinute = timeLimitShallow['minutes'] ?? 0;
+          if (alarmHour * 60 + alarmMinute >= limitHour * 60 + limitMinute) {
+            setWarn(true);
+          } else {
+            setWarn(false);
+            alertTimeShallow['hours'] = changeValue;
+          }
         }
 
         if (name === 'alertTime_minute') {
           if (changeValue > 59) changeValue = 59;
-          alertTimeShallow['minutes'] = changeValue;
+
+          const alarmHour = alertTimeShallow['hours'] ?? 0;
+          const alarmMinute = changeValue;
+          const limitHour = timeLimitShallow['hours'] ?? 0;
+          const limitMinute = timeLimitShallow['minutes'] ?? 0;
+          if (alarmHour * 60 + alarmMinute >= limitHour * 60 + limitMinute) {
+            setWarn(true);
+          } else {
+            setWarn(false);
+            alertTimeShallow['minutes'] = changeValue;
+          }
         }
 
         shallow.title = getValues('title');
@@ -64,39 +82,6 @@ const UploadTimer = forwardRef<HTMLInputElement, UploadTimerProps>(
           slides: shallowSlides,
         };
       });
-      // setPresentationData((prev) => {
-      //   let { name, value } = e.target;
-      //   let changeValue = Number(value);
-
-      //   const timeLimitShallow = { ...prev.timeLimit };
-      //   const alertTimeShallow = { ...prev.alertTime };
-
-      //   if (name === 'timeLimit_hour') {
-      //     if (changeValue > 12) changeValue = 12;
-      //     timeLimitShallow['hours'] = changeValue;
-      //   }
-
-      //   if (name === 'timeLimit_minute') {
-      //     if (changeValue > 59) changeValue = 59;
-      //     timeLimitShallow['minutes'] = changeValue;
-      //   }
-
-      //   if (name === 'alertTime_hour') {
-      //     if (changeValue > 12) changeValue = 12;
-      //     alertTimeShallow['hours'] = changeValue;
-      //   }
-
-      //   if (name === 'alertTime_minute') {
-      //     if (changeValue > 59) changeValue = 59;
-      //     alertTimeShallow['minutes'] = changeValue;
-      //   }
-
-      //   return {
-      //     ...prev,
-      //     timeLimit: timeLimitShallow,
-      //     alertTime: alertTimeShallow,
-      //   };
-      // });
     };
 
     return (
@@ -136,6 +121,9 @@ const UploadTimer = forwardRef<HTMLInputElement, UploadTimerProps>(
           </label>
 
           <div className={styles.timerInput}>
+            {warn && (
+              <p className={styles.alarmWaring}>알림 시간은 총 발표 시간보다 작아야 합니다.</p>
+            )}
             <input
               type="number"
               id="alarm"

diff --git a/src/app/(afterlogin)/error.tsx b/src/app/(afterlogin)/error.tsx
@@ -29,12 +29,13 @@ export default function Error({
       // 미들웨어 기반 리다이렉션
       window.location.href = fullUrl;
     };
-    if (error.message === 'reIssue') reIssue();
+    // if (error.message === 'reIssue') reIssue();
+    reIssue();
   }, [error]);
 
   return (
     <>
-      {error.message === 'reIssue' ? (
+      {/* {error.message === 'reIssue' ? (
         <Spinner />
       ) : (
         <div>
@@ -48,7 +49,8 @@ export default function Error({
             Try again
           </button>
         </div>
-      )}
+      )} */}
+      <Spinner />
     </>
   );
 }