• App Router 기반 라우팅
• SSR/ISR 활용으로 SEO 최적화
• React 19의 use() 훅 활용한 데이터 페칭

• 작은 번들 사이즈로 모바일 웹 최적화
• 서버 컴포넌트 호환성
• 직관적인 API로 빠른 개발 가능

• 유틸리티 퍼스트 접근으로 빠른 개발
• 커스텀 테마로 브랜드 디자인 시스템 구축

• Tailwind 기반 컴포넌트
• 필요한 컴포넌트만 가져와 번들 크기 최적화

• 서버 컴포넌트: use() 훅으로 SEO 최적화
• 클라이언트: TanStack Query로 복잡한 상태 관리

• 타입스크립트 연동
• 서버-클라이언트 스키마 공유

• 가벼운 번들 사이즈로 모바일 친화적
• Zod과 통합해 정교한 유효성 검사 가능
• Server Action과 병행 사용 가능 (필요 시 SSR + 빠른 UX 모두 확보)

• 국내 사용자 친화적 UI
• 커스텀 마커/클러스터링 지원

• Next.js 15 내장 빌드 도구 ( Turbopack : 개발 환경, Webpack : 프로덕션 환경 )
• 빠른 개발 환경과 HMR 지원

• SSR 적용 부분:
  • 초기 기록 목록 로드 (10개)
  • 메타데이터 및 SEO 최적화
• CSR 적용 부분:
  • 무한 스크롤 (추가 10개씩)
  • 실시간 상호작용

• SSR 적용 부분:
  • 기록 기본 정보
  • 메타데이터 및 SEO 최적화
• CSR 적용 부분:
  • 댓글 무한 스크롤 (10개씩)
  • 실시간 상호작용

• 이미지 업로드
• 실시간 폼 유효성 검증
• 사용자 인터랙션 중심

• 이미지 수정
• 실시간 폼 유효성 검증
• 사용자 인터랙션 중심

• SSR 적용 부분:
  • 사용자 프로필 정보
  • 메타데이터 및 SEO 최적화
• CSR 적용 부분:
  • 기록 목록 무한 스크롤
  • 실시간 상호작용

• 기록 목록 표시 (무한 스크롤, 10개씩)
• 기록 공개/비공개 표시 (자물쇠 아이콘)
• 맨 위로 버튼 (500px 스크롤 시 표시)

• MomentList (기록 목록)
• MomentCard (기록 카드)
• ScrollToTopButton (맨 위로 버튼)

• 페이지 진입 시: GET /api/v1/users/me/moments?limit=10
• 스크롤 시: GET /api/v1/users/me/moments?limit=10&cursor={cursor}

• 사진 유무에 따른 레이아웃 차별화
• 제목: 최대 15자, 이후 말줄임표
• 본문: 사진 있을 때 50자, 없을 때 80자까지 표시
• 첫 번째 사진만 표시
• 날짜 기준 최신순 정렬

• 기록 상세 정보 표시
• 이미지 슬라이더 (최대 3장, 스와이프/버튼)
• 댓글 목록 및 작성
• 수정/삭제 기능 (모달 확인)

• MomentDetail (기록 상세)
• ImageSlider (이미지 슬라이더)
• CommentList (댓글 목록)
• CommentForm (댓글 작성)

• 페이지 진입 시: 기록 상세 정보
• 스크롤 시: GET /api/v1/moments/{momentId}/comments?limit=10&cursor={cursor}

• 작성자 프로필 이미지
• 제목, 날짜 표시
• 수정/삭제 메뉴 (점 3개)
• 이미지 인디케이터 (2장 이상)
• 장소 이름 (클릭 시 장소 상세)
• 댓글 입력창 (프로필 이미지 포함)
• 댓글 목록 (프로필, 작성일, 본문)
• 자신의 댓글 삭제 아이콘

• 기록 작성 폼
• 이미지 업로드
• 공개/비공개 설정

• MomentForm (기록 작성 폼)
• ImageUploader (이미지 업로드)
• VisibilityToggle (공개/비공개 토글)

• 이미지 업로드 시: POST /api/v1/gcs/signed-urls
• 폼 제출 시: POST /api/v1/users/moments

• 공개/비공개 토글
• 작성 완료 버튼
• 제목 입력 필드
• 본문 입력 필드
• 장소 표시 (수정 불가)

• 기록 수정 폼
• 이미지 수정
• 공개/비공개 설정

• MomentForm (기록 수정 폼)
• ImageUploader (이미지 수정)
• VisibilityToggle (공개/비공개 토글)

• 페이지 진입 시: 기존 기록 데이터
• 이미지 업로드 시: POST /api/v1/gcs/signed-urls
• 폼 제출 시: PATCH /api/v1/users/moments/{moment_id}

• 공개/비공개 토글
• 작성 완료 버튼
• 제목 수정 필드
• 본문 수정 필드
• 장소 표시 (수정 불가)

• 유저 프로필 정보
• 유저 기록 목록

• UserProfile (유저 프로필)
• MomentList (기록 목록)

• 페이지 진입 시: GET /api/v1/users/{user_id}
• 스크롤 시: GET /api/v1/users/{user_id}/moments?limit=10&cursor={cursor}

• 프로필 이미지
• 닉네임
• 소개글
• 기록 목록 (내 기록 목록과 동일 UI)

• 프로필 이미지 최적화 (Next.js Image)
• 날짜 포맷팅 (created_at, updated_at)

개요

• 역할: 기록 목록을 무한 스크롤로 표시

Props & Interface

interface MomentListProps {
  moments: Array<{
    id: number;
    title: string;
    thumbnail?: string;
    images_count: number;
    is_public: boolean;
    created_at: string;
    place: {
      id: string;
      name: string;
    };
    location: string;
  }>;
  isLoading?: boolean;
  onLoadMore: () => Promise<void>;
  hasMore: boolean;
}

스타일링

• 리스트 레이아웃
• 무한 스크롤 인디케이터
• 날짜 포맷팅 (yyyy.MM.dd)

Storybook

• Default: 기본 목록
• Loading: 로딩 상태
• Empty: 빈 목록
• With Items: 기록이 있는 상태

개요

• 역할: 개별 기록 정보를 카드 형태로 표시

Props & Interface

interface MomentCardProps {
  id: number;
  title: string;
  thumbnail?: string;
  images_count: number;
  is_public: boolean;
  created_at: string;
  place: {
    id: string;
    name: string;
  };
  location: string;
  onCardClick: (momentId: number) => void;
}

스타일링

• 카드 레이아웃
• 이미지 비율
• 공개/비공개 아이콘

Storybook

• Default: 기본 카드
• With Image: 이미지가 있는 상태
• Private: 비공개 상태
• Long Title: 긴 제목

개요

• 역할: 여러 이미지를 슬라이더로 표시

Props & Interface

interface ImageSliderProps {
  images: string[];
  showIndicators?: boolean;
}

스타일링

• 슬라이더 레이아웃
• 인디케이터
• 스와이프 애니메이션

Storybook

• Single Image: 단일 이미지
• Multiple Images: 여러 이미지
• With Indicators: 인디케이터 표시

개요

• 역할: 댓글 목록을 무한 스크롤로 표시

Props & Interface

interface CommentListProps {
  comments: Array<{
    id: number;
    user: {
      id: number;
      nickname: string;
      profile_image?: string;
    };
    content: string;
    created_at: string;
    is_owner: boolean;
  }>;
  isLoading?: boolean;
  onLoadMore: () => Promise<void>;
  hasMore: boolean;
  onDelete: (commentId: number) => Promise<void>;
}

스타일링

• 리스트 레이아웃
• 무한 스크롤 인디케이터
• 날짜 포맷팅

Storybook

• Default: 기본 목록
• Loading: 로딩 상태
• Empty: 빈 목록
• With Items: 댓글이 있는 상태

개요

• 역할: 댓글 작성 폼

Props & Interface

interface CommentFormProps {
  onSubmit: (content: string) => Promise<void>;
  userProfileImage?: string;
}

스타일링

• 폼 레이아웃
• 입력 필드
• 제출 버튼

Storybook

• Default: 기본 폼
• With Profile: 프로필 이미지가 있는 상태
• Loading: 제출 중 상태

개요

• 역할: 페이지 최상단으로 스크롤하는 버튼

Props & Interface

interface ScrollToTopButtonProps {
  threshold?: number;
}

스타일링

• 버튼 디자인
• 애니메이션 효과

Storybook

• Default: 기본 버튼
• Visible: 표시 상태
• Hidden: 숨김 상태

개요

• 역할: 기록 제목을 입력하는 컴포넌트

Props & Interface

interface TitleInputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  maxLength?: number;
  error?: string;
}

스타일링

• 입력 필드 레이아웃
• 에러 메시지 스타일
• 글자 수 제한 표시

Storybook

• Default: 기본 입력 필드
• With Error: 에러 상태
• With Max Length: 최대 길이 제한
• With Placeholder: 플레이스홀더

개요

• 역할: 기록 본문을 입력하는 컴포넌트

Props & Interface

interface ContentInputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  maxLength?: number;
  error?: string;
  rows?: number;
}

스타일링

• 텍스트 영역 레이아웃
• 에러 메시지 스타일
• 글자 수 제한 표시

Storybook

• Default: 기본 텍스트 영역
• With Error: 에러 상태
• With Max Length: 최대 길이 제한
• With Placeholder: 플레이스홀더
• With Custom Rows: 커스텀 행 수

개요

• 역할: 특정 장소에 대한 기록 목록을 표시

Props & Interface

interface PlaceMomentListProps {
  placeId: string;
  moments: Array<{
    id: number;
    title: string;
    thumbnail?: string;
    images_count: number;
    is_public: boolean;
    created_at: string;
    user: {
      id: number;
      nickname: string;
      profile_image?: string;
    };
    location: string;
  }>;
  isLoading?: boolean;
  onLoadMore: () => Promise<void>;
  hasMore: boolean;
}

스타일링

• 리스트 레이아웃
• 무한 스크롤 인디케이터
• 날짜 포맷팅

Storybook

• Default: 기본 목록
• Loading: 로딩 상태
• Empty: 빈 목록
• With Items: 기록이 있는 상태

• 역할: 기록 목록 표시
• 관계: MomentCard를 자식 컴포넌트로 포함

• 역할: 기록 상세 정보 표시
• 관계: ImageSlider, CommentList, CommentForm과 연동

• 역할: 기록 작성/수정 폼
• 관계:
  • TitleInput, ContentInput을 자식 컴포넌트로 포함
  • ImageUploader, VisibilityToggle과 연동

• 역할: 장소별 기록 목록 표시
• 관계: MomentCard를 자식 컴포넌트로 포함

• MomentList: 무한 스크롤 상태
• ImageSlider: 현재 이미지 인덱스
• CommentForm: 입력값 상태

• momentStore:
  • 상태: moments, currentMoment, isLoading
  • 액션: fetchMoments, createMoment, updateMoment, deleteMoment
• commentStore:
  • 상태: comments, isLoading
  • 액션: fetchComments, createComment, deleteComment
• placeStore:
  • 상태: placeMoments, isLoading
  • 액션: fetchPlaceMoments, loadMorePlaceMoments

• 기록 목록 캐싱
• 기록 상세 정보 캐싱
• 댓글 목록 캐싱

• GET /api/v1/users/me/moments: 본인 기록 목록 조회
• GET /api/v1/users/{user_id}/moments: 다른 사용자 기록 목록 조회
• GET /api/v1/users/{user_id}: 다른 사용자 프로필 조회
• POST /api/v1/users/moments: 기록 작성
• PATCH /api/v1/users/moments/{moment_id}: 기록 수정
• DELETE /api/v1/users/moments/{moment_id}: 기록 삭제
• POST /api/v1/gcs/signed-urls: 이미지 업로드 URL 발급
• GET /api/v1/moments/{momentId}/comments: 댓글 조회
• POST /api/v1/moments/{moment_id}/comments: 댓글 작성
• DELETE /api/v1/moments/{moment_id}/comments/{comment_id}: 댓글 삭제

• 무한 스크롤 구현
• 이미지 업로드 최적화
• 에러 처리 및 재시도
• 캐시 관리

• Next.js Image 컴포넌트 사용
• WebP 포맷 사용
• 적절한 이미지 크기 설정

• 가상화 스크롤 적용
• 데이터 프리페칭

• 코드 스플리팅
• 동적 임포트

• 공백만으로 구성 불가
• 특수문자 사용 제한 (이모지, HTML 태그 등)

• 필수 입력: "제목을 입력해주세요"
• 최소 길이 미달: "제목은 최소 2자 이상이어야 합니다"
• 최대 길이 초과: "제목은 50자를 초과할 수 없습니다"
• 공백만 입력: "제목을 입력해주세요"
• 특수문자 사용: "특수문자는 사용할 수 없습니다"

• 공백만으로 구성 불가
• XSS 방지를 위한 HTML 태그 필터링

• 필수 입력: "본문을 입력해주세요"
• 최소 길이 미달: "본문은 최소 1자 이상이어야 합니다"
• 최대 길이 초과: "본문은 2200자를 초과할 수 없습니다"
• 공백만 입력: "본문을 입력해주세요"

• 공백만으로 구성 불가
• XSS 방지를 위한 HTML 태그 필터링

• 필수 입력: "댓글을 입력해주세요"
• 최대 길이 초과: "댓글은 200자를 초과할 수 없습니다"
• 공백만 입력: "댓글을 입력해주세요"

• 이미지 비율: 1:1

• 최대 개수 초과: "이미지는 최대 3개까지 업로드할 수 있습니다"
• 지원하지 않는 형식: "지원하지 않는 이미지 형식입니다"
• 최대 크기 초과: "이미지 크기는 5MB를 초과할 수 없습니다"