Merge pull request #240 from DDD-Community/feat/home-banner

feat: Home 에 친밀도 별 영상배너 기능 추가

Author: IceBear9028

eslint.config.mjs

@@ -14,7 +14,12 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-  ...storybook.configs["flat/recommended"]
+  ...storybook.configs["flat/recommended"],
+  {
+    rules: {
+      "@typescript-eslint/no-empty-object-type": "off",
+    },
+  },
 ];
 
 export default eslintConfig;

src/composite/home/homeBanner/HomeBanner.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AdviceQuery } from '@/model/advice/queries';
+import { GrorongMood } from '@/model/advice/types';
+import { BANNER_MESSAGES } from './constants';
+import { getDailyRandomIndex, getVideoUrl } from './utils';
+
+export const HomeBanner = () => {
+  const { data: advice } = useQuery(AdviceQuery.getGrorongAdvice());
+  const [bannerIndex, setBannerIndex] = useState<number>(0);
+  const [isClient, setIsClient] = useState(false);
+
+  const mood: GrorongMood = advice?.mood ?? 'NORMAL';
+
+  useEffect(() => {
+    setIsClient(true);
+    setBannerIndex(getDailyRandomIndex(mood));
+  }, [mood]);
+
+  const videoUrl = useMemo(() => getVideoUrl(mood, bannerIndex), [mood, bannerIndex]);
+  const bannerMessage = useMemo(() => BANNER_MESSAGES[mood][bannerIndex]?.message || '', [mood, bannerIndex]);
+
+  // NEXT 하이드레이션 미스매칭 방지를 위한 코드
+  // 서버와 클라이언트가 getDailyRandomIndex() 실행 시 다른 값을 반환하면 하이드레이션 에러 발생
+  if (!isClient) {
+    return (
+      <div className="relative w-full h-[168px] bg-[#0F0F10]">
+        <div className="absolute inset-0 animate-pulse bg-gray-800" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-full h-[168px] overflow-hidden">
+      <video className="absolute inset-0 w-full h-full object-cover" src={videoUrl} autoPlay loop muted playsInline />
+      {bannerMessage && (
+        <div className="absolute top-1/4 left-4 z-10 max-w-[70%]">
+          <p className="text-[18px] font-bold text-white leading-tight whitespace-pre-line">{bannerMessage}</p>
+        </div>
+      )}
+    </div>
+  );
+};

src/composite/home/homeBanner/constants.ts

@@ -0,0 +1,47 @@
+import { GrorongMood } from '@/model/advice/types';
+
+export const MOOD_TO_VIDEO_PREFIX: Record<GrorongMood, string> = {
+  HAPPY: 'high',
+  NORMAL: 'med',
+  SAD: 'low',
+};
+
+export const VIDEO_COUNT = 6;
+
+export const BANNER_STORAGE_KEY = 'home-banner-daily-index';
+
+export type BannerContent = {
+  message: string;
+};
+
+export type BannerData = Record<GrorongMood, BannerContent[]>;
+
+/**
+ * 영상은 CLOUDFRONT_VIDEO_URL + `/home-banner/Closeness%20{prefix}-{01~06}.mp4` 형식으로 자동 생성됨
+ */
+export const BANNER_MESSAGES: BannerData = {
+  HAPPY: [
+    { message: '성실한 너를 위해\n꽃다발을 준비했어..' },
+    { message: '안녕!\n내 하트를 받아줄래?' },
+    { message: '너 덕분에\n그로롱 성실도 +100' },
+    { message: '내 친구왔다!\n모두 소리질러~!' },
+    { message: '너가 열심히 하니까\n내 맘이 평화로워' },
+    { message: '매일매일이 생일 같아\n너무 고마워!' },
+  ],
+  NORMAL: [
+    { message: '지금처럼 와주면\n그로롱 몸짱될 예정!' },
+    { message: '나도 너를 본받아\n열심히 공부하고 있어' },
+    { message: '안녕\n너를 봐서 설레!' },
+    { message: '너가 와서 신나는\n이 맘을 춤으로 표현할게' },
+    { message: '요즘 너의 목표 현황\n완전 꿀잼이야' },
+    { message: '너가 온 날은\n나에게 봄날같아' },
+  ],
+  SAD: [
+    { message: '너가 없는 시간은\n365일 겨울같아' },
+    { message: '빨리 와서 구해줘\n돌이 되기 직전이야' },
+    { message: '500만년만에 와서\n그로롱 해골 됨' },
+    { message: '기다렸는데,,\n외로웠는데,,' },
+    { message: '안 오는거야?\n나 흑화했어' },
+    { message: '네가 없는 거리에는\n내가 할일이 없어서' },
+  ],
+};

src/composite/home/homeBanner/index.ts

@@ -0,0 +1,3 @@
+export { HomeBanner } from './HomeBanner';
+export { BANNER_MESSAGES } from './constants';
+export type { BannerContent, BannerData } from './constants';

src/composite/home/homeBanner/utils.ts

@@ -0,0 +1,74 @@
+import { GrorongMood } from '@/model/advice/types';
+import { BANNER_STORAGE_KEY, MOOD_TO_VIDEO_PREFIX, VIDEO_COUNT } from './constants';
+
+type StoredBannerIndex = {
+  date: string;
+  indices: Record<GrorongMood, number>;
+};
+
+/**
+ * 오늘 날짜를 YYYY-MM-DD 형식으로 반환
+ */
+const getTodayString = (): string => {
+  return new Date().toISOString().split('T')[0];
+};
+
+/**
+ * 0부터 max-1까지의 랜덤 정수 반환
+ */
+const getRandomIndex = (max: number): number => {
+  return Math.floor(Math.random() * max);
+};
+
+/**
+ * 하루에 한 번 랜덤으로 선택된 인덱스를 반환
+ * localStorage에 저장하여 같은 날에는 동일한 인덱스 유지
+ */
+export const getDailyRandomIndex = (mood: GrorongMood): number => {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  const today = getTodayString();
+  const stored = localStorage.getItem(BANNER_STORAGE_KEY);
+
+  if (stored) {
+    try {
+      const parsed: StoredBannerIndex = JSON.parse(stored);
+
+      if (parsed.date === today && parsed.indices[mood] !== undefined) {
+        return parsed.indices[mood];
+      }
+    } catch {
+      // 파싱 실패 시 새로 생성
+    }
+  }
+
+  // 새로운 날이거나 저장된 값이 없는 경우
+  const newIndices: Record<GrorongMood, number> = {
+    HAPPY: getRandomIndex(VIDEO_COUNT),
+    NORMAL: getRandomIndex(VIDEO_COUNT),
+    SAD: getRandomIndex(VIDEO_COUNT),
+  };
+
+  const newStored: StoredBannerIndex = {
+    date: today,
+    indices: newIndices,
+  };
+
+  localStorage.setItem(BANNER_STORAGE_KEY, JSON.stringify(newStored));
+
+  return newIndices[mood];
+};
+
+/**
+ * mood와 인덱스를 기반으로 비디오 URL 생성
+ * 형식: {CLOUDFRONT_VIDEO_URL}/home-banner/Closeness%20{high|low|mad}-{01~06}.mp4
+ */
+export const getVideoUrl = (mood: GrorongMood, index: number): string => {
+  const baseUrl = process.env.NEXT_PUBLIC_CLOUDFRONT_VIDEO_URL;
+  const prefix = MOOD_TO_VIDEO_PREFIX[mood];
+  const paddedIndex = String(index + 1).padStart(2, '0');
+
+  return `${baseUrl}/home-banner/Closeness%20${prefix}-${paddedIndex}.mp4`;
+};

src/composite/home/index.ts

@@ -2,3 +2,4 @@ export { GoalRoadMap } from './goalRoadMap/component';
 export { ContributionGraph } from './contributionGraph/component';
 export { GoalBanner } from './goalBanner/component';
 export { TodoListContainer } from './todoListContainer';
+export { HomeBanner } from './homeBanner';

src/composite/home/todoListContainer/TodoListContainer.tsx

@@ -7,10 +7,10 @@ import { Z_INDEX } from '@/shared/lib/z-index';
 import { TodoList } from '@/feature/todo/todoList';
 import { TodoBottomSheet } from '@/feature/todo/todoBottomSheet';
 import { Calendar } from '@/feature/todo/calendar';
-import { CheerMessageCard } from './components/cheerMessageCard';
 import { AddGoalButton } from './components/addGoalButton';
 import { TodoListContainerFormProvider } from './form';
 import { convertToFormData, getEditingTodoDefault } from './helper';
+import { HomeBanner } from '../homeBanner';
 
 export const TodoListContainer = () => {
   const addSheet = useBottomSheet();
@@ -33,8 +33,7 @@ export const TodoListContainer = () => {
 
         return (
           <div className="relative w-full">
-            {!isMonthlyView && <CheerMessageCard type="grorong" />}
-
+            <HomeBanner />
             <div
               className={`absolute left-0 right-0 mx-auto bg-[#0F0F10] shadow-xl transition-all duration-300 ease-in-out ${Z_INDEX.CONTENT} ${
                 isMonthlyView ? 'top-0 rounded-none' : 'top-[140px] rounded-t-3xl'

src/composite/home/todoListContainer/components/cheerMessageCard/CheerMessageCard.tsx

@@ -1,13 +1,18 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
 import { GrorongCard } from '@/feature/home/GrorongCard';
 import { AIMentorCard } from '@/feature/home/AIMentorCard';
 import { useAIMentorAdvice } from '@/model/aiMentor/context';
-import { useGrorongAdvice } from './hooks';
+import { AdviceQuery } from '@/model/advice/queries';
 import { AttendanceStreakPopup } from '@/feature/todo/weeklyTodoList/components/AttendanceStreakPopup';
 
+/**
+ * @deprecated HomeBanner 컴포넌트를 사용해주세요.
+ * @see {@link @/composite/home/homeBanner/HomeBanner}
+ */
 export const CheerMessageCard = ({ type }: { type: 'grorong' | 'aiMentor' }) => {
-  const { advice } = useGrorongAdvice();
+  const { data: advice } = useQuery(AdviceQuery.getGrorongAdvice());
   const { aiMentorAdvice } = useAIMentorAdvice();
 
   const renderCard = () => {