12th-OnGil-FE/src/components/mypage/settings-section.tsx at e89b76974797d1770e6b4aca7588e9357f664754 · IT-Cotato/12th-OnGil-FE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
'use client';

import Link from 'next/link';
import { signOut } from 'next-auth/react';
import Image from 'next/image';

const settingsItems = [
  {
    icon: 'icons/notification.svg',
    label: '알림 받기',
    href: '/me/notifications',
    type: 'link' as const,
  },
  {
    icon: 'icons/my-edit.svg',
    label: '내 정보 수정',
    href: '/me/edit',
    type: 'link' as const,
  },
  {
    icon: 'icons/logout.svg',
    label: '로그아웃',
    type: 'logout' as const,
  },
  {
    icon: 'icons/people-delete.svg',
    label: '회원 탈퇴',
    href: '/me/withdraw',
    type: 'link' as const,
  },
];

export default function SettingsSection() {
  const handleLogout = async () => {
    await signOut({ callbackUrl: '/' });
  };

  return (
    <div className="border-t border-gray-200">
      <h2 className="border-y border-black px-7 py-8 text-3xl leading-normal font-semibold">
        설정
      </h2>
      <div className="mx-5 my-10 rounded-lg border border-black px-5 py-4">
        <div className="grid grid-flow-col grid-rows-2 items-center justify-between gap-10">
          {settingsItems.map((item) =>
            item.type === 'logout' ? (
              <button
                key={item.label}
                onClick={handleLogout}
                className="flex flex-col items-center gap-2"
              >
                <div className="flex h-12 w-12 items-center justify-center">
                  <Image
                    src={`/${item.icon}`}
                    alt={item.label}
                    className="h-full w-full"
                    width={48}
                    height={48}
                  />
                </div>
                <span className="text-center text-lg leading-normal font-normal">
                  {item.label}
                </span>
              </button>
            ) : (
              <Link
                key={item.label}
                href={item.href!}
                className="flex flex-col items-center gap-2"
              >
                <div className="flex h-12 w-12 items-center justify-center">
                  <Image
                    src={`/${item.icon}`}
                    alt={item.label}
                    className="h-full w-full"
                    width={48}
                    height={48}
                  />
                </div>
                <span className="text-center text-lg leading-normal font-normal">
                  {item.label}
                </span>
              </Link>
            ),
          )}
        </div>
      </div>
    </div>
  );
}