import React, { useState, useEffect } from 'react';
import PostCard from './components/PostCard';
import NewPostForm from './components/NewPostForm';
import PostDetail from './components/PostDetail';
import { getPosts, deletePost } from './services/api';
function App() {
const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [userName, setUserName] = useState(() => {
return localStorage.getItem('userName') || '';
});
const [selectedPostId, setSelectedPostId] = useState(null);
// 로컬 스토리지에 사용자 이름 저장
useEffect(() => {
if (userName) {
localStorage.setItem('userName', userName);
}
}, [userName]);
// 포스트 목록 불러오기
const loadPosts = async () => {
setIsLoading(true);
setError(null);
try {
const fetchedPosts = await getPosts();
setPosts(fetchedPosts);
} catch (err) {
console.error('포스트 불러오기 오류:', err);
setError('포스트를 불러오는데 실패했습니다.');
} finally {
setIsLoading(false);
}
};
// 컴포넌트 마운트 시 포스트 불러오기
useEffect(() => {
loadPosts();
}, []);
// 포스트 클릭 핸들러
const handlePostClick = (postId) => {
setSelectedPostId(postId);
};
// 포스트 삭제 핸들러
const handleDeletePost = async (postId) => {
if (!window.confirm('정말로 이 포스트를 삭제하시겠습니까?')) {
return;
}
try {
await deletePost(postId);
setPosts(posts.filter(post => post.id !== postId));
} catch (err) {
console.error('포스트 삭제 오류:', err);
alert('포스트 삭제에 실패했습니다.');
}
};
return (
Contoso 아웃도어 소셜
아웃도어 컴퍼니를 위한 소셜 미디어 플랫폼
{/* 왼쪽 사이드바 - 데스크톱에서만 표시 */}
Contoso 아웃도어
최고 품질의 아웃도어 장비와 액세서리를 제공합니다.
자연을 탐험하고 모험을 즐기세요!
인기 태그
#등산
#캠핑
#트레킹
#아웃도어
#백패킹
{/* 메인 콘텐츠 영역 */}
{/* 새 포스트 폼 */}
{/* 포스트 목록 */}
최근 포스트
{error && (
{error}
)}
{isLoading ? (
) : posts.length === 0 ? (
아직 포스트가 없습니다.
첫 번째 포스트를 작성해 보세요!
) : (
{posts.map((post) => (
handlePostClick(post.id)} className="cursor-pointer">
{
e.stopPropagation();
handleDeletePost(post.id);
}}
refreshPosts={loadPosts}
userName={userName}
/>
))}
)}
{/* 오른쪽 사이드바 - 데스크톱에서만 표시 */}
신제품 소식
-
새로운 경량 텐트 출시
초경량 2인용 텐트를 지금 만나보세요!
-
여름 시즌 하이킹 부츠
더운 여름을 위한 특별 설계 부츠
-
방수 재킷 할인 이벤트
이번 주까지 전 제품 20% 할인
사용 안내
Contoso 아웃도어 제품과 관련된 경험을 공유하고 다른 사용자들과 소통하세요.
- 제품 사진과 함께 리뷰를 남겨주세요
- 다른 사용자들의 포스트에 댓글을 달아보세요
- 유용한 팁과 노하우를 공유해 보세요
{/* 푸터 */}
{/* 포스트 상세 모달 */}
{selectedPostId && (
setSelectedPostId(null)}
onDeleteSuccess={loadPosts}
userName={userName}
/>
)}
);
}
export default App;