📘 React 프로젝트 퍼블리셔-프론트 협업 전략 가이드

---

📑 목차

1. 협업 구조 개요
2. 협업 방식별 해결안
   2-1. 퍼블리셔 독립 작업 방식
   2-2. 퍼블리셔가 리액트 환경에서 작업
   2-3. 하이브리드 방식 (추천)
3. 각 해결안의 문제점 분석
4. 가장 나은 방법 선정
5. 작업 영역 및 책임 분리
6. 협업 가이드라인
7. 퍼블리셔의 상태 표현 방식
8. 퍼블리셔 작업 원칙
9. JS가 많이 필요한 컴포넌트에 대한 대응 전략

---

1. 협업 구조 개요

구분	설명
프로젝트 구조	퍼블리셔와 프론트가 다른 팀으로 분리되어 있음
목적	빠르고 정확한 UI 구현 + 기능/유지보수 효율성 확보
전제	퍼블리셔는 HTML/CSS 중심, JS는 프론트 담당

---

2. 협업 방식별 해결안

2-1. 퍼블리셔가 jQuery 기반으로 독립 작업 후 프론트가 마이그레이션

항목	설명
퍼블리셔 작업	HTML/CSS/jQuery 작업
프론트 작업	마크업, 스타일, JS 모두 React로 변환

---

2-2. 퍼블리셔가 React 프로젝트에서 JSX/CSS로 직접 작업

항목	설명
퍼블리셔 작업	JSX 구조 및 CSS 작성
프론트 작업	기능 보강, 상태 관리, 구조 리팩토링

---

2-3. 하이브리드 방식 (✅ 추천 방식)

항목	설명
퍼블리셔 작업	정적인 HTML/CSS만 작성, 상태 class 활용
프론트 작업	JSX 변환, 상태 바인딩, 라이브러리 연동, 로직 구현

---

3. 각 해결안의 문제점 분석

방식	주요 문제점 요약
2-1	마이그레이션 공수 큼, 라이브러리 충돌, 재작업 많음
2-2	React 미숙으로 인한 리팩토링 필요, 코드 품질 불균형
2-3 (추천)	퍼블리셔에게 JS 제한이 있지만, 협업 효율/품질 최적화 가능

---

4. 가장 나은 방법 선정

✅ 하이브리드 방식

• 퍼블리셔는 마크업과 스타일에 집중
• 프론트는 기능과 구조를 제어
  → 분업 효율 최적화 + 유지보수 유리

---

5. 작업 영역 및 책임 분리

항목	퍼블리셔 작업 범위	프론트 작업 범위
마크업	정적 구조 작성 (div, ul, li, class 등)	JSX 변환, 구조 분리
스타일링	SCSS/CSS 작성, 상태 class 명시 (.active, .open)	모듈화, 스타일 최적화
상태 표현	상태 class 및 주석으로 상태 구분	useState, useEffect로 상태 제어
라이브러리 사용	❌ 사용 안 함 (예: Swiper 등)	✅ React용 라이브러리 연동
DOM 이벤트/로직	❌ jQuery, addClass 등 금지	✅ 이벤트 핸들러, 드래그 등 직접 구현
테스트 및 QA 기준	시각적 확인 (디자인 기준)	기능 테스트 및 Storybook 등

---

6. 협업 가이드라인

퍼블리셔 가이드

• 정적인 HTML/CSS만 작성
• JS 로직은 작성 금지 (jQuery 포함)
• .active, .open, .hidden 등 상태 class 명시
• 상태별 마크업을 분리하거나 주석으로 표현
• 네이밍 컨벤션 준수 (예: BEM)

프론트 가이드

• JSX 컴포넌트화
• 상태 바인딩 (useState)
• 라이브러리 연동 (예: swiper/react)
• CSS-in-JS, CSS Module 등으로 스타일 구조화

---

7. 퍼블리셔의 상태 표현 방식

방식	설명
✅ 상태 포함 class 명시	.active, .open, .hidden, .disabled 등 사용
✅ 상태별 마크업 샘플 분리	dropdown.html, dropdown-open.html 등
✅ 주석으로 상태 구분	<!-- 상태: 드래그 중 -->
✅ 스타일은 상태 class 기반 작성	CSS만으로 display, transform, opacity 등 상태 구현

---

8. 퍼블리셔 작업 원칙

원칙 번호	내용
1	JS 사용 금지 (jQuery, onclick, addClass 등)
2	상태는 class 또는 주석으로 시각적으로 구분
3	컴포넌트 단위 마크업 (e.g. Card, Dropdown) 작성
4	네이밍 컨벤션 일관성 유지 (BEM, kebab-case 등)
5	상태 시나리오는 주석 또는 별도 문서로 제공

---

9. JS가 많이 필요한 컴포넌트 대응 전략

컴포넌트	퍼블리셔 역할	프론트 역할
바텀 시트	.bt-sheet, .is-open, .dragger 구조 제공	열기/닫기 상태, 드래그 구현
드롭다운	.open, .closed 상태 class 제공	isOpen 상태 전환 및 키보드 접근성 구현
Swiper	.swiper, .swiper-slide 마크업 제공	swiper/react 사용, 옵션 연동