[YS-384] 믹스패널 도입

package.json

@@ -22,13 +22,15 @@
     "@tanstack/react-query": "^5.62.11",
     "@tanstack/react-query-devtools": "^5.62.11",
     "@tanstack/react-table": "^8.20.6",
+    "@types/mixpanel-browser": "^2.51.0",
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/next-plugin": "^2.4.8",
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
     "jira-prepare-commit-msg": "^1.7.2",
+    "mixpanel-browser": "^2.61.0",
     "next": "14.2.22",
     "react": "^18",
     "react-day-picker": "^9.5.0",

src/app/edit/[post_id]/layout.tsx

@@ -1,5 +1,12 @@
+import { Metadata } from 'next';
+
 import DefaultLayout from '@/components/layout/DefaultLayout/DefaultLayout';
 
+export const metadata: Metadata = {
+  title: '그라밋 | 공고 수정',
+  description: '그라밋 | 공고 수정',
+};
+
 function EditLayout({ children }: { children: React.ReactNode }) {
   return <DefaultLayout>{children}</DefaultLayout>;
 }

src/app/home/components/ExperimentPostContainer/ExperimentPostCardListContainer/ExperimentPostCardListContainer.tsx

@@ -9,6 +9,9 @@ import {
 
 import { ExperimentPostListFilters } from '@/apis/post';
 import useExperimentPostListQuery from '@/app/home/hooks/useExperimentPostListQuery';
+import { emptySubTitle } from '@/app/my-posts/components/MyPostsTable/MyPostsTable.css';
+import { emptyViewLayout } from '@/app/post/[post_id]/components/ExperimentPostContainer/ExperimentPostContainer.css';
+import Spinner from '@/components/Spinner/Spinner';
 
 interface PostCardListContainerProps {
   filters: ExperimentPostListFilters;
@@ -22,8 +25,18 @@ const ExperimentPostCardListContainer = ({ filters, isLoading }: PostCardListCon
     fetchNextPage,
     isFetchingNextPage,
     isFetching,
+    isLoading: isListLoading,
   } = useExperimentPostListQuery(filters, isLoading);
 
+  if (isListLoading) {
+    return (
+      <div className={emptyViewLayout}>
+        <Spinner />
+        <p className={emptySubTitle}>로딩중..</p>
+      </div>
+    );
+  }
+
   return (
     <div className={postCardContentContainer}>
       <div className={postCardContainer}>

src/app/join/layout.tsx

@@ -1,7 +1,13 @@
+import { Metadata } from 'next';
 import { Suspense } from 'react';
 
 import { joinPageLayout } from './JoinPage.css';
 
+export const metadata: Metadata = {
+  title: '그라밋 | 회원가입',
+  description: '그라밋 | 회원가입',
+};
+
 function JoinLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className={joinPageLayout}>

src/app/login/hooks/useGoogleLoginMutation.ts

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation';
 
 import { API } from '@/apis/config';
 import { googleLogin } from '@/apis/login';
+import { identifyUser, setUserProperties } from '@/lib/mixpanelClient';
 
 const useGoogleLoginMutation = () => {
   const router = useRouter();
@@ -14,11 +15,16 @@ const useGoogleLoginMutation = () => {
         API.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
         sessionStorage.setItem('refreshToken', refreshToken);
         sessionStorage.setItem('role', memberInfo.role);
+
+        identifyUser(memberInfo.oauthEmail);
+        setUserProperties({ email: memberInfo.oauthEmail, role: memberInfo.role });
+
         router.push('/');
         return;
       }
 
       sessionStorage.setItem('email', memberInfo.oauthEmail);
+
       router.push('/join');
     },
     onError: () => {

src/app/login/hooks/useNaverLoginMutation.ts

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation';
 
 import { API } from '@/apis/config';
 import { naverLogin, NaverLoginParams } from '@/apis/login';
+import { identifyUser, setUserProperties } from '@/lib/mixpanelClient';
 
 const useNaverLoginMutation = () => {
   const router = useRouter();
@@ -14,6 +15,10 @@ const useNaverLoginMutation = () => {
         API.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
         sessionStorage.setItem('refreshToken', refreshToken);
         sessionStorage.setItem('role', memberInfo.role);
+
+        identifyUser(memberInfo.oauthEmail);
+        setUserProperties({ email: memberInfo.oauthEmail, role: memberInfo.role });
+
         router.push('/');
         return;
       }

src/app/login/layout.tsx

@@ -1,5 +1,12 @@
+import { Metadata } from 'next';
+
 import { loginLayout } from './LoginPage.css';
 
+export const metadata: Metadata = {
+  title: '그라밋 | 로그인',
+  description: '그라밋 | 로그인',
+};
+
 function LoginLayout({ children }: { children: React.ReactNode }) {
   return <div className={loginLayout}>{children}</div>;
 }