38-COLLABORTION-WEB-NAVER-SMARTSTORE

LETS SOPT 38기 합동 세미나 데스크탑 웹 1조 네이버 스마트스토어

프로젝트 소개

팀 소개

최윤하

강효정

송민서

이해니

황유림

역할 분담

🐈‍⬛ 최윤하

• 초기 세팅: CI/CD 파이프라인 구축, 폴더 구조 세팅
• 컴포넌트 구현: Sidebar, RightFloatingMenu, Footer, stepContentButton, CompleteButton
• 페이지 구현: 공통 레이아웃
• API 연동: POST 이미지 등록

👾 강효정

• 초기 세팅: ESLint/Prettier, 오토 리뷰어 설정
• 컴포넌트 구현: GuideHeader, MissionButton, MissionSection, 상품 이미지 등록 섹션
• 페이지 구현: 상품 진입 페이지
• API 연동: POST 상품 등록

🍺 이해니

• 초기 세팅: SVGR 설정, 라우터 초기 세팅
• 컴포넌트 구현: SectionCard, 상품명 섹션, 카테고리 색션
• 페이지 구현: 상품 등록 페이지
• API 연동: GET 카테고리 검색

🥟 송민서

• 초기 세팅: PR 및 Issue 템플릿 설계, Tailwind css 스타일 설정
• 컴포넌트 구현: button, 상단공지, GuideSection
• API 연동: GET 공지사항 조회

🆒 황유림

• 초기 세팅: TanStack Query, Axios 설정, 절대 경로(alias) 설정
• 컴포넌트 구현: Header, Toogle, previewCard, 판매가 섹션
• 페이지 구현: 상품 조회 화면
• API 연동: GET 상품 목록 조회

기술 스택

카테고리	기술 스택
UI Library
Language
Build Tool
Package Manager
Server State Management
Styling
Version Control
CI/CD
Deployment
Cooperation
Formatting

Git 컨벤션

♟️ GITHUB 전략

브랜치 전략: git flow 기반 + develop 운영

GitHub Flow: 브랜치/규칙이 단순해서 온보딩이 빠르고, 기능 단위로 PR을 올리는 흐름 명확

브랜치 역할

• main: 배포 가능 브랜치
• develop: 기능 브랜치들이 모이는 통합 브랜치

🌳 브랜치 컨벤션

기능명 규칙: 케밥 케이스(kebab-case)

• init/feature-name/#issue-number: 초기 세팅, 환경 구성, 템플릿/룰 셋업 등
• feat/feature-name/#issue-number: 신규 기능 개발
• fix/feature-name/#issue-number: 버그 수정
• refactor/feature-name/#issue-number: 리팩터링(동작 변경 최소화, 구조 개선 중심)
• Docs/feature-name/#issue-number: 문서 작업 (README, 주석, 가이드, 문서 구조 정리 등)
• Perf/feature-name/#issue-number: 성능 개선 (렌더링 최적화, 불필요한 연산 제거, 메모리/속도 개선 등)

➡️ merge가 끝난 브랜치는 반드시 삭제 (squash merge)

📝 PR 컨벤션

PR 단위: 하나의 PR에는 최대한 하나의 기능만 포함

PR 제목: PR 제목은 Type(모노레포 영역) 로 시작하고, Type은 앞 글자 대문자로 통일

• Feat(client): 로그인 기능 추가
• Feat(cds): Button 컴포넌트 구현
• Init(client): router 설정
• Init(project): PR/Issue 템플릿 세팅
• Fix(client): 메모 저장 시 중복 호출 수정
• Refactor(client): API 에러 처리 구조 개선

🖊️ 커밋 컨벤션

커밋 type	용도 설명
init	초기 설정
feat	새로운 기능 추가
fix	버그 수정
chore	기타 작업 (설정, 패키지 설치 등)
refactor	코드 구조 및 기능 개선
❌ 특수기호	커밋 메시지에 특수기호 사용 금지
📦 커밋 단위	기능별로 작게 나누어 커밋 (최대한 작은 단위!)

📡 Issue 컨벤션

Issue 제목은 작업 성격을 바로 알 수 있도록

• [Init] 프로젝트 초기 세팅
• [Feat] Tab 컴포넌트 구현
• [Fix] 색상 수정
• [Refactor] API 모듈 구조 개선

