1.0.1 업데이트

README.md

@@ -1,32 +1,73 @@
-#  Team6-AwesomeOrange
+# 🍊 Team6-AwesomeOrange
 
 > 백엔드 레포는 여기로! => [백엔드 레포](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE)
 
-## Contributors
+## 🎉 Project Introduction
+![thumbnails](https://github.com/user-attachments/assets/7fd7c6a4-198a-40eb-bd9a-2bff653199f3)
+
+**🕹️ 데모** : https://softeer-awesome-orange.vercel.app/
+
+**🎬 시연영상** : https://www.youtube.com/watch?v=OfGelpl1vD8
+
+### 🚗 인터랙션과 함께, The 새로워진 IONIQ 5를 만나다.
+이 프로젝트는 **The new IONIQ 5 출시 기념 이벤트를 컨셉으로, 다양한 인터랙션을 통해 IONIQ 5의 기능을 친숙하고 명료하게 전달하는 이벤트 페이지**입니다.
+프로젝트는 IONIQ 5의 기술적 경쟁력을 강조하면서도, 딱딱한 정보를 친숙하게 제공하고자, IONIQ 5의 기능을 나타내는 인터랙션 콘텐츠를 통해 사용자가 주요 성능을 직간접적으로 체험하도록 구성되었습니다. 또한, 선착순 이벤트는 이벤트 기간 동안 지속적인 트래픽을 유도하고자, 누구나 부담없이 참여할 수 있는 카드 뒤집기 방식을 채용했습니다.
+
+또한, 이벤트 페이지이기 때문에 더 많은 사람들이 이벤트 페이지로 유입하고, 참여할 수 있어야 하므로, **SSG를 도입**하여 검색 엔진 최적화(SEO)를 통해 검색 엔진에 저희 사이트가 쉽게 노출될 수 있도록 구성했으며, 모바일 사용자를 배려한 **반응형 웹 및 터치 인터랙션**, 시각장애인을 배려한 **키보드 인터랙션 조작 및 `aria-live="assertive"`를 이용한 적절한 음성 자막 피드백**으로 다양한 환경의 사람들이 이벤트에 부담없이 참여할 수 있도록 구성하였습니다.
+
+### ✨ Features
+- 🎮 **IONIQ 5를 상징하는 5개의 인터랙션 제공**
+	- 주행거리 인터랙션 - 점 드래그를 통한 거리 예측
+	- 고속충전 인터랙션 - 다이얼 드래그 회전을 통한 충전 시간 예측
+	- 유니버설 아일랜드 인터랙션 - 오브젝트 2개 드래그, 오브젝트 스내핑을 통한 무선충전 기능 홍보
+	- V2L 인터랙션 - 길잇기 연결 퍼즐
+		- 리셋할 때마다 랜덤한 퍼즐 제공
+	- 보조금 인터랙션 - 카운트와 로티 애니메이션
+	- 모바일 환경 지원
+	- 시각장애인도 이벤트에 참여할 수 있도록 키보드 조작 지원, 인터랙션 시 자막 제공
+	- 오프라인 폴백 모드 지원
+- 🃏 **카드 뒤집기 이벤트를 통한 선착순 이벤트**
+	- 다음 선착순 이벤트 실시간 카운트
+	- 느린 네트워크 환경을 위해 자연스러운 카드 로딩 애니메이션 추가
+	- 오프라인 폴백 모드 지원
+- 🎠 **스와이핑 가능한 기대평 캐러셀**
+
+## 👨🏻‍💻 Contributors
 |       [@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">                      |
+| <img width="300" src="https://github.com/lybell-art.png"> | <img width="300" src="https://github.com/darkdulgi.png"> | <img width="300" src="https://github.com/blaxsior.png"> |                     <img width="300" src="https://github.com/win-luck.png">                      |
 |                       **Front-End**                       |                      **Front-End**                      |                      **Back-End**                       |                           **Back-End**                            |
 
+## 🤝 Collaborations 
+### 🌱 Ground Rule
+> - 서로 각자를 이해하고 성장할 수 있는 프로세스 운영을 통해 만족스러운 결과물 만들기
+> - 서로의 의견을 존중하며 화목하고 기억에 남을 만한 팀 프로젝트 진행하기
+> - 개발 측면에서, "재사용 가능한 시스템" 구축하기
+> - 모르거나 막히는 것이 있으면, 즉시 상대방 부르기
 
-## Ground Rule
 [Ground Rule](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%5BGround-Rule%5D)
 
-## Convention
+### 📇 Convention
+> - 매일 오전 10시에 데일리 스크럼을 진행하고, 매일 오후 6시 30분에 일간 회고를 진행한다.
+> - 백로그를 기반으로, 각자 수행할 태스크를 밝혀 기능의 충돌을 막는다.
+>   - 크리티컬한 변경이 있을 경우, 팀원과 충분히 의논하고 같이 작업을 수행한다.
+> - 피처 기반으로 커밋을 수행하며, `[feat] 피처 내용`과 같이 커밋 메시지를 작성한다.
+> - 코드 리뷰를 수행한다. 코드 리뷰가 이루어지지 않으면 머지가 불가능하다.
+
 [Convention](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%08%5BTeam-Convention%5D)
 
-## Plan & Design Link
+## 🎨 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
+## 📅 Schedule
 **Front-End**
 
-| 1주차 | 공통 커스텀 훅 및 인터랙션 인터페이스 추가, 메인 페이지의 인트로, 헤더, 차량 기본정보, QnA, 푸터 구현 |
-| --- | --- |
-| 2주차 | 인터랙션 페이지, 인터랙션 모달, 각각의 인터랙션 구현 |
-| 3주차 | 각각의 인터랙션 구현, 기대평 구현 |
-| 4주차 | 선착순 이벤트 구현, 시간 남을 시 어드민 페이지(로그인, 이벤트목록) 구현 |
-| 5주차 | 어드민 페이지(이벤트 등록수정, 이벤트 관리, 기대평 관리) 구현 및 리팩토링, 발표자료 제작 |
+| 주차 | [@lybell-art](https://github.com/lybell-art) | [@darkdulgi](https://github.com/darkdulgi) |
+| --- | --- | --- |
+| 1주차 | 공통 커스텀 훅 및 인터랙션 인터페이스 추가, 차량 상세정보, QnA, 푸터, 각각의 인터랙션 구현 | 인트로, 헤더, 차량 기본정보 푸터 구현 |
+| 2주차 | 기대평, 선착순 이벤트 구현 | 인터랙션 섹션 및 모달 구현 |
+| 3주차 | 어드민 페이지 이벤트 관리 구현 | 어드민 페이지 기대평 관리 구현 |
+| 4주차 | 시각장애인 웹 접근성 개선 및 사용성 개선 | 어드민 페이지 기대평 관리, 유저 관리 구현 |
 
 **Back-End**
 
@@ -36,25 +77,100 @@
 | 3주차 | 선착순 이벤트 최적화, 서비스 확장성 개선, 테스트코드 작성 |
 | 4주차 | 버그 수정, 부하 테스트 기반 서비스 최적화 |
 
-## Backlog
+## 🪵 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">
+## 🤔 Issue & TroubleShooting
+- [프론트엔드 트러블슈팅](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-FE/wiki)
+- [백엔드 트러블슈팅](https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-BE/wiki/%5BIssue-&-TroubleShooting%5D)
 
-## Tech Stack
+## ⚙️ Tech Stack & Architecture
 
-### Front-End
+### 🔧 Tech Stack
+
+#### Front-End
 <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
+#### Back-End
 <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)
+### 🗂️ 폴더 구조
+**피처 기반 폴더 구조**를 채용하고 있습니다. 각각의 feature 폴더 내에 컴포넌트, 훅, 상수 등이 정의되어 있는 형태로, 분류 기반 폴더 구조에 비해 유사한 기능을 가진 파일을 찾기 매우 빠르기 때문에 채용했습니다.
+```
+.
+├── packages/
+│   ├── common/ : 메인과 어드민 공통에서 사용됩니다.
+│   │   └── src
+│   ├── mainPage/ : 메인 페이지의 루트 디렉토리입니다.
+│   │   ├── src/
+│   │   │   ├── shared : 2번 이상 사용되는 공통 feature입니다.
+│   │   │   ├── features : 1번만 사용되는 주요 feature입니다.
+│   │   │   ├── App.jsx
+│   │   │   ├── main-client.jsx
+│   │   │   ├── main-server.jsx
+│   │   │   └── mock.js
+│   │   ├── public : 메인 페이지에서만 사용되는 정적 자원입니다.
+│   │   └── index.html
+│   └── adminPage/ : 어드민 페이지의 루트 디렉토리입니다.
+│       ├── src/
+│       │   ├── shared
+│       │   ├── features
+│       │   ├── pages : 어드민 페이지의 각 페이지를 다룹니다.
+│       │   ├── App.jsx
+│       │   ├── main-client.jsx
+│       │   ├── main-server.jsx
+│       │   └── mock.js
+│       ├── public
+│       └── index.html
+└── public
+```
+
+### 🗄️ ERD
+<img width="686" alt="image" src="https://github.com/user-attachments/assets/eece7379-ad7b-4b29-b0bb-ae4bc20a7104">
 
-## Project Archeitecture
+### 🏗️ 백엔드 아키텍처
+(준비중입니다.)
+
+## 📥 Installation
+
+1. 레포지토리를 클론하세요.
+```bash
+git clone https://github.com/softeerbootcamp4th/Team6-AwesomeOrange-FE.git
+```
+
+2. 의존성 모듈을 설치하세요.
+```bash
+npm install
+```
+
+3. 프로젝트를 실행하세요.
+	- 메인 프로젝트
+	```bash
+	npm run dev
+	```
+	- 어드민 프로젝트
+	```bash
+	npm run dev-admin
+	```
+
+4. 만약, 빌드된 것을 보고 싶다면, 다음을 실행하세요.
+	- 메인 프로젝트
+	```bash
+	npm run build && npm run preview
+	```
+	- 어드민 프로젝트
+	```bash
+	npm run build-admin && npm run preview-admin
+	```
+
+## 📸 Screenshots
+![간단 소개 섹션](https://github.com/user-attachments/assets/0026eae2-befc-4e4d-a765-b988d61d63d8)
+![주행거리 인터랙션](https://github.com/user-attachments/assets/2bda17e1-a055-4b56-937c-5933d358496b)
+![V2L 인터랙션](https://github.com/user-attachments/assets/c61aae83-817a-4d2c-9f79-e3d362fd99ec)
+![정답 보여주기](https://github.com/user-attachments/assets/18c01284-9a52-4ab6-825a-f5e7939f6070)
+![기대평 섹션](https://github.com/user-attachments/assets/46c045f7-b87d-4d60-b785-01556e4088db)
+![선착순 이벤트](https://github.com/user-attachments/assets/b99a0f32-63aa-497d-8875-e53209254c89)

package.json

@@ -1,12 +1,14 @@
 {
   "name": "@awesome-orange",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "format": "prettier --write 'packages/**/*.{js,jsx,ts,tsx,json,css}'",
     "lint": "eslint . --ext js,jsx --max-warnings 0",
     "lint-fix": "eslint . --ext js,jsx --fix",
+    "dev": "npm --prefix ./packages/mainPage run dev",
+    "dev-admin": "npm --prefix ./packages/adminPage run dev",
     "build": "npm --prefix ./packages/mainPage run build",
     "build-admin": "npm --prefix ./packages/adminPage run build",
     "preview": "npm --prefix ./packages/mainPage run preview",

packages/adminPage/build.js

@@ -7,8 +7,6 @@ import config from "./vite.config.js";
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 const toAbsolute = (p) => resolve(__dirname, p);
 
-console.log("yeahhhhh!!!!");
-
 const buildUrl = [
   "index",
   "events",
@@ -46,6 +44,7 @@ async function processBuild() {
   await Promise.all([buildClient(), buildSSG()]);
   await Promise.all([
     copyFolder("../../public/font", `./dist/font`),
+    copyFolder("../../public/favicon", `./dist/favicon`),
     copyFolder("../../public/icons", `./dist/shared/icons`),
   ]);
   await injectSSGToHtml();

packages/adminPage/index.html

@@ -2,13 +2,16 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="소프티어 부트캠프 4기-팀 어썸 오렌지의 IONIQ 5 어드민 페이지입니다." />
     <link rel="preload" href="/font/HyundaiSansTextKROTFBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/font/HyundaiSansTextKROTFMedium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/font/HyundaiSansTextKROTFRegular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/font/fonts.css" as="style" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/site.webmanifest">
     <title>Awesome Orange - Admin</title>
   </head>
   <body>

packages/adminPage/src/features/users/index.jsx

@@ -31,7 +31,7 @@ export default function AdminCommentID() {
           type="text"
           value={formString}
           onChange={(e) => setFormString(e.target.value)}
-          placeholder="유저 성명 검색"
+          placeholder="검색"
           className="bg-neutral-50 focus:bg-white w-full px-4 py-2 rounded-lg text-body-s"
         />
 

packages/adminPage/vite.config.js

@@ -19,6 +19,7 @@ export default defineConfig({
     svgr(),
     sharedAssetRouter([
       ["/font", "/public/font"],
+      ["/favicon", "/public/favicon"],
       ["/shared", "/public"],
       ["/mockServiceWorker.js", "/public/mockServiceWorker.js"],
     ]),

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesome-orange/common",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "devDependencies": {
     "mime-types": "^2.1.35"

packages/common/src/components/PhoneInput.jsx

@@ -1,11 +1,28 @@
+import { useRef } from "react";
 import Input from "./Input.jsx";
 import { addHyphen } from "../utils.js";
 
 function PhoneInput({ text, setText, ...otherProps }) {
+  const isComposing = useRef(0);
+
   return (
     <Input
+      type="tel"
       text={text}
-      setText={(value) => setText(addHyphen(value))}
+      setText={(value) => {
+        if (isComposing.current >= 1) {
+          isComposing.current = (isComposing.current + 1) % 3;
+          return;
+        }
+        setText(addHyphen(value));
+      }}
+      onCompositionStart={() => {
+        isComposing.current = 1;
+      }}
+      onCompositionEnd={(e) => {
+        isComposing.current = 0;
+        setText(addHyphen(e.target.value));
+      }}
       placeholder="-를 제외한 숫자를 입력하세요."
       {...otherProps}
       maxLength="13"

packages/common/src/utils.js

@@ -147,7 +147,7 @@ export function getDayDifference(_date1, _date2) {
 }
 
 export function addHyphen(value) {
-  const plain = value.replace(/\D/g, "");
+  const plain = value.trim().replace(/[^0-9]/g, "");
 
   if (plain.length < 4) return plain;
   if (plain.length <= 7) return plain.replace(/^(\d{3})(\d{0,4})$/, "$1-$2");

packages/mainPage/build.js

@@ -33,6 +33,7 @@ async function processBuild() {
   await Promise.all([buildClient(), buildSSG()]);
   await Promise.all([
     copyFolder("../../public/font", `./dist/font`),
+    copyFolder("../../public/favicon", `./dist/favicon`),
     copyFolder("../../public/icons", `./dist/shared/icons`),
   ]);
   await injectSSGToHtml();