Skip to content

gwagjiug/BOFIT

BranchesTags
 
 

Repository files navigation

BOFIT

보핏표지

복잡한 보험, 이제 내가 직접 이해하고 선택해요. 보핏과 함께 !

  1. 개인 맞춤 추천 : 꼭 필요한 보장 중심으로 객관적인 보험 추천
  2. 쉬운 이해를 위한 리포트 : 복잡한 보험 정보를 시각화하고 친절한 설명을 담은 리포트 제공
  3. 순수 정보 공유 커뮤니티 : 영업활동이 제한된 공간에서 신뢰할 수 있는 정보 교환

📌 서비스 소개

painpoint1 painpoint2 painpoint3 보핏정보입력 보핏정보입력2 보핏홈화면 보핏보험추천리포트 보핏커뮤

TEAM-BOFIT


지욱
민정
수정

혜린
지우
정훈

🚀 BOFIT 팀 기술 스택

BOFIT 팀 기술 스택 선정과정 A to Z 보러가기

카테고리 기술 스택
UI Library React
Server State Management TanStack Query
Language TypeScript
Build Tool Vite
Styling Vanilla Extract
Design System Storybook
Repository Management Monorepo
Build System Turborepo
Package Manager Pnpm
CI/CD Jenkins GitHub Actions
Web Server NGINX
Containerization Docker

TEAM-BOFIT Convention

📭 Git Convention

Git Flow

  • main branch
    main 브랜치는 언제나 배포 가능한 안정된 상태만 관리합니다.

  • develop branch
    develop 브랜치는 통합 브랜치로, 모든 기능 개발이 이곳을 기반으로 진행됩니다.
    평소에는 develop에서 기능별 Feature branch를 분기하고, 개발이 완료된 후 다시 develop으로 병합합니다.
    develop 브랜치는 항상 안정적인 상태를 유지하며, 배포 가능한 상태가 되면 main 브랜치로 병합하여 CI/CD를 통해 배포를 진행합니다.

  • Feature branch develop 브랜치에서 분기하여 기능별 개발을 진행하고, 완료 후 다시 develop 브랜치로 병합합니다.

💻 Coding Convention

✅ 컴포넌트

💡 컴포넌트 작성 시 핵심 원칙 재사용 가능하고 명확한 구조로 설계하며, 비즈니스 로직과 디자인 시스템을 분리합니다.

📋 네이밍 규칙

  • Interface: 반드시 Props 접미사 사용
    • ✅ CardProps, ChipProps
    • ❌ Card, ChipInterface

🏗️ 구조화 원칙

  • Fragment 사용: 의미 없는 <div> 지양, 컴포넌트 최상단은 Fragment (<>...</>) 사용
const InfoText = () => {
  return (
    <>
      <h1>Welcome!</h1>
      <p>This is our new page, we're glad you're here!</p>
    </>
  );
};
  • Self-closing: Children이 불필요할 때는 <Component /> 사용
  • Headless UI: 디자인 시스템 컴포넌트는 비즈니스 로직 최소화
  • 도메인 분리: 특정 도메인 의존 컴포넌트는 디자인 시스템이 아닌 client 내부에 작성
📁 폴더명

🎯 일관된 폴더 구조로 프로젝트 관리

규칙 설명 예시
소문자 시작 모든 폴더명은 소문자로 시작 components, utils
복수형 항상 복수형으로 s 붙이기 pages, hooks
케밥 케이스 단어 연결 시 하이픈 사용 user-pages, api-utils
📝 타입

🔧 TypeScript 타입 정의 가이드

🎯 선택 기준

타입 사용 시기 특징
interface 기본 권장 병합 가능, 확장성 좋음
type 특수한 경우 유니언, 튜플, 리터럴 타입 
// ✅ 권장: interface 사용
interface UserProps {
  name: string;
  age: number;
}

// ✅ 특수한 경우: type 사용
type Status = 'loading' | 'success' | 'error';
type Position = [number, number];
🔑 변수

📌 명확하고 일관된 변수 선언

🚫 금지 사항

  • var 사용 금지: const → let 순서로 선언
  • 문자열 연결 금지: + 대신 템플릿 리터럴 사용

