[react-datepicker] datepicker 커스텀하기 (+ timepicker)

서론회사 프로젝트에서 datepicker가 필요했다. 라이브러리를 찾다가 커스텀하기에 용이해 보였던 react datepicker를 사용했다. 혼자 해보고 싶다면 다음 링크의 예제를 참고해서 해도 충분히 할 수 있을 것이다.https://reactdatepicker.com/목표형태가 일그러지지 않을 것날짜 범위에서 앞의 날짜보다 뒤의 날짜가 앞서지 않을 것'이전'의 범위를 할 경우엔 뒤의 날짜에서 오늘 이후의 날짜를 선택할 수 없을 것'이후'의 범위를 할 경우엔 앞의 날짜에서 오늘 이전의 날짜를 선택할 수 없을 것월, 년도를 선택할 수 있어야 할 것구현기본 Datepicker의 모습은 다음과 같다.완성된 모습은 다음과 같다. (혹시 검색을 할 때 나처럼 이미지를 보고 내가 구현하고자 하는 것과 유사한지 ..

• format_list_bulleted L/Javascript
• · 2024. 7. 18.
• textsms

[toast-ui eidtor/React/Typescript] toast-ui eidtor 커스텀하기 (+ 이미지 저장, youtube/vimeo 링크 변환)

🤔 서론회사 프로젝트에서 사용할 에디터가 필요했다. 이전에 CK에디터를 사용해본 적이 있는데, 이상하게도 버전 문제인지 CK에디터가 작동하지 않았고, 차선책으로 quill을 사용해봤으나 구현 후 빌드를 해보니 import에러가 발생해 사용할 수 없었다. 그래서 최종적으로는 toast-ui editor를 사용했고, 직접 툴바의 아이템을 자유롭게 커스텀할 수 있는 만큼 없는 기능이 많아 고생을 했기에 이 과정을 글로 남긴다.🥅 목표이미지 저장, youtube/viemo 노출(iframe)이 가능한 toast-ui editor로 커스텀하기👩🏻‍💻 구현* {{}} 이렇게 감싼 부분은 직접 넣어야 한다.결과전체 코드(에디터)import React, { useEffect, useRef, useState }..

• format_list_bulleted L/Javascript
• · 2024. 7. 18.
• textsms

[React/CSS] 모달 창 바깥을 클릭했을 때 모달창 꺼지게 하기

🤔 서론보통 모바일에서 많이 쓰이지만 한 번도 구현해본적 없는 기능을 구현해보려 했다. 항상 모달창에 x버튼을 두고 클릭하면 꺼지게 했는데 모바일에서 사용할 것을 대비하여 버튼 없이 기능이 작동하게 하려 한다.🥅 목표모달 창 바깥 배경을 클릭했을 때 모달 창 꺼지기👩🏻‍💻 구현전체 코드// 모달 창import React from "react";import { FiThumbsDown, FiThumbsUp } from "react-icons/fi";interface propsType { modalRef: React.ForwardedRef; modalOutsideClicked: (e: any) => void; cardId?: string; userId?: string;}export defaul..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms

[React/CSS] instagram 스토리처럼 드래그로 요소 넘기기

🤔 서론현재 나만무 프로젝트를 진행 중인데, 최근 게시물을 어떻게 보여줄 수 있을까 고민을 하다가 인스타그램의 스토리 기능이 생각났고 해당 부분의 인터랙션을 차용하려 한다.🥅 목표인스타그램 상단에는 최근 스토리를 올린 사람의 프로필이 뜬다. 터치해서 좌우를 자유롭게 움직일 수 있다.(모바일 기준) 해당 인터랙션처럼 드래그로 프로필을 움직이는 것을 구현하려 했다.👩🏻‍💻 구현전체 코드const getFriends = async () => { ... const [isMouseDown, setIsMouseDown] = useState(false); const [startX, setStartX] = useState(0); const [scrollLeft, setScrollLeft] = useSt..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms