[#33] Feat/31/공통컴포넌트 헤더

next.config.ts

@@ -3,6 +3,14 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'rematedeploy-production.up.railway.app',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

package.json

@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.100.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.0",
@@ -25,6 +26,7 @@
     "next-auth": "^4.24.14",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-toastify": "^11.1.0",
     "tailwind-merge": "^3.5.0",
     "zustand": "^5.0.12"
   },

src/apis/auth/auth.queries.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+import { authService } from './auth.service';
+
+export const authKeys = {
+  me: ['auth', 'me'] as const,
+};
+
+export const useGetMe = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: authKeys.me,
+    queryFn: () => authService.getMe(accessToken!),
+    enabled: !!accessToken,
+  });
+};

src/apis/auth/auth.service.ts

@@ -0,0 +1,16 @@
+import { MeResponse } from './auth.type';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const authService = {
+  getMe: async (accessToken: string): Promise<MeResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/auth/me`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!res.ok) throw new Error('내 정보 조회 실패');
+    return res.json();
+  },
+};

src/apis/auth/auth.type.ts

@@ -0,0 +1,12 @@
+export interface MeResponse {
+  success: boolean;
+  data: {
+    email: string;
+    name: string;
+    picture: string | null;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}

src/apis/workspace/workspace.queries.ts

@@ -0,0 +1,46 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
+import { workspaceService } from './workspace.service';
+import { InviteWorkspaceRequest } from './workspace.type';
+
+export const workspaceKeys = {
+  all: ['workspaces'] as const,
+  my: ['workspaces', 'my'] as const,
+  detail: (workspaceId: number) => ['workspaces', workspaceId] as const,
+};
+
+export const useGetMyWorkspaces = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.my,
+    queryFn: () => workspaceService.getMyWorkspaces(accessToken!),
+    enabled: !!accessToken,
+  });
+};
+
+export const useGetWorkspace = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.detail(workspaceId),
+    queryFn: () => workspaceService.getWorkspace(workspaceId, accessToken!),
+    enabled: !!accessToken && !!workspaceId,
+  });
+};
+
+export const useInviteWorkspace = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: InviteWorkspaceRequest) =>
+      workspaceService.inviteWorkspace(workspaceId, body, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.detail(workspaceId) });
+    },
+  });
+};

src/apis/workspace/workspace.service.ts

@@ -0,0 +1,56 @@
+import {
+  WorkspaceListResponse,
+  WorkspaceDetailResponse,
+  InviteWorkspaceRequest,
+  InviteWorkspaceResponse,
+} from './workspace.type';
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const workspaceService = {
+  getMyWorkspaces: async (accessToken: string): Promise<WorkspaceListResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/my`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!res.ok) throw new Error('워크스페이스 목록 조회 실패');
+    return res.json();
+  },
+
+  getWorkspace: async (
+    workspaceId: number,
+    accessToken: string,
+  ): Promise<WorkspaceDetailResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('워크스페이스 조회 실패');
+    return res.json();
+  },
+
+  inviteWorkspace: async (
+    workspaceId: number,
+    body: InviteWorkspaceRequest,
+    accessToken: string,
+  ): Promise<InviteWorkspaceResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}/invite`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (res.status === 409) throw new Error('이미 참여 중인 워크스페이스입니다.');
+    if (!res.ok) throw new Error('초대에 실패했습니다. 이메일을 확인해 주세요.');
+    return res.json();
+  },
+};

src/apis/workspace/workspace.type.ts

@@ -0,0 +1,48 @@
+export type WorkspaceRole = 'ADMIN' | 'MEMBER';
+
+export interface WorkspaceItem {
+  color: string;
+  membershipId: number;
+  role: WorkspaceRole;
+  workspaceId: number;
+  workspaceName: string;
+}
+
+export interface WorkspaceListResponse {
+  success: boolean;
+  totalCount: number;
+  nextCursor: number | null;
+  data: WorkspaceItem[];
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface WorkspaceDetailResponse {
+  success: boolean;
+  data: {
+    workspaceId: number;
+    workspaceName: string;
+    color: string;
+    role: WorkspaceRole;
+    membershipId: number;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface InviteWorkspaceRequest {
+  email: string;
+}
+
+export interface InviteWorkspaceResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}

src/app/(after-login)/layout.tsx

@@ -1,11 +1,15 @@
+import Header from '@/components/header/Header';
 import Sidebar from '@/components/sidebar/Sidebar';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className='flex h-screen'>
       <Sidebar />
 
-      <main className='flex-1 overflow-auto bg-gray-100'>{children}</main>
+      <main className='flex-1 overflow-auto bg-gray-100 pt-15 md:pt-17.5'>
+        <Header />
+        {children}
+      </main>
     </div>
   );
 }

src/app/(before-login)/(landing)/layout.tsx

@@ -0,0 +1,10 @@
+import Header from '@/components/header/Header';
+
+export default function LandingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main className='pt-15 md:pt-17.5'>{children}</main>
+    </>
+  );
+}

src/app/(before-login)/(landing)/page.tsx

@@ -1,10 +1,7 @@
-import TempLogoutButton from '@/components/TempLogoutButton';
-
 export default function Home() {
   return (
     <>
       <div>랜딩 페이지</div>
-      <TempLogoutButton />
     </>
   );
 }