[Book Buddy / Function] TypeScript 사용시 React Quill 이미지 사이즈 조절

React Quill을 선택한 이유 이번 프로젝트에서 에디터를 사용해보고싶은데 어떤 에디터를 쓸지 고민을 많이 했었다. 아무거나 쓰는게 아니라 하나를 사용할 때 정확한 이유를 두고 사용하고싶었다. 아래 메모는 주관적인 견해도 들어가 있고 사실과 다른 부분이 있을 수 있으니 진지하게 참고하지 않기를... 🥲 CkEditor는 살짝 Install 해봤더니 너무 무거웠고 내가 사용할 곳은 1:1 문의란이라 많은 기능이 필요하지도 않았기 때문에 패스. Toast UI랑 Quill 중에 기능적인 부분은 Toast가 마음에 들었었는데 이미지 조절이 안 된다는 사실 하나 때문에 Quill을 선택했다. (내가 이미지 사이즈 조절을 얼마나 중하게 생각하는지 나도 모르던 나를 알게 되었다) 아무튼 본론으로 들어가서 막상 ..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 9. 5.
• textsms

[Book Buddy / Function] input 자동 탭 기능 만들기

여러 사이트를 이용할 때 가끔 정말 불편하다고 느끼는 사이트가 있었다. 전화번호 앞번호 뒷번호를 따로 입력하게끔 만들어놓고 자동 탭이 되지 않는 사이트들... 나는 키보드 오른쪽 숫자키들을 애용하기도 하고 아무 생각 없이 외우고 있는 번호를 우다다 누르는데 자동 탭이 되지 않는다? UX적으로 정말 불편하다고 느꼈었다. 그래서 막상 내가 전화번호 입력란을 만들게 되니 반드시 자동 탭을 만들어야겠다 싶었다. 찾아보니 .focus로 해결할 수 있겠다. 간단하게 전화번호 앞 자리 입력이 끝나면 dom 에 접근해서 직접 .focus를 주면 될 듯 하다. 먼저 dom에 접근. useRef를 써야한다. 앞 자리 입력이 끝나면 뒷 자리에 focus 되도록 해야하므로 뒷 자리를 받는 input을 ref에 저장한다. //..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 26.
• textsms

[Book Buddy / Function] 전화번호 숫자 길이 제한하기

문제상황: 핸드폰 번호를 입력받는 input을 4자리로 제한하고 싶은데 max, maxLength 모두 의도대로 작동하지 않는다. 알아보니 maxLength는 type이 number일 때 적용할 수 없고, max는 1. 지정한 숫자를 입력받지만 화면에서는 지정한 숫자를 넘은 숫자까지 입력할 수 있고, 2. 지정한 숫자를 넘을 경우 실제 입력받는 값은 지정한 최대값으로 고정된다. 가장 일반적인 방법은 type을 text로 지정한 후 pattern 정규식을 활용해 숫자만 입력받게끔 하고, maxlength를 지정하는 것이라고 한다. 참고자료 https://webisfree.com/2022-04-28/[html]-input-%ED%83%9C%EA%B7%B8-number-%ED%83%80%EC%9E%85%EC%..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 24.
• textsms

[Book Buddy / Function] 클릭한 메뉴로 스크롤 이동하기

클릭한 메뉴의 위치로 스크롤이 이동하는 로직을 구현했다. 간단하지만 타입스크립트 사용, 사이드바와 별개의 컴포넌트인 바디, 헤더 높이 등 고려해야 할 여러 조건때문에 은근히 고민하게 만든 친구다. 1. useRef에 이동할 태그 저장하기 // mypage component const navScrollListRef = useRef([]); return( // ...중략 { navScrollListRef.current[0] = el; }}> { navScrollListRef.current[1] = el; }}> { navScrollListRef.current[2] = el; }}> // ...중략 ) 일단 useRef를 사용하여 스크롤을 이동시킬 div의 위치를 저장한다. 사이드바의 메뉴 개수만큼 있어야 하..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 22.
• textsms

[Book Buddy / Function] hover로 모달 사용하기

문제상황: 나의정보 span에 hover를 주었더니 모달로 마우스를 이동하는 순간 hover가 풀려 모달 메뉴를 사용할 수 없었다. 일단 모달을 감싸는 wrapper와 모달 컴포넌트를 '나의정보' span에 넣어주어 span에 hover를 주었을 때 hover 내용이 모달에도 적용되도록 했다 (마우스가 모달로 넘어가도 모달이 나타나 있도록). // html(with styled-components) 나의정보 // 모달을 감싸는 wrapper // 모달 하지만 나의 경우 디자인상 나의정보 span과 모달 사이에 간격이 있어 마우스가 모달로 넘어갈 수 없었다. 나의정보에서 모달로 마우스를 옮기기 위해서는 간격 부분을 지나가야 하는데 간격에 닿으면 모달이 꺼진다. 이 문제를 해결하기 위해 고민 끝에 모달을 감..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 22.
• textsms