✅ 네이밍 규칙

타입 규칙 예시
상수 대문자 스네이크 케이스 API_KEY, MAX_COUNT
Boolean is 접두사 isActive, isLoading
일반 변수 의미 명확한 이름 (길어도 OK) userProfileData

🔑 Key 사용 규칙

  • 정적 리스트: index 사용 가능
  • 동적 리스트: 고유한 id 사용 필수
  • 랜덤 값: key로 사용 금지
⚙️ 함수

🎯 명확한 함수 네이밍과 구조

📋 네이밍 패턴

접두사 용도 예시
get 값 반환 getUserData
create 새 값 생성 createUser
check 로직 검증 checkValidation
convert 변환 convertToString
add/minus 연산 addToCart, minusCount
filter 배열 필터링 filterActiveUsers
handle 이벤트 핸들러 handleSubmitClick

🏗️ 구조 규칙

  • 함수 형태: 동사+명사 조합
  • 이벤트 핸들러: handle 접두사 필수
    • 예: handleResetClick, handleSubmitClick
  • 유틸 함수: 반환값 기준 네이밍 (ex. hasEmail)
  • 재사용: 2개 이상 도메인에서 사용 시 utils 폴더로 이동
  • 선언 방식: 화살표 함수 사용
🧩 메소드

🔄 효율적인 데이터 처리 방법

📊 배열 처리

// ✅ 스프레드 연산자 사용
const copies = [...originals];

// ✅ 함수형 메소드 사용 (for 대신)
items.forEach((item) => processItem(item));
items.map((item) => transformItem(item));

🎯 구조 분해 할당 적극 활용

interface VoteAllInfoProps {
  date: number;
  time: string;
}

interface UserDataProps {
  userName: string;
  userBirth: string;
}

// Props 구조 분해
const MonthVoting = ({ date, time }: VoteAllInfoProps) => {
  // 컴포넌트 로직
};

// 함수 매개변수 구조 분해
function checkIsUser({ userName, userBirth }: UserDataProps) {
  // 검증 로직
}
🎨 스타일

🏗️ 의미 있는 HTML 구조

📋 핵심 원칙

원칙 설명 예시
시맨틱 태그 의미에 맞는 태그 사용 <header>, <nav>, <main>
div 지양 의미 없는 div 사용 금지 <section>, <article> 활용
Container 네이밍 Wrapper 필요 시 명확한 이름 UserContainer, LayoutContainer

📖 참고 자료: MDN HTML 시맨틱 태그 가이드

📚 Storybook

📖 컴포넌트 문서화 가이드

🎯 문서화 원칙

  • Interface 설명: 모든 Props에 대한 명확한 설명 포함
  • 사용 예시: 다양한 시나리오별 Story 작성
  • 시각적 테스트: 컴포넌트의 모든 상태 검증

📋 Story 구조 예시

import type { Meta, StoryObj } from '@storybook/react';
import Box from './Box';

const meta: Meta<typeof Box> = {
  title: 'Common/Box',
  component: Box,
  parameters: {
    layout: 'centered',
    componentSubtitle: '📦 박스 컴포넌트',
    docs: {
      description: {
        component: `
Box 컴포넌트는 제목과 버튼이 포함된 컨테이너입니다.

**Props 설명:**
- \`title\`: 박스 상단 제목
- \`showMore\`: 버튼 노출 여부  
- \`showMoreText\`: 버튼 텍스트
- \`path\`: 클릭 시 이동 경로
- \`children\`: 콘텐츠 영역
        `,
      },
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '375px', border: '1px solid #ccc' }}>
        <Story />
      </div>
    ),
  ],
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Box>;

// 🎯 기본 사용 예시
export const Default: Story = {
  args: {
    title: '박스 제목',
    children: <p>콘텐츠 영역입니다.</p>,
  },
};

// 🔗 더보기 버튼 예시
export const WithButtonLabel: Story = {
  name: '더보기 버튼',
  args: {
    showMore: true,
    showMoreText: '더보기',
    path: '/more',
    children: <p>더보기 버튼이 있는 콘텐츠</p>,
  },
};

