[feat] 유니버설 아일랜드 인터랙션 추가 (resolve #21)

README.md

@@ -1,7 +1,9 @@
 #  Team6-AwesomeOrange
 
+> 백엔드 레포는 여기로! => [백엔드 레포](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE)
+
 ## Contributors
-|       [@lybell-art](https://github.com/lybell-art)        |        [@darkdulgi](https://github.com/darkdulgi)         |        [@ahra1221](https://github.com/blaxsior)         |             [@win-luck](https://github.com/win-luck)              |
+|       [@lybell-art](https://github.com/lybell-art)        |        [@darkdulgi](https://github.com/darkdulgi)         |        [@blaxsior](https://github.com/blaxsior)         |             [@win-luck](https://github.com/win-luck)              |
 |:---------------------------------------------------------:|:-------------------------------------------------------:|:-------------------------------------------------------:|:-----------------------------------------------------------------:|
 | <img width="400" src="https://github.com/lybell-art.png"> | <img width="400" src="https://github.com/darkdulgi.png"> | <img width="400" src="https://github.com/blaxsior.png"> |                     <img width="400" src="https://github.com/win-luck.png">                      |
 |                       **Front-End**                       |                      **Front-End**                      |                      **Back-End**                       |                           **Back-End**                            |
@@ -14,21 +16,45 @@
 [Convention](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%08%5BTeam-Convention%5D)
 
 ## Plan & Design Link
+[Plan & Design Link(Figma)](https://www.figma.com/design/XieJv765qFmU9dFuQAG7tQ/%EC%96%B4%EC%8D%B8%EC%98%A4%EB%A0%8C%EC%A7%80_Hand-off_%EC%B5%9C%EC%A2%85(07%2F24)?node-id=33-1157)
+
+## Schedule
+**Front-End**
+
+| 1주차 | 공통 커스텀 훅 및 인터랙션 인터페이스 추가, 메인 페이지의 인트로, 헤더, 차량 기본정보, QnA, 푸터 구현 |
+| --- | --- |
+| 2주차 | 인터랙션 페이지, 인터랙션 모달, 각각의 인터랙션 구현 |
+| 3주차 | 각각의 인터랙션 구현, 기대평 구현 |
+| 4주차 | 선착순 이벤트 구현, 시간 남을 시 어드민 페이지(로그인, 이벤트목록) 구현 |
+| 5주차 | 어드민 페이지(이벤트 등록수정, 이벤트 관리, 기대평 관리) 구현 및 리팩토링, 발표자료 제작 |
+
+**Back-End**
+
+| 1주차 | JPA Entity 구축, 배포 등 인프라 설정, 유저 로그인, 선착순 이벤트 프로토타입 구현 |
+| --- | --- |
+| 2주차 | 기대평, 어드민 시스템, 가중치 반영 추첨 구현 (+단위 테스트) |
+| 3주차 | 선착순 이벤트 최적화, 서비스 확장성 개선, 테스트코드 작성 |
+| 4주차 | 버그 수정, 부하 테스트 기반 서비스 최적화 |
+
+## Backlog
+### Front-End
+![image](https://github.com/user-attachments/assets/3fec291d-4aed-4f04-895b-7b2686aecc59)
+
+### Back-End
+![image](https://github.com/user-attachments/assets/d7444775-cbad-48a2-a278-fd73368a1b6e)
+
+## ERD
+<img width="686" alt="image" src="https://github.com/user-attachments/assets/eece7379-ad7b-4b29-b0bb-ae4bc20a7104">
 
 ## Tech Stack
 
 ### Front-End
-- Javascript ES2020+
-- React
-- Tailwindcss
-- Vite
-- Zustand
+<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=black"><img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black"><img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=Tailwind CSS&logoColor=white"><img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=Vite&logoColor=purple"><img src="https://img.shields.io/badge/Zustand-DDA0DD?style=for-the-badge&logo=Zustand&logoColor=purple">
 
 ### Back-End
-- Spring Boot 3.2.2
-- Java 17
-- MySQL 8.0
-- Redis
-- AWS EC2
-- AssertJ
-- Docker
+<img src="https://img.shields.io/badge/Spring Boot-6DB33F?style=for-the-badge&logo=Spring Boot&logoColor=black"><img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=MySQL&logoColor=black"><img src="https://img.shields.io/badge/Redis-FF4438?style=for-the-badge&logo=Redis&logoColor=black"><img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=Docker&logoColor=black"><img src="https://img.shields.io/badge/Grafana-F46800?style=for-the-badge&logo=Grafana&logoColor=black"><img src="https://img.shields.io/badge/Apache JMeter-D22128?style=for-the-badge&logo=Apache JMeter&logoColor=black">
+
+## Issue & TroubleShooting
+[Issue & TroubleShooting](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%5BIssue-&-TroubleShooting%5D)
+
+## Project Archeitecture

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build && npm run build:server && node prerender.js",
     "build:client": "vite build",
     "build:server": "vite build --ssr src/main-server.jsx --outDir dist-ssg",

src/common/useMountDragEvent.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import throttleRaf from "@/common/throttleRaf.js";
+
+function useMountDragEvent(dragging, dragEnd) {
+  useEffect(() => {
+    const onPointerMove = throttleRaf((e) => {
+      const { clientX, clientY } = e;
+      dragging({ x: clientX, y: clientY });
+    });
+    const onTouchMove = throttleRaf((e) => {
+      const { clientX, clientY } = e.touches[0];
+      dragging({ x: clientX, y: clientY });
+    });
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", dragEnd);
+    window.addEventListener("pointercancel", dragEnd);
+    window.addEventListener("touchmove", onTouchMove);
+    window.addEventListener("touchend", dragEnd);
+    window.addEventListener("touchcancel", dragEnd);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", dragEnd);
+      window.removeEventListener("pointercancel", dragEnd);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", dragEnd);
+      window.removeEventListener("touchcancel", dragEnd);
+    };
+  }, [dragging, dragEnd]);
+}
+
+export default useMountDragEvent;

src/index.css

@@ -5,13 +5,21 @@
 @font-face {
   font-family: "ds-digital";
   src: url("/font/DS-DIGI.TTF") format("truetype");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "hdsans";
-  src:
-    url("/font/HyundaiSansTextOffice-Medium.woff") format("woff"),
-    url("/font/HyundaiSansTextOffice-Medium.ttf") format("truetype");
+  src: url("/font/HyundaiSansTextKROTFBold.otf") format("opentype");
+  font-weight: bold;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "hdsans";
+  src: url("/font/HyundaiSansTextKROTFMedium.otf") format("opentype");
+  font-weight: medium;
+  font-display: swap;
 }
 
 @layer base {
@@ -24,4 +32,4 @@
   .graphic-gradient {
     @apply bg-gradient-to-r from-[#3ED7BE] to-[#069AF8];
   }
-}
+}

src/interactions/fastCharge/BatteryProgressBar.jsx

@@ -0,0 +1,30 @@
+import style from "./batteryStyle.module.css";
+
+function getBatteryColor(progress) {
+  if (progress <= 50 / 330) return "bg-red-500";
+  if (progress <= 190 / 330) return "bg-yellow-400";
+  return "bg-blue-400";
+}
+
+function BatteryProgressBar({ progress }) {
+  const batteryColor = getBatteryColor(progress);
+  const batteryDynamicStyle = {
+    "--progress": progress,
+  };
+
+  return (
+    <div className="w-full h-full relative flex" style={batteryDynamicStyle}>
+      <div
+        className={`${batteryColor} ${style.left} h-full shrink-0 rounded-l-[20px]`}
+      ></div>
+      <div
+        className={`${batteryColor} ${style.bar} h-full shrink-0 relative -left-1`}
+      ></div>
+      <div
+        className={`${batteryColor} ${style.right} h-full shrink-0 relative -left-2 rounded-r-[20px]`}
+      ></div>
+    </div>
+  );
+}
+
+export default BatteryProgressBar;