[FIX] 9월 3주차 2차 QA 사항 - 희용

index.html

@@ -15,6 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>THIP, 독서를 기록하는 가장 힙한 방법</title>
     <meta property="og:title" content="THIP, 독서를 기록하는 가장 힙한 방법" />
+    <meta name="description" content="커뮤니티형 독서 기록 플랫폼 띱입니다." />
     <meta property="og:description" content="커뮤니티형 독서 기록 플랫폼. 띱. THIP." />
     <meta property="og:image" content="https://thip.co.kr/assets/thumbnail.jpeg" />
     <meta property="og:url" content="https://thip.co.kr" />

package.json

@@ -22,6 +22,7 @@
     "react-cookie": "^8.0.1",
     "react-datepicker": "^8.4.0",
     "react-dom": "^19.1.0",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^7.6.0",
     "zustand": "^5.0.4"
   },

src/api/notifications/postNotificationsCheck.ts

@@ -0,0 +1,25 @@
+import { apiClient } from '../index';
+
+export interface PostNotificationsCheckRequest {
+  notificationId: number;
+}
+
+export interface PostNotificationsCheckResponse<Params = Record<string, unknown>> {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    route: string; // e.g., 'POST_DETAIL'
+    params?: Params; // e.g., { postId: 123 }
+  };
+}
+
+// 알림 확인(체크) 및 이동 정보 반환 API
+export const postNotificationsCheck = async (notificationId: number) => {
+  const body: PostNotificationsCheckRequest = { notificationId };
+  const response = await apiClient.post<PostNotificationsCheckResponse>(
+    '/notifications/check',
+    body,
+  );
+  return response.data;
+};

src/lib/ga.ts

