Bug : 마이페이지 좋아요 리스트에 좋아요 기능 추가

[wonseok-do]

한 일

마이페이지 좋아요 리스트에 좋아요 기능 추가
좋아요를 누를 시 -> 좋아요 취소 -> 좋아요 리스트에서 없어지게 하기

에러 내용

#350 #353

1. 좋아요 취소를 누르고 좋아요 리스트에서 렌더링이 돼야지 없어짐 ->
   state값으로 변경하게 만듦 -> 부모 컴포넌트에서 state값을 주어 리스트가 다 사라짐
2. 리스트가 다 없앨 경우 리스트가 없습니다 라는 문구가 나와야되는데 안나옴

해결 방안

1. map을 돌리던 컴포넌트를 다시 분리해서 그 안에서 state값을 지정해줌

//RecipeSlider.jsx
{recipeList?.map((recipe, i) => {
          const title = recipe.title;
          let titleText = title;
          if (title.length > 10) {
            titleText = title.slice(0, 10) + "..";
          }

          if (windowWidth < 450) {
            if (title.length > 6) {
              titleText = title.slice(0, 6) + "..";
            }
          } else if (windowWidth < 600) {
            if (title.length > 8) {
              titleText = title.slice(0, 8) + "..";
            }
          }

          return (
            <RecipeSlickBox
              key={"slick_box" + i}
              header={header}
              onClickCard={onClickCard}
              recipe={recipe}
              titleText={titleText}
              setCountRecipeList={setCountRecipeList}
              countRecipeList={countRecipeList}
            />
          );
        })}

//RecipeSlickBox.jsx
const handleOnClickSlickBox = () => {
    setShowSlickBox(false);
    setCountRecipeList((prev) => prev - 1);
    if (countRecipeList !== 0) {
      currentSlickBox.current.parentElement.parentElement.remove();
    }
  };

return (
    // header, onClick, recipe, titleText // Slider의 자식은 inline-block
    <>
      {showSlickBox && countRecipeList !== 0 && (
        <StSlickBox
          isTitle={header}
          ref={currentSlickBox}
          onClick={onClickCard(recipe.recipeId)}
        >
          {headerElement}

          <div className="flex_box">
            <StCupHeight cupHeight={((recipe.cupSize / 591) * 100).toFixed()}>
              <IngredientList recipe={recipe} />
            </StCupHeight>
            <div className="padding_box">
              <RecipeTitle
                recipeId={recipe.recipeId}
                title={titleText}
                header={header}
                liked={recipe.isLiked}
                handleOnClickSlickBox={handleOnClickSlickBox}
              />
            </div>
          </div>
        </StSlickBox>
      )}
    </>
  );

추가적으로 리스트가 잘 없어지지 않아 ref와 parentElement 속성을 사용-> remove()사용해서 없애줌
2. state 카운터 값을 넣어 리스트 갯수 = 카운터가 0일 때 리스트가 없습니다라는 문구가 나오게 조건문을 걸음
but 조건문을 걸었는데도 불구하고 문구가 안뜸 -> slick 안에서는 안뜨는 것으로 판단 ->
slick바깥으로 따로 빼내어 다시 설정 -> 문구가 뜸 -> css도 다시 수정

//RecipeSlider.jsx
return (
    <>
      {(recipeList?.length === 0 || countRecipeList === 0) && (
        <StListEmpty>레시피가 없습니다.</StListEmpty>
      )}
      <StSlider {...settings}>
        ...
      </StSlider>
    </>
  );