[feat] 고속충전 인터랙션 추가 (resolve #20)

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/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;

src/interactions/fastCharge/FastChargeInteraction.jsx

@@ -0,0 +1,80 @@
+import { useImperativeHandle } from "react";
+import BatteryProgressBar from "./BatteryProgressBar.jsx";
+import orderIcon from "@/assets/property2.svg";
+import dialSvg from "./timer.svg";
+import useDialDrag from "./useDialDrag.js";
+
+const MAX_MINUTE = 30;
+
+function getProgress(angle) {
+  const rawProgress = -angle / (Math.PI * 2);
+  if (rawProgress < 0) return 0;
+  if (rawProgress > 1) return 1;
+  return rawProgress;
+}
+
+function FastChargeInteraction({ interactCallback, $ref }) {
+  const {
+    angle,
+    style: dialStyle,
+    ref: dialRef,
+    onPointerStart,
+    resetAngle,
+  } = useDialDrag(0);
+
+  useImperativeHandle(
+    $ref,
+    () => ({
+      reset() {
+        resetAngle();
+      },
+    }),
+    [resetAngle],
+  );
+  const progress = getProgress(angle);
+
+  return (
+    <article className="bg-black relative w-full h-full overflow-hidden flex items-center flex-col">
+      <div className="w-full max-w-[1200px] px-10 lg:px-20 flex gap-2 items-start mt-16 lg:mt-[6.25rem] ">
+        <img src={orderIcon} alt="2" />
+        <div className="flex flex-col gap-3.5 font-bold">
+          <h3 className="text-neutral-400 text-title-m md:text-title-l">
+            불편함 없이, 더 빠르게
+          </h3>
+          <p className="text-white text-body-m md:text-body-l">
+            The new IONIQ 5의 배터리를 충전하는 데 얼마만큼의 시간이 걸릴까요?
+          </p>
+          <p className="text-neutral-200 text-body-s">
+            다이얼을 돌려 충전에 필요한 시간을 확인해보세요!
+          </p>
+        </div>
+      </div>
+      <div className="absolute top-[clamp(240px,40%,384px)] w-72 md:w-96 h-32 border-solid border-2 border-neutral-600 rounded-[30px] p-3.5">
+        <div className="absolute w-5 h-9 bg-neutral-600 right-[-1.25rem] top-[2.875rem] rounded-r-md"></div>
+        <BatteryProgressBar progress={progress} />
+      </div>
+      <div className="absolute bottom-0 size-72 md:size-[448px] lg:size-[562px] translate-y-[40%] md:translate-y-1/2 flex justify-center">
+        <img
+          src={dialSvg}
+          alt="다이얼"
+          className="w-full h-full absolute left-0 top-0 cursor-pointer touch-none"
+          style={dialStyle}
+          ref={dialRef}
+          onPointerDown={(e) => {
+            onPointerStart(e);
+            interactCallback?.();
+          }}
+          draggable="false"
+        />
+        <p className="text-white absolute bottom-[calc(50%+48px)] md:bottom-[calc(50%+94px)] lg:bottom-[calc(50%+140px)] text-title-s pointer-events-none">
+          <span className="text-head-m md:text-head-l lg:text-[4.375rem] mr-1.5 lg:mr-2.5">
+            {Math.round(progress * MAX_MINUTE)}
+          </span>
+          분
+        </p>
+      </div>
+    </article>
+  );
+}
+
+export default FastChargeInteraction;