[프로젝트] 웹 TripRecorder - day15

오류 및 문제점

1. styled.span

• 문제점: styled를 이용해 span 태그를 디자인하려 한다.
• 해결 방안: styled.div를 선언한 후 내부에 span을 디자인한다.

const BenefitBox = styled.div`
  display: inline-block;
  text-align: center;
  margin: 10px;
  width: 30%;
  span {
    display: inline-block;
  }
  .type {
    width: 50%;
    text-align: left;
  }
  .amount {
    width: 50%;
    text-align: right;
  }
`;

진행 상황

1. 인기 카드 조회

<div>
  {cardList.map((data, i) => {
    return (
      <CardInfo
        image={data.cardPhoto}
        name={data.cardName}
        link={data.cardLink}
        key={i}
      />
    );
  })}
</div>

<div>
  {benefitList.map((data, i) => {
    return (
      <Benefit
        discount={data.discountAmount}
        payback={data.payback}
        point={data.point}
        annual={data.annual}
        total={data.totalDiscountAmount}
        key={i}
      />
    );
  })}
</div>

2. 검색창

const search = (value) => {
  const searchType = value.searchType;
  const search = value.searchValue;
  if (searchType === "nickname") {
    axios
      .post("/search/nickname", { search })
      .then((res) => {
        setuserList(res.data.map((data) => data));
        setsnsList([]);
      })
      .catch((err) => console.log("error", err));
  } else {
    setsnsList([]);
    api
      .post("/search/hashtag", { search })
      .then((res) => {
        setsnsList(res.data.map((data) => data));
        setuserList([]);
      })
      .catch((err) => console.log("error", err));
    }
};

---

참고 자료

• styled span 디자인