refactor: 앨범 사진 관리 개선
- '솔로' → '개인'으로 텍스트 변경 - 컨셉명 필수 검증 제거 (선택사항으로 변경) - 라이트박스에서 컨셉명 없어도 멤버 이름 표시되도록 수정 - 'Default' 컨셉명은 표시하지 않음
This commit is contained in:
parent
1fcb70e2c9
commit
27878816b1
2 changed files with 33 additions and 26 deletions
|
|
@ -317,16 +317,28 @@ function AlbumGallery() {
|
||||||
animate={{ x: 0 }}
|
animate={{ x: 0 }}
|
||||||
transition={{ duration: 0.25, ease: 'easeOut' }}
|
transition={{ duration: 0.25, ease: 'easeOut' }}
|
||||||
/>
|
/>
|
||||||
{/* 컨셉 정보 - 정보가 있을 때만 표시 */}
|
{/* 컨셉 정보 + 멤버 - 하나라도 있으면 표시 */}
|
||||||
{imageLoaded && photos[lightbox.index]?.title && (
|
{imageLoaded && (
|
||||||
|
(() => {
|
||||||
|
const title = photos[lightbox.index]?.title;
|
||||||
|
const hasValidTitle = title && title.trim() && title !== 'Default';
|
||||||
|
const members = photos[lightbox.index]?.members;
|
||||||
|
const hasMembers = members && String(members).trim();
|
||||||
|
|
||||||
|
if (!hasValidTitle && !hasMembers) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
<div className="mt-6 flex flex-col items-center gap-2">
|
<div className="mt-6 flex flex-col items-center gap-2">
|
||||||
|
{/* 컨셉명 - 있고 유효할 때만 */}
|
||||||
|
{hasValidTitle && (
|
||||||
<span className="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-base">
|
<span className="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-base">
|
||||||
{photos[lightbox.index]?.title}
|
{title}
|
||||||
</span>
|
</span>
|
||||||
{/* 멤버가 있고 빈 문자열이 아닐 때만 표시, 쉼표로 분리해서 개별 태그 */}
|
)}
|
||||||
{photos[lightbox.index]?.members && String(photos[lightbox.index]?.members).trim() && (
|
{/* 멤버 - 있으면 항상 표시 */}
|
||||||
|
{hasMembers && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{String(photos[lightbox.index]?.members).split(',').map((member, idx) => (
|
{String(members).split(',').map((member, idx) => (
|
||||||
<span key={idx} className="px-3 py-1.5 bg-primary/80 rounded-full text-white text-sm">
|
<span key={idx} className="px-3 py-1.5 bg-primary/80 rounded-full text-white text-sm">
|
||||||
{member.trim()}
|
{member.trim()}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -334,6 +346,8 @@ function AlbumGallery() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
})()
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -371,19 +371,12 @@ function AdminAlbumPhotos() {
|
||||||
|
|
||||||
// 컨셉 포토일 때만 검증
|
// 컨셉 포토일 때만 검증
|
||||||
if (photoType === 'concept') {
|
if (photoType === 'concept') {
|
||||||
// 컨셉명 검증 (각 파일별로)
|
// 개인/유닛인데 멤버 선택 안 한 경우
|
||||||
const missingConcept = pendingFiles.some(f => !f.conceptName.trim());
|
|
||||||
if (missingConcept) {
|
|
||||||
setToast({ message: '모든 사진의 컨셉명을 입력해주세요.', type: 'warning' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 솔로/유닛인데 멤버 선택 안 한 경우
|
|
||||||
const missingMembers = pendingFiles.some(f =>
|
const missingMembers = pendingFiles.some(f =>
|
||||||
(f.groupType === 'solo' || f.groupType === 'unit') && f.members.length === 0
|
(f.groupType === 'solo' || f.groupType === 'unit') && f.members.length === 0
|
||||||
);
|
);
|
||||||
if (missingMembers) {
|
if (missingMembers) {
|
||||||
setToast({ message: '솔로/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
|
setToast({ message: '개인/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -996,7 +989,7 @@ function AdminAlbumPhotos() {
|
||||||
<div className="flex gap-1.5">
|
<div className="flex gap-1.5">
|
||||||
{[
|
{[
|
||||||
{ value: 'group', icon: Users, label: '단체' },
|
{ value: 'group', icon: Users, label: '단체' },
|
||||||
{ value: 'solo', icon: User, label: '솔로' },
|
{ value: 'solo', icon: User, label: '개인' },
|
||||||
{ value: 'unit', icon: Users2, label: '유닛' },
|
{ value: 'unit', icon: Users2, label: '유닛' },
|
||||||
].map(({ value, icon: Icon, label }) => (
|
].map(({ value, icon: Icon, label }) => (
|
||||||
<button
|
<button
|
||||||
|
|
@ -1122,7 +1115,7 @@ function AdminAlbumPhotos() {
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
{[
|
{[
|
||||||
{ value: 'group', icon: Users, label: '단체' },
|
{ value: 'group', icon: Users, label: '단체' },
|
||||||
{ value: 'solo', icon: User, label: '솔로' },
|
{ value: 'solo', icon: User, label: '개인' },
|
||||||
{ value: 'unit', icon: Users2, label: '유닛' },
|
{ value: 'unit', icon: Users2, label: '유닛' },
|
||||||
].map(({ value, icon: Icon, label }) => (
|
].map(({ value, icon: Icon, label }) => (
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue