[feat] add header and sidebar css and types

src/app/(with-header-sidebar)/layout.module.css

@@ -1,3 +1,13 @@
-.header {
-  color: yellowgreen;
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.sideBarWrapper {
+  border-right: 1px solid var(--gray-300);
+  padding: 22px;
+}
+
+.mainWrapper {
+  flex: 1;
 }

src/app/(with-header-sidebar)/layout.tsx

@@ -1,16 +1,17 @@
 import { ReactNode } from 'react';
 import SideBar from '@/components/SideBar';
 import styles from './layout.module.css';
-import Header from '@/components/Header';
+import MainContainer from '@/components/MainContainer';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <>
-      <Header />
-      <nav>
+    <div className={styles.container}>
+      <nav className={styles.sideBarWrapper}>
         <SideBar />
       </nav>
-      <main>{children}</main>
-    </>
+      <div className={styles.mainWrapper}>
+        <MainContainer>{children}</MainContainer>
+      </div>
+    </div>
   );
 }

src/app/(with-header-sidebar)/mydashboard/hooks/useApi.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from 'react';
+import { AxiosResponse, AxiosError } from 'axios';
+import axiosInstance from '../utils/axiosInstance';
+
+type UseApiFetchReturnType<T> = {
+  data: T | null;
+  loading: boolean;
+  error: AxiosError | null;
+  refetch: () => Promise<void>;
+};
+
+type RequestOptions<
+  TParams = Record<string, unknown>,
+  TBody = Record<string, unknown>,
+> = {
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  params?: TParams;
+  body?: TBody;
+};
+
+export default function useApi<
+  T,
+  TParams = Record<string, unknown>,
+  TBody = Record<string, unknown>,
+>(
+  url: string,
+  options: RequestOptions<TParams, TBody>
+): UseApiFetchReturnType<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<AxiosError | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+
+    try {
+      const config = {
+        method: options.method,
+        url,
+        params: options.params,
+        data: options.body,
+      };
+      const response: AxiosResponse<T> = await axiosInstance.request(config);
+      setData(response.data);
+    } catch (err) {
+      setError(err as AxiosError);
+    } finally {
+      setLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}

src/app/(with-header-sidebar)/mydashboard/hooks/useWindowSize.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+interface WindowSize {
+  width: number;
+  height: number;
+  isMobile: boolean;
+}
+
+export default function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: 0,
+    height: 0,
+    isMobile: true,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        isMobile: window.innerWidth <= 768,
+      });
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}

src/app/(with-header-sidebar)/mydashboard/types/dashboards.ts

@@ -0,0 +1,22 @@
+interface Dashboard {
+  id: number;
+  title: string;
+  color: string;
+  userId: number;
+  createdAt: string;
+  updatedAt?: string;
+  createdByMe: boolean;
+}
+
+interface GetDashboardsRequestParams {
+  navigationMethod: 'infiniteScroll' | 'pagination';
+  cursorId?: number;
+  page?: number;
+  size?: number;
+}
+
+interface GetDashboardsResponse {
+  dashboards: Dashboard[];
+  totalCount: number;
+  cursorId: number | null;
+}

src/app/(with-header-sidebar)/mydashboard/types/user.ts

@@ -0,0 +1,8 @@
+export interface User {
+  id: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string | null;
+  createdAt: string;
+  updatedAt?: string;
+}

src/app/(with-header-sidebar)/mydashboard/utils/axiosInstance.ts

@@ -0,0 +1,31 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { BASE_URL } from '@/constants/urls';
+
+const axiosInstance: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000,
+});
+
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = 'your-token-here'; // TODO: Add token
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export const apiCall = async <T>(
+  config: AxiosRequestConfig
+): Promise<AxiosResponse<T>> => {
+  return axiosInstance.request<T>(config);
+};
+
+export default axiosInstance;

src/app/reset.css

@@ -7,6 +7,7 @@
 
 body {
   font-family: var(--font-pretendard), sans-serif;
+  height: 100vh;
 }
 
 ul,

src/components/Button.tsx

@@ -8,10 +8,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function Button({
   className = '',
   children,
+  type = 'button',
   ...props
 }: PropsWithChildren<ButtonProps>) {
   return (
-    <button className={`${styles.button} ${className}`} {...props}>
+    <button type={type} className={`${styles.button} ${className}`} {...props}>
       {children}
     </button>
   );

src/components/Header.module.css

@@ -1,3 +1,3 @@
 .header {
-  color: skyblue;
+  border-bottom: 1px solid var(--gray-300);
 }

src/components/Header.tsx

@@ -1,9 +1,20 @@
 'use client';
 import { usePathname } from 'next/navigation';
 import styles from './Header.module.css';
+import type { User } from '@/app/(with-header-sidebar)/mydashboard/types/user';
+
+const user: User = {
+  id: 1,
+  email: '[email protected]',
+  nickname: 'heejin',
+  profileImageUrl: null,
+  createdAt: '2024-11-15T14:29:07.482Z',
+};
 
 export default function Header() {
   const pathname = usePathname();
 
-  return <header className={styles.header}>헤더 {pathname}</header>;
+  const { nickname, profileImageUrl } = user;
+
+  return <header className={styles.header}>내 대시보드</header>;
 }

src/components/MainContainer.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import styles from './MainContainer.module.css';
+import Header from './Header';
+
+export default function MainContainer({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+    </>
+  );
+}

src/components/SideBar.module.css

@@ -1,3 +1,13 @@
+.sideBar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.button {
+  background-color: transparent !important;
+}
+
 .active {
   color: salmon;
 }

src/components/SideBar.tsx

@@ -3,23 +3,52 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import styles from './SideBar.module.css';
+import Image from 'next/image';
+import Button from './Button';
+import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/hooks/useWindowSize';
 
 export default function SideBar() {
   const pathname = usePathname();
+  const { isMobile } = useWindowSize();
 
   return (
-    <div>
+    <div className={styles.sideBar}>
+      <Button aria-label="홈페이지 이동" className={styles.button}>
+        {isMobile ? (
+          <Image
+            src="/images/logo_small.svg"
+            alt="로고 홈페이지이동"
+            width={24}
+            height={27}
+          />
+        ) : (
+          <Image
+            src="/images/logo_large.svg"
+            alt="로고 홈페이지이동"
+            width={109}
+            height={33}
+          />
+        )}
+      </Button>
+      <Button aria-label="대시보드 추가하기" className={styles.button}>
+        <Image
+          src="/icons/add_box.svg"
+          alt="대시보드 추가하기"
+          width={20}
+          height={20}
+        />
+      </Button>
       <Link
         href={'/dashboard/1'}
         className={`link ${pathname === '/dashboard/1' ? styles.active : ''}`}
       >
-        대시보드1
+        O
       </Link>
       <Link
         href={'/dashboard/2'}
         className={`link ${pathname === '/dashboard/2' ? styles.active : ''}`}
       >
-        대시보드2
+        O
       </Link>
     </div>
   );

src/constants/urls.ts

@@ -1,4 +1,4 @@
-const BASE_URL = 'https://sp-taskify-api.vercel.app/10-1';
+export const BASE_URL = 'https://sp-taskify-api.vercel.app/10-1';
 
 export const AUTH_URL = `${BASE_URL}/auth`;
 export const CARD_URL = `${BASE_URL}/cards`;