[feat] add sidebar dashboards

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

@@ -5,7 +5,6 @@
 
 .sideBarWrapper {
   border-right: 1px solid var(--gray-300);
-  padding: 22px;
 }
 
 .mainWrapper {

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

@@ -4,7 +4,7 @@ import axiosInstance from '../_utils/axiosInstance';
 
 type UseApiFetchReturnType<T> = {
   data: T | null;
-  loading: boolean;
+  isLoading: boolean;
   error: AxiosError | null;
   refetch: () => Promise<void>;
 };
@@ -27,12 +27,12 @@ export default function useApi<
   options: RequestOptions<TParams, TBody>
 ): UseApiFetchReturnType<T> {
   const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<AxiosError | null>(null);
 
   const fetchData = useCallback(async () => {
     // TODO if (loading) return; add?
-    setLoading(true);
+    setIsLoading(true);
     setError(null);
 
     const config = {
@@ -48,13 +48,13 @@ export default function useApi<
     } catch (err) {
       setError(err as AxiosError);
     } finally {
-      setLoading(false);
+      setIsLoading(false);
     }
   }, [url, JSON.stringify(options)]);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
-  return { data, loading, error, refetch: fetchData };
+  return { data, isLoading, error, refetch: fetchData };
 }

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

@@ -13,6 +13,7 @@ axiosInstance.interceptors.request.use(
   (config) => {
     const token =
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDgwNCwidGVhbUlkIjoiMTAtMSIsImlhdCI6MTczMTcyMzkwNywiaXNzIjoic3AtdGFza2lmeSJ9.k8FqEAl7DbhwxhJNAkkMq8lYrgStN-9I3xrsR0cYm2c'; // TODO: Add token
+    // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDgwNywidGVhbUlkIjoiMTAtMSIsImlhdCI6MTczMTc2OTIwNywiaXNzIjoic3AtdGFza2lmeSJ9.yhISPAxnBlD28SkCY0mUxcIM5YuwAAib2k7j15fmlvA'; // TODO: Add token
     if (token) {
       config.headers['Authorization'] = `Bearer ${token}`;
     }

src/app/reset.css

@@ -37,4 +37,6 @@ button {
 a {
   text-decoration: none;
   color: inherit;
+  display: inherit;
+  width: inherit;
 }

src/components/header/Header.module.css

@@ -27,8 +27,8 @@
   align-items: center;
   gap: 8px;
   background-color: transparent;
-  border-radius: 6px;
   border: 1px solid var(--gray-300);
+  border-radius: 6px;
   color: var(--gray-500);
   font-size: 14px;
   font-weight: 500;
@@ -55,6 +55,35 @@
   align-items: center;
 }
 
+.userInfoWrapper:hover {
+  cursor: pointer;
+}
+
+.myMenu {
+  position: absolute;
+  top: 75px;
+  right: 10px;
+  padding: 6px 0;
+  border: 1px solid var(--gray-300);
+  border-radius: 6px;
+  color: var(--gray-500);
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.myMenu div {
+  padding: 3px 12px;
+  transition: background-color 0.3s ease;
+}
+
+.myMenu div:hover {
+  cursor: pointer;
+  background: var(--gray-200);
+}
+
 @media screen and (min-width: 768px) {
   .header {
     padding-left: 40px;
@@ -75,17 +104,24 @@
     font-size: 16px;
   }
 
+  .icon {
+    display: block;
+  }
+
   .userInfoWrapper {
     margin-left: 36px;
   }
+
+  .myMenu {
+    min-width: 120px;
+    text-align: center;
+    top: 80px;
+    right: 50px;
+  }
 }
 
 @media screen and (min-width: 1199px) {
   .header {
     padding-right: 80px;
   }
-
-  .icon {
-    display: block;
-  }
 }

src/components/header/Header.tsx

@@ -1,16 +1,24 @@
 'use client';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import Image from 'next/image';
 import Button from '../Button';
 import UserInfo from './UserInfo';
 import styles from './Header.module.css';
+import { useState } from 'react';
 
 interface HeaderProps {
   component?: React.ComponentType;
 }
 
 export default function Header({ component: Component }: HeaderProps) {
   const pathname = usePathname();
+  const router = useRouter();
+
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+  const handleUserInfoClick = () => {
+    setIsMenuVisible(!isMenuVisible);
+  };
 
   return (
     <header className={styles.header}>
@@ -43,9 +51,16 @@ export default function Header({ component: Component }: HeaderProps) {
         </div>
       )}
       <div className={styles.userInfoContainer}>
-        <div className={styles.userInfoWrapper}>
+        <div className={styles.userInfoWrapper} onClick={handleUserInfoClick}>
           <UserInfo />
         </div>
+        {isMenuVisible && (
+          <div className={styles.myMenu}>
+            <div onClick={() => router.push('/mydashboard')}>내 대시보드</div>
+            <div onClick={() => router.push('/mypage')}>내 정보</div>
+            <div onClick={() => router.push('/')}>로그아웃</div>
+          </div>
+        )}
       </div>
     </header>
   );

src/components/header/UserInfo.module.css

@@ -22,4 +22,11 @@
   color: var(--black-100);
   font-size: 16px;
   font-weight: 500;
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .nickname {
+    display: inline;
+  }
 }

src/components/header/UserInfo.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { User } from '@/app/(with-header-sidebar)/mydashboard/_types/user';
+import type { User } from '@/types/user';
 import Image from 'next/image';
 import useWindowSize from '@/app/(with-header-sidebar)/mydashboard/_hooks/useWindowSize';
 import { useState, useEffect } from 'react';
@@ -11,9 +11,9 @@ 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,
+  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',
 };
 
@@ -37,16 +37,16 @@ export default function UserInfo() {
 
   return (
     <>
-      {profileImageUrl ? (
-        <Image
-          src={profileImageUrl}
-          alt="프로필 이미지"
-          width={30}
-          height={30}
-          className={styles.image}
-        />
-      ) : (
-        <div className={styles.userInfo}>
+      <div className={styles.userInfo}>
+        {profileImageUrl ? (
+          <Image
+            src={profileImageUrl}
+            alt="프로필 이미지"
+            width={30}
+            height={30}
+            className={styles.image}
+          />
+        ) : (
           <div
             style={{
               backgroundColor: colors.randomColor,
@@ -56,9 +56,9 @@ export default function UserInfo() {
           >
             <span>{email[0].toUpperCase()}</span>
           </div>
-          {!isMobile && <span className={styles.nickname}>{nickname}</span>}
-        </div>
-      )}
+        )}
+        <span className={styles.nickname}>{nickname}</span>
+      </div>
     </>
   );
 }

src/components/sidebar/Dashboards.module.css

@@ -1,10 +1,94 @@
-.dashBoards {
+.dashboards {
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
 }
 
 .active {
-  color: salmon;
+  border-radius: 4px;
+  background: var(--violet-light);
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.title,
+.crown {
+  display: none;
+  color: var(--gray-500);
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.arrowLeft,
+.arrowRight {
+  border: 1px solid var(--gray-300);
+  border-right: none;
+  border-radius: 0;
+  background: var(--white);
+  height: 35px;
+}
+
+.arrowRight {
+  border-top: none;
+}
+
+.arrowLeft:disabled,
+.arrowRight:disabled {
+  background: var(--white);
+}
+
+@media screen and (min-width: 768px) {
+  .dashboardsWrapper {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .title,
+  .crown {
+    display: inline;
+  }
+
+  .crown {
+    margin-left: -8px;
+  }
+
+  .titleContainer {
+    justify-content: flex-start;
+    gap: 16px;
+    padding: 8px 10px;
+  }
+
+  .arrowWrapper {
+    margin-top: 20px;
+  }
+
+  .arrowLeft,
+  .arrowRight {
+    border: 1px solid var(--gray-300);
+    width: 40px;
+    height: 40px;
+  }
+
+  .arrowLeft {
+    border-radius: 4px 0px 0px 4px;
+  }
+
+  .arrowRight {
+    border-radius: 0px 4px 4px 0px;
+  }
 }