Sooyoung Archive
캠핑인스타 만들기 2편
⛺️ 오늘 구현한 기능들
1. 게시글 삭제 (Post Deletion) 🗑️
- Server Action 구현:
deleteCampingLog액션을 추가하여 DB에서 데이터 삭제뿐만 아니라 Supabase Storage에 저장된 이미지까지 함께 정리하도록 구현했습니다. - 권한 확인 (Authorization): 클라이언트에서
currentUserId를 FeedCard 컴포넌트로 내려주어, 본인이 작성한 글에만 삭제 버튼(...)이 보이도록 처리했습니다. - UX 강화: 삭제 시
confirm창을 띄우고, 삭제 중에는 로딩 인디케이터를 보여주어 사용자가 실수로 삭제하는 것을 방지하고 작업 진행 상황을 알 수 있게 했습니다.
2. 페이지 이동 UX 개선 (Redirect) 🔄
- 글 작성 완료 후 전체 피드로 이동하던 기존 로직을 **마이페이지(
/profile)**로 리다이렉트되도록 변경했습니다. - 사용자가 자신이 방금 올린 기록을 즉시 확인하고 뿌듯함을 느낄 수 있도록 경험을 개선했습니다.
3. 감성 디자인 리프레시 (Design Refresh) 🎨
오늘의 하이라이트! 인스타그램 클론 느낌을 벗어나 우리만의 색깔을 찾았습니다.
- 컨셉: 아날로그 감성의 "폴라로이드 & 저널" 스타일 📸
- 폰트 적용: 구글 폰트의 **'감자꽃(Gamja Flower)'**체를 적용하여 날짜와 장소 정보가 마치 일기장에 손으로 쓴 듯한 느낌을 주었습니다.
- 레이아웃 변경: 사진 주변에 흰 여백(Padding)을 주고 은은한 그림자(Shadow)를 넣어, 실제 인화된 폴라로이드 사진 같은 느낌을 살렸습니다.
- 헤더(Header) 정리: 상단에 크게 자리 잡고 있던 검색창을 돋보기 아이콘으로 변경하여 헤더를 깔끔하게 정리하고, 콘텐츠에 더 집중할 수 있게 만들었습니다.
🛠️ 기술적인 고민 (Tech Check)
서버 컴포넌트와 클라이언트 컴포넌트의 데이터 흐름
- FeedPage(Server Component)에서
supabase.auth.getUser()로 유저 정보를 미리 가져와 FeedPageClient -> FeedCard(Client Component)로currentUserId를 prop으로 내려주는 구조를 채택했습니다. - 이렇게 하면 클라이언트 컴포넌트에서 불필요한 비동기 로직이나 로딩 상태를 줄일 수 있어 렌더링 성능에 유리합니다.
Tailwind CSS & Google Fonts
next/font/google을 사용하여 폰트를 최적화(LCP 개선)하고, CSS 변수로 등록하여 Tailwind 클래스(font-gamja)로 손쉽게 사용할 수 있도록 설정했습니다.
🚀 다음 목표 (Next Step: Phase 2)
이제 기본기는 다졌으니, 소셜 기능을 붙여볼 예정입니다!
- 프로필 시스템:
user_...대신 나만의 닉네임과 프로필 사진 설정 - 소통 기능: 좋아요 ❤️ 및 댓글 💬 기능 추가
- 콘텐츠 강화: 사진 여러 장(최대 3장) 업로드 및 슬라이드(Carousel) 뷰 구현