221130 어드민 페이지의 '새로운 장소 등록하기' form 만들기

샨티(shanti)·2022년 11월 30일
0

하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.

동료와 함께 어드민 페이지를 구현해 나가다가 정신도 나가버릴 것 같다는 말을 입에 달고 살았던 것 같다. ㅎㅎㅎㅎㅎ
왠지는 잘 모르겠지만 내가 구현해야 하는 어드민 페이지의 요소 중에서 '새로운 장소 등록하기' form의 경우에는 만만찮은 작업이란 느낌이 들었다.


위 지도 처럼 하나의 장소에 대해 마커를 찍으려면 아래와 같은 정보들이 필요하다.



장소 이름, 주소, 유형, 연락처(전화번호, 홈페이지), 편의시설 4종, 영업시간, 그리고 사진과 위/경도.
오늘 하루종일 폼을 구현하고 이 정보값을 얻어오려다가 정말 정신이 나가버리는 줄 알았다 ;;
처음에는 HTML의 form을 통해 구현해보려다가 validation이 필요할 것 같아 use-hook-form 라이브러리를 설치해서 필드를 만들기 시작했다.
use-hook-form은 지난 과제에서도 많이 사용하긴 했었는데 사실 input, text-area 정도를 사용해서 login, sign-up을 구현했었지 이번처럼 라디오 버튼이나 time 타입의 input을 활용하진 않았던 것 같다.
그리고 저 사이에 깨알같이 숨어있는 다음 주소찾기 library까지...ㅎㅎ

사실 영업시간은 월~일 각 요일마다 작성하는 것이었는데 막상 요일마다 모든 input을 만들고 required를 설정해두니 영업시간 입력에만 input 14번을 두들기고 있었다.
나중에 배포 전에 바꾸는 한이 있더라도 지금은 뭐 테스트 하나 하는 것도 쉽지가 않은 상황이라 간략하게 평일/주말로 구분해서 입력받게 했고, 추후에 서버 구현시에는 평일 값을 월~금에 동일하게 넣어줄 수 있도록 해야겠다.

다음 주소찾기 라이브러리도 우연찮게 의도치않은 결과를 뱉어내는 부분을 발견했다.
도로명으로 검색해서 도로명 또는 지번 주소를 선택하는 것은 문제 없이 돌아간다.
근데 지번으로 검색해서 지번 주소를 선택할 때부터 필드에 검색된 주소값이 들어가지 않는 것이었다.
처음엔 내가 잘못 본건가? 첫 클릭 시 데이터가 안들어가는건가? 별 생각을 다했는데.
console.log()로 받아오는 데이터를 확인해보니 '도로명 검색' 시 넘어오는 데이터에 대해서만 처리를 하도록 코드가 구현되어 있는 것이었다.
사실 좀 의아했던게...
왜 이렇게 한 타입의 데이터만 처리하도록 예시코드를 구현해놓았을까? 하는 부분이었다.
어쨌든 나는 지번 주소가 없이 도로명 주소만 있는 장소에 대해서도 문제없이 처리되어야 하기 때문에 코드를 추가로 수정해서 제대로 돌아가는 상태를 만들어두었다.

위 form에 추가되어야 할 것이 2가지 있는데,
장소 관련 사진 3장을 업로드하고 url을 받아올 수 있는 로직&클라우드를 접목시키는 것. 그리고 관리자가 입력한 주소값에 따라 위도/경도를 자동으로 받아올 수 있도록 카카오 API 중에서 geo ~ 관련 API를 활용하는 것이다.

어드민 기능의 10%도 구현하지 못한 것 같은데 벌써 수요일이라 굉-장하게 당황스러운데. 이 사태를 (ㅎㅎ.. 하) 잠재우기 위해서는 빠르게 핵심 기능만 가져가고 할 수 없는 부분들은 쳐내는 방법밖에 없을 것 같다.

너무... 고통스럽지만(ㅎㅎ) 마지막 5%의 디테일을 챙기는 사람이 되자.
마지막. 마지막까지 그 디테일을 한없이 끌어올려야한다.

힘!!

profile
가벼운 사진, 그렇지 못한 글

0개의 댓글