KCMF

개요

시청자미디어재단은 참여형 방송 문화를 위해 시청자가 직접 방송사를 선택하고 프로그램을 제작 및 신청할 수 있는 환경을 제공하고 있습니다. 이 플랫폼은 시청자가 주체적으로 방송 제작에 참여할 수 있도록 기획되었으며, 방송사와 시청자를 연결하는 소통 창구 역할을 합니다. 해당 프로젝트에서 사용자 페이지와 관리자 페이지를 모두 맡아 퍼블리싱 및 개발을 진행하였습니다.

진행 방식

구축 프로젝트이며, React.js 환경에서 작업을 진행하였습니다. 스타일 처리로는 styled-component 를 사용하였으며, Redux 로 중앙데이터 관리를 진행하였습니다. 디자인 수급은 figma 로 이루어졌으며 기획자 1명, 디자이너 1명, 백엔드 2명, 프론트엔드 3명의 구성원으로 협업을 진행하였습니다.

주요 작업 내용

• 1. 사용자

• 1-1. 메인 페이지

  • Swiper 를 활용한 메뉴 슬라이더 구현

  • 상위 5개 공지사항 데이터 연동

• 1-2. 회원가입

  • react-hook-form 을 활용하여 단계별 회원가입 폼 구현

    • - 폼 유효성 검증 및 에러 핸들링으로 안정적인 데이터 입력 유도

  • 회원가입 신청 등록 기능 구현

    • - 어린이/성인 회원별로 조건부 인증 및 등록 로직 구현

• 1-3. 마이페이지

  • 복합적인 데이터 관리 및 필터링 시스템

    • - 연도별 탭 기반 데이터 분류 (채택된 프로그램, 지원 프로그램)
    • - URL 쿼리 파라미터를 활용한 상태 관리로 페이지 새로고침 시에도 필터 상태 유지
    • - 2024년 ~ 현재까지의 연도 옵션을 동적으로 생성

  • 실시간 데이터 동기화 및 상태 관리

    • - 탭 변경 시 자동으로 해당 데이터를 API로 조회하는 효율적인 데이터 로딩

• 1-4. FAQ & 공지사항 & 문의하기

  • 제목 및 키워드 기반 검색 기능

  • Input 및 SelectBox 를 공통컴포넌트화 하여 개발 생산성 향상

  • 사용자 정보 자동 입력 및 파일 관리

    • - 로그인된 사용자의 정보를 자동으로 폼에 채워넣는 기능

• 1-5. 비밀번호 재설정

  • 새 비밀번호 수정 기능

  • 새 비밀번호와 확인 비밀번호 일치 여부 검증으로 입력 오류 방지

  • 정규표현식을 활용해 비밀번호 양식 검증 처리

  • 백엔드측에서 내려주는 에러의 경우를 테스트하여 화면 처리

• 2. 관리자

  • 각 페이지의 목록/수정/상세 페이지에서 CRUD 구현

  • MUI 를 활용한 어드민 페이지 개발 생산성 향상

  • react-hook-form의 Controller를 활용하여 MUI 컴포넌트들과 폼 상태를 연동하여 복잡한 폼 로직을 간소화

  • 페이지별 다운로드 이력을 파라미터로 전달하여 백엔드와의 연동을 통해 이력 저장을 안정적으로 구현

  • 관리자 페이지 내에서 키워드를 전역적으로 동기화하는 관리 기능을 안정적으로 구현

  • ReactQuill 에디터를 react-hook-form 과 연동해, 공지사항 내용 입력과 실시간 미리보기 구현

💫 Trouble shooting

• 폼 입력 값 초기화

  문제: 사용자 페이지의 다단계 회원가입 폼에서 react-hook-form을 사용할 때, Step 전환 시 입력된 값이 원상 복구되는 이슈 발생

  해결: useFormContext 의 watch 기능을 활용하여 상태를 유지하고, 특정 필드를 기준으로 초기값을 제어하여 값이 유지되도록 처리 → 폼 데이터가 유실되는 문제가 해결되어 사용자 경험이 개선

• 모달 상태 관리 복잡성 이슈

  문제: 한 페이지에서 생성되는 여러 개의 Alert 모달의 경우 개별적으로 관리하면서 상태가 복잡해지는 문제가 발생

  해결: useAlert 라는 커스텀훅을 구현하여 모달 상태를 중앙화하고, 모달의 개별 이름만 속성으로 받아 그 안에서 리턴되는 openAlert, closeAlert 이 두 가지 메서드로만 일관된 방식으로 모달을 제어

• SelectBox 스타일링 및 제어

  문제: 기본 HTML의 select 태그는 브라우저마다 UI 에 일관성이 없어 사용자 경험을 해침 → SelectBox 컴포넌트를 커스터마이징 하려 했으나 기본 태그의 경우 스타일이 입혀지지 않는 문제 발생

  해결: React 훅과 대체 태그를 활용해 옵션 제어, 상태 관리 등을 직접 구현하여 커스텀 SelectBox를 제작, → 일관된 디자인과 더불어 키보드를 통한 조작과 드롭다운 기능을 구현하여 접근성과 사용성을 대폭 개선 Blog

• 다운로드 이력 관리 이슈

  문제: 관리자 페이지에서 파일 다운로드 시 사용자/페이지별 이력 관리가 되지 않아 기록 추적이 어려움

  해결: 다운로드 요청 시 페이지 정보를 파라미터로 전달하고, withCredentials 설정을 통해 백엔드와 안정적으로 통신하여 이력을 정확히 저장할 수 있도록 구현 Blog

• 키워드 상태 관리 이슈

  문제: 관리자 공통코드 관리 페이지에서 키워드를 기존 데이터에서 삭제하거나 새로 추가할 때 어떤 키워드가 이미 존재했던 것인지, 새로 생성된 것인지 구분되지 않아 백엔드 요청 시 정확한 처리가 어려움

  해결: 기존 키워드와 새로 추가된 키워드, 삭제되는 키워드를 각각 분류 및 관리하여, API 요청 시 명확히 전달할 수 있도록 구현 Blog

• 에디터 보안 및 입력 동기화

  문제: ReactQuill 에디터의 입력값을 dangerouslySetInnerHTML 로 렌더링하면 XSS 공격에 취약했고, react-hook-form과 동기화되지 않아 폼 입력 관리가 불안정한 문제가 발생

  해결: watch로 실시간 입력값을 가져와 DOMPurify.sanitize() 로 HTML을 정제한 뒤 렌더링한 후, Controller를 사용해 ReactQuill을 react-hook-form에 안정적으로 연동하여 보안을 강화하고 입력 동기화를 완성 Blog