doo-blog

Obsidian Vault 기반 개인 블로그

PARA/02_Areas/A006_회사 업무/BOS-FE/Tab 사용 화면 리스트업.md

Tab 사용 화면 리스트업

2026년 1월 15일

검색 방식

  • tab_box로 정규식 검색하여 리스트업
    • 17개 파일 확인하고 각 파일별 경로, 상세 내용 분석하여 실제 메뉴와 매핑
  • Tab 컴포넌트 확인
    • src/components/Tab.tsx 컴포넌트와 링크된 파일 확인
    • 일부 화면에서 사용 중 (2개 직접 사용, 1개 간접 사용)

특이사항

  • 각 화면마다 탭을 별도로 구현하고 있음
  • 각 화면마다 탭 구현 로직이 조금씩 다름
  • 대부분 tab_box 클래스를 직접 사용하지만, 일부는 Tab 컴포넌트를 사용

상세 목록

1. 고객센터 > 공지사항

  • src/pages/notice/detailForm/detailFormPage.tsx
    • PC/MO, APP 탭
  • src/pages/notice/list/listPage.tsx
    • PC/MO, APP 탭

2. QA 초기화

  • src/pages/qa/detailForm/detailFormPage.tsx
    • 포인트 내역 조회, VIP Pick 혜택 초기화, 스탬프 리셋, 매직바코드 등 7개 탭

3. 팝업 관리 > 롤링업

  • src/pages/popup/rollingUp/detailForm/detailFormPage.tsx
    • PC 웹 팝업, APP 팝업 탭

4. 시스템관리 > app 공지 팝업 관리

  • src/pages/appNotiPopup/listPage.tsx
    • Android, IOS 탭

5. 클럽 T 로밍 > 클럽 T 로밍 혜택 관리

  • src/pages/clubr/list/listPage.tsx

    • 카테고리별 탭 (동적 생성)

  • src/pages/clubr/list/listPage_tobe.tsx

    • 카테고리별 탭 (동적 생성)

6. 클럽 T 로밍 > 클럽 T 로밍 상세 (Tab 컴포넌트 사용)

  • src/pages/clubr/detailForm/detail_form_tobe.tsx

    • BenefitTabForm을 통해 Tab 컴포넌트 사용 (출국 전 혜택, 핵심 혜택, 해외 여행지 혜택, 클럽 특별 혜택)

  • src/pages/clubr/detailForm/BenefitTabForm.tsx

    • Tab 컴포넌트 직접 사용

7. T데이 관리 > Week 혜택

  • src/pages/tday/detailForm/BenefitList.tsx

    • 할인형, 적립형 탭

  • src/pages/tday/detailForm/BenefitList_asis.tsx

    • 할인형, 적립형 탭

8. [에이닷]T데이 > Week 혜택

  • src/pages/adotTday/detailForm/BenefitList.tsx

    • 할인형, 적립형 탭

  • src/pages/adotTday/detailForm/BenefitList_asis.tsx

    • 할인형, 적립형 탭

9. 나의 공간 > 마케팅 메시지 관리

  • src/pages/mySpace/marketingMsg/listPage/topArea.tsx
    • 등급별, 혜택유형별, 구독상품 가입여부 탭

10. 배너 통합 관리 > T우주 기타 배너 관리

  • src/pages/banner/subscriptionThinFirst/list/SubscriptionBannerTab.tsx
    • T deal, 띠배너 탭

11. 커머스 관리 > 제휴사 정산 조회

  • src/pages/order/calculate/calculateTopArea.tsx
    • 결제 기준, 입장권/상품권 기준, 구매자 기준 탭

12. 이벤트 > 댓글 조회 관리

  • src/pages/event/viewReply/viewReplyTopArea.tsx
    • 멤버십 채널 ID 조회, 이벤트별 조회 탭

13. 이벤트 > 당첨자 관리 (Tab 컴포넌트 사용)

  • src/pages/event/win/detailForm/detailFormPage.tsx
    • Tab 컴포넌트 사용 (이벤트 당첨자 리스트, 추가 당첨자 리스트 탭)

14. 위젯 배너 > 5GX 배너 관리

  • src/pages/widgetBanner/fiveGxTopArea.tsx
    • BIG 5x4, BIG 5x3, BIG 6x3, HOT 5x4 등 여러 탭

