Next.js 기반, Tailwind CSS 기반 UI/UX 구현에 최적화된 프롬프트 AI
반응형 디자인 구성, 미리보기 가능
올바른 프롬프트를 활용해 충분히 초기 기본 디자인틀을 만들어내는 것이 가능
(다만 요구사항을 명확하게 제시할 수록 좋은 답안이 나옴)
유명한 디자인 패턴을 제시하고 따라 제작하게도 가능
샘플 JSON 예시 제공으로 올바른 컴포넌트를 받고 처리하게 가능
프론트단의 문제도 제시할 경우 코드를 디버깅 가능
실제 사용기
아직 처음 사용이라 익숙하지 않다, Next.js 기반인 것도 처음 알아버렸다
올바르게 사용하기 위해 제시해야할 프롬프트
난 프론트엔드 개발자야.
맛집을 관리하기 위한 프로젝트에 프론트엔드를 구현하려고 해.
mock 서버와 연동하여 동작할 수 있도록 베이스 코드를 작성해줘.
**[프로젝트]**
- 맛집 관리를 위한 프론트엔드
- 백엔드 구현 `필요 없음`
- Mock 서버 활용
**[필수 기능]**
- 맛집 전체 조회
- 맛집 등록
- 맛집 삭제
**[기술 스택]**
- node 18.0.2, npm, React, TypeScript, Tailwind CSS, axios
**[데이터 구조]**
-
| **데이터 명** | **키** | **값 (예시)** |
| --- | --- | --- |
| 아이디 | id | 1 |
| 이름 | name | “맛집 이름” |
| 주소 | address | “맛집 주소” |
| 전화번호 | call | “전화번호” |
| 카테고리 | category | “카테고리” |
| 평점 | rating | 5 |
**[API]**
- api는 api/endpoint.ts에 정의할 것
**[API 명세서]**
- **맛집 (place) 등록**
**Request - 요청**
- **Method:** `POST`
- **URL:** `/places`
- **Content-Type:** `application/json`
- **Body:**
{
"name": "맛집 이름",
"address": "맛집 주소",
"call": "전화번호",
"category": "카테고리",
"rating": 5
}
```
**Response - 응답**
- **Status Code:** `201 Created`
- **Body:**
{
"id": 1,
"name": "맛집 이름",
"address": "맛집 주소",
"call": "전화번호",
"category": "카테고리",
"rating": 5
}
```
---
- **맛집 (place) 전체 조회**
**Request - 요청**
- **Method:** `GET`
- **URL:** `/places`
- **Content-Type:** `application/json`
**Response - 응답**
- **Status Code:** `200 OK`
- **Body:**JSON
[
{
"id": 1,
"name": "맛집 이름",
"address": "맛집 주소",
"call": "전화번호",
"category": "카테고리",
"rating": 5
},
{
"id": 2,
"name": "맛집 이름2",
"address": "맛집 주소2",
"call": "전화번호2",
"category": "카테고리2",
"rating": 4.5
}
]
```
---
- **맛집 (place) 삭제**
**Request - 요청**
- **Method:** `DELETE`
- **URL:** `/places/{id}`
- **Path Parameters:**
- `id`: 삭제할 맛집의 고유 ID
- **Content-Type:** `application/json`
**Response - 응답**
- **Status Code:** `204 No Content` (또는 `200 OK`)
- **Body:**
{
"message": "맛집 삭제 성공"
}
```Share article