settings: develop -> main

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy
+
+on:
+  push:
+    branches: ['develop']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+
+      - name: creates output
+        run: sh ./build.sh
+
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+        with:
+          source-directory: 'output'
+          destination-github-username: waldls
+          destination-repository-name: DeviceLife_Frontend
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: develop
+
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

.github/workflows/preview.yml

@@ -0,0 +1,43 @@
+name: Preview
+
+on:
+  pull_request:
+    branches: ['develop']
+
+jobs:
+  vercel-preview:
+    runs-on: ubuntu-latest
+
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest && npm install --global pnpm
+      - name: Get Vercel Environment Variables
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        id: deploy
+
+        run: |
+
+          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > vercel-output.txt
+          echo "preview_url=$(cat vercel-output.txt)" >> $GITHUB_OUTPUT
+
+      - name: Comment PR with Preview URL
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            ✅ PREVIEW ${{ steps.deploy.outputs.preview_url }}
+
+permissions:
+  contents: read
+  pages: write
+  deployments: write
+  id-token: write
+  issues: write
+  pull-requests: write

.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sln
 *.sw?
 .env
+.vercel
+.env*.local

.vscode/settings.json

@@ -1,5 +1,10 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.validate": ["typescript", "typescriptreact"]
+  "eslint.validate": ["typescript", "typescriptreact"],
+
+  "[typescript]": { "editor.formatOnSave": false },
+  "[typescriptreact]": { "editor.formatOnSave": false },
+
+  "prettier.prettierPath": "./node_modules/prettier"
 }

README.md

@@ -1,75 +1,82 @@
 # 📱Device Life - Frontend
-> 수많은 디바이스 중 유저에게 최적의 조합을 제공하다
+> 최적의 기기조합 웹 서비스
 > UMC 9th Project - Client Repository
 