@@ -1,3 +1,5 @@
+import ReactGA from 'react-ga4';
+
 declare global {
   interface Window {
     dataLayer: unknown[];
@@ -6,33 +8,53 @@ declare global {
 }
 
 export const GA_ID = import.meta.env.VITE_GA_MEASUREMENT_ID as string | undefined;
+const GA_DEBUG = (import.meta.env.VITE_GA_DEBUG as string | undefined) === 'true';
+
+let isInitialized = false;
+
+function isLocalhost(): boolean {
+  const hn = window.location.hostname;
+  return hn === 'localhost' || hn === '127.0.0.1' || hn === '::1';
+}
 
 export function initGA() {
+  if (isInitialized) return;
   if (!GA_ID) return;
+  if (isLocalhost()) return;
+
+  ReactGA.initialize(GA_ID, {
+    gaOptions: { anonymizeIp: true },
+    testMode: false,
+  });
+
+  if (GA_DEBUG) {
+    console.info('[GA4] initialized:', GA_ID);
+  }
 
-  // gtag.js 로더 주입
-  const script = document.createElement('script');
-  script.async = true;
-  script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
-  document.head.appendChild(script);
-
-  // gtag 초기화
-  window.dataLayer = window.dataLayer || [];
-  window.gtag = function gtag(...args: unknown[]) {
-    window.dataLayer.push(args);
-  };
-
-  window.gtag('js', new Date());
-  // SPA라면 초기 자동 page_view는 끄고 필요 시 수동 전송
-  window.gtag('config', GA_ID, { send_page_view: false });
+  isInitialized = true;
 }
 
-// SPA 라우팅 시 수동 전송용
 export function sendPageView(path: string) {
-  if (!GA_ID || !window.gtag) return;
-  window.gtag('event', 'page_view', {
-    page_title: document.title,
-    page_location: window.location.href,
-    page_path: path,
-  });
+  if (!GA_ID || !isInitialized) return;
+  if (GA_DEBUG) {
+    console.info('[GA4] page_view:', path);
+  }
+  ReactGA.send({ hitType: 'pageview', page: path, title: document.title });
+}
+
+type EventParams = Record<string, string | number | boolean | undefined> & { category?: string };
+
+export function trackEvent(eventName: string, params?: EventParams) {
+  if (!GA_ID || !isInitialized) return;
+  const category = params?.category ?? eventName;
+  const entries = Object.entries(params || {}).filter(([k]) => k !== 'category') as Array<
+    [string, string | number | boolean | undefined]
+  >;
+  const rest = Object.fromEntries(entries) as Record<string, string | number | boolean | undefined>;
+
+  const payload = { category, ...rest };
+  if (GA_DEBUG) {
+    console.info('[GA4] event:', eventName, payload);
+  }
+  ReactGA.event(eventName, payload);
 }

src/main.tsx

@@ -1,9 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import './main.css';
 import App from './App.tsx';
-import { initGA, sendPageView } from './lib/ga.ts';
+import { initGA } from './lib/ga.ts';
 
 initGA();
-sendPageView(window.location.pathname);
 
 createRoot(document.getElementById('root')!).render(<App />);

src/pages/memory/Memory.tsx

@@ -6,6 +6,7 @@ import MemoryContent from '../../components/memory/MemoryContent/MemoryContent';
 import MemoryAddButton from '../../components/memory/MemoryAddButton/MemoryAddButton';
 import Snackbar from '../../components/common/Modal/Snackbar';
 import GlobalCommentBottomSheet from '../../components/common/CommentBottomSheet/GlobalCommentBottomSheet';
+import { useCommentBottomSheetStore } from '@/stores/useCommentBottomSheetStore';
 import { Container, FixedHeader, ScrollableContent, FloatingElements } from './Memory.styled';
 import { getMemoryPosts } from '../../api/memory/getMemoryPosts';
 import type { GetMemoryPostsParams, Post, Record } from '../../types/memory';
@@ -31,7 +32,7 @@ const convertPostToRecord = (post: Post): Record => {
     isWriter: post.isWriter,
     isLiked: post.isLiked,
     isLocked: post.isLocked, // 블러 처리 여부 추가
-    pollOptions: post.voteItems.map((item) => {
+    pollOptions: post.voteItems.map(item => {
       const maxCount = Math.max(...post.voteItems.map(v => v.count || 0));
       return {
         id: item.voteItemId.toString(),
@@ -50,6 +51,7 @@ const Memory = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { roomId } = useParams<{ roomId: string }>();
+  const { openCommentBottomSheet } = useCommentBottomSheetStore();
 
   // 상태 관리
   const [activeTab, setActiveTab] = useState<RecordType>('group');
@@ -151,6 +153,30 @@ const Memory = () => {
     loadMemoryPosts();
   }, [loadMemoryPosts]);
 
+  // Notice에서 넘어온 state(page, focusPostId 등)로 초기 필터 적용
+  useEffect(() => {
+    type MemoryLocationState = {
+      page?: number;
+      focusPostId?: number;
+      postType?: 'RECORD' | 'VOTE';
+      openComments?: boolean;
+    } | null;
+    const state = (location.state as MemoryLocationState) || null;
+    const initialPage = state?.page;
+    if (initialPage && !selectedPageRange) {
+      setSelectedPageRange({ start: initialPage, end: initialPage });
+      setActiveFilter('page');
+    }
+
+    // 댓글 모달 자동 오픈 처리
+    if (state?.openComments && state.focusPostId && state.postType) {
+      openCommentBottomSheet(state.focusPostId, state.postType);
+      // 동일 경로 재진입 시 중복 오픈 방지를 위해 state 제거
+      navigate(location.pathname, { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.state, roomId]);
+
   // 새로운 기록이 추가되었을 때 처리 (작성 완료 후 돌아왔을 때)
   useEffect(() => {
     if (location.state?.newRecord) {

src/pages/notice/Notice.tsx

@@ -5,6 +5,7 @@ import TitleHeader from '@/components/common/TitleHeader';
 import leftArrow from '../../assets/common/leftArrow.svg';
 import { colors, typography } from '@/styles/global/global';
 import { getNotifications, type NotificationItem } from '@/api/notifications/getNotifications';
+import { postNotificationsCheck } from '@/api/notifications/postNotificationsCheck';
 
 const Notice = () => {
   const [selected, setSelected] = useState<string>('');
@@ -78,16 +79,91 @@ const Notice = () => {
     };
   }, [isLoading, isLast, nextCursor, loadNotifications]);
 
-  // const handleReadNotification = (index: number) => {
-  //   setNotifications(prev =>
-  //     prev.map((item, idx) => (idx === index ? { ...item, isChecked: true } : item)),
-  //   );
-  // };
-
   const filteredNotifications = notifications;
 
   const tabs = ['피드', '모임'];
 
+  const handleNotificationClick = async (notif: NotificationItem) => {
+    try {
+      const res = await postNotificationsCheck(notif.notificationId);
+      if (!res.isSuccess) return;
+
+      // UI 즉시 반영: 읽음 처리
+      // setNotifications(prev =>
+      //   prev.map(item =>
+      //     item.notificationId === notif.notificationId ? { ...item, isChecked: true } : item,
+      //   ),
+      // );
+
+      const { route, params } = res.data as { route: string; params?: Record<string, unknown> };
+
+      // 서버 라우팅 키 → 실제 앱 경로 매핑
+      switch (route) {
+        // 이동 없음
+        case 'NONE':
+          break;
+
+        // 피드 1번 (해당유저 피드로 이동)
+        case 'FEED_USER': {
+          const userId = (params?.userId as number) ?? undefined;
+          if (userId !== undefined) {
+            navigate(`/otherfeed/${userId}`);
+          }
+          break;
+        }
+
+        // 피드 2~6번 (피드상세페이지로 이동)
+        case 'FEED_DETAIL': {
+          const feedId = (params?.feedId as number) ?? undefined;
+          if (feedId !== undefined) {
+            navigate(`/feed/${feedId}`);
+          }
+          break;
+        }
+
+        // 모임 (모집조기마감 or 모임시작)
+        case 'ROOM_MAIN': {
+          const roomId = (params?.roomId as number) ?? undefined;
+          if (roomId !== undefined) navigate(`/group/detail/joined/${roomId}`);
+          break;
+        }
+
+        // host일때, 누군가 모임 참여를 눌렀을 때
+        case 'ROOM_DETAIL': {
+          const roomId = (params?.roomId as number) ?? undefined;
+          if (roomId !== undefined) navigate(`/group/detail/${roomId}`);
+          break;
+        }
+
+        // 모임방 -> 기록장 -> 해당 기록 필터링 화면으로 이동
+        case 'ROOM_POST_DETAIL': {
+          const roomId = (params?.roomId as number) ?? undefined;
+          const postId = (params?.postId as number) ?? undefined;
+          const page = (params?.page as number) ?? undefined;
+          const postType = params?.postType as 'RECORD' | 'VOTE';
+          const shouldOpenComments = (params as { openComments?: boolean })?.openComments === true;
+          if (roomId !== undefined) {
+            navigate(`/rooms/${roomId}/memory`, {
+              state: {
+                focusPostId: postId,
+                postType,
+                page,
+                ...(shouldOpenComments ? { openComments: true } : {}),
+              },
+            });
+          }
+          break;
+        }
+
+        default:
+          break;
+      }
+    } catch (e) {
+      // noop: 실패 시 네비게이션 없이 무시
+      console.error('알림 확인 처리 실패:', e);
+    }
+  };
+
   return (
     <Wrapper>
       <TitleHeader
@@ -112,7 +188,7 @@ const Notice = () => {
             <NotificationCard
               key={notif.notificationId ?? idx}
               read={notif.isChecked}
-              // onClick={() => handleReadNotification(idx)}
+              onClick={() => handleNotificationClick(notif)}
             >
               {!notif.isChecked && <UnreadDot />}
               <TitleRow>
@@ -171,6 +247,12 @@ const NotificationList = styled.div`
   padding: 0 20px 20px 20px;
   width: 100%;
   overflow-y: auto;
+  /* Hide scrollbar but keep scroll */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
 `;
 
 const NotificationCard = styled.div<{ read: boolean }>`