크왕(Kwang) 🧡

📝 소개

일반인도 누구나 크리에이터가 되는 시대에 개인이 자신을 알리고 팬과 소통할 수 있는 페이지를 쉽게 제작할 수 있는 멀티링크 솔루션. 인스타그램 프로필에 하나의 링크만 게시할 수 있어 링크트리 등 다양한 멀티링크 서비스가 기존에 있지만 크리에이터(작가, 트레이너, 뮤지션, 요리사, 강사, 개발자, 여행가 등)들을 타겟으로 크왕은 팬레터, 메일링(뉴스레터) 신청, 예약신청, 함께하기 챌린지 등의 서비스를 기본으로 제공합니다.

🏡 '크왕' 바로가기 | 👩🏻‍💻 (주) 리더스클럽 팀 노션

💁‍♂️ 프로젝트 팀원

팀장	부팀장	팀원	팀원	팀원	팀원(디자이너)
최수아	이소율	손형정	송희진	지설희	김유진

👉 역할 분담 & 개발 일정표

⚙️ 개발 환경 설정

요구 사항

• Node.js (v14 이상)
• Yarn 패키지 관리자

설치 가이드

# 종속성 설치
  yarn
# 로컬 개발 서버 실행
  yarn start

📱 화면 구성

크왕 홈
(홈 페이지는 새 소식을 전하는 배너 슬라이드, 서비스 소개, 신규 크리에이터를 슬라이드로 보여줍니다.

로그인 & 회원가입
크리에이터를 위한 로그인 및 회원가입 페이지로, 카카오, 네이버, 구글과 같은 소셜 로그인이 가능합니다.

편집하기(크리에이터, 유저) 페이지
프로필 링크 편집 페이지로, 테마 바꾸기, 마이 프로필, 링크 추가하기, 폼 추가하기 기능이 제공됩니다.

폼 기능 페이지
크리에이터가 뉴스레터와 같은 메일을 보내주고 싶은 경우 구독을 원하는 방문자에게 신청을 받는 메뉴인 메일링 서비스 폼 질문과 답변란을 생성하여 방문자가 되는 구독자, 팔로워들에게 보여지는 메뉴인 자주 묻는 질문 폼 캘린더, 이미지와 같은 원하는 기능을 선택하여 신청 폼을 설정하는 메뉴인 예약 신청 폼 크리에이터와 방문자들이 함께 챌린지를 할 수 있는 메뉴인 함께해요 챌린지 폼 방문자들이 크리에이터에게 전하고 싶은 메시지를 발송할 수 있는 폼을 설정하는 메뉴인 팬레터 폼 이벤트, 새로운 소식, 홍보 등에 사용할 배너 이미지를 추가하는 메뉴인 배너 이미지 폼입니다.

마이홈(방문자) 페이지
방문자들은 크리에이터의 소셜 미디어 프로필에 설정된 링크를 통해 마이홈에 접속합니다. 크리에이터 프로필, 방문자가 이용할 수 있는 링크, 관리자가 설정한 추가 서비스(기능)를 통해 크리에이터와 소통합니다.

고객관리(크리에이터, 유저) 페이지
팬레터, 메일링, 예약 메뉴에서 신청한 방문자들의 데이터를 엑셀 파일로 다운로드할 수 있는 기능을 제공합니다.

💻 서비스 아키텍처

📚 기술스택

⚒️ 라이브러리 사용

• Firebase: 사용자 인증, 데이터베이스, 스토리지 등 백엔드 서비스를 구현
• Jotai: 전역 상태 관리를 위한 상태 관리 라이브러리로 사용
• Styled-components: JavaScript 코드 내 CSS 스타일링을 용이하게 구현
• Ant Design: 다양한 UI 컴포넌트 제공 (Button, Space, Modal, Message 등)으로 사용자 인터페이스 디자인에 활용
• lottiefiles/react-lottie-player: .json 형식 애니메이션 재생용 라이브러리로, 로딩 페이지의 초저용량 애니메이션에 활용
• Lodash: Debouncing 및 useCallback을 활용하여 사용자 버튼 입력에 따른 서버 부하 최소화
• Browser-image-compression: 브라우저에서 이미지 압축 기능 제공, 대용량 이미지 업로드 시 자동 압축하여 서버 전송
• moment: JavaScript에서 간편한 시간 다룸
• React-calendar: 날짜 선택, 표시, 비활성화, 월간 뷰 등 달력 관련 기능을 구현하기 위해 사용
• Swiper: 다양한 스타일의 슬라이드를 구현하기 위한 라이브러리로 활용
• xlsx: 데이터를 엑셀 파일로 저장하는 기능을 구현하기 위해 사용

🤔 트러블 슈팅

• 폼 요소 값 및 상태 불일치로 인한 에러 발생 이슈
  • useState 초기값 설정하기
• 챌린지 기간 동안 달력의 활성화 일자가 예상과 다른 이슈
  • 날짜 생성 시 시간 정보 추가하기