+![KakaoTalk_20260212_224313434](https://github.com/user-attachments/assets/2deaa37b-9ce5-4c96-9201-beccaff84793)
+
 ## 📖 프로젝트 소개 (Project Overview)
-이 저장소는 Device Life의 클라이언트 애플리케이션 코드를 관리합니다. 사용자가 직관적으로 기기를 탐색하고, 조합을 생성하며, 실시간으로 시각적인 평가 피드백을 받을 수 있는 UI/UX 구현에 집중합니다.
+이 저장소는 최적의 기기 조합 추천 서비스 'Device Life'의 웹 클라이언트 코드를 관리합니다. 사용자가 수많은 스마트 기기 사이에서 자신에게 맞는 최적의 조합을 찾을 수 있도록, 직관적인 탐색 경험과 로직 기반의 실시간 평가 피드백을 제공하는 완성도 높은 UI/UX 구현에 집중합니다.
 
 ### ✨ 프론트엔드 핵심 기능 (Key Features)
-* 조합 워크스페이스 UI: 기기 추가/삭제 시 부드러운 인터랙션 및 상태 관리 구현
-* 실시간 평가 피드백: 생태계, 충전, 컬러 점수 데이터를 시각적 그래프나 수치로 즉시 렌더링
-* 기기 탐색 및 필터 UI: 가격대 조절을 위한 Range Slider 컴포넌트 및 카테고리 칩 구현
-* 라이프스타일 선택: 이미지 카드 및 브랜드 로고를 활용한 직관적인 사용자 입력 인터페이스
-* 인터랙션: 내 조합 라이브러리의 스와이프 삭제 및 모달 애니메이션 처리
+- 동적 유저 권한 및 GNB 렌더링: 로그인 유무 및 온보딩 상태에 따라 메뉴 구성과 접근 권한 제어
+- 온보딩 플로우: 신규 유저를 위한 스플래시 화면, 라이프스타일 태그 선택, 첫 조합 생성으로 이어지는 단계별 폼 위저드 구현
+- 다중 필터 기반 기기 탐색: 카테고리 칩, 단일/다중 체크박스 필터, 4가지 정렬 옵션을 조합한 검색 인터페이스 제공
+- 조합 담기 시스템: 현재 선택된 조합 상태를 유지하며 중복 저장
+- 라이프스타일 자동 로테이션: 유저 액션에 반응하여 정지/재생되는 시각적 태그 로테이션 및 기기 큐레이션 카드 구현
+- 로직 기반 평가 리포트: 기기 간 연동성, 편의성, 라이프스타일 적합도 분석 내용을 마이페이지 내 한 줄 평가 리포트로 렌더링
 
 ---
+## 🧑🏻‍💻 팀원 (Contributors)
+
+| <img src="https://github.com/waldls.png" width="150" height="150"/> | <img src="https://github.com/Seony777.png" width="150" height="150"/> | <img src="https://github.com/H-un1.png" width="150" height="150"/> |
+| :---------------------------------------------------------------: | :-----------------------------------------------------------------: | :---------------------------------------------------------------: |
+| 박유민 <br/> [@waldls](https://github.com/waldls) | 이선우 <br/> [@Seony777](https://github.com/Seony777) | 임병훈 <br/> [@H-un1](https://github.com/H-un1) |
+| **Frontend Lead** | **Frontend** | **Frontend** |
 
-## 🛠️ 기술 스택 (Tech Stack)
-| Category | Technology |
-| :--- | :--- |
-| **Language & Framework** | ![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?style=flat&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=black) ![Vite](https://img.shields.io/badge/-Vite-646CFF?style=flat&logo=vite&logoColor=white) |
-| **Styling** | ![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white) |
-| **State Management** | **Zustand** (Client), **TanStack Query** (Server) |
-| **Data Fetching** | Axios, TanStack Query |
-| **Tools** | ESLint, Prettier, npm |
-| **DevOps** | Git, GitHub, Vercel |
 
 ---
+## 🛠️ 기술 스택 (Tech Stack)
 
-## 🌐 Git-flow 전략 (Git-flow Strategy)
+| 역할 | 종류 | 선정 근거 |
+| :-- | :-- | :-- |
+| **Language & Framework** | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black) ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) | TypeScript로 타입 안정성을 확보하고, React 기반 컴포넌트 UI를 구성했으며, Vite의 빠른 번들링과 HMR로 개발 생산성을 높였습니다. |
+| **Styling** | ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) | 유틸리티 기반 스타일링으로 빠르고 일관된 UI를 구현했습니다. |
+| **UI Utilities** | ![SVGR](https://img.shields.io/badge/SVGR-FFB13B?style=for-the-badge&logo=svg&logoColor=black) ![clsx](https://img.shields.io/badge/clsx-000000?style=for-the-badge) | SVGR로 SVG를 React 컴포넌트로 관리해 재사용성을 높였고, clsx로 조건부 className 로직을 간결하게 처리했습니다. |
+| **State Management** | ![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logoColor=white) ![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white) | Zustand로 클라이언트 상태를 간단히 관리하고, TanStack Query로 서버 상태/캐싱을 선언적으로 관리했습니다. |
+| **Data Fetching** | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white) ![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white) | Axios로 HTTP 요청을 처리하고, TanStack Query로 요청 상태/캐싱/동기화 관리를 수행했습니다. |
+| **Tools** | ![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black) | ESLint로 코드 규칙을 통일하고, Prettier로 포맷을 자동화해 일관된 코드 스타일을 유지했습니다. |
+| **DevOps** | ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white) ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) | Git/GitHub로 버전 관리 및 협업을 진행하고, Vercel로 배포 자동화 및 CI/CD 과정을 간소화했습니다. |
+| **Package Manager** | ![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) | 표준 패키지 매니저(npm)를 사용하여 의존성 설치 및 관리를 수행했습니다. |
+| **Validation** | ![Zod](https://img.shields.io/badge/Zod-3E67B1?style=for-the-badge&logo=zod&logoColor=white) | Zod로 API 응답 및 폼 입력 값을 스키마 기반으로 검증해 런타임 오류를 줄이고 타입 안정성을 강화했습니다. |
+| **Collaboration** | ![Notion](https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white) ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white) ![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white) | Notion을 통한 문서화와 프로젝트 자료 관리, Figma 기반 디자인 협업, Discord를 활용한 실시간 커뮤니케이션으로 팀 협업 효율을 높였습니다. |
 
-* main: 최종적으로 사용자에게 배포되는 가장 안정적인 버전 브랜치
-* develop: 다음 출시 버전을 개발하는 중심 브랜치. 기능 개발 완료 후 feature 브랜치들이 병합
-* feature: 기능 개발용 브랜치. develop에서 분기하여 작업
 
 ---