💌 코드리뷰 규칙

merge 조건

• PR은 최소 2명 이상의 Approve가 있어야 merge 가능
• 직접 push로 합치는 방식은 지양,, 반드시 PR을 통해 merge

리뷰 타임

• PR이 올라오면 가능한 빨리 리뷰
• 몰아서 한 번에가 아니라, 올라오는 즉시 분산 리뷰가 원칙

리뷰 기준

• 리뷰 코멘트는 최대한 둥글게 작성
• 근거있는 주장
• 가능한 경우 레퍼런스(문서/가이드/팀 규칙)를 함께 첨부

Code 컨벤션

🧩 컴포넌트

네이밍

• 리액트 컴포넌트만 PascalCase를 사용
  • ex: Header, MemoCard, AiSummaryPanel)
• 그 외 유틸/함수/변수는 camelCase

export 규칙

• 컴포넌트는 기본적으로 default export를 사용
• 모듈 집합(index.ts)에서는 named export로 re-export

JSX 작성 규칙

• 의미 없는 div 남발을 지양하고, 가능한 시맨틱 태그를 사용
  • 예: section, header, main, nav, article, aside, footer
• 최상단 래퍼가 의미가 없다면 Fragment(<>...</>)를 사용
• children이 불필요한 컴포넌트는 Self closing
  • 예: <EmptyState />

이벤트 핸들러 규칙

• 이벤트 핸들러 함수는 반드시 handle prefix를 사용
  • 예: handleSubmit, handleResetClick

📂 폴더명

규칙

• 폴더명은 kebab-case + 소문자 시작
  • 예: user-profile, memo-list, error-boundary
• 가능한 경우 복수형(s) 사용
  • 예: models, libs, styles, configs

⛓️ 타입

네이밍 규칙

• 타입/인터페이스 이름은 PascalCase를 사용
• 기본적으로 type보다 interface를 우선 사용

Props 네이밍

• Props 타입은 반드시 Props 접미사
  • 예: CardProps, HeaderProps

type을 사용하는 경우

• 유니언 타입, 튜플, 리터럴 타입이 꼭 필요한 경우
  • 예: type ButtonVariant = 'primary' | 'secondary'

타입 파일 구성

• 컴포넌트와 관련된 타입은 가능한 같은 폴더 내부에 co-locate
  • 규모가 커지면 types.ts로 분리

🌎 함수

함수 네이밍(동사 + 명사)

• 함수는 무엇을 하는지가 이름만으로 드러나야 한다
• 의미별 prefix를 통일
  • get: 값을 가져와 반환(조회)
  • create: 새 값을 생성
  • check: 조건을 검사
  • convert: 형태를 변환
  • add / minus: 더하거나 빼기
  • filter: 필터링 결과를 반환
• boolean 반환 유틸은 is으로 시작
  • 예: isEmailValid, isSubmit

함수 선언 방식

• 화살표 함수(arrow function)를 우선 사용해요.
  • 컴포넌트 내부/유틸 함수 스타일을 통일하기 위함이에요.

key 사용 규칙

• key에 랜덤 값을 넣지 않는다
• 리스트가 동적이면 반드시 고유 id를 key로 사용
• 정적 리스트(순서/개수 변화 없음)에서는 index 허용

폴더 구조

📦 38-COLLABORATION-WEB-NAVER-SMARTSTORE
│
└── 📁 src
    ├── 📁 app
    │   ├── 📁 layout
    │   ├── App.tsx
    │   └── main.tsx
    │
    ├── 📁 pages
    │   ├── 📁 product-preview
    │   │   ├── 📁 api
    │   │   ├── 📁 components
    │   │   └── 📁 hooks
    │   │
    │   ├── 📁 product-register
    │   │   ├── 📁 api
    │   │   ├── 📁 components
    │   │   ├── 📁 hooks
    │   │   └── 📁 types
    │   │
    │   └── 📁 store-home
    │       ├── 📁 assets
    │       ├── 📁 components
    │       ├── 📁 constants
    │       ├── 📁 hooks
    │       └── 📁 utils
    │
    ├── 📁 routes
    │
    └── 📁 shared
        ├── 📁 api
        ├── 📁 assets
        ├── 📁 constants
        ├── 📁 hooks
        ├── 📁 styles
        ├── 📁 types
        └── 📁 ui