[민우] - 작성 가능 리마인드 아이템 컴포넌트 구현

[MinwooP]

📌 이슈 번호

close #47

🚀 구현 내용

Writable.mp4

• 계획 작성 페이지, 계획 수정 페이지에서 사용되는 수정 가능한 리마인드 아이템 컴포넌트입니다.
• 리마인드 메세지가 입력되지 않았다면 경고 문구를 띄워지고, 조금이라도 입력된다면 없애줍니다.
• 만약 첫번째 리마인드 아이템이라면 현재 메세지로 나머지 메세지를 다 동기화할 수 있는 체크박스를 선택가능합니다.
• 체크박스 해제 시, 그 이후부터는 동기화가 멈춥니다.

📘 참고 사항

인자로 넣어줘야 할 data

interface WritableRemindItemProps {
  remindMonth: number; // 리마인드 받는 월 ex) 6
  remindDay: number; // 리마인드 받는 날 ex) 15
  remindMessage: string; // 리마인드 메세지 ex) 미래의 민우야
  handleChangeRemindMessage: (text: string) => void; // 리마인드 메세지 업데이트하는 핸들러  => 하위 RemindInput으로 전달될 것
  makeAllRemindMessageSame?: () => void; // 동일한 리마인드 메세지 받기 => 이게 넘어온다면 첫번째 아이템이라는 것
}

호출 예시

export default function Home() {
  const [remindMessage, setRemindMessage] = useState('');

  useEffect(() => {
    console.log(`리마인드 메세지 내용 변경 : ${remindMessage}`);
  }, [remindMessage]);

  const handleMakeAllRemindMessageSame = () => {
    console.log('모든 메세지 내용 첫번째 메세지로 동기화');
  };

  return (
    <div style={{ margin: '100px' }}>
      <WritableRemindItem
        remindMonth={12}
        remindDay={2}
        remindMessage={remindMessage}
        handleChangeRemindMessage={setRemindMessage}
        makeAllRemindMessageSame={handleMakeAllRemindMessageSame}
      />
    </div>
  );
}

[suehdn]

로직이 굉장히 복잡하군요.. 컴포넌트 만드시느라 고생 많으셨습니다 민우님!
굉장히 잘 만드신 것 같습니다 👍

[suehdn]

useMemo 사용하셨군요 👍

[suehdn]

로직이 복잡하네요..😭 약간이라도 짧게 쓰려면 이 방법은 어떠신가요

Suggested change

	{isSameMessageModalOpen && isSameMessageChecked === false && (
	{isSameMessageModalOpen && !isSameMessageChecked && (

[MinwooP]

오오 왜 저렇게 썼을까요 저 ㅋㅋㅋㅋ 감사합니닷

[qkdl60]

lgtm 고생하셨습니다.👍

[qkdl60]

계산이 복잡하지 않으니 useMemo를 안써도 isRemindMessageEmpty 를 사용하는 곳에 remidMessage.length === 0 통해서 처리해도 괜찮을것 같습니다

[MinwooP]

앗 컴포넌트 return 부분이 좀 복잡해서 최대한 줄여서 가독성을 높이려는 의도로 만들긴 했는데 한번 고려해보겠슴다 ^^