Skip to content

Commit 294e68f

Browse files
H-un1H-un1
authored
Merge pull request #173 from DeviceLife-Official/fix/172-name
fix: 조합에 기기가 없을 경우에도 조합명 수정되도록 수정
2 parents 54252ef + d309816 commit 294e68f

2 files changed

Lines changed: 102 additions & 35 deletions

File tree

‎src/components/MyPage/CombinationList.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,15 @@ const CombinationList = ({
245245
createdAt={combination.createdAt}
246246
isPinned={combination.isPinned}
247247
index={index}
248+
isEditing={combinationEdit.editingComboId === combination.comboId}
249+
editingName={combinationEdit.editingCombinationName}
250+
nameError={combinationEdit.comboNameError}
248251
onTogglePin={handleTogglePin}
252+
onNameChange={combinationEdit.handleComboNameChange}
253+
onNameBlur={(name) => {
254+
const error = combinationEdit.validateComboName(name);
255+
combinationEdit.setComboNameError(error);
256+
}}
249257
/>
250258
)}
251259
</>

‎src/components/MyPage/EmptyCombinationCard.tsx‎

Lines changed: 94 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ interface EmptyCombinationCardProps {
1212
createdAt: string;
1313
isPinned: boolean;
1414
index: number;
15+
isEditing: boolean;
16+
editingName: string;
17+
nameError: string | null;
1518
onTogglePin: (e: React.MouseEvent, comboId: number) => void;
19+
onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
20+
onNameBlur: (name: string) => void;
1621
}
1722

1823
const EmptyCombinationCard = ({
@@ -21,7 +26,12 @@ const EmptyCombinationCard = ({
2126
createdAt,
2227
isPinned,
2328
index,
29+
isEditing,
30+
editingName,
31+
nameError,
2432
onTogglePin,
33+
onNameChange,
34+
onNameBlur,
2535
}: EmptyCombinationCardProps) => {
2636
const navigate = useNavigate();
2737
const [hoveredStarComboId, setHoveredStarComboId] = useState<number | null>(null);
@@ -30,44 +40,93 @@ const EmptyCombinationCard = ({
3040
<div className="px-36 pt-24 pb-36">
3141
{/* 조합 정보 (생성일 포함) */}
3242
<div className="flex flex-col gap-24 pl-20 py-24">
33-
{/* 조합 번호 + 생성일 + 조합명 */}
34-
<div className="flex flex-col gap-8">
35-
<div className="flex items-center gap-16">
36-
<p className="font-body-4-r text-gray-400">조합{index + 1}</p>
37-
<p className="font-body-4-r text-gray-400">생성일: {formatDate(createdAt)}</p>
38-
</div>
39-
<div className="flex items-center gap-8">
40-
<p className="font-body-1-sm text-black">{comboName}</p>
41-
{isPinned ? (
42-
<StarIcon
43-
onClick={(e) => onTogglePin(e, comboId)}
44-
className={`!w-22 !h-22 -mt-3 cursor-pointer transition-opacity ${
45-
hoveredStarComboId === comboId ? 'opacity-80' : ''
43+
{isEditing ? (
44+
/* 수정 모드: 인풋박스 + 별 아이콘 + 에러 메시지 */
45+
<div className="flex flex-col gap-8">
46+
<div className="flex items-center gap-8 min-h-48">
47+
<input
48+
type="text"
49+
value={editingName}
50+
onChange={onNameChange}
51+
onClick={(e) => e.stopPropagation()}
52+
onBlur={() => onNameBlur(editingName)}
53+
maxLength={20}
54+
className={`h-52 px-12 rounded-button font-body-1-sm text-gray-300 focus:outline-none ${
55+
nameError ? 'border-2 border-warning' : 'border border-blue-600'
4656
}`}
47-
onMouseEnter={() => setHoveredStarComboId(comboId)}
48-
onMouseLeave={() => setHoveredStarComboId(null)}
57+
autoFocus
4958
/>
50-
) : (
51-
<>
52-
{hoveredStarComboId === comboId ? (
53-
<StarHoverIcon
54-
onClick={(e) => onTogglePin(e, comboId)}
55-
className="!w-22 !h-22 -mt-3 cursor-pointer"
56-
onMouseEnter={() => setHoveredStarComboId(comboId)}
57-
onMouseLeave={() => setHoveredStarComboId(null)}
58-
/>
59-
) : (
60-
<StarXIcon
61-
onClick={(e) => onTogglePin(e, comboId)}
62-
className="!w-22 !h-22 -mt-3 cursor-pointer"
63-
onMouseEnter={() => setHoveredStarComboId(comboId)}
64-
onMouseLeave={() => setHoveredStarComboId(null)}
65-
/>
66-
)}
67-
</>
68-
)}
59+
{isPinned ? (
60+
<StarIcon
61+
onClick={(e) => onTogglePin(e, comboId)}
62+
className={`!w-22 !h-22 -mt-2 cursor-pointer transition-opacity ${
63+
hoveredStarComboId === comboId ? 'opacity-80' : ''
64+
}`}
65+
onMouseEnter={() => setHoveredStarComboId(comboId)}
66+
onMouseLeave={() => setHoveredStarComboId(null)}
67+
/>
68+
) : (
69+
<>
70+
{hoveredStarComboId === comboId ? (
71+
<StarHoverIcon
72+
onClick={(e) => onTogglePin(e, comboId)}
73+
className="!w-22 !h-22 -mt-2 cursor-pointer"
74+
onMouseEnter={() => setHoveredStarComboId(comboId)}
75+
onMouseLeave={() => setHoveredStarComboId(null)}
76+
/>
77+
) : (
78+
<StarXIcon
79+
onClick={(e) => onTogglePin(e, comboId)}
80+
className="!w-22 !h-22 -mt-2 cursor-pointer"
81+
onMouseEnter={() => setHoveredStarComboId(comboId)}
82+
onMouseLeave={() => setHoveredStarComboId(null)}
83+
/>
84+
)}
85+
</>
86+
)}
87+
</div>
88+
{nameError && <p className="pl-12 font-body-4-r text-warning">{nameError}</p>}
89+
</div>
90+
) : (
91+
/* 일반 모드: 조합 번호 + 생성일 + 조합명 */
92+
<div className="flex flex-col gap-8">
93+
<div className="flex items-center gap-16">
94+
<p className="font-body-4-r text-gray-400">조합{index + 1}</p>
95+
<p className="font-body-4-r text-gray-400">생성일: {formatDate(createdAt)}</p>
96+
</div>
97+
<div className="flex items-center gap-8">
98+
<p className="font-body-1-sm text-black">{comboName}</p>
99+
{isPinned ? (
100+
<StarIcon
101+
onClick={(e) => onTogglePin(e, comboId)}
102+
className={`!w-22 !h-22 -mt-3 cursor-pointer transition-opacity ${
103+
hoveredStarComboId === comboId ? 'opacity-80' : ''
104+
}`}
105+
onMouseEnter={() => setHoveredStarComboId(comboId)}
106+
onMouseLeave={() => setHoveredStarComboId(null)}
107+
/>
108+
) : (
109+
<>
110+
{hoveredStarComboId === comboId ? (
111+
<StarHoverIcon
112+
onClick={(e) => onTogglePin(e, comboId)}
113+
className="!w-22 !h-22 -mt-3 cursor-pointer"
114+
onMouseEnter={() => setHoveredStarComboId(comboId)}
115+
onMouseLeave={() => setHoveredStarComboId(null)}
116+
/>
117+
) : (
118+
<StarXIcon
119+
onClick={(e) => onTogglePin(e, comboId)}
120+
className="!w-22 !h-22 -mt-3 cursor-pointer"
121+
onMouseEnter={() => setHoveredStarComboId(comboId)}
122+
onMouseLeave={() => setHoveredStarComboId(null)}
123+
/>
124+
)}
125+
</>
126+
)}
127+
</div>
69128
</div>
70-
</div>
129+
)}
71130
</div>
72131

73132
{/* 빈 조합: 기기 추가 버튼 */}

0 commit comments

Comments
 (0)