창의적인 사람들의 공간 BrainPIX

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

사용자 기능

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

구현 내용

[ 전반적인 프로젝트 세팅 ]

• GitHub Actions를 활용하여 CI/CD 자동화
• stylint, eslint, prettier을 적용하여 코드의 일관성, 통일성 유지
• 특정 색상, 폰트 사이즈를 지정하여 글로벌 변수로 설정

[ 공통 컴포넌트 구현 ]

1. Toast
   • 토스트 컴포넌트를 타입별로 구현 ( 에러, 성공, 일반 )
   • 토스트의 상태를 Context API로 관리
   • 토스트의 사용 로직이 단순해짐
2. Image
   • 이미지 url 에러 상황 및 빈 url 문자열일 경우 처리를 위한 함수 구현
   • 모든 코드에는 img 태그 대신 Image 컴포넌트를 적용
3. 캐러셀
   • 버튼이 위, 가운데 있을 경우 두 가지 타입을 하나의 컴포넌트로 구현
   • 재사용성을 높이고, 코드의 중복 감소
4. 헤더
   • 로컬 스토리지를 활용한 최근 검색어 기능 구현
   • 검색창에 디바운스 적용하여 빈번한 이벤트 발생 제어

[ 페이지 구현 ]

1. 마이페이지 - 메인 (최근 기록, 알림)
   • intersectionObserverAPI 커스텀 훅을 구현하여 무한 스크롤 구현
2. 마이페이지 - 내 정보
3. 마이페이지 - 포트폴리오
4. 마이페이지 - 메신저
5. 로그인/회원가입 페이지
   • react-hook-form을 이용해 폼데이터를 관리 및 유효성 검사를 적용하여 리렌더링 횟수 감소

기술적 기능 및 최적화

• 🔀 CI/CD 자동화 파이프라인 구축
  • GitHub Actions를 활용하여 CI/CD 자동화
  • 배포 전 코드 lint, stylelint 및 빌드 오류 자동 검출
  • develop 브랜치 동기화 시 vercel을 통한 자동 배포 실행
• 🥪 Context API 기반 토스트 컴포넌트 구현
  • 커스텀 토스트 컴포넌트 직접 구현
  • Context API를 활용한 전역 상태 관리
  • 어디서든 쉽게 호출 가능하도록 최적화
• 🔀 rollup-plugin-visualizer을 이용한 번들링 최적화 진행
  • rollup-plugin-visualizer를 활용하여 번들 사이즈를 시각적으로 확인
  • react-quill-new 라이브러리의 텍스트 에디터를 컴포넌트화하여 lazy import 적용
  • 초기 빌드 시간 단축 및 번들 크기 감소
• 🔀 react-helmet-async를 활용한 SEO 최적화
  • react-helmet-async를 사용하여 페이지별로 제목(title), 설명(description), Open Graph(OG) 메타태그 동적 적용

팀원 소개

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

개발 환경

기술스택

협업 툴

CI/CD

채택한 개발 기술과 선정 이유

React (TypeScript)

• React (TypeScript)
  • 사용자와의 상호작용이 많은 프로젝트이기에 react를 선정
  • TypeScript를 사용하여 타입 안전성을 확보하고, 코드의 안정성 향상
  • 또한 기업과 개인, 두 개의 비슷하지만 다른 두 개의 데이터 구조의 명확한 구분을 위해 typescript를 선택

SCSS(sass)

• 추가적인 학습 필요 없이 기존의 css에서 향상된 라이브러리이기에, css 라이브러리 관련 경험이 모두 달랐던 저희 팀원 모두 어렵지 않게 사용할 수 있을 것 같아 선정
• scss(sass)의 적용을 선택하여 글로벌 변수 적용을 통해 일관된 스타일 유지 및 유지보수 편의성 증가, 다양한 내장 기능을 통해 가독성 향상

React Query, Axios

• 무한 스크롤을 적용할 상황이 많기 때문에 이를 편하게 구현하고자 선택
• 데이터 캐싱을 통해 불필요한 네트워크 요청 수의 감소로 효율성 향상
• axios와 React query를 함께 사용함으로써 더욱 간단한 데이터 요청 구조 유지

eslint, prettier, stylint

• 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지

간단한 컨벤션 소개

[ 코드 컨벤션 ]

• type 말고 interface로 통일 (특정한 상황 외)
• 변수는 camelCase, 상수는 SNAKE_CASE 사용
• 스타일링 단위는 px, className은 camelCase로 통일 [ 깃 컨벤션 ]
• fork 떠서 각자 작업 진행
• 이름

이슈는 feat: 기능 추가 로 이름 생성
PR은 feat / 기능 추가 로 이름 생성
커밋 메시지는 feat: 기능 추가 처럼 작성
브랜치 이름은 feat/createInput 처럼 타입/기능 구성으로 생성, 기능의 경우 camelCase로 작성

프로젝트 구조

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