💌 가치소비를 일상으로, 모락에서 함께하세요!

☁️ 프로젝트 소개

🤔 어렵기만 한 가치 소비, 어떻게 시작할 수 있을까요?

‘서울에 이런 사회적 기업이 있었어?’ 모락은 공공 데이터를 기반으로, 우리 주변의 사회적 기업을 지도로 보여주는 플랫폼이에요. 어디서 뭘 찾아야 할지 막막했던 정보들, 모락은 공공 데이터를 바탕으로 한눈에 보여드려요.

UI는 직관적으로, 정보는 짧고 핵심만. 가치 있는 소비, 이제 더 가볍게 시작해보세요.

🌟 주요 기능

📍 IA

👩🏻‍💻 팀원 소개

노찬영 @shroqfk	원윤서 @dbstj0403

🛠 기술 스택

역할	종류	선정 이유
Library		컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와 생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이
Programming Language		정적 타입 지원으로 코드 안정성을 높이고, 디버깅 및 유지보수성 강화
Styling		유틸리티 클래스 기반으로 빠르게 UI를 구성하고, 반응형 대응 용이
Data Fetching		서버 상태와 비동기 요청을 효율적으로 캐싱 및 동기화 가능
API Documentation		API 문서화를 위한 표준 도구로, 팀 간 소통과 유지보수 용이
Routing		SPA 라우팅을 선언적으로 구성할 수 있어 페이지 전환과 인증 흐름 관리에 적합
Linter & Formatter		코드 일관성을 유지하고 커밋 전 자동 검사로 오류 발생 가능성을 낮춤
Animation		자연스러운 UI 전환 애니메이션으로 사용자 경험을 향상
Chart		직관적인 API와 반응형 차트 지원으로 데이터 시각화에 적합
Swiper UI		모바일 친화적인 슬라이드 구현이 간편하고, 다양한 커스터마이징 가능
State Management		가볍고 직관적인 API로 글로벌 상태 관리를 간결하게 구현 가능
Package Manager		의존성 관리를 빠르고 효율적으로 처리하며, workspace 기능으로 프로젝트 관리가 용이
Deployment		GitHub와의 연동으로 푸시만으로도 자동 배포가 가능해 프로젝트의 빠르고 쉬운 배포를 지원
Bundler & Plugin		번들링 속도가 빠르고, SVG를 React 컴포넌트로 변환하거나 PWA 설정을 손쉽게 할 수 있음

🍃 Branch Convention

• main
  • 배포용 브랜치
• develop
  • 개발 통합용 브랜치
• feature/#이슈번호/개발 내용
  • 기능 단위 브랜치

👾 Commit Convention

📦 초기 설정

• Init – 프로젝트 초기 세팅에만 사용

✨ 기능 관련

• Feat – 새로운 기능 추가
• Fix – 버그 수정
• !HOTFIX – 치명적인 긴급 버그 수정

🎨 스타일 및 디자인

• Style – 코드 로직 변경 없이 스타일만 수정
• Design – UI/UX 중심의 사용자 화면 디자인 변경

🔁 코드 개선

• Refactor – 기능 변경 없이 코드 리팩토링
• Comment – 주석 추가 또는 수정

🧹 파일 및 구조

• Rename – 파일 또는 폴더 이름 변경 또는 이동
• Remove – 파일 삭제만 수행

🧪 테스트 및 기타

• Test – 테스트 코드 추가 또는 리팩토링
• Docs – 문서 추가, 수정, 삭제
• Chore – 기타 자잘한 변경 (코드 변경 없이 설정 등)

🏷️ 폴더 구조

📁 .github            // GitHub 워크플로우 및 PR 템플릿
📁 node_modules       // 의존성 모듈
📁 public             // 정적 파일 (index.html 등)
📁 src
├── apis/            // Axios API 모듈
├── assets/          // 이미지, SVG 등 정적 리소스
├── components/      // 공통 UI 컴포넌트
├── constants/       // 상수 및 매핑 객체
├── hooks/           // 커스텀 훅
├── pages/           // 라우트별 페이지
│   ├── 페이지1/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── constants/
│   │   ├── utils/
│   │   └── hooks/
│   └── 페이지2/
├── routes/          // 라우터 설정
├── store/           // Zustand 상태 저장소
├── styles/          // 글로벌 및 유틸리티 스타일
└── utils/           // 공통 유틸 함수

.env                 // 환경변수 설정
.gitignore           // Git 추적 제외 설정
eslint.config.js     // ESLint 설정
tailwind.config.js   // TailwindCSS 사용자 설정파일
vite.config.js       // Vite 설정 파일
package.json         // 프로젝트 메타 및 의존성