+## 📎 컨벤션 (Conventions)
+
+- 🍃 [Commit Convention](https://www.notion.so/Commit-Convention-305c82f125c980898111df6891b25578?source=copy_link)
+- 🪵 [Branch Convention](https://www.notion.so/Branch-Convention-305c82f125c980afaecfdc5b00ad1f71?source=copy_link)
+- 💻 [Coding Convention](https://www.notion.so/Coding-Convention-2dac82f125c980a8810bca8fadbe8b5f?source=copy_link)
+- 📢 [API Convention](https://www.notion.so/API-Convention-2e0c82f125c9805bb0c3c22fda770978?source=copy_link)
+- 📌 [Issue Convention](https://www.notion.so/Issue-Convention-305c82f125c980029b7ce00b73962f66?source=copy_link)
+- ✅ [PR Convention](https://www.notion.so/PR-Convention-305c82f125c9809e98ebe702534bf18a?source=copy_link)
+- 📁 [Folder Structure Convention](https://www.notion.so/Folder-Structure-Convention-2d4c82f125c98112bd64d946da9d2f34?source=copy_link)
 
-## 📌 브랜치 규칙 및 네이밍 (Branch Rules & Naming)
+---
 
-* 모든 기능 개발은 feature 브랜치에서 시작
-* 작업 시작 전, 항상 최신 develop 내용 받아오기 (git pull origin develop)
-* 작업 완료 후, develop으로 Pull Request(PR) 생성
-* PR에 Reviewer(멘션) 지정 이후 머지
-* 브랜치 이름 형식: feature/이슈번호-기능명
-* 예시: feature/1-login-ui
+## 🤝 그라운드 룰 (Ground Rules)
 
+- **연락 자주 확인하기**
+  - 디스코드/카카오톡 알림을 자주 확인합니다.
+
+- **적극적으로 의견 공유하기**
+  - 막히는 부분이나 변경 사항이 생기면 빠르게 공유합니다.
+
+- **PR Merge 규칙**
+  - 기본적으로 전원 Approve 후 Merge하며, PR 작성자가 브랜치를 삭제합니다.
+  - 단, 여행 등 개인 일정으로 확인이 어려운 경우, 해당 인원을 제외한 팀원의 Approve로 Merge 가능합니다.
+
+- **라이브러리 설치 공유**
+  - 작업 중 새로운 라이브러리를 설치한 경우, 디스코드 스레드에 댓글로 공유합니다.
+
+- **Figma 수치 규칙**
+  - 디자이너님께서 별도로 안내한 경우를 제외하고, 가장 가까운 4의 배수로 스냅하여 적용합니다.
+
 ---
 
-## 🎯 커밋 컨벤션 (Commit Convention)
-
-### 주의 사항
-* type은 소문자만 사용 (feat, fix, refactor, docs, style, test, chore)
-* subject는 모두 현재형 동사
-
-### 📋 타입 목록
-
-| type | 설명 |
-| :--- | :--- |
-| start | 새로운 프로젝트를 시작할 때 |
-| feat | 새로운 기능을 추가할 때 |
-| fix | 버그를 수정할 때 |
-| design | CSS 등 사용자 UI 디자인을 변경할 때 |
-| refactor | 기능 변경 없이 코드를 리팩토링할 때 |
-| settings | 설정 파일을 변경할 때 |
-| comment | 필요한 주석을 추가하거나 변경할 때 |
-| dependency/Plugin | 의존성/플러그인을 추가할 때 |
-| docs | README.md 등 문서를 수정할 때 |
-| merge | 브랜치를 병합할 때 |
-| deploy | 빌드 및 배포 관련 작업을 할 때 |
-| rename | 파일 혹은 폴더명을 수정하거나 옮길 때 |
-| remove | 파일을 삭제하는 작업만 수행했을 때 |
-| revert | 이전 버전으로 롤백할 때 |
-
-### ✨ 예시
-* feat: 컴포넌트 추가
-* fix: 가려짐 현상 해결
+## 📰 아티클 모음 (Articles)
+
+| 이름      | 아티클 제목                                                                                                                                                                                                               |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 🍒 박유민 | [상태 기반 인터랙션 구현기](https://velog.io/@waldls/Frontend-%EC%83%81%ED%83%9C-%EA%B8%B0%EB%B0%98-%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98-%EA%B5%AC%ED%98%84%EA%B8%B0)                                                                                                                                                                   |
+| 🍀 이선우 | [Device Life Auth 시스템 구현 회고](https://www.notion.so/Device-Life-Auth-305564e055eb8007a616fde7ddb853d7?source=copy_link)                                                                                                                                                          |

build.sh

@@ -0,0 +1,4 @@
+cd ../
+mkdir output
+cp -R ./Frontend/* ./output
+cp -R ./output ./Frontend/

index.html

@@ -2,9 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/devicelife.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DeviceLife</title>
+    <title>Device Life</title>
+    <meta name="description" content="나에게 딱 맞는 최적의 기기 조합을 찾아보세요" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Device Life" />
+    <meta property="og:title" content="Device Life" />
+    <meta property="og:description" content="나에게 딱 맞는 최적의 기기 조합을 찾아보세요" />
+    <meta property="og:url" content="https://devicelife.site" />
+    <meta property="og:image" content="https://devicelife.site/og-thumbnail.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Device Life" />
+    <meta name="twitter:description" content="나에게 딱 맞는 최적의 기기 조합을 찾아보세요" />
+    <meta name="twitter:image" content="https://devicelife.site/og-thumbnail.png" />
+
+    <meta property="kakao:title" content="Device Life" />
+    <meta property="kakao:description" content="나에게 딱 맞는 최적의 기기 조합을 찾아보세요" />
+    <meta property="kakao:image" content="https://devicelife.site/og-thumbnail.png" />
   </head>
   <body>
     <div id="root"></div>