refactor: 모바일 public 페이지 API 모듈 적용
수정된 파일 (5개):
- pages/mobile/public/Album.jsx
- fetch('/api/albums') → getAlbums()
- pages/mobile/public/Members.jsx
- fetch('/api/members') → getMembers()
- pages/mobile/public/AlbumDetail.jsx
- fetch('/api/albums') → getAlbums()
- fetch('/api/albums/{id}/tracks') → getAlbumTracks()
- pages/mobile/public/AlbumGallery.jsx
- fetch('/api/albums') → getAlbums()
- fetch('/api/albums/{id}/photos') → getAlbumPhotos()
- pages/mobile/public/Schedule.jsx
- fetch('/api/schedules?year=...') → getSchedules()
- fetch('/api/schedules/categories') → getCategories()
- fetch('/api/schedules?search=...') → searchSchedules()
Home.jsx는 이미 API 모듈 사용 중이므로 제외
This commit is contained in:
parent
8e01692d6e
commit
1f9cf34e31
5 changed files with 14 additions and 19 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { motion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getAlbums } from '../../../api/public/albums';
|
||||
|
||||
// 모바일 앨범 목록 페이지
|
||||
function MobileAlbum() {
|
||||
|
|
@ -9,8 +10,7 @@ function MobileAlbum() {
|
|||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/albums')
|
||||
.then(res => res.json())
|
||||
getAlbums()
|
||||
.then(data => {
|
||||
setAlbums(data);
|
||||
setLoading(false);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { motion } from 'framer-motion';
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, Play } from 'lucide-react';
|
||||
import { getAlbums, getAlbumTracks } from '../../../api/public/albums';
|
||||
|
||||
// 모바일 앨범 상세 페이지
|
||||
function MobileAlbumDetail() {
|
||||
|
|
@ -13,15 +14,13 @@ function MobileAlbumDetail() {
|
|||
|
||||
useEffect(() => {
|
||||
// 앨범 정보 로드
|
||||
fetch('/api/albums')
|
||||
.then(res => res.json())
|
||||
getAlbums()
|
||||
.then(data => {
|
||||
const found = data.find(a => a.folder_name === name);
|
||||
if (found) {
|
||||
setAlbum(found);
|
||||
// 트랙 정보 로드
|
||||
fetch(`/api/albums/${found.id}/tracks`)
|
||||
.then(res => res.json())
|
||||
getAlbumTracks(found.id)
|
||||
.then(setTracks)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
|
|||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { getAlbums, getAlbumPhotos } from '../../../api/public/albums';
|
||||
|
||||
// 모바일 앨범 갤러리 페이지
|
||||
function MobileAlbumGallery() {
|
||||
|
|
@ -13,14 +14,12 @@ function MobileAlbumGallery() {
|
|||
const [selectedIndex, setSelectedIndex] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/albums')
|
||||
.then(res => res.json())
|
||||
getAlbums()
|
||||
.then(data => {
|
||||
const found = data.find(a => a.folder_name === name);
|
||||
if (found) {
|
||||
setAlbum(found);
|
||||
fetch(`/api/albums/${found.id}/photos`)
|
||||
.then(res => res.json())
|
||||
getAlbumPhotos(found.id)
|
||||
.then(setPhotos)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Instagram } from 'lucide-react';
|
||||
import { getMembers } from '../../../api/public/members';
|
||||
|
||||
// 모바일 멤버 페이지
|
||||
function MobileMembers() {
|
||||
|
|
@ -9,8 +10,7 @@ function MobileMembers() {
|
|||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/members')
|
||||
.then(res => res.json())
|
||||
getMembers()
|
||||
.then(data => {
|
||||
setMembers(data.filter(m => !m.is_former));
|
||||
setFormerMembers(data.filter(m => m.is_former));
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { motion, AnimatePresence } from 'framer-motion';
|
|||
import { Clock, Tag, Link2, ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar } from 'lucide-react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import { getSchedules, getCategories, searchSchedules } from '../../../api/public/schedules';
|
||||
|
||||
// 모바일 일정 페이지
|
||||
function MobileSchedule() {
|
||||
|
|
@ -37,11 +38,7 @@ function MobileSchedule() {
|
|||
} = useInfiniteQuery({
|
||||
queryKey: ['mobileScheduleSearch', searchTerm],
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
const response = await fetch(
|
||||
`/api/schedules?search=${encodeURIComponent(searchTerm)}&offset=${pageParam}&limit=${SEARCH_LIMIT}`
|
||||
);
|
||||
if (!response.ok) throw new Error('Search failed');
|
||||
return response.json();
|
||||
return searchSchedules(searchTerm, { offset: pageParam, limit: SEARCH_LIMIT });
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
if (lastPage.hasMore) {
|
||||
|
|
@ -72,8 +69,8 @@ function MobileSchedule() {
|
|||
|
||||
setLoading(true);
|
||||
Promise.all([
|
||||
fetch(`/api/schedules?year=${year}&month=${month}`).then(res => res.json()),
|
||||
fetch('/api/schedules/categories').then(res => res.json())
|
||||
getSchedules(year, month),
|
||||
getCategories()
|
||||
]).then(([schedulesData, categoriesData]) => {
|
||||
setSchedules(schedulesData);
|
||||
setCategories(categoriesData);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue