caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: 라이트박스 이미지 둥근 모서리 제거 및 멤버 버튼 크기 일관성 수정

Browse source 
- AlbumGallery, AlbumDetail 라이트박스 이미지 rounded-lg 제거
- 선택된 멤버 버튼에 border 추가하여 크기 변화 방지
- 티저 라벨 영문->한글 변경
This commit is contained in:
caadiq 2026-01-03 21:01:48 +09:00
parent 17407ec6da
commit 3ff912d1fe
3 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/pc/AlbumDetail.jsx
View file

@ -290,7 +290,7 @@ function AlbumDetail() {
{/* 앨범 티저 이미지 */} {/* 앨범 티저 이미지 */}
{album.teasers && album.teasers.length > 0 && ( {album.teasers && album.teasers.length > 0 && (
<div className="mt-auto"> <div className="mt-auto">
<p className="text-xs text-gray-400 mb-2">Official Teaser</p> <p className="text-xs text-gray-400 mb-2">티저 포토</p>
<div className="flex gap-2"> <div className="flex gap-2">
{album.teasers.map((teaser, index) => ( {album.teasers.map((teaser, index) => (
<div <div
@ -462,7 +462,7 @@ function AlbumDetail() {
key={lightbox.index} key={lightbox.index}
src={lightbox.images[lightbox.index]} src={lightbox.images[lightbox.index]}
alt="확대 이미지" alt="확대 이미지"
className={`max-w-[1100px] max-h-[75vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`} className={`max-w-[1100px] max-h-[75vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onLoad={() => setImageLoaded(true)} onLoad={() => setImageLoaded(true)}
initial={{ x: slideDirection * 100 }} initial={{ x: slideDirection * 100 }}

2
frontend/src/pages/pc/AlbumGallery.jsx
View file

@ -311,7 +311,7 @@ function AlbumGallery() {
key={lightbox.index} key={lightbox.index}
src={photos[lightbox.index]?.originalUrl} src={photos[lightbox.index]?.originalUrl}
alt="확대 이미지" alt="확대 이미지"
className={`max-w-[1100px] max-h-[75vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`} className={`max-w-[1100px] max-h-[75vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setImageLoaded(true)} onLoad={() => setImageLoaded(true)}
initial={{ x: slideDirection * 100 }} initial={{ x: slideDirection * 100 }}
animate={{ x: 0 }} animate={{ x: 0 }}

12
frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
View file

@ -1023,7 +1023,7 @@ function AdminAlbumPhotos() {
onClick={() => toggleMember(file.id, member.id)} onClick={() => toggleMember(file.id, member.id)}
className={`px-3 py-1 rounded-full text-sm transition-colors ${ className={`px-3 py-1 rounded-full text-sm transition-colors ${
file.members.includes(member.id) file.members.includes(member.id)
? 'bg-primary text-white' ? 'bg-primary text-white border border-primary'
: 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
}`} }`}
> >
@ -1044,7 +1044,7 @@ function AdminAlbumPhotos() {
onClick={() => toggleMember(file.id, member.id)} onClick={() => toggleMember(file.id, member.id)}
className={`px-3 py-1 rounded-full text-sm transition-colors ${ className={`px-3 py-1 rounded-full text-sm transition-colors ${
file.members.includes(member.id) file.members.includes(member.id)
? 'bg-gray-500 text-white' ? 'bg-gray-500 text-white border border-gray-500'
: 'bg-gray-100 text-gray-400 hover:bg-gray-200 border border-gray-200' : 'bg-gray-100 text-gray-400 hover:bg-gray-200 border border-gray-200'
}`} }`}
> >
@ -1161,8 +1161,8 @@ function AdminAlbumPhotos() {
}} }}
className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${ className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
bulkEdit.members.includes(member.id) bulkEdit.members.includes(member.id)
? 'bg-primary text-white' ? 'bg-primary text-white border border-primary'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-gray-100'
}`} }`}
> >
{member.name} {member.name}
@ -1188,8 +1188,8 @@ function AdminAlbumPhotos() {
}} }}
className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${ className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
bulkEdit.members.includes(member.id) bulkEdit.members.includes(member.id)
? 'bg-gray-500 text-white' ? 'bg-gray-500 text-white border border-gray-500'
: 'bg-gray-100 text-gray-400 hover:bg-gray-200' : 'bg-gray-100 text-gray-400 hover:bg-gray-200 border border-gray-100'
}`} }`}
> >
{member.name} {member.name}