15. 테스트 레이아웃 (주석 처리됨)

  • src/pages/pointSystem/common/testLayout.tsx

    • 주석 처리된 코드

  • src/templates/PageWithSnb/PageWithSnb.tsx

    • 테스트/예제 코드

저장/수정(submit) 기능이 있는 화면 정리

직접 저장/수정 기능을 가진 화면 (4개)

  1. src/pages/notice/detailForm/detailFormPage.tsx

    • 공지사항 등록/수정 화면
    • PC/MO, APP 탭에서 각각 내용 입력 및 저장

  2. src/pages/popup/rollingUp/detailForm/detailFormPage.tsx

    • 롤링업 팝업 등록/수정 화면
    • PC 웹 팝업, APP 팝업 탭에서 각각 내용 입력 및 저장

  3. src/pages/clubr/detailForm/detail_form_tobe.tsx

    • 클럽 T 로밍 상세 등록/수정 화면
    • BenefitTabForm의 탭들(출국 전 혜택, 핵심 혜택, 해외 여행지 혜택, 클럽 특별 혜택)에서 입력한 내용을 저장

  4. src/pages/event/win/detailForm/detailFormPage.tsx

    • 이벤트 당첨자 관리 화면
    • 이벤트 당첨자 리스트, 추가 당첨자 리스트 탭에서 입력한 내용을 저장

상위 폼의 저장/수정 기능을 사용하는 컴포넌트 (4개)

  1. src/pages/tday/detailForm/BenefitList.tsx

    • T데이 detailFormPage 내부 컴포넌트
    • 할인형, 적립형 탭에서 입력한 내용이 상위 폼과 함께 저장

  2. src/pages/tday/detailForm/BenefitList_asis.tsx

    • T데이 detailFormPage_asis 내부 컴포넌트
    • 할인형, 적립형 탭에서 입력한 내용이 상위 폼과 함께 저장

  3. src/pages/adotTday/detailForm/BenefitList.tsx

    • 에이닷T데이 detailFormPage 내부 컴포넌트
    • 할인형, 적립형 탭에서 입력한 내용이 상위 폼과 함께 저장

  4. src/pages/adotTday/detailForm/BenefitList_asis.tsx

    • 에이닷T데이 detailFormPage 내부 컴포넌트
    • 할인형, 적립형 탭에서 입력한 내용이 상위 폼과 함께 저장

각 화면별 오류 테스트

  1. 공지사항 관리
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/notice/list 접속
      2. 내용 입력 후 저장
    2. 동작방식
      1. 모든 탭을 입력해야 저장이 됨.
      2. 화면상으로는 각각의 입력이 독립적이므로 활성화된 탭만 입력해도 저장이 되어야 함
  2. 롤링업 메세지 등록
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/popup/rollingup/detailForm 접속
      2. 내용 입력 후 저장
    2. 동작 방식
      1. pc 웹 팝업 내 상세 내용만 입력했는데, 저장이 됨.
        1. form 안에서 새로운 form을 사용하여 별도의 valid 처리
      2. app 팝업 내 상세 내용 없어도 괜찮은지 확인 필요
  3. 클럽 T 로밍
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/clubr/detail_form_tobe 접속
      2. 내용 입력 후 저장
    2. 동작 방식
      1. 모든 탭의 내용을 채워야 저장이 됨
  4. 이벤트 당첨자 관리
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/event/win/detail_form 접속
      2. 내용 입력 후 저장
        1. 탭과 연관 없음
  5. Tday 관리, as_is
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/tday/detail_form 접속
      2. 내용 입력 후 저장
    2. 동작 방식
      1. 할인형, 적립형 입력 따로 입력 가능함
      2. 적립형 입력 시 할인형 없어도 복사가 되는 문제가 있음
  6. 에이닷 관리, as_is
    1. 테스트 내용
      1. https://dev-bos.sktmembership.co.kr/#/member/adotTday/detail_form 접속
      2. 내용 입력 후 저장
    2. 동작 방식
      1. tday 관리와 동일함
      2. as_is는 현재 사용하지 않음

댓글

첫 번째 댓글을 남겨보세요.