Skip to content

BrainPix/BrainPix-front

Repository files navigation

창의적인 사람들의 공간 BrainPIX

image


배포 URL

🔗 https://www.brainpix.net

테스트 ID: a1sw110
테스트 PW: aa123123


프로젝트 실행

// 1️⃣ 저장소 클론
git clone https://github.com/yourusername/brainpix.git

// 2️⃣ 패키지 설치
npm install

// 3️⃣ 개발 서버 실행
npm run dev

✨ 실행 전 환경 변수를 설정해주세요!

프로젝트 루트 폴더에 '.env'을 생성 후, 아래를 붙여넣어주세요.

VITE_BASE_URL=https://api.brainpix.net
VITE_S3_URL=https://brainpix.s3.ap-northeast-2.amazonaws.com

프로젝트 소개

BrainPIX는 사람들이 자신의 아이디어를 공유하고 판매하거나, 협력자를 찾을 수 있는 플랫폼입니다.
기업과 개인 모두 아이디어를 제안하여 협력자를 찾거나 거래할 수 있습니다.


사용자 기능

  • 💡 아이디어 거래: 자신의 아이디어를 사고팔 수 있습니다.
  • 👥 협업 찾기: 프로젝트에 적합한 팀원을 찾을 수 있습니다.
  • 🚀 요청 과제: 직원 채용 없이 요청 과제를 등록하고, 신청할 수 있습니다.

팀원 소개

권소현 김민정 임가희 최규호

개발 환경

기술스택



협업 툴

CI/CD


채택한 개발 기술과 브랜치 전략

React (TypeScript), SCSS

  • React (TypeScript)
    • TypeScript를 사용하여 타입 안전성을 확보하고, 코드의 안정성을 높였습니다.
    • 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
  • SCSS
    • SCSS는 클래스 이름을 고유하게 부여할 수 있어, 일관된 네이밍 컨벤션을 유지하는 데 필요한 비용을 절약할 수 있어 채택하였습니다.

React Query, Axios

eslint, prettier

  • 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 하고 있습니다.
  • 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용하고 있습니다.
  • airbnb의 코딩 컨벤션을 참고하고 있습니다.
  • 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적에 두었습니다.

브랜치 전략

  • Git-flow 전략을 기반으로 main, develop 브랜치를 운용했습니다.
  • main, develop 브랜치로 나누어 개발을 하였습니다.
    • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
    • develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.

프로젝트 구조

BRAINPIX-front
┣ 📜README.md
┣ 📜.eslintrc.js
┣ 📜.gitignore
┣ 📜.prettierrc
┣ 📜.stylelintrc.json
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜tsconfig.app.json
┣ 📜tsconfig.node.json
┣ 📜vite.config.ts
📦src
 ┣ 📂apis
 ┣ 📂assets
 ┃ ┣ 📂icons
 ┃ ┗ 📂images
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂button
 ┃ ┃ ┃ ┣ 📜ButtonGroup.tsx
 ┃ ┃ ┃ ┗ 📜buttonGroup.module.scss
 ┃ ┃ ┣  ...
 ┃ ┣ 📂my-page
 ┃ ┃ ┣ 📂info
 ┃ ┃ ┣ 📂message
 ┃ ┃ ┣ ...
 ┣ 📂constants
 ┣ 📂contexts
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂collaboration
 ┃ ┃ ┣ 📜CollaborationMain.tsx
 ┃ ┃ ┣ 📜collaborationMain.module.scss
 ┃ ┃ ┣ ...
 ┃ ┣ 📂errorPage
 ┃ ┣ 📂idea-market
 ┃ ┣ ...
 ┣ 📂styles
 ┃ ┣ 📜_buttons.scss
 ┃ ┣ 📜_colors.scss
 ┃ ┣ 📜_components.scss
 ┃ ┣ 📜_fonts.scss
 ┃ ┣ 📜_layout.scss
 ┃ ┣ 📜_mixins.scss
 ┃ ┣ 📜_reset.scss
 ┃ ┣ 📜global.scss
 ┃ ┣ 📜main.scss
 ┃ ┗ 📜quillStyles.css
 ┣ 📂types
 ┣ 📜App.tsx
 ┣ 📜global.d.ts
 ┣ 📜main.tsx
 ┣ 📜routes.tsx
 ┣ 📜seoMetaTag.tsx
 ┗ 📜vite-env.d.ts

About

아좌아좌

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 5