diff --git a/README.md b/README.md index 52db073..7dbbd85 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,65 @@ -![Image](https://github.com/user-attachments/assets/2fff7665-01c5-436d-ad66-cf17aec7ee71) + -# 프로젝트 소개 +## 💌 가치소비를 일상으로, 모락에서 함께하세요! -## ☁️ 모락이란? +![Image](https://github.com/user-attachments/assets/375a8f56-3eef-4007-9eda-ab90832de409) + +### ☁️ 프로젝트 소개 > 🤔 어렵기만 한 가치 소비, 어떻게 시작할 수 있을까요? -> -‘서울에 이런 사회적 기업이 있었어?’ **모락은 공공 데이터를 기반으로, 우리 주변의 사회적 기업을 지도로 보여주는 플랫폼**이에요.
-어디서 뭘 찾아야 할지 막막했던 정보들, 모락은 공공 데이터를 바탕으로 한눈에 보여드려요. -UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이제 더 가볍게 시작해보세요. -
-
+‘서울에 이런 사회적 기업이 있었어?’ **모락은 공공 데이터를 기반으로, 우리 주변의 사회적 기업을 지도로 보여주는 플랫폼이에요.** 어디서 뭘 찾아야 할지 막막했던 정보들, 모락은 **공공 데이터를 바탕으로 한눈에 보여드려요.** + +UI는 직관적으로, 정보는 짧고 핵심만. **가치 있는 소비**, 이제 더 가볍게 시작해보세요. + +### 🌟 주요 기능 + +![Image](https://github.com/user-attachments/assets/cd0d3f0e-e03b-4ac8-b0ba-a591698c767a) + +![Image](https://github.com/user-attachments/assets/3bcd3e66-e922-4c86-8ac2-a928c8432734) + +![Image](https://github.com/user-attachments/assets/704fbbc9-d1b3-49c0-bb57-2e533303ace9) + +![Image](https://github.com/user-attachments/assets/6436a5a7-dad0-445a-a861-2212155a9aa3) -## 기능 소개 -![Image](https://github.com/user-attachments/assets/18dd02e2-907c-4727-a531-e15bb2e2117b) -![Image](https://github.com/user-attachments/assets/ebcb9c65-b066-4487-87a0-84c8b4dd5afc) -![Image](https://github.com/user-attachments/assets/529eb68e-b0ab-42b9-bdfe-355430b135c2) -![Image](https://github.com/user-attachments/assets/bba8a0e8-4f13-4b58-8856-274b9a7adcf7) -![Image](https://github.com/user-attachments/assets/4a7091e9-55ab-440d-a646-cbbd19c69e34) +![Image](https://github.com/user-attachments/assets/af5efe23-fd79-47f0-8204-094173d89d5d) -
+### 📍 IA -## IA -![Image](https://github.com/user-attachments/assets/fd6c54c5-b379-48c4-a3d7-64e1e65e1d55) +![Image](https://github.com/user-attachments/assets/f3d7e34a-0664-47b0-8fde-0887820c6eb3) -
-## 👩🏻‍💻 FE Developers +## 👩🏻‍💻 팀원 소개 | | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | | 노찬영
[@shroqfk](https://github.com/shroqfk) | 원윤서
[@dbstj0403](https://github.com/dbstj0403) | -
- ## 🛠 기술 스택
| 역할 | 종류 | 선정 이유 | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Library** | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | 컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와 생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이. | -| **Programming Language** | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) | 정적 타입 지원으로 코드 안정성을 높이고, 디버깅 및 유지보수성 강화. | -| **Styling** | ![TailwindCSS 3](https://img.shields.io/badge/TailwindCSS-3-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) ![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white) | 유틸리티 클래스 기반으로 빠르게 UI를 구성하고, 반응형 대응 용이. | -| **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%20Query-FF4154?style=for-the-badge&logo=react-query&logoColor=white) | 서버 상태와 비동기 요청을 효율적으로 캐싱 및 동기화 가능. | -| **API Documentation** | ![Swagger](https://img.shields.io/badge/Swagger-85EA2D?style=for-the-badge&logo=Swagger&logoColor=black) | API 문서화를 위한 표준 도구로, 팀 간 소통과 유지보수 용이. | -| **Routing** | ![React Router](https://img.shields.io/badge/React%20Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) | SPA 라우팅을 선언적으로 구성할 수 있어 페이지 전환과 인증 흐름 관리에 적합. | -| **Linter & Formatter** | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Stylelint](https://img.shields.io/badge/stylelint-333333?style=for-the-badge&logo=stylelint&logoColor=white") ![Husky](https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=husky&logoColor=white) ![Lint-Staged](https://img.shields.io/badge/Lint_Staged-000000?style=for-the-badge&logo=lint-staged&logoColor=white)| 코드 일관성을 유지하고 커밋 전 자동 검사로 오류 발생 가능성을 낮춤. | -| **Animation** | ![Framer Motion](https://img.shields.io/badge/Framer_Motion-EF008F?style=for-the-badge&logo=framer&logoColor=white) | 자연스러운 UI 전환 애니메이션으로 사용자 경험을 향상. | -| **Chart** | ![Recharts](https://img.shields.io/badge/Recharts-FF6384?style=for-the-badge&logo=recharts&logoColor=white) | 직관적인 API와 반응형 차트 지원으로 데이터 시각화에 적합. | -| **Swiper UI** | ![Swiper](https://img.shields.io/badge/Swiper-6332F6?style=for-the-badge&logo=swiper&logoColor=white) | 모바일 친화적인 슬라이드 구현이 간편하고, 다양한 커스터마이징 가능. | -| **State Management** | ![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logo=zustand&logoColor=white) | 가볍고 직관적인 API로 글로벌 상태 관리를 간결하게 구현 가능. | -| **Package Manager** | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) | 의존성 관리를 빠르고 효율적으로 처리하며, workspace 기능으로 프로젝트 관리가 용이. | -| **Deployment** | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) | GitHub와의 연동으로 푸시만으로도 자동 배포가 가능해 프로젝트의 빠르고 쉬운 배포를 지원. | -| **Bundler & Plugin** | ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![Vite PWA](https://img.shields.io/badge/Vite_PWA-646CFF?style=for-the-badge&logo=pwa&logoColor=white) ![SVGR](https://img.shields.io/badge/SVGR-FFB13B?style=for-the-badge&logo=svgr&logoColor=white) | 번들링 속도가 빠르고, SVG를 React 컴포넌트로 변환하거나 PWA 설정을 손쉽게 할 수 있음. | | - +| **Library** | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | 컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와 생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이 | +| **Programming Language** | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) | 정적 타입 지원으로 코드 안정성을 높이고, 디버깅 및 유지보수성 강화 | +| **Styling** | ![TailwindCSS 3](https://img.shields.io/badge/TailwindCSS-3-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) ![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white) | 유틸리티 클래스 기반으로 빠르게 UI를 구성하고, 반응형 대응 용이 | +| **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%20Query-FF4154?style=for-the-badge&logo=react-query&logoColor=white) | 서버 상태와 비동기 요청을 효율적으로 캐싱 및 동기화 가능 | +| **API Documentation** | ![Swagger](https://img.shields.io/badge/Swagger-85EA2D?style=for-the-badge&logo=Swagger&logoColor=black) | API 문서화를 위한 표준 도구로, 팀 간 소통과 유지보수 용이 | +| **Routing** | ![React Router](https://img.shields.io/badge/React%20Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) | SPA 라우팅을 선언적으로 구성할 수 있어 페이지 전환과 인증 흐름 관리에 적합 | +| **Linter & Formatter** | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Stylelint](https://img.shields.io/badge/stylelint-333333?style=for-the-badge&logo=stylelint&logoColor=white") ![Husky](https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=husky&logoColor=white) ![Lint-Staged](https://img.shields.io/badge/Lint_Staged-000000?style=for-the-badge&logo=lint-staged&logoColor=white)| 코드 일관성을 유지하고 커밋 전 자동 검사로 오류 발생 가능성을 낮춤 | +| **Animation** | ![Framer Motion](https://img.shields.io/badge/Framer_Motion-EF008F?style=for-the-badge&logo=framer&logoColor=white) | 자연스러운 UI 전환 애니메이션으로 사용자 경험을 향상 | +| **Chart** | ![Recharts](https://img.shields.io/badge/Recharts-FF6384?style=for-the-badge&logo=recharts&logoColor=white) | 직관적인 API와 반응형 차트 지원으로 데이터 시각화에 적합 | +| **Swiper UI** | ![Swiper](https://img.shields.io/badge/Swiper-6332F6?style=for-the-badge&logo=swiper&logoColor=white) | 모바일 친화적인 슬라이드 구현이 간편하고, 다양한 커스터마이징 가능 | +| **State Management** | ![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logo=zustand&logoColor=white) | 가볍고 직관적인 API로 글로벌 상태 관리를 간결하게 구현 가능 | +| **Package Manager** | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) | 의존성 관리를 빠르고 효율적으로 처리하며, workspace 기능으로 프로젝트 관리가 용이 | +| **Deployment** | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) | GitHub와의 연동으로 푸시만으로도 자동 배포가 가능해 프로젝트의 빠르고 쉬운 배포를 지원 | +| **Bundler & Plugin** | ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![Vite PWA](https://img.shields.io/badge/Vite_PWA-646CFF?style=for-the-badge&logo=pwa&logoColor=white) ![SVGR](https://img.shields.io/badge/SVGR-FFB13B?style=for-the-badge&logo=svgr&logoColor=white) | 번들링 속도가 빠르고, SVG를 React 컴포넌트로 변환하거나 PWA 설정을 손쉽게 할 수 있음 | |
-
-
- -# 🔗 Git Convention ## 🍃 Branch Convention + - **`main`** - 배포용 브랜치 - **`develop`** @@ -71,45 +67,42 @@ UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이 - **`feature/#이슈번호/개발 내용`** - 기능 단위 브랜치 -
- ## 👾 Commit Convention -### 📦 초기 설정 +**📦 초기 설정** - `Init` – 프로젝트 초기 세팅에만 사용 -### ✨ 기능 관련 +**✨ 기능 관련** - `Feat` – 새로운 기능 추가 - `Fix` – 버그 수정 - `!HOTFIX` – 치명적인 긴급 버그 수정 -### 🎨 스타일 및 디자인 +**🎨 스타일 및 디자인** -- `Style` – 코드 로직 변경 없이 스타일만 수정 +- `Style` – 코드 로직 변경 없이 스타일만 수정 - `Design` – UI/UX 중심의 사용자 화면 디자인 변경 -### 🔁 코드 개선 +**🔁 코드 개선** - `Refactor` – 기능 변경 없이 코드 리팩토링 - `Comment` – 주석 추가 또는 수정 -### 🧹 파일 및 구조 +**🧹 파일 및 구조** - `Rename` – 파일 또는 폴더 이름 변경 또는 이동 - `Remove` – 파일 삭제만 수행 -### 🧪 테스트 및 기타 +**🧪 테스트 및 기타** - `Test` – 테스트 코드 추가 또는 리팩토링 - `Docs` – 문서 추가, 수정, 삭제 - `Chore` – 기타 자잘한 변경 (코드 변경 없이 설정 등) -
+## 🏷️ 폴더 구조 -## 📂 프로젝트 구조 -```plaintext +``` 📁 .github // GitHub 워크플로우 및 PR 템플릿 📁 node_modules // 의존성 모듈 📁 public // 정적 파일 (index.html 등) @@ -139,3 +132,5 @@ tailwind.config.js // TailwindCSS 사용자 설정파일 vite.config.js // Vite 설정 파일 package.json // 프로젝트 메타 및 의존성 ``` + +