[feat] add header userInfo

next.config.ts

@@ -1,7 +1,9 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+  },
 };
 
 export default nextConfig;

src/app/(with-header-sidebar)/dashboard/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>dashboard page</div>;
+}

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

@@ -31,23 +31,26 @@ export default function useApi<
   const [error, setError] = useState<AxiosError | null>(null);
 
   const fetchData = useCallback(async () => {
+    // TODO if (loading) return; add?
     setLoading(true);
+    setError(null);
+
+    const config = {
+      method: options.method,
+      url,
+      params: options.params,
+      data: options.body,
+    };
 
     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]);
+  }, [url, options.method, options.params, options.body]);
 
   useEffect(() => {
     fetchData();

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

@@ -18,7 +18,7 @@ export default function useWindowSize(): WindowSize {
       setWindowSize({
         width: window.innerWidth,
         height: window.innerHeight,
-        isMobile: window.innerWidth <= 768,
+        isMobile: window.innerWidth < 768,
       });
     }
 

src/app/layout.tsx

@@ -11,8 +11,8 @@ const pretendard = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Taskify',
+  description: 'Task management application',
 };
 
 export default function RootLayout({

src/components/Button.module.css

@@ -5,6 +5,7 @@
   font-size: 14px;
   font-weight: 600;
   color: var(--white);
+  white-space: nowrap;
 }
 
 .button:disabled {

src/components/Header.module.css

@@ -1,3 +1,91 @@
 .header {
+  padding: 16px;
   border-bottom: 1px solid var(--gray-300);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 16px;
+}
+
+.title {
+  flex: 1;
+  color: var(--black-100);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+}
+
+.button {
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 6px;
+  border: 1px solid var(--gray-300);
+  color: var(--gray-500);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.icon {
+  display: none;
+}
+
+.userInfoContainer {
+  display: flex;
+  align-items: center;
+}
+
+.userInfoContainer::before {
+  content: '';
+  border: 0.5px solid var(--gray-300);
+  height: 34px;
+}
+
+.userInfoWrapper {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+}
+
+@media screen and (min-width: 768px) {
+  .header {
+    padding-left: 40px;
+    padding-right: 30px;
+    gap: 36px;
+  }
+
+  .title {
+    font-size: 20px;
+  }
+
+  .buttonContainer {
+    gap: 16px;
+  }
+
+  .button {
+    padding: 10px 16px;
+    font-size: 16px;
+  }
+
+  .userInfoWrapper {
+    margin-left: 36px;
+  }
+}
+
+@media screen and (min-width: 1199px) {
+  .header {
+    padding-right: 80px;
+  }
+
+  .icon {
+    display: block;
+  }
 }

src/components/Header.tsx

@@ -1,20 +1,52 @@
 'use client';
 import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import Button from './Button';
+import UserInfo from './UserInfo';
 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',
-};
+interface HeaderProps {
+  component: React.ComponentType;
+}
 
-export default function Header() {
+export default function Header({ component: Component }: HeaderProps) {
   const pathname = usePathname();
 
-  const { nickname, profileImageUrl } = user;
-
-  return <header className={styles.header}>내 대시보드</header>;
+  return (
+    <header className={styles.header}>
+      <span className={styles.title}>내 대시보드</span>
+      <div className={styles.buttonContainer}>
+        <Button className={styles.button}>
+          <Image
+            src="/icons/settings.svg"
+            alt="관리"
+            width={20}
+            height={20}
+            className={styles.icon}
+          />
+          관리
+        </Button>
+        <Button className={styles.button}>
+          <Image
+            src="/icons/add_box.svg"
+            alt="초대하기"
+            width={20}
+            height={20}
+            className={styles.icon}
+          />
+          초대하기
+        </Button>
+      </div>
+      {Component && (
+        <div>
+          <Component />
+        </div>
+      )}
+      <div className={styles.userInfoContainer}>
+        <div className={styles.userInfoWrapper}>
+          <UserInfo />
+        </div>
+      </div>
+    </header>
+  );
 }

src/components/SideBar.module.css

@@ -5,9 +5,15 @@
 }
 
 .button {
-  background-color: transparent !important;
+  background-color: transparent;
 }
 
 .active {
   color: salmon;
 }
+
+@media screen and (min-width: 768px) {
+  .sideBar {
+    min-width: 155px;
+  }
+}

src/components/SideBar.tsx

@@ -2,10 +2,10 @@
 
 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';
+import styles from './SideBar.module.css';
 
 export default function SideBar() {
   const pathname = usePathname();

src/components/UserInfo.module.css

@@ -0,0 +1,25 @@
+.image {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.userIcon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nickname {
+  color: var(--black-100);
+  font-size: 16px;
+  font-weight: 500;
+}

src/components/UserInfo.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import type { User } from '@/app/(with-header-sidebar)/mydashboard/types/user';
+import styles from './UserInfo.module.css';
+import Image from 'next/image';
+import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/hooks/useWindowSize';
+import { useState, useEffect } from 'react';
+import UserInfoSkeleton from './skeleton/UserInfoSkeleton';
+
+const user: User = {
+  id: 1,
+  email: '[email protected]',
+  nickname: 'heejin',
+  // profileImageUrl:
+  // 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/taskify/profile_image/10-1_4804_1731757528194.jpeg',
+  profileImageUrl: null,
+  createdAt: '2024-11-15T14:29:07.482Z',
+};
+
+export default function UserInfo() {
+  const { email, nickname, profileImageUrl } = user;
+  const { isMobile } = useWindowSize();
+
+  const [colors, setColors] = useState<{
+    randomColor: string;
+    invertedColor: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const { randomColor, invertedColor } = getRandomColor();
+    setColors({ randomColor, invertedColor });
+  }, []);
+
+  if (!colors) {
+    return <UserInfoSkeleton />;
+  }
+
+  return (
+    <>
+      {profileImageUrl ? (
+        <Image
+          src={profileImageUrl}
+          alt="프로필 이미지"
+          width={30}
+          height={30}
+          className={styles.image}
+        />
+      ) : (
+        <div className={styles.userInfo}>
+          <div
+            style={{
+              backgroundColor: colors.randomColor,
+              color: colors.invertedColor,
+            }}
+            className={styles.userIcon}
+          >
+            <span>{email[0].toUpperCase()}</span>
+          </div>
+          {!isMobile && <span className={styles.nickname}>{nickname}</span>}
+        </div>
+      )}
+    </>
+  );
+}
+
+function getRandomColor() {
+  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+
+  const r = parseInt(randomColor.slice(1, 3), 16);
+  const g = parseInt(randomColor.slice(3, 5), 16);
+  const b = parseInt(randomColor.slice(5, 7), 16);
+
+  const invertedColor = `rgb(${255 - r}, ${255 - g}, ${255 - b})`;
+
+  return { randomColor, invertedColor };
+}

src/components/skeleton/UserInfoSkeleton.module.css

@@ -0,0 +1,23 @@
+.userIcon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray-300);
+}
+
+@media screen and (min-width: 768px) {
+  .userInfo {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .nickname {
+    background-color: var(--gray-300);
+    width: 45px;
+    height: 20px;
+  }
+}