inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

(선택수강) UI 구축

material 붉은 밑줄

해결된 질문

107

빌더

작성한 질문수 6

0

스크린샷 2025-07-17 172045.png.webp

이런식으로 저도 그렇고, 로펀님도 그렇고 material 가져올때 붉은 밑줄이 나오는데, 이거 안 나오게 하는 방법이 있나요?

firebase next.js tailwindcss react-query supabase

답변 2

0

로펀

안녕하세요 🙂 index.d.ts 파일을 별도로 하나 정의하신 후에 @material-tailwind/react에 대해 별도로 declare을 진행해주시면 됩니다. 아래 답변주신 것처럼 타입 정의가 까다롭게 되어있어서 저는 타입에러는 무시하고 별도로 덮어써서 진행을 합니다.

0

eggmun(문성진)

Input, Button 컴포넌트에 마우스를 올렸을 때 나오는 에러 메시지를 캡처해서 보여주실 수 있을까요?

0

빌더

'{ label: string; placeholder: string; icon: Element; }' 형식에 'Pick<InputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "onMouseEnter" | "onTouchStart" | "onClick" | "type" | "defaultChecked" | ... 285 more ... | "shrink">' 형식의 onResize, onResizeCapture, onPointerEnterCapture, onPointerLeaveCapture, crossOrigin 속성이 없습니다.ts(2739)

(alias) const Input: ForwardRefExoticComponent<Pick<InputProps, "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "onMouseEnter" | "onTouchStart" | "onClick" | "type" | "defaultChecked" | ... 285 more ... | "shrink"> & RefAttributes<...>>
import Input

0

빌더

에러가 저런 식으로 나오네요

0

eggmun(문성진)

Material tailwind의 Input, Button 컴포넌트 내부적으로 React의 모든 input, button 속성을 포함하도록 타입을 선언한거 같아요.

그래서 사용하지 않은 타입도 명시적으로 전달을 해줘야 되는 불편한 부분이 있네요 아래와 같이 작성하시면 타입 오류는 해결될 거예요!

 

'use client';

import { Button, Input } from '@material-tailwind/react';

export default function UI() {
  return (
    <div className="w-2/3 mx-auto flex flex-col items-center py-10 gap-2">
      <h1 className="text-xl">TODO LIST</h1>

      <Input
        label="Search TODO"
        placeholder="할일을 검색하세요"
        icon={<i className="fas fa-search" />}
        crossOrigin=""
        onResize={undefined}
        onResizeCapture={undefined}
        onPointerEnterCapture={undefined}
        onPointerLeaveCapture={undefined}
      />

      <Button 
        placeholder=""
        onResize={undefined}
        onResizeCapture={undefined}
        onPointerEnterCapture={undefined}
        onPointerLeaveCapture={undefined}
      >
        <i className="fas fa-plus mr-2" />
        ADD TODO
      </Button>
    </div>
  );
}

0

빌더

감사합니다. 참고할게요!

0

eggmun(문성진)

@material-tailwind/react 라이브러리 자체에서 타입을 잘못 작성한거 같아요. 그래서 크게 신경안쓰셔도 될거 같아요

Recoil 에러

0

66

1

투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ

0

67

1

supabase 오픈 소스 사용에 대해서

0

83

0

next와 react query 버전 업데이트 관련 질문

0

62

1

Vercel 무료버전 서버속도

0

509

2

파일 이름이 한글일 때 에러 발생

0

241

2

recoil 타입 에러

0

100

2

강의 code 올려논 github 있나요 ?

0

106

2

아니... 강의 자료가 없나요?

0

173

3

무한스크롤 기능, 검색기능 대소문자

0

100

1

smtp부분

0

85

2

모듈 에러

0

142

2

20:34초에 await이 아무 효과가 없다고 뜨는데 사용하신 이유가 궁금합니다

0

163

2

latest 버전 변경에 따른 프로젝트 설정 방식 업데이트 가능하신가요

0

151

2

개인 개발자 비즈 앱 전환 버튼이 안보여요

0

231

2

supabase에서 가입된 유저를 강제로 로그아웃 시키는 방법?

0

412

2

메세지를 전송하면 DB에는 남는데 화면에 보이지 않아요.

0

127

2

globals.css 설정 질문드립니다

0

258

2

6:29 movie-card-list.tsx파일작성하시기전에

0

82

2

todolist할때 컴포넌트 분리 안했던 것 같은데...

1

130

2

vscode에서 @material-tailwind/react component를 가져왔을 때 뜨는 빨간줄 제거할 수는 없나요?

0

313

2

searchMovies에서 hasNextPage가 필요한 이유

0

132

2

react 19버전에서는 recoil사용이 어렵나요?

0

1472

2

netflix clone 할 때 recoil을 하는 순간 에러가 없어지지 않아요

2

302

3