2차 프로젝트 진행중

devMarco·2022년 5월 12일
0

Do do

  • 레이아웃 만들기
  • 컴포넌트화 하기
  • 한페이지 안에 styled-components 적용하기
  • 기능 구현 craousel, category별 필터링, 더보기에서 전체보기
  • 인기순 페이지 구현(랜덤 or 예약순)

Doing

  • 기능 구현 craousel
    react-slick 사용하여 사용중이나 커스터마이징이 어려움
  • category별 필터링
  • 더보기에서 전체보기
    생략예정
  • 인기순 페이지 구현(랜덤 or 예약순)
  • mockdata화

Blocker

 return (
    <StyledRecommendCard>
      {restaurantList.map((value, i) => (
        <div key={i} style={{ width: '25%' }}>
          <RecommendFoodCard key={i} value={value} />
        </div>
      ))}
    </StyledRecommendCard>
  );

map을 tag로 상위에서 감싸는 바람에 원치않는 사이즈가 계속 활성화 되었다.

const StyledRecommendCard = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

상위 요소에서 포지션속성을 줘야 한다.

Bookmark 버튼 만들기
처음에는 바탕이 있는 버튼으로 컬러만 바꾸는 방식으로 했으나 ui에서 가독성이 떨어지는 바람에
테두리만 있는 버튼에서 바탕이 있는 버튼으로 바꾸는 디자인으로 변경하였다.

{isBookMark ? (
          <i
            onClick={() => setIsBookMark(!isBookMark)}
            className="fa-solid fa-bookmark"
          />
        ) : (
          <i
            onClick={() => setIsBookMark(!isBookMark)}
            className="fa-regular fa-bookmark"
          />
        )}
const StyledRecommendCard = styled.div`
  position: relative;
  margin: 0 10px;

  .fa-bookmark {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
  }

  .fa-regular {
    color: white;
  }

  .fa-solid {
    color: #36c5ef;
  }
`;

내가 만들기 편한코드보다 사용자 입장에서 한번더 생각해 볼 필요가 있다고 생각했다.

0개의 댓글