1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
"use client"
import { useState } from "react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown, ChevronUp } from "lucide-react"
export function TruncatedText({
text,
maxLength = 50,
showTooltip = true
}: {
text: string | null
maxLength?: number
showTooltip?: boolean
}) {
if (!text) return <span className="text-muted-foreground">-</span>
if (text.length <= maxLength) {
return <span>{text}</span>
}
const truncated = text.slice(0, maxLength) + "..."
if (!showTooltip) {
return <span>{truncated}</span>
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="cursor-help border-b border-dotted border-gray-400">
{truncated}
</span>
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="whitespace-pre-wrap">{text}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
export function ExpandableText({
text,
maxLength = 100,
className = ""
}: {
text: string | null
maxLength?: number
className?: string
}) {
const [isExpanded, setIsExpanded] = useState(false)
if (!text) return <span className="text-muted-foreground">-</span>
if (text.length <= maxLength) {
return <span className={className}>{text}</span>
}
return (
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
<div className={className}>
<CollapsibleTrigger asChild>
<button className="text-left w-full group">
<span className="whitespace-pre-wrap">
{isExpanded ? text : text.slice(0, maxLength) + "..."}
</span>
<span className="inline-flex items-center ml-2 text-blue-600 hover:text-blue-800">
{isExpanded ? (
<>
<ChevronUp className="w-3 h-3" />
<span className="text-xs ml-1">접기</span>
</>
) : (
<>
<ChevronDown className="w-3 h-3" />
<span className="text-xs ml-1">더보기</span>
</>
)}
</span>
</button>
</CollapsibleTrigger>
</div>
</Collapsible>
)
}
export function AddressDisplay({
address,
addressEng,
postalCode,
addressDetail
}: {
address: string | null
addressEng: string | null
postalCode: string | null
addressDetail: string | null
}) {
const hasAnyAddress = address || addressEng || postalCode || addressDetail
if (!hasAnyAddress) {
return <span className="text-muted-foreground">-</span>
}
return (
<div className="space-y-1">
{postalCode && (
<div className="text-xs text-muted-foreground">
우편번호: {postalCode}
</div>
)}
{address && (
<div className="font-medium break-words">
{address}
</div>
)}
{addressDetail && (
<div className="text-sm text-muted-foreground break-words">
{addressDetail}
</div>
)}
{addressEng && (
<div className="text-sm text-muted-foreground break-words italic">
{addressEng}
</div>
)}
</div>
)
}
|
