부트캠프 React 과정 9.04

오늘의 목표

• 팀프로젝트 MVP 마무리하기

알게된것

• 오늘 팀프로젝트를 마무리하면서 아직 완료가 되어있지않은 디자인 적인 부분들을 하던 와중에
  새로 알게된 부분이있었다. 원래 아이콘들을 PNG 파일로 사용하고 호버했을시 색을 바꾸고 해봤던 경험이 없어서 몰랐는데 PNG파일의 색을 바꾸는건 가능하지않았다.
  그래서 SVG파일을 컴포넌트를 하나 만들어서 생성한후

``

import type IconType from 'types/icon';
const IconFavoriteFill = ({ w, h, fill }: IconType) => {
const width = w-[${w as string}px];
const height = h-[${h as string}px];
return (
<svg
width={w || '24'}
height={h || '24'}
viewBox={0 0 ${w || '24'} ${h || '24'}}
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={w !== undefined && h !== undefined ? ${width} ${height} : ''}

  <path
    d="M12 0L8.42313 8.09062L0 9.16712L6.21269 15.2442L4.58344 24L11.9999 19L19.4164 24L17.7872 15.2442L23.9999 9.16712L15.5767 8.09062L12 0Z"
    fill={fill || 'black'}
  />
</svg>);};

export default IconFavoriteFill;

``
채워져있을때랑

``

import React from 'react';
import type IconType from 'types/icon';
const IconFavoriteSolid = ({ w, h, fill }: IconType) => {
const width = w-[${w as string}px];
const height = h-[${h as string}px];
return (
<svg
width={w || '24'}
height={h || '24'}
viewBox={0 0 ${w || '24'} ${h || '24'}}
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={w !== undefined && h !== undefined ? ${width} ${height} : ''}

  <path
    d="M12 0L8.42313 8.09062L0 9.16712L6.21269 15.2442L4.58344 24L11.9999 19L19.4164 24L17.7872 15.2442L23.9999 9.16712L15.5767 8.09062L12 0Z"
    fill={fill || 'black'}
  />
</svg>);};

export default IconFavoriteSolid;

``
안채워져있을 경우의 두 컴포넌트를 만들어서

``

button onClick={favoriteHandler} className="w-[30px] h-[30px]">
{isFavorite ? (
IconFavoriteFill fill="#FFC803" />
) : (
IconFavoriteDefault fill="#E1E2E3" />
)}
/button>
``

클릭했을때와 안했을때의 각 필요한 컴포넌트를 import를 해서 완성하였다.

느낀점

• 어제부터 이어서 mvp필요한 기능들도 최대한 완성하기 위해 노력하고 Css적인부분도 수정하며
  진행을 하였는데 정말 3주간 프로젝트를 진행해오면서 팀원분들에게 많은부분 배우기도 하고
  많이 알아갈수있었던 3주였던거 같습니다 아직 2주간의 시간동안 프로젝트를 남은부분도 진행하고
  리펙토링도 해나가야되고 폴더를 좀더 새분화해서 분리하여 가독성에 좋게 만들어야되는데
  이번 최종프로젝트를 진행하면서 하나하나 많은 부분 배울수있어서 좋은 시간인거 같습니다.