데브코스 최종 프로젝트 - 6~7일차 / 컴포넌트 구현

 

6~7일차 : 컴포넌트 구현

 

Text 컴포넌트

이전 중간 프로젝트에서 text컴포넌트를 너무 확장성을 높여서

거의 컴포넌트를 새로 만드는거랑 비슷하게 사용해야 했어서 그부분을 조금 개선하고 싶었다.

 

1. 사이즈는 5개사이즈로만 지정

xs, sm, md, lg, xl로만 받도록 하여 통일감 있는 폰트크기를 사용하게 하고자 함.

기본값도 지정하면 좋을 듯 했다. (부득이한 경우 숫자로 받을 수도 있게)

2. 폰트 컬러 내부에 지정

디자인 시안에서 사용되는 폰트 컬러를 컴포넌트 내부에 미리 지정하여 좀 더 편하게 사용했으면 했다

3. style props를 받을 수 있어야 함

이 외에 기본적인 block, font-weight, ellipsis 를 props로 받고 예외가 생길 수 있으니 style props 또한 받을수 있도록 함

 

<Text size="xs">제주 5코스</Text> // size 옵션
<Text size={12}>제주 5코스</Text> // 부득이한 경우 숫자 입력 가능

<Text color="gray">12</Text> // 지정된 컬러 테마 입력 시 지정된 컬러가 적용 됨
<Text color="#fff">12</Text> // 부득이한 경우 컬러코드 사용 가능

<Text block>#혼자여행 #맛집 #카페</Text> // block 설정 가능

<Text ellipsis> // 부모 크기에서 벗어날 경우 말줄임 처리 -> elipsis사용 시 자동으로  display는 block
    인천공항→ 도렐제주본점 → 서귀포 1번길 → 기타등등의 여행지
</Text>

 

 

 

Title 컴포넌트

Text 컴포넌트와 비슷하게 사이즈는 3개 사이즈로만 지정하고 기본값은 sm을 가장 많이 쓸 것 같아서 sm로 받았다.

title은 디자인 시안에서 font-weight가 들어가있기 때문에 기본으로 주고 따로 font-weight로 조정할 수 있게 했다.

 

😱 문제사항

level props로 h1~h6까지 설정 가능하게 하려고 했는데 그냥 javascirpt 코드로 작성했을 땐 되던 부분이

typescript를 적용하니 조금 까다롭게 되었다..

 

const Tag = `h${level}`;

//..생략

return (
    <Tag className={ellipsis ? 'ellipsis' : ''} style={{ ...fontStyle, ...style }} {...props}>
      {children}
    </Tag>
  );
  
  // Property 'children' does not exist on type 'IntrinsicAttributes'.

level의 type이  1 | 2 | 3 | 4 | 5 | 6 인데도 템플릿 리터럴로 h와 묶어서 사용하면 type에러를 반환한다.

Tag = "h1" 은 되는데  const Tag = `h${level}`은 안되는 상황,

 

✅ 해결

type tagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

const Tag: tagType = `h${level}`;

명시적으로 타입을 지정해주어서 해결했다.

typescript를 사용하면서 될 것 같은데 안되는 부분들을 자주 만나게 되는 것 같다

 

 

 

Icon 컴포넌트

icon도 미리 url을 전부 지정해놓고 사용하는 사람이 name만 입력해서 사용할 수 있도록 처리하기로 했다.

<Icon name="heart" size={20} rotate={90} />

icon 컴포넌트는 이전 중간프로젝트도 비슷한 형태로 구현되어 있었지만

그 때는 Typescript를 사용하지 않았어서 일일이 name을 찾아야 했었는데

typescript를 사용함으로써 자동완성이 되는 부분이 정말 좋은 기능이라고 몸소 느꼈다.

 

 

next/link

Text에 link를 적용하면 a태그가 붙지만 컴포넌트를 link로 감싸면 a태그가 붙지 않는다.

이것 외에도 react router dom의 link와 비슷하지만 다른 기능들을 제공한다.

좀 헷갈려서 이건 따로 테스트하면서 포스팅했다.