내부 관리자 도구 만들기
몇 분 만에 내부 도구 완성하기
모든 제품 팀에는 "누군가 빠른 관리자 화면을 만들어줬으면" 하는 요청이 백로그에 쌓여 있습니다. PM으로서 이제 더 이상 줄을 설 필요가 없습니다. AI와 약간의 Tailwind만 있으면, 운영 팀이 필요로 하는 내부 도구의 프로토타입을 직접 만들 수 있습니다.
이번 레슨에서는 깔끔한 관리자 패널을 만들어 봅니다. 액션 버튼이 있는 데이터 테이블과 간단한 "항목 추가" 폼으로 구성됩니다. 이것은 내부 도구 UI의 핵심이며, 직접 스케치할 수 있게 되면 모호한 Figma 대신 작동하는 프로토타입을 엔지니어링 팀에 전달할 수 있습니다.
실용적으로 접근하세요. 내부 도구는 예쁠 필요가 없습니다. 명확하고, 빠르고, 팀이 사용하기 편하면 됩니다.
안내
가운데 정렬된 컨테이너 div 안에 "User Admin Panel"이라는 페이지 제목(h1)을 추가하세요
힌트: 다음을 사용하세요: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`
어디에 작성하나요?
<!-- Build your admin panel here -->11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.
헤더 열(Name, Role, Actions)과 최소 한 행의 데이터가 있는 데이터 테이블을 추가하세요
테이블 행 안에 Edit과 Delete 액션 버튼을 추가하세요
텍스트 입력 필드와 제출 버튼이 있는 "항목 추가" 폼을 추가하세요
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 가운데 정렬된 컨테이너 div 안에 "User Admin Panel"이라는 페이지 제목(h1)을 추가하세요