스타법무법인 상담 기능 패키지(Counsel)

• 스타법무법인 자사 홈페이지 상담 기능 패키지
• 필요에 따라, @starlawfirm/tracking 패키지와 함께 사용하면 됨.

📋 목차

• 설치
• 사용법
• 지원 기능
• API 문서
• 환경 변수 설정
• 개발 가이드
• 로컬 테스트
• 적용 테스트
• 배포 방법
• 문제 해결
• 라이선스
• 기여하기

설치

npm i @starlawfirm/counsel-function

사용법

import { useAdminstarlawConsult, getUtm, clientMailSend, considuntMailSend, getRequestDateTime, makeMixpanelData, swalAlert, isTestServer, CounselAction, DasiAction } from "@starlawfirm/counsel-function";

const { consultRequest, checkDuplicateConsult, postConsultWorkout } = useAdminstarlawConsult();

const handleAdminstarlawConsult = async () => {
  if (!state.isPrivacyAgreed) return swalAlert("개인정보 동의를 해주세요.");
  if (!state.phoneNumber) return swalAlert("연락처를 입력해주세요.");
  if (!state.category) return swalAlert("상담 방식을 선택해주세요.");

  const { serviceId, referer } = configState;
  const { phoneNumber, category } = state;

  // 중복 체크
  const isDuplicated = await checkDuplicateConsult(state, serviceId, 'dasi');
  if (isDuplicated.data.duplicate) return swalAlert("이미 상담신청을 완료하였습니다.", "success");

  dispatch({ type: "prevPhoneNumberSet", prevPhoneNumber: state.phoneNumber });
  dispatch({ type: "clickTimeSet", clickTime: new Date().toISOString() });
  dispatch({ type: "isCounselSuccessSet", isCounselSuccess: true });

  // 상담 예약 신청 버튼 disabled 체크를 위한 3초 setTime 처리. 
  setTimeout(() => dispatch({ type: "clickTimeSet", clickTime: null }), 3000);

  // 상담 생성
  const createRes = await postConsultWorkout(state, serviceId, 'dasi');

  // 알림 전송
  considuntMailSend(state, 'dasi');
  clientMailSend(state, createRes.data.id, 'dasi');

  // 신청관리자
  const { utmUrl, stlVisitTime } = getUtm(cookieStore);

  const consultRes = await consultRequest(
    phoneNumber,
    serviceId,
    referer || "",
    "",
    utmUrl,
    stlVisitTime,
    "",
    createRes.data.id,
    visitorId,
    testServer ? true : undefined,
    category,
    "dasi",
  );

  if (!consultRes.ok) return swalAlert("상담신청에 문제가 있습니다. 잠시 후 다시 시도해주세요.", "error");

  // 믹스패널 전송
  const { request_date, request_time } = getRequestDateTime(state);
  const mixpanelData = makeMixpanelData(state, request_date, request_time, 'dasi') || {};
  sendCounselTracking({ 
    eventKey: `signUp${state.locationTracking}`, 
    mixpanel: mixpanelData
  });
};

지원 기능

| 기능 | 설명 | |------|------| | 상담 신청 | 상담 예약 및 중복 체크, 알림 전송 등 | | UTM 추적 | 유입 경로 추적 및 믹스패널 데이터 생성 | | 이메일 발송 | 클라이언트/관리자 알림 메일 전송 | | 상태 관리 | 상담 성공/실패 상태 관리 및 UX 개선 |

API 문서

주요 함수

• useAdminstarlawConsult(): 상담 관련 주요 함수 제공
  • consultRequest(...): 상담 신청
  • checkDuplicateConsult(...): 중복 상담 체크
  • postConsultWorkout(...): 상담 생성
• getUtm(cookieStore): UTM 파라미터 추출
• clientMailSend(state, id, type): 클라이언트 메일 발송
• considuntMailSend(state, type): 관리자 메일 발송
• getRequestDateTime(state): 신청 일시 추출
• makeMixpanelData(state, date, time, type): 믹스패널 데이터 생성
• swalAlert(message, type?): 알림창 표시

예시

// 상담 중복 체크
const isDuplicated = await checkDuplicateConsult(state, serviceId, 'dasi');

// 상담 신청
const consultRes = await consultRequest(
  phoneNumber, serviceId, referer, "", utmUrl, stlVisitTime, "", createRes.data.id, visitorId, testServer, category, "dasi"
);

// 알림 전송
clientMailSend(state, createRes.data.id, 'dasi');

환경 변수 설정

상담 기능 자체는 별도의 환경 변수를 요구하지 않으나, 트래킹 연동 시 아래와 같이 환경 변수를 설정할 수 있습니다.

# 예시: 믹스패널 등 트래킹 연동 시
NEXT_PUBLIC_DASI_MIXPANEL_ID=XXXXXXXXXX

개발 가이드

프로젝트 구조

src/
├── constant/      # 상수 정의
├── context/       # 리액트 Context 및 Provider
├── hook/          # 커스텀 훅
├── lib/           # API/유틸 함수
├── services/      # 서비스 로직
├── type/          # 타입 정의
├── util/          # 유틸리티 함수

새로운 기능 추가하기

1. 관련 폴더에 파일 생성
2. 타입 정의 및 함수 구현
3. src/index.ts에서 export 추가
4. README 업데이트

로컬 테스트

1. npm run build
2. cd test
3. npm i
4. npm run dev

적용 테스트

1. npm run build 후, dist 파일을 복사
2. 사용하는 레포의 node_modules 내 해당 패키지의 dist 폴더와 교체

참고: 간단한 테스트를 위한 확인용입니다.

배포 방법

1. 작업 완료 후, package.json의 version을 올려줍니다.
2. npm publish로 배포를 진행합니다.

문제 해결

자주 발생하는 문제

1. 상담이 정상적으로 신청되지 않는 경우

• 필수 입력값(개인정보 동의, 연락처, 상담 방식 등) 확인
• 네트워크 요청 및 응답 상태 확인

2. 알림 메일이 전송되지 않는 경우

• 메일 서버 설정 및 로그 확인

3. 트래킹 데이터가 연동되지 않는 경우

• 환경 변수 및 트래킹 패키지 연동 여부 확인

디버깅 팁

// 상담 성공/실패 상태 확인
console.log("상담 성공 여부:", state.isCounselSuccess);

// 믹스패널 데이터 확인
console.log("믹스패널 데이터:", mixpanelData);

라이선스

GPL-3.0-or-later

기여하기

1. 이슈를 생성하거나 기존 이슈를 확인하세요
2. 새로운 기능이나 버그 수정을 위한 브랜치를 생성하세요
3. 변경사항을 커밋하고 테스트하세요
4. Pull Request를 생성하세요