refactor: PC/모바일 public 페이지 API 모듈 적용 (4/5)

- PC: Schedule, Home, Album, AlbumDetail, AlbumGallery, Members
- 모바일: Home
- albums.js에 getAlbumByName 추가
- schedules.js에 getUpcomingSchedules 추가
This commit is contained in:
caadiq 2026-01-09 22:06:56 +09:00
parent 20f496ca24
commit 0ff9f196f1
6 changed files with 21 additions and 17 deletions

View file

@ -8,11 +8,16 @@ export async function getAlbums() {
return fetchApi("/api/albums");
}
// 앨범 상세 조회
// 앨범 상세 조회 (ID)
export async function getAlbum(id) {
return fetchApi(`/api/albums/${id}`);
}
// 앨범 상세 조회 (이름)
export async function getAlbumByName(name) {
return fetchApi(`/api/albums/by-name/${name}`);
}
// 앨범 사진 조회
export async function getAlbumPhotos(albumId) {
return fetchApi(`/api/albums/${albumId}/photos`);

View file

@ -3,6 +3,9 @@ import { ChevronRight, Clock, Tag } from 'lucide-react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { getTodayKST } from '../../../utils/date';
import { getMembers } from '../../../api/public/members';
import { getAlbums } from '../../../api/public/albums';
import { getUpcomingSchedules } from '../../../api/public/schedules';
//
function MobileHome() {
@ -14,21 +17,17 @@ function MobileHome() {
//
useEffect(() => {
//
fetch('/api/members')
.then(res => res.json())
getMembers()
.then(data => setMembers(data.filter(m => !m.is_former)))
.catch(console.error);
// ( 4)
fetch('/api/albums')
.then(res => res.json())
// ( 2)
getAlbums()
.then(data => setAlbums(data.slice(0, 2)))
.catch(console.error);
//
const today = getTodayKST();
fetch(`/api/schedules?startDate=${today}&limit=3`)
.then(res => res.json())
getUpcomingSchedules(3)
.then(data => setSchedules(data))
.catch(console.error);
}, []);

View file

@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Calendar, Music } from 'lucide-react';
import { getAlbums } from '../../../api/public/albums';
function Album() {
const navigate = useNavigate();
@ -9,8 +10,7 @@ function Album() {
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/albums')
.then(res => res.json())
getAlbums()
.then(data => {
setAlbums(data);
setLoading(false);

View file

@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, memo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download, MoreVertical, FileText } from 'lucide-react';
import { getAlbumByName } from '../../../api/public/albums';
// - CSS transition JS
const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, setLightbox }) {
@ -157,8 +158,7 @@ function AlbumDetail() {
}, [lightbox.open, lightbox.index, lightbox.images, preloadedImages]);
useEffect(() => {
fetch(`/api/albums/by-name/${name}`)
.then(res => res.json())
getAlbumByName(name)
.then(data => {
setAlbum(data);
setLoading(false);

View file

@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
import { RowsPhotoAlbum } from 'react-photo-album';
import 'react-photo-album/rows.css';
import { getAlbumByName } from '../../../api/public/albums';
// - CSS transition JS
const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, setLightbox }) {
@ -82,8 +83,7 @@ function AlbumGallery() {
const [preloadedImages] = useState(() => new Set()); // URL
useEffect(() => {
fetch(`/api/albums/by-name/${name}`)
.then(res => res.json())
getAlbumByName(name)
.then(data => {
setAlbum(data);
const allPhotos = [];

View file

@ -1,14 +1,14 @@
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Instagram, Calendar } from 'lucide-react';
import { getMembers } from '../../../api/public/members';
function Members() {
const [members, setMembers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/members')
.then(res => res.json())
getMembers()
.then(data => {
setMembers(data);
setLoading(false);