상현

국립암센터 발전기금

( 업데이트: )

By

👋 들어가며

안녕하세요 퍼블리셔 한상현입니다.

국립암센터발전기금 홈페이지의 제작을 진행하였습니다. was 퍼블리싱 워드프레스 구성 이렇게 3가지를 완료하였습니다.

기업 홈페이지와 비슷하여 백엔드 커스텀은 따로 하지 않았습니다.

약정신청서

개발방향

  • CRA + WP Contact Form 7
  • react-hook-form
    왜? 폼은 다양한 상태를 가지는데 html로제작하고 모든 상태에 대한 유효성 및 테스트를 폼자체에서 처리하기 위해서 사용
    html + js로 워드프레스에서만 구현하기 너무 까다롭고 폼에 인풋들이 너무 많음
    로직에따라 보여져야할 폼들이 나눠있다 판단해서
  • MUI(material-ui)
  • Contact Form 7 + Flamingo
    컨택트폼의 API를 통해 데이터를 추가하는 것이 간편해서 컨택트 폼을 선택 그래비티 폼즈에서는 이러한 기능을 넣기 어려움
    플라밍고를 통해서 API로 받은 데이터를 리스트업시켜서 저장하고있을 수 있음
    REST API End point /wp-json/contact-form-7/v1/contact-forms/16/feedback

약정신청서 폼

주소

다음주소 사용

가장 일반적으로 많이 사용하고 검색기능이 편리함 유저친화적

모달 컴포넌트 https://github.com/AlexanderRichey/styled-react-modal

다음주소 컴포넌트 https://github.com/bernard-kms/react-daum-postcode

주민등록번호 유효성 검사

주민등록번호 유효성 검사 폼을 앞,뒤로 나눠서 만든다음 해야할까?
그렇다면 어떻게 합쳐서 폼을 만들까?
input masking에 대해서 https://github.com/sanniassin/react-input-mask 사용해서 마스킹
input masking에 대해서는 위 라이브러리가 되게 만족스러운데 아직 react-hook-form에서 간단하게 사용할 수 있는 방법이 없고 많이 복잡한 방법으로 사용할 수 밖에 없다.
https://github.com/react-hook-form/react-hook-form/pull/1207/files
간단하게 숫자 + 자릿수 유효성 검사로 구현

참고

응원 메세지

국립암센터 발전기금 홈페이지의 메인페이지에 응원 메세지를 남기는 기능이있다 어떻게 구현할까 고민을 해봤다.

기존의 방식 (CPT)

워드프레스의 post로 익명의 유저가 게시물을 만들고 그 게시물을 보여주게하는 것 뿐이다. 기존에 많이 사용했던 방식이라 어려움이 없다.

새로운 방식 (CRA 웹앱)

WHY?

우선 홈페이지의 유저 관리에 대한 기능이 없다.

그런데 메세지를 남기고 남용을 방지하고 스팸을 사전에 필터링해야 한다 생각

그래서 임시적, 일회성으로라도 유저 인증을 해야 한다 생각했다. 그래야 중복참여 방지, 스팸 제거를 할 수 있을 거라 생각했다. 그리고 여러 이벤트 페이지에서 Next.js + Firebase를 통해서 메세지를 구현하는 것을 보았다.

현재 페이지가 Next.js로 구현되어 있지 않고 워드프레스 기반이라서 CRA로 한개의 돔만 웹앱으로 구현을해서 CRA 제작을 생각해봤다.

알고있어야 할 사항

Firebasee 기반의 스토리지 사용 (Firestore)

일일 데이터 베이스 무료기준

  • 읽기: 5만회
  • 쓰기: 2만회

장점: 실시간 반영 메세지

단점: 외부서비스 사용, 제한적인 시스템

데이터 베이스의 읽기쓰기 무료기준을 넘을 일은 없다 판단하여 Firebase 기반으로 제작해도 좋을 것같다

CRA

Firebase

Cloud Firestore로 데이터 실시간 업데이트 가져오기

▶️ https://firebase.google.com/docs/firestore/query-data/listen

로컬스토리지로 상태 저장하기

▶️ https://programmingwithmosh.com/react/localstorage-react/

메세지를 보낸 여부를 DB의 값을 읽어서 유효한지 체크하는 방식이 아닌 로컬스토리지의 값을 저장해서 체크하는 방식으로 구현

SlickSlide

슬라이드를 워드프레스에서 구성하고싶었지만 리액트 앱이 구성된다은 슬릭슬라이드 스크립트가 동작해야하는데 두개가 생각한대로 순서대로 작동하게 확정할 수 없어서 앱내부에 추가해서 구현 완료

CPT로 전환

유지보수에있어서 Firebase 기반의 웹앱으로 기능을 추가하는 것은 무리일 것 같다고 피드백을 받았다.

요구사항 추가: 관리자가 워드프레스에서 편리하게 메세지를 관리할 수 있어야 한다

포스트 생섬 폼 플러그인 ▶️ https://wordpress.org/plugins/user-submitted-posts/

위 플러그인으로 익명 사용자에 대한 프론트 포스트 생성 폼을 제작해서 구현