# 프롬프트 예시 모음 자주 사용하는 프롬프트 예시 모음입니다. 복사하여 사용하세요. *** ### 앱 생성 #### 직원 관리 앱 ``` 직원 관리 앱을 만들어줘. 필요한 기능: 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 %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.waveon.io/reference/prompt-examples.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.