버튼들을 만들 때 코드 가독성을 위해 버튼 내 들어갈 내용을 객체로 만든 뒤 버튼 하나하나에 할당 하기로 구상했다.
버튼 안에 들어갈 내용들 : 아이콘, URL, 설명
나머지는 string으로 타입 설정 해주면 되지만 아이콘은 다른 타입이다.
interface btns {
icon: string;
name: string;
description: string;
url: string;
}
type btnType = btns[];
export default function HomeMainMenu() {
const icon1 = (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
height="60%"
width="60%"
viewBox="0 0 490 490"
>
<g>
<path d="M224.777,305.082H405.12c3.99,0,7.599-2.372,9.181-6.036l74.88-173.406c1.335-3.09,1.024-6.644-0.825-9.457 c-1.849-2.814-4.989-4.507-8.355-4.507H129.393l-20.676-63.188c-1.345-4.11-5.179-6.891-9.504-6.891H10c-5.523,0-10,4.478-10,10 c0,5.522,4.477,10,10,10h81.964l77.413,236.595c1.345,4.11,5.18,6.891,9.504,6.891h23.403l-28.482,54.688 c-3.65-0.958-7.48-1.473-11.428-1.473c-24.841,0-45.051,20.21-45.051,45.052c0,24.843,20.21,45.055,45.051,45.055 c21.402,0,39.356-15.011,43.916-35.055h176.654c4.561,20.044,22.511,35.055,43.912,35.055c24.845,0,45.058-20.212,45.058-45.055 c0-24.842-20.213-45.052-45.058-45.052c-21.4,0-39.352,15.009-43.912,35.052H206.29c-2.193-9.639-7.481-18.108-14.766-24.309 L224.356,306C224.514,305.698,224.653,305.391,224.777,305.082z M266.737,131.675h53.877l-28.801,66.698h-53.877L266.737,131.675z M216.152,198.374h-53.871l28.794-66.698h53.877L216.152,198.374z M313.599,198.374l28.801-66.698h53.873l-28.801,66.698H313.599z M358.835,218.374l-28.805,66.708h-53.873l28.805-66.708H358.835z M283.177,218.374l-28.805,66.708h-53.875l28.804-66.708H283.177z M398.546,285.082h-46.73l28.805-66.708h46.731L398.546,285.082z M435.987,198.374h-46.73l28.801-66.698h46.731L435.987,198.374z M169.292,131.675l-18.975,43.951l-14.381-43.951H169.292z M164.304,218.374h43.213l-24.584,56.934L164.304,218.374z M162.374,428.404c-13.813,0-25.051-11.239-25.051-25.055c0-13.813,11.237-25.052,25.051-25.052 c13.812,0,25.049,11.238,25.049,25.052C187.423,417.165,176.186,428.404,162.374,428.404z M426.856,378.297 c13.816,0,25.058,11.238,25.058,25.052c0,13.815-11.241,25.055-25.058,25.055c-13.81,0-25.045-11.239-25.045-25.055 C401.811,389.536,413.047,378.297,426.856,378.297z" />
</g>
</svg>
);
const rectangles: btnType = [
{
icon: icon1,
name: "사기",
description: "블록체인으로 기록되는 안전한 거래를 이용해 보세요!",
url: "/",
},
...
...
이 때 아이콘 타입은
EmotionJSX.Elemnet
타입이다.
EmotionJSX
라는 타입을 아무리 해도 임포트가 되지않는다.
치트키발동
하지만
type/emotion
은 npm에 등록되지 않았다고 나온다.
export namespace jsx {
namespace JSX {
interface Element extends EmotionJSX.Element {}
interface ElementClass extends EmotionJSX.ElementClass {}
interface ElementAttributesProperty
extends EmotionJSX.ElementAttributesProperty {}
interface ElementChildrenAttribute
extends EmotionJSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<
C,
P
>
interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T>
extends EmotionJSX.IntrinsicClassAttributes<T> {}
type IntrinsicElements = EmotionJSX.IntrinsicElements
}
}
emotion
내부의 index
파일을 보면 너무나 친절하고 가독성 좋게 나와있다.
import { jsx } from "@emotion/react";
interface btns {
icon: jsx.JSX.Element;
name: string;
description: string;
url: string;
}
너무나 쉽게 해결
배운점 : 무작정 검색하기전에 파일 구조 부터 보는 습관을 기르자.
.