From defda07c0bb4b0bd444ca8dc4fd3f89322bda0ce Mon Sep 17 00:00:00 2001 From: dujinkim Date: Fri, 3 Oct 2025 04:48:47 +0000 Subject: (대표님) edp, tbe, dolce 등 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pq-input/pq-input-tabs.tsx | 278 ++++++++++++++++++++++++---------- 1 file changed, 197 insertions(+), 81 deletions(-) (limited to 'components/pq-input/pq-input-tabs.tsx') diff --git a/components/pq-input/pq-input-tabs.tsx b/components/pq-input/pq-input-tabs.tsx index a37a52db..3f7e1718 100644 --- a/components/pq-input/pq-input-tabs.tsx +++ b/components/pq-input/pq-input-tabs.tsx @@ -15,7 +15,7 @@ import { import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" -import { X, Save, CheckCircle2, AlertTriangle, ChevronsUpDown, Download } from "lucide-react" +import { X, Save, CheckCircle2, AlertTriangle, ChevronsUpDown, Download, Loader2 } from "lucide-react" import prettyBytes from "pretty-bytes" import { useToast } from "@/hooks/use-toast" import { @@ -68,6 +68,7 @@ import { // Additional UI import { Badge } from "@/components/ui/badge" +import { Checkbox } from "@/components/ui/checkbox" // Server actions import { @@ -156,6 +157,14 @@ export function PQInputTabs({ const [allSaved, setAllSaved] = React.useState(false) const [showConfirmDialog, setShowConfirmDialog] = React.useState(false) + // 필터 상태 관리 + const [filterOptions, setFilterOptions] = React.useState({ + showAll: true, + showSaved: true, + showNotSaved: true, + }) + + const { toast } = useToast() const shouldDisableInput = isReadOnly; @@ -166,10 +175,10 @@ export function PQInputTabs({ const parseCode = (code: string) => { return code.split('-').map(part => parseInt(part, 10)) } - + const aCode = parseCode(a.code) const bCode = parseCode(b.code) - + for (let i = 0; i < Math.max(aCode.length, bCode.length); i++) { const aPart = aCode[i] || 0 const bPart = bCode[i] || 0 @@ -181,6 +190,14 @@ export function PQInputTabs({ }) } + // 필터링 함수 + const shouldShowItem = (isSaved: boolean) => { + if (filterOptions.showAll) return true; + if (isSaved && filterOptions.showSaved) return true; + if (!isSaved && filterOptions.showNotSaved) return true; + return false; + } + // ---------------------------------------------------------------------- // A) Create initial form values // Mark items as "saved" if they have existing answer or attachments @@ -219,6 +236,7 @@ export function PQInputTabs({ return { answers } } + // ---------------------------------------------------------------------- // B) Set up react-hook-form // ---------------------------------------------------------------------- @@ -339,7 +357,7 @@ export function PQInputTabs({ if (answerData.answer) { switch (inputFormat) { case "EMAIL": - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ if (!emailRegex.test(answerData.answer)) { toast({ title: "이메일 형식 오류", @@ -350,22 +368,24 @@ export function PQInputTabs({ } break case "PHONE": - const phoneRegex = /^[\d-]+$/ + case "FAX": + // 전화번호/팩스번호는 숫자만 허용 + const phoneRegex = /^\d+$/ if (!phoneRegex.test(answerData.answer)) { toast({ - title: "전화번호 형식 오류", - description: "올바른 전화번호 형식을 입력해주세요. (예: 02-1234-5678)", + title: `${inputFormat === "PHONE" ? "전화번호" : "팩스번호"} 형식 오류`, + description: `숫자만 입력해주세요.`, variant: "destructive", }) return } break case "NUMBER": - const numberRegex = /^-?\d*\.?\d*$/ + const numberRegex = /^-?\d+(\.\d+)?$/ if (!numberRegex.test(answerData.answer)) { toast({ title: "숫자 형식 오류", - description: "숫자만 입력해주세요. (소수점, 음수 허용)", + description: "올바른 숫자 형식을 입력해주세요. (예: 123, -123, 123.45)", variant: "destructive", }) return @@ -389,7 +409,7 @@ export function PQInputTabs({ for (const localFile of answerData.newUploads) { try { const uploadResult = await uploadVendorFileAction(localFile.fileObj) - const currentUploaded = form.getValues(`answers.${answerIndex}.uploadedFiles`) + const currentUploaded = [...form.getValues(`answers.${answerIndex}.uploadedFiles`)] currentUploaded.push({ fileName: uploadResult.fileName, url: uploadResult.url, @@ -435,10 +455,7 @@ export function PQInputTabs({ if (saveResult.ok) { // Mark as saved form.setValue(`answers.${answerIndex}.saved`, true, { shouldDirty: false }) - toast({ - title: "Saved", - description: "Item saved successfully", - }) + // Individual save toast removed - only show toast in handleSaveAll } } catch (error) { console.error("Save error:", error) @@ -470,6 +487,7 @@ export function PQInputTabs({ try { setIsSaving(true) const answers = form.getValues().answers + let savedCount = 0 // Only save items that are dirty or have new uploads for (let i = 0; i < answers.length; i++) { @@ -478,17 +496,26 @@ export function PQInputTabs({ if (!itemDirty && !hasNewUploads) continue await handleSaveItem(i) + savedCount++ } - toast({ - title: "All Saved", - description: "All items saved successfully", - }) + // 저장된 항목이 있을 때만 토스트 메시지 표시 + if (savedCount > 0) { + toast({ + title: "임시 저장 완료", + description: `항목이 저장되었습니다.`, + }) + } else { + toast({ + title: "저장할 항목 없음", + description: "변경된 항목이 없습니다.", + }) + } } catch (error) { console.error("Save all error:", error) toast({ - title: "Save Error", - description: "Failed to save all items", + title: "저장 실패", + description: "일괄 저장 중 오류가 발생했습니다.", variant: "destructive", }) } finally { @@ -614,53 +641,125 @@ export function PQInputTabs({ {renderProjectInfo()} - {/* Top Controls */} -
- - {data.map((group) => ( - + {/* Filter Controls */} +
+ 필터: +
+
+ { + const newOptions = { ...filterOptions, showAll: !!checked }; + if (!checked && !filterOptions.showSaved && !filterOptions.showNotSaved) { + // 최소 하나는 체크되어 있어야 함 + newOptions.showSaved = true; + } + setFilterOptions(newOptions); + }} + /> + +
+
+ { + const newOptions = { ...filterOptions, showSaved: !!checked }; + if (!checked && !filterOptions.showAll && !filterOptions.showNotSaved) { + // 최소 하나는 체크되어 있어야 함 + newOptions.showAll = true; + } + setFilterOptions(newOptions); + }} + /> + +
+
+ { + const newOptions = { ...filterOptions, showNotSaved: !!checked }; + if (!checked && !filterOptions.showAll && !filterOptions.showSaved) { + // 최소 하나는 체크되어 있어야 함 + newOptions.showAll = true; + } + setFilterOptions(newOptions); + }} + /> + +
+
+
+ +
+ + {data.map((group) => ( + +
+ {/* Mobile: truncated version */} + + {group.groupName.length > 5 + ? group.groupName.slice(0, 5) + "..." + : group.groupName} + + {/* Desktop: full text */} + {group.groupName} + + {group.items.length} + +
+ + ))} + + +
+ {/* Save All button */} + - - {/* Submit PQ button */} - + {isSaving ? ( + <> + + 저장 중... + + ) : ( + <> + + 임시 저장 + + )} + + + {/* Submit PQ button */} + +
@@ -681,7 +780,12 @@ export function PQInputTabs({ const isItemDirty = !!dirtyFieldsItem const hasNewUploads = newUploads.length > 0 const canSave = isItemDirty || hasNewUploads - + + // 면제된 항목은 입력 비활성화 + const isDisabled = shouldDisableInput + + // 필터링 적용 + if (!shouldShowItem(isSaved)) return null return ( @@ -698,7 +802,6 @@ export function PQInputTabs({ {code} - {checkPoint} - {description && ( @@ -731,14 +834,16 @@ export function PQInputTabs({ )} + {/* 개별 저장 버튼 주석처리 + */} @@ -798,7 +903,7 @@ export function PQInputTabs({ { field.onChange(e) @@ -811,14 +916,18 @@ export function PQInputTabs({ /> ); case "PHONE": + case "FAX": return ( { - field.onChange(e) + // 전화번호 형식만 허용 (숫자, -, +, 공백) + const value = e.target.value; + const filteredValue = value.replace(/[^\d\-\+\s]/g, ''); + field.onChange(filteredValue); form.setValue( `answers.${answerIndex}.saved`, false, @@ -832,7 +941,7 @@ export function PQInputTabs({ { // 숫자만 허용 @@ -853,7 +962,7 @@ export function PQInputTabs({