> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/reference/prompt-examples.md). # 프롬프트 예시 모음 자주 사용하는 프롬프트 예시 모음입니다. 복사하여 사용하세요. *** ### 앱 생성 #### 직원 관리 앱 ``` 직원 관리 앱을 만들어줘. 필요한 기능: 1. 직원 추가 폼 (이름, 부서, 이메일, 입사일) 2. 직원 목록 테이블 3. 검색 기능 4. 부서별 필터 디자인은 심플하고 깔끔하게 해줘. ``` #### 재고 관리 앱 ``` 재고 관리 시스템을 만들어줘. 필요한 기능: 1. 상품 등록 폼 (상품명, 카테고리, 수량, 단가, 최소 재고) 2. 재고 현황 테이블 3. 카테고리별 필터 4. 재고 부족 알림 (최소 재고 이하일 때 빨간색 표시) 디자인: - 재고 부족 상품은 빨간색 배경 - 테이블에 총 재고 금액 합계 표시 ``` #### 고객 관리 (CRM) ``` 고객 관리 CRM을 만들어줘. 필요한 기능: 1. 고객 정보 입력 (회사명, 담당자명, 연락처, 이메일, 상태) 2. 고객 목록 (카드 형태) 3. 상태별 필터 (잠재/미팅/제안/협상/계약) 4. 상담 메모 기록 상태에 따라 카드 테두리 색상 다르게: - 잠재: 회색 - 미팅: 파랑 - 제안: 노랑 - 협상: 주황 - 계약: 초록 ``` #### 예약 시스템 ``` 회의실 예약 시스템을 만들어줘. 필요한 기능: 1. 캘린더 뷰로 예약 현황 표시 2. 예약 폼 (회의실, 날짜, 시작시간, 종료시간, 예약자, 목적) 3. 내 예약 목록 4. 예약 취소 기능 제약 조건: - 같은 회의실 같은 시간 중복 예약 불가 - 과거 날짜 예약 불가 ``` *** ### 데이터 관련 #### 데이터 저장 추가 ``` 데이터를 서버에 저장할 수 있게 해줘. 폼을 제출하면 데이터베이스에 저장되고, 테이블에서 저장된 데이터를 불러와서 보여줘. ``` #### CRUD 전체 추가 ``` 데이터를 저장, 수정, 삭제할 수 있게 해줘. - 폼 제출 → 새 데이터 저장 - 테이블 행 클릭 → 수정 모달 띄우기 - 삭제 버튼 → "정말 삭제하시겠습니까?" 확인 후 삭제 ``` #### 검색 기능 ``` 검색 기능을 추가해줘. 검색어를 입력하면 이름, 이메일, 부서에서 검색해서 일치하는 항목만 테이블에 표시해줘. ``` #### 필터 기능 ``` 필터 기능을 추가해줘. 필터 옵션: - 부서: 전체, 개발팀, 마케팅팀, 영업팀, 인사팀 - 상태: 전체, 재직중, 휴직, 퇴사 여러 필터를 동시에 적용할 수 있게 해줘. ``` #### 정렬 기능 ``` 테이블 헤더를 클릭하면 정렬되게 해줘. - 한 번 클릭: 오름차순 - 다시 클릭: 내림차순 - 현재 정렬 기준 헤더에 화살표 표시 ``` #### 페이지네이션 ``` 테이블에 페이지네이션을 추가해줘. - 한 페이지에 10개씩 표시 - 이전/다음 버튼 - 페이지 번호 표시 - 전체 개수 표시 (총 45건) ``` *** ### UI 컴포넌트 #### 모달 추가 ``` 수정 모달을 추가해줘. - 테이블 행 클릭 시 모달 열림 - 모달에 현재 데이터가 채워진 폼 표시 - 저장 버튼 → 데이터 수정 후 모달 닫기 - 취소 버튼 → 모달만 닫기 - 모달 바깥 클릭 → 모달 닫기 ``` #### 확인 팝업 ``` 삭제 전 확인 팝업을 추가해줘. 메시지: "정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다." 버튼: 삭제 (빨간색), 취소 (회색) ``` #### 탭 UI ``` 탭 UI를 추가해줘. 탭 목록: - 전체 (기본 선택) - 진행중 - 완료 탭 선택 시 해당 상태의 데이터만 표시 ``` #### 사이드바 ``` 왼쪽에 사이드바 네비게이션을 추가해줘. 메뉴: - 대시보드 (아이콘: 차트) - 직원 관리 (아이콘: 사람) - 설정 (아이콘: 톱니바퀴) 선택된 메뉴는 배경색 표시 ``` *** ### 디자인/스타일 #### 색상 변경 ``` 전체 테마 색상을 파란색 계열로 바꿔줘. - 주요 버튼: #2563eb - 호버: #1d4ed8 - 배경: #f8fafc - 카드: 흰색, 그림자 ``` #### 카드 스타일 ``` 데이터를 카드 형태로 보여줘. - 흰색 배경 - 둥근 모서리 (8px) - 살짝 그림자 - 호버 시 그림자 진해짐 - 3열 그리드 (모바일에서 1열) ``` #### 반응형 ``` 모바일에서도 잘 보이게 반응형으로 수정해줘. - PC: 폼 왼쪽, 테이블 오른쪽 - 모바일: 폼 위, 테이블 아래 (세로 스택) - 모바일에서 테이블은 가로 스크롤 ``` #### 다크 모드 ``` 다크 모드를 추가해줘. - 토글 버튼으로 라이트/다크 전환 - 다크 모드 배경: #1a1a2e - 다크 모드 텍스트: #e5e7eb - 다크 모드 카드: #16213e ``` *** ### 폼 관련 #### 유효성 검사 ``` 폼에 유효성 검사를 추가해줘. 검사 규칙: - 이름: 필수, 2글자 이상 - 이메일: 필수, 올바른 이메일 형식 - 전화번호: 010-0000-0000 형식 - 비밀번호: 8자 이상, 영문+숫자 포함 에러 시 필드 아래에 빨간색 에러 메시지 표시 ``` #### 날짜 선택 ``` 날짜 선택 필드를 추가해줘. - 캘린더 팝업으로 선택 - 오늘 이전 날짜 선택 불가 - 형식: YYYY-MM-DD ``` #### 파일 업로드 ``` 프로필 이미지 업로드 기능을 추가해줘. - 이미지 파일만 허용 (jpg, png) - 최대 5MB - 미리보기 표시 - 드래그 앤 드롭 지원 ``` #### 동적 폼 ``` 부서를 선택하면 해당 부서의 팀 목록이 동적으로 표시되게 해줘. 부서별 팀: - 개발팀: 프론트엔드, 백엔드, 인프라 - 마케팅팀: 브랜드, 퍼포먼스, 콘텐츠 - 영업팀: 국내, 해외 ``` *** ### 차트/시각화 #### 기본 차트 ``` 월별 매출 막대 차트를 추가해줘. - X축: 월 (1월~12월) - Y축: 매출액 - 막대에 금액 표시 ``` #### 원형 차트 ``` 부서별 인원 비율을 원형 차트로 보여줘. - 각 부서별 색상 다르게 - 비율(%) 표시 - 범례 표시 ``` #### 대시보드 통계 ``` 상단에 통계 카드를 추가해줘. 표시할 수치: - 총 직원 수 - 이번 달 입사자 - 이번 달 퇴사자 - 평균 근속 기간 각 카드에 아이콘과 전월 대비 증감 표시 ``` *** ### 수정 요청 #### 특정 요소 수정 ``` [Visual Edit로 선택 후] 이 버튼의 텍스트를 "저장하기"로 바꾸고 크기를 더 크게 해줘. ``` #### 에러 수정 ``` Preview에서 에러가 나. "Cannot read property 'map' of undefined" 데이터가 없을 때도 에러 없이 동작하게 수정해줘. 데이터 없으면 "데이터가 없습니다" 메시지 표시. ``` #### 성능 개선 ``` 테이블 로딩이 느려. 데이터가 많을 때 성능을 개선해줘. - 가상 스크롤 적용 - 또는 페이지네이션으로 분할 ``` *** ### 복사하여 사용하세요 위 프롬프트들을 상황에 맞게 수정하여 사용하세요. {% hint style="success" %} **팁**: 프롬프트가 길수록 AI가 더 정확하게 이해합니다. 요구사항을 최대한 구체적으로 작성하세요. {% endhint %}