캠핑인스타 만들기 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) 뷰 구현

⛺️ 오늘 구현한 기능들

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) 뷰 구현