79일차 - react, todoList

react

• 스크롤바예시1
• 스크롤바예시2

classNames

• html에서 class를 사용하여 편하게 css를 쓸수 있지만 React에서는 class가 예약어로 사용중이기 때문에 이를 해결하기 위해 나온 라이브러리이다.

<div className="tw-flex tw-flex-col tw-gap-2 tw-mt-3">
                <div className="tw-flex tw-gap-x-2 tw-font-bold">
                  <Chip className="tw-pt-[3px]" label={`번호 : ${todo.id}`} variant="outlined" />
                  <Chip
                    className="tw-pt-[3px]"
                    label={`날짜 : ${todo.regDate}`}
                    variant="outlined"
                    color="primary"
                  />
                </div>
                <div className="tw-rounded-[10px] tw-shadow tw-flex tw-text-[14px]">
                  <Button
                    className="tw-flex-shrink-0 tw-rounded-[10px_0_0_10px] hover:tw-bg-red-300 tw-items-start"
                    color="inherit">
                    <FaCheck
                      className={classNames(
                        'tw-text-3xl',
                        {
                          'tw-text-[--mui-color-primary-main]': index % 2 == 0,
                        },
                        { 'tw-text-[#dcdcdc]': index % 2 != 0 },
                      )}
                    />

MUI, SwipeableDrawer

<SwipeableDrawer anchor="top" open={status.opened} onClose={status.close}>
        <List>
          <ListItem className="tw-flex tw-gap-2 tw-p-[15px]">
            <span className="tw-text-[--mui-color-primary-main]">{status.todoId}번 </span>
            <span>Your Todo</span>
          </ListItem>
          <Divider className="tw-my-[5px]" />
          <ListItem className="tw-p-[15px_20px]">수정</ListItem>
          <ListItem className="tw-p-[15px_20px]">삭제</ListItem>
        </List>
      </SwipeableDrawer>

MUI, Modal

• 커스텀 훅

function useEditTodoModalStatus() {
  const [opened, setOpened] = React.useState(false);

  const open = () => {
    setOpened(true);
  };

TODO

• 개인프로젝트 레시피 작성시 요리재료, 요리도구 insert시 오류 수정

느낀점

• 후후.. 리액트 확실히 프론트라 그런지 졸리구만..