// 📋 전체보기 버튼 예시
export const WithAllButton: Story = {
  name: '전체보기 버튼',
  args: {
    showMore: true,
    showMoreText: '전체보기',
    path: '/all',
    children: <p>전체보기 콘텐츠</p>,
  },
};
⚛️ React

🏗️ React 패턴 및 네이밍 규칙

📋 컴포넌트 패턴

패턴 규칙 예시
고차 컴포넌트 with 접두사 withAuth, withLoading
Context Context 접미사 UserContext, ThemeContext
Custom Hook use 접두사 useAuth, useLocalStorage

🎯 타입 Import 규칙

// ✅ 권장: 개별 import
import { ReactNode, FC } from 'react';

// ❌ 비권장: 네임스페이스 import
import React from 'react';
const node: React.ReactNode = <div />;

🔧 컴포넌트 선언 방식

// ✅ 권장: 화살표 함수 + 타입 정의
interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: FC<ButtonProps> = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>;
};

Ground Rule 📋

🌟 기본 원칙

🤝 상호 성장을 위한 협업 문화

  • 질문 많이하기
  • 문제 생겼을 때 바로 얘기하기
🔍 코드 리뷰 규칙

🎯 품질 높은 코드를 위한 리뷰 문화 매일 아침 코드 리뷰를 통해 서로의 코드를 학습하고 개선점을 찾아갑니다.

🕘 코드 리뷰 일정

  • 매일 아침 코드 리뷰 후 작업 시작
  • 2명 이상의 리뷰어 승인 후 머지
  • 코드 리뷰에 충분한 시간 할애하기

📊 코드 리뷰 기준

  • 근거 있는 피드백을 위해 의견 제시 시 레퍼런스 첨부
  • 작은 컨벤션은 정적 분석도구를 활용하여 강제하고,리뷰어는 코드의 품질과 비즈니스 로직에만 집중합니다
  • 비판이나 제안을 활발히 하자
  • 칭찬도 적극적으로
📝 PR (Pull Request) 가이드라인

📖 명확한 문서화를 통한 효율적인 협업 PR은 단순한 코드 제출이 아닌, 고민과 해결 과정을 공유하는 소통의 도구입니다.

🎯 PR 작성 원칙

  • 리뷰 퀄리티를 위해 PR은 작게, 문서는 크게
  • PR 작성자는 작업에 대한 설명을 명확히 남기기

📋 PR 작성 필수 내용

  1. 변경사항의 맥락과 배경

    • 어떤 문제를 해결하고자 했는지
    • 왜 이런 방식으로 접근했는지

  2. 고민의 흔적

    • 작은 작업이라도 고민한 부분 상세히 기록
    • 대안들을 검토했다면 왜 현재 방식을 선택했는지

  3. 해결 과정

    • 문제 해결을 위한 단계별 접근법
    • 시도했던 다른 방법들과 결과

  4. Trade-off 분석

    • 현재 해결책의 장단점
    • 향후 개선 가능한 부분

  5. QA 체크리스트

    • 기획 요구사항 명세서의 모든 항목 체크
    • 각 요구사항별 구현 완료 여부 확인

🔖 PR 템플릿 활용

  • 기획자 요구사항 명세서를 PR에 복사 붙여넣기
  • 체크박스 형태로 모든 요구사항 검증
  • QA 최소화를 위한 자체 검증 완료
💻 커밋 및 코드 관리

🔧 체계적인 버전 관리와 코드 품질 유지 일관된 커밋 메시지와 의미있는 코드 구조를 통해 프로젝트의 가독성을 높입니다.

📝 커밋 규칙

  • 커밋 메시지 컨벤션 통일 (lefthooks 활용)
  • 커밋은 하나의 의미있는 변경사항 별로 최대한 작은 단위로
  • 컨벤션 잘 지키기

💬 코드 주석 활용

  • // @TODO 형태로 향후 개선 사항 기록
  • 노티하고 싶은 부분에 주석 적극 활용
  • 코드의 의도와 맥락을 명확히 전달
📚 문서화 중요성

📖 지식 축적과 성장을 위한 문서화 문서화는 개인의 성장과 팀의 지식 공유에 큰 도움이 됩니다.

🎯 문서화 목표

  • 개인 성장에 도움
  • 팀 지식 공유

📋 문서화 방법

  • 막히는 부분이나 문제 발생 시 즉시 노션에 기록
  • 해결 과정과 결과까지 상세히 문서화
  • 정기적인 문서 업데이트와 공유
🎯 요구사항 파악 프로세스

🔍 명확한 요구사항 파악을 통한 효율적인 개발 요구사항 파악은 협업의 시작점이자 개발자가 빠르게 성장할 수 있는 핵심 역량입니다.

🎨 요구사항 파악의 중요성

개발은 TO-BE와 AS-IS의 차이(diff)를 구현하는 것입니다.

  • TO-BE: 기획자/디자이너가 기대하는 결과물
  • AS-IS: 현재 코드의 상태
  • diff: 개발해야 할 범위 = TO-BE - AS-IS

🔄 요구사항 파악 루틴

  1. TO-BE 파악

    • 기획자에게 정책 상세 요청
    • 디자이너에게 시안 꼼꼼히 검토

  2. AS-IS 파악

    • 현재 코드에서 수정 필요 부분 확인
    • 기존 구조와 로직 이해

  3. diff 계산

    • 필요한 변경사항 정리 (API, UI 등)
    • 서버 개발자, 디자이너와 협의

  4. 공유

    • 정리한 요구사항을 팀원과 공유
    • 피드백 받아 이해도 맞추기

💡 실용적인 요구사항 파악 팁

  • 페이지 단위로 파악하기
  • 페이지별 API 변경사항 파악
  • 작업 계획 초안 작성 후 팀원 리뷰
  • 도메인 지식 익히기
🤝 소통 문화

🙋 질문과 답변

  • 편하게 질문하기
  • 개발 시 질문 및 답변 활발히 하기
  • 내 힘으로 할 수 있는 건 최대한 해보되, 막히면 바로 질문

🔄 파트 간 소통

  • 파트 간, 파트 내 소통 활발히 하기
  • 조금이라도 모르는 거나 이해가지 않는 사안이 생기면 바로바로 말하기
  • 문제 상황 공유를 통한 빠른 해결
🚀 개발 문화

⏰ 시간 관리와 효율성

  • PR 작성 시간도 개발 리소스로 인식
  • 코드 리뷰에 충분한 시간 할애
  • 요구사항 파악을 통한 시간 절약

🗂️ 폴더구조

└── src/
    ├── app/                    // route VIEW
    │   ├── index.html
    │   └── App.tsx
    ├── pages/                  // VIEW -> 화면의 구조를 파악
    │   ├── home/
    │   │   └── page.tsx
    │   ├── report/
    │   ├── landing/
    │   ├── onboarding/
    │   ├── mypage/
    │   └── community/
    │       ├── detail/
    │       │   └── page.tsx
    │       ├── write/
    │       │   └── page.tsx
    │       └── page.tsx
    ├── widgets/                // 뷰 내부 로직, 컴포넌트,... 의 기능
    │   ├── home/
    │   ├── report/
    │   │   ├── configs/        // 상수
    │   │   ├── components/     // 해당 도메인 내 components, section
    │   │   ├── hooks/
    │   │   └── utils/
    │   ├── landing/
    │   ├── onboarding/
    │   ├── mypage/
    │   └── community/
    └── shared/
        ├── configs/
        ├── components/
        ├── hooks/
        ├── api/
        │   ├── domain/
        │   │   ├── home/
        │   │   │   └── queries.ts
        │   │   ├── report/
        │   │   │   └── queries.ts
        │   │   ├── landing/
        │   │   ├── onboarding/
        │   │   ├── mypage/
        │   │   └── community/
        │   ├── query.keys.ts    // 모든 쿼리 키는 shared 에서 관리
        │   └── types.ts         // 모든 api type는 shared 에서 관리
        └── utils/
└── packages/
    ├── bds-ui/
    └── bds-icons/

📸 BOFIT-CLIENT

image

About

BOFIT🍥

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.7%
  • Other 1.3%