Merge pull request #87 from codeit-2team/feat/84

Feat/84 헤더 마이페이지, 로그아웃 드롭다운 추가 및 로그인 성공 UI 적용

Author: BokyungCodes

src/app/api/experiences/getExperiences.ts

@@ -14,8 +14,8 @@ interface ExperienceResponse {
   cursorId: number;
 }
 
-const teamId = process.env.NEXT_PUBLIC_TEAM_ID;
-const url = `/${teamId}/activities`;
+const baseUrl = process.env.NEXT_PUBLIC_API_SERVER_URL;
+const url = `${baseUrl}/activities`;
 const validSorts = ['price_asc', 'price_desc'];
 
 export const getExperiences = async ({ page, category, sort, keyword }: Params) => {

src/app/api/experiences/getPopularExperiences.ts

@@ -7,8 +7,8 @@ interface ResponseData {
   activities: Experience[];
 }
 
-const teamId = process.env.NEXT_PUBLIC_TEAM_ID;
-const url = `/${teamId}/activities`;
+const baseUrl = process.env.NEXT_PUBLIC_API_SERVER_URL;
+const url = `${baseUrl}/activities`;
 
 export const getPopularExperiences = async (): Promise<ResponseData> => {
   const res = await instance.get<ResponseData>(url, {

src/components/Header.tsx

@@ -1,19 +1,26 @@
 'use client';
 
 import Link from 'next/link';
-import Image from 'next/image';
-import { useState } from 'react';
 import IconLogo from '@assets/svg/logo';
 import IconBell from '@assets/svg/bell';
+import useUserStore from '@/stores/authStore';
+import { useRouter } from 'next/navigation';
+import ProfileDropdown from '@/components/ProfileDropdown';
 
 export default function Header() {
-  // 실제로는 로그인 여부를 전역 상태나 context로 받아와야 함
-  // test하려면 로그인 상태를 true로 변경
-  // 빌드 에러로 인해 setIsLoggedIn 변수 앞에 _를 붙여 의도적으로 사용하지 않음을 표시
-  const [isLoggedIn, _setIsLoggedIn] = useState(false);
+  const router = useRouter();
+  const user = useUserStore((state) => state.user);
+  const setUser = useUserStore((state) => state.setUser);
+  const isLoggedIn = !!user;
+
+  // 로그아웃 처리
+  const handleLogout = () => {
+    setUser(null);
+    router.push('/');
+  };
 
   return (
-    <header className='fixed z-10 w-full border-b border-gray-300 bg-white'>
+    <header className='fixed z-100 w-full border-b border-gray-300 bg-white'>
       <div className='mx-auto flex min-h-70 max-w-1200 items-center justify-between px-20 py-20'>
         {/* 로고 */}
         <Link
@@ -24,28 +31,23 @@ export default function Header() {
         </Link>
 
         {/* 우측 메뉴 */}
-        <div className='text-md flex items-center gap-24 text-black'>
+        <div className='text-md relative flex items-center gap-24 text-black'>
           {isLoggedIn ? (
             <>
               {/* 알림 아이콘 */}
               <button aria-label='알림' className='hover:text-primary'>
                 <IconBell />
               </button>
 
-              {/* 세로 구분선 */}
+              {/* 구분선 */}
               <div className='mx-12 h-22 w-px bg-gray-300' />
 
-              {/* 유저 프로필 */}
-              <div className='flex items-center gap-2'>
-                <Image
-                  src='/img/sample-user.png' // 사용자 프로필 이미지
-                  alt='프로필 이미지'
-                  width={32}
-                  height={32}
-                  className='rounded-full border border-gray-300'
-                />
-                <span>김보경</span>
-              </div>
+              {/* 프로필 드롭다운 */}
+              <ProfileDropdown
+                nickname={user.nickname}
+                profileImageUrl={user.profileImageUrl}
+                onLogout={handleLogout}
+              />
             </>
           ) : (
             <>

src/components/ProfileDropdown.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import ProfileDefaultIcon from '@assets/svg/profile-default';
+
+import { ProfileDropdownProps } from '@/types/profileDropdownTypes';
+
+export default function ProfileDropdown({ nickname, profileImageUrl, onLogout }: ProfileDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  // 외부 클릭 시 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // 경로 변경 시 드롭다운 닫기
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className='relative' ref={dropdownRef}>
+      {/* 프로필 영역 (드롭다운 토글) */}
+      <div
+        className='flex items-center gap-8 cursor-pointer'
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {profileImageUrl ? (
+          <Image
+            src={profileImageUrl}
+            alt='프로필 이미지'
+            width={32}
+            height={32}
+            className='rounded-full border border-gray-300'
+          />
+        ) : (
+          <div className='size-32 rounded-full border border-gray-300 overflow-hidden'>
+            <ProfileDefaultIcon size={32} />
+          </div>
+        )}
+        <span>{nickname || '사용자'}</span>
+      </div>
+
+      {/* 드롭다운 메뉴 */}
+      {isOpen && (
+        <div
+          className='absolute top-50 right-0 z-50 mt-12 w-140 rounded-md border border-gray-200 bg-white shadow-md'
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Link
+            href='/mypage'
+            className='block w-full px-16 py-12 text-left hover:bg-gray-50'
+          >
+            마이페이지
+          </Link>
+          <button
+            onClick={onLogout}
+            className='w-full px-16 py-12 text-left hover:bg-gray-50'
+          >
+            로그아웃
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/types/profileDropdownTypes.ts

@@ -0,0 +1,5 @@
+export interface ProfileDropdownProps {
+  nickname: string;
+  profileImageUrl: string | null;
+  onLogout: () => void;
+}