Skeleton 애니메이션 변경, pr&issue 템플릿 변경, 글 수정 및 다중선택 컴포넌트 관련 버그 해결

[inyeong-kang]

🔥 연관 이슈

close: #91
close: #271
close: #281
close: #302

📝 작업 요약

(91번 이슈✅)

1. 스켈레톤 UI pulse 효과를 wave 효과로 변경하였습니다. (애니메이션 등 style 수정)
2. 스켈레톤 컴포넌트에 isLarge 라는 props를 추가하였습니다.
   

(271번 이슈✅)
3. 글 수정 페이지에서 mock 데이터가 나오는 이슈를 해결하였습니다.

(281번 이슈✅)
4. 다중 선택 컴포넌트를 터치해야만 해당 컴포넌트가 닫히는 이슈를 해결하였습니다.
(useEffect를 이용하여 해당 컴포넌트의 외부 영역을 터치하면 컴포넌트가 닫히도록 하였습니다.)

(302번 이슈✅)
5. pull request, issue 템플릿에 소요 시간, 일정 추정 항목을 각각 추가하였습니다.

🔎 작업 상세 설명

interface SkeletonProps {
  isLarge: boolean; // (isLarge가 true이면 첫번째 박스의 세로 길이가 긴 형태입니다.)
}

🌟 논의 사항

[Gilpop8663]

많은 이슈를 해결하셨네요!

전체적으로 코드가 깔끔해서 코멘트 남길 것이 보이지 않았어요

어프로브하겠습니다~

[Gilpop8663]

꼼꼼하시네요 ! 👍👍👍

[chsua]

좋아요!
이제 에러가 발생했을때 처리가 더 쉽겠군용
다른거 할 때 참고하기 너무 좋아요!
고생하셨습니다!

스켈레톤에 의견이 있어서 확인 부탁드립니다!

[chsua]

정리 깔끔하네용

[chsua]

그냥 mouseEvent에서 react.mouseEvent로 수정하신 이유가 궁금합니다!

[inyeong-kang]

React의 MouseEvent 타입과 document에서 쓰이는 MouseEvent 의 타입이 각각 있는데, 이 둘을 가독성 측면에서 명시적으로 구분해주기 위함입니다!

• document 에서 쓰이는 MouseEvent 타입

 const handleOutsideClick = (event: MouseEvent) => {
    if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleOutsideClick); 
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, []);

• React에서 쓰이는 MouseEvent 타입
  

[inyeong-kang]

처음에는 React에서 MouseEvent 타입을 import해서 썼었는데(아래처럼..)
import { MouseEvent } from 'react';

document의 MouseEvent 타입명이 같다보니 아래 같은 오류가 뜨더라구요...

그래서 오류 해결을 위해서라도 React.MouseEvent 로 고쳐줘야 했습니다!

[chsua]

혹시 갑작스레 건의드려 죄송하지만 해당 부분을 px로 정의하기보다 vh는 어떠세요??
핸드폰 크기에 따라서 디스플레시 세로화면 길이가 되게 작다면 스켈레톤이 너무 크게 다가올 수도 있을 거 같아서요!

//40/30은 임의의 숫자 - 높이 확인 안해봄
$isLarge ? "40vh" : "30vh"

그러면 그 하위의 더 작은 스켈레톤은 이거를 기준으로 반/반의 반 정도로 하고
너무 높이가 긴 경우를 대비해 max-height를 지정해도 좋을 것 같아요.

[inyeong-kang]

제안 감사합니다! 반영 완료했어요!✅

[chsua]

bb 수정 성공하면 상세페이지로 이동하는거 좋아요

[chsua]

빠른 피드백 감사합니다!!
고생하셨습니다!