diff --git a/.github/issue_template/bug_report.md b/.github/issue_template/bug_report.md new file mode 100644 index 0000000..58c8980 --- /dev/null +++ b/.github/issue_template/bug_report.md @@ -0,0 +1,25 @@ +--- +name: Bug Report +about: 버그 제보 +title: "[Fix] 버그 설명 제목" +labels: bug +assignees: '' +--- + +## 🐞 버그 설명 +- + +## 🔁 재현 방법 +1. +2. +3. + +## 📸 스크린샷 +(선택) + +## 🔍 예상 동작 +- + +## ⚙ 환경 정보 +- OS: +- Browser: diff --git a/.github/issue_template/feature_request.md b/.github/issue_template/feature_request.md new file mode 100644 index 0000000..af3eca3 --- /dev/null +++ b/.github/issue_template/feature_request.md @@ -0,0 +1,19 @@ +--- +name: Feature Request +about: 새로운 기능 제안 +title: "[Feat] 기능 요청 제목" +labels: enhancement +assignees: '' +--- + +## ✨ 기능 설명 +- + +## 🎯 목적 +- + +## 📝 상세 요구사항 +- [ ] + +## 🔗 관련 이슈/문서 +- diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b0fe808..bbfbff8 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,3 +1,10 @@ + + + ## 🔎 What is this PR? - 예: ESLint flat config 전환 및 pre-commit 포맷팅 워크플로우 적용 diff --git a/README.md b/README.md index d2e7761..ccd014f 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,275 @@ -# React + TypeScript + Vite +# 📚 **AIM AJOU — 반응형 웹앱 SaaS 포트폴리오 관리 시스템** -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +
-Currently, two official plugins are available: +![header](https://capsule-render.vercel.app/api?type=soft\&color=0:1E3A8A,50:1E40AF,100:2563EB\&height=190\§ion=header\&text=AIM%20AJOU\&fontSize=65\&fontColor=ffffff\&animation=twinkling\&fontAlignY=45) -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +
-## React Compiler +[![Website](https://img.shields.io/badge/🚀_Live_Service-portfolio.ajou.sw.kr-1E40AF?style=for-the-badge)](https://portfolio.ajou.sw.kr) +[![Frontend Repo](https://img.shields.io/badge/📦_Frontend_Repository-181717?style=for-the-badge\&logo=github)](https://github.com/ajou-industry-matching/aim-frontend) +[![Backend Repo](https://img.shields.io/badge/🔧_Backend_Repository-181717?style=for-the-badge\&logo=github)](https://github.com/ajou-industry-matching/aim-backend) -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +
-## Expanding the ESLint configuration +**AIM AJOU**는 아주대학교 SW 전공 학생들이 +프로젝트·활동·역량을 체계적으로 기록하고, +산업 요구 기반으로 포트폴리오를 추천받을 수 있는 **웹 기반 SaaS 플랫폼**입니다. -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +
-```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... +--- - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +# 🧩 **Tech Stack** - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +
+ +### **Frontend** + +![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge\&logo=react\&logoColor=000) +![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\&logo=typescript\&logoColor=fff) +![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\&logo=vite\&logoColor=fff) +![TanStack Router](https://img.shields.io/badge/TanStack_Router-000000?style=for-the-badge) +![React Query](https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge\&logo=reactquery\&logoColor=fff) +![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge) +![TailwindCSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge\&logo=tailwindcss\&logoColor=fff) + +### **Backend** + +![Spring Boot](https://img.shields.io/badge/Spring_Boot-6DB33F?style=for-the-badge\&logo=springboot\&logoColor=fff) +![MySQL](https://img.shields.io/badge/MySQL-00618A?style=for-the-badge\&logo=mysql\&logoColor=fff) +![Nginx](https://img.shields.io/badge/Nginx-009639?style=for-the-badge\&logo=nginx\&logoColor=fff) + +### **Infra** + +![Oracle Cloud](https://img.shields.io/badge/Oracle_Cloud-F80000?style=for-the-badge\&logo=oracle\&logoColor=fff) +![Firebase](https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge\&logo=firebase\&logoColor=000) +![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge\&logo=githubactions) + +
+ +--- + +# 🏛 **프로젝트 개요** + +AIM AJOU는 다음 기능을 목표로 한다: + +* 🔐 **Firebase Auth 기반 사용자 인증** +* 📁 **프로젝트/활동 기록 관리** +* 🧠 **AI 기반 포트폴리오 구성 추천 (향후 기능)** +* 📦 **클라우드 기반 프로젝트 데이터 저장 (Firestore, Storage)** +* 🖥 **반응형 UI를 통한 학생 포트폴리오 웹뷰 제공** +* 🚀 **GitHub Actions + Firebase Hosting 자동 배포 CI/CD** + +--- + +# 📦 **폴더 구조** + +``` +aim-frontend/ + ├─ public/ + ├─ src/ + │ ├─ routes/ # Routing (TanStack Router) + │ ├─ components/ # 공용 UI + │ ├─ stores/ # Zustand 상태 관리 + │ ├─ firebase/ # Firebase 초기화 + │ ├─ lib/ # API, QueryClient 등 + │ ├─ hooks/ # Custom hooks + │ ├─ types/ # 타입 정의 + │ └─ utils/ # 유틸 함수 + ├─ .github/workflows/ # PR Preview & Live Deploy CI/CD + ├─ .husky/ # pre-commit hooks + ├─ firebase.json + ├─ firestore.rules + ├─ storage.rules + ├─ eslint.config.js # ESLint Flat Config + ├─ prettier.config.cjs + ├─ tailwind.config.js + ├─ tsconfig.json + └─ package.json +``` + +--- + +# 🛠 **개발 환경 세팅** + +## 1) Node & Package Manager + +* Node: **20.x** +* PNPM 사용 + +설치: + +```sh +brew install pnpm ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +## 2) 의존성 설치 + +```sh +pnpm install +``` + +## 3) 로컬 실행 + +```sh +pnpm dev +``` + +Local: [http://localhost:5173](http://localhost:5173) + +--- + +# 🔥 **Firebase 설정** + +환경변수 파일 `.env` 생성: + +``` +VITE_FIREBASE_API_KEY= +VITE_FIREBASE_PROJECT_ID= +VITE_FIREBASE_AUTH_DOMAIN= +VITE_FIREBASE_STORAGE_BUCKET= +VITE_FIREBASE_APP_ID= +VITE_API_URL= +``` + +--- + +# 📡 **API 통신 구조** + +Oracle VM → Nginx → Spring Boot → MySQL + +Frontend에서 모든 요청은 `src/lib/api.ts`에서 제공하는 Axios instance를 사용함. + +* 자동 Authorization 헤더 삽입 +* 에러 처리 인터셉터 +* Response 타입 안전성 확보 + +--- + +# 🧭 **Routing 구조 (TanStack Router)** + +* `/routes/_layout.tsx` : 공통 레이아웃 +* `/routes/index.tsx` : 메인 페이지 +* `/routes/login.tsx` : 로그인 +* `/routes/...` : 기능 단위 추가 + +ProtectedRoute도 구성 가능. + +--- + +# 🧠 **상태 관리 (Zustand)** + +* authStore → Firebase Auth 상태 관리 +* uiStore → 모달/토스트 관리 +* appStore → 전역 설정 + +--- + +# 🔍 **서버 상태 관리 (React Query)** + +`queryClient`를 이용한 API 캐싱/동기화. + +* staleTime +* retry 정책 +* suspense 옵션 + 등 통합적으로 관리. + +--- + +# ✨ **코드 규칙 (ESLint + Prettier)** + +### ✔ ESLint (Flat Config) + +* React/Hooks 규칙 +* TypeScript recommended +* import 정리 +* no unused variables + +### ✔ Prettier + +* 저장 시 자동 포맷팅 +* 커밋 전 자동 포맷팅 (Husky) + +--- + +# 🧹 **Git Hooks (Husky + lint-staged)** + +커밋 시 자동: + +* eslint --fix +* prettier --write + +→ 포맷팅되지 않은 코드는 커밋 불가. + +--- + +# 🌳 **브랜치 전략 (Git Flow)** + ``` +main – 운영/배포 브랜치 +dev – 개발 통합 브랜치 +feature/* – 기능 구현 +fix/* – 버그 수정 +chore/* – 설정/환경 변경 +``` + +--- + +# 🔀 **PR 규칙** + +* PR은 반드시 `feature/* → dev` 또는 `dev → main` +* 최소 1명 리뷰 승인 +* 충돌 해결 필수 +* CI 통과 필수 +* 머지는 **Squash Merge** + +--- + +# 🚀 **CI/CD – GitHub Actions + Firebase Hosting** + +### PR 생성 → + +* 빌드 검사 +* ESLint 검사 +* Firebase Preview URL 자동 생성 + +### main에 머지 → + +* Firebase Hosting Live 자동 배포 + +--- + +# 🔐 **Firebase 보안 규칙** + +### Firestore + +* 인증 필요 (read/write 제한) +* 프로젝트/활동 데이터 접근 제어 + +### Storage + +* 이미지/파일 업로드 권한 통제 + +--- + +# 📅 **로드맵 (Roadmap)** + +* 🔧 어드민 페이지 개발 +* 🧠 포트폴리오 AI 추천 엔진 탑재 +* 🗂 사용자별 추천 프로젝트 템플릿 생성 +* 📊 프로젝트/경력 자동 분석 대시보드 +* ⏱ 성능 모니터링 도입 (Sentry 예정) +* 🧪 테스트 도입 (Vitest) + +--- + +# 🙋‍♀️ 문의 / Issue / 협업 + +* 기능 제안 → Issue +* 코드 리뷰 → PR +* 버그 제보 → Issue +* 문서/설정 변경 → chore 브랜치 + +--- +