[Feature/#213] 설정 페이지 탭 UI 및 알림 채널 설정 추가

src/components/setting/NotificationSection.tsx

@@ -0,0 +1,83 @@
+import Badge from "@/components/common/badge/Badge";
+import Button from "@/components/common/button/Button";
+import Card from "@/components/common/card/Card";
+import Toggle from "@/components/common/toggle/Toggle";
+
+import MailIcon from "@/assets/icon/common/mail.svg?react";
+import BellIcon from "@/assets/icon/sidebar/notification.svg?react";
+import SlackIcon from "@/assets/logo/social-logo/plain/slack.svg?react";
+
+export interface INotificationSettings {
+  browserPush: boolean;
+  emailNotif: boolean;
+}
+
+type TNotificationSectionProps = {
+  email: string;
+  browserPush: boolean;
+  emailNotif: boolean;
+  onBrowserPushChange: (value: boolean) => void;
+  onEmailNotifChange: (value: boolean) => void;
+};
+
+export default function NotificationSection({
+  email,
+  browserPush,
+  emailNotif,
+  onBrowserPushChange,
+  onEmailNotifChange,
+}: TNotificationSectionProps) {
+  return (
+    <Card className="p-8 tablet:p-10">
+      <header className="mb-7 flex items-center gap-4">
+        <BellIcon />
+        <h2 className="font-heading4 text-text-title">알림 채널 설정</h2>
+      </header>
+
+      <div className="flex flex-col divide-y divide-surface-300">
+        <div className="flex items-center justify-between py-5 first:pt-0">
+          <div className="flex items-center gap-4">
+            <BellIcon className="h-5 w-5 shrink-0 text-text-muted" />
+            <p className="font-body1 text-text-title">브라우저 푸시 알림</p>
+          </div>
+          <div className="flex items-center gap-4">
+            {browserPush && <Badge variant="infoBlue">권한 허용됨</Badge>}
+            <Toggle
+              checked={browserPush}
+              onToggle={() => onBrowserPushChange(!browserPush)}
+              ariaLabel="브라우저 푸시 알림 켜기/끄기"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-5">
+          <div className="flex items-center gap-4">
+            <MailIcon className="h-5 w-5 shrink-0 text-text-muted" />
+            <div>
+              <p className="font-body1 text-text-title">이메일 알림 설정</p>
+              <p className="font-body2 text-text-muted">{email}</p>
+            </div>
+          </div>
+          <Toggle
+            checked={emailNotif}
+            onToggle={() => onEmailNotifChange(!emailNotif)}
+            ariaLabel="이메일 알림 켜기/끄기"
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-5 last:pb-0">
+          <div className="flex items-center gap-4">
+            <SlackIcon className="h-5 w-5 shrink-0" />
+            <div>
+              <p className="font-body1 text-text-title">슬랙 연동하기</p>
+              <p className="font-body2 text-text-muted">#채널명</p>
+            </div>
+          </div>
+          <Button variant="outline" size="small" type="button">
+            연동
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

src/components/setting/ProfileSection.tsx

@@ -12,7 +12,6 @@ import UserProfileCircleIcon from "@/assets/icon/common/userProfileCircle.svg?re
 type TProfileSectionProps = {
   name: string;
   setName: (v: string) => void;
-  organizations: { name: string; position: string }[];
   email: string;
   phoneNumber: string;
   fileRef: React.RefObject<HTMLInputElement | null>;
@@ -24,7 +23,6 @@ type TProfileSectionProps = {
 export default function ProfileSection({
   name,
   setName,
-  organizations,
   email,
   phoneNumber,
   fileRef,
@@ -102,33 +100,6 @@ export default function ProfileSection({
               onChange={(e) => setName(e.target.value)}
             />
           </div>
-          <div className="col-span-2">
-            <div className="mb-2 ml-1 text-text-title">소속 조직</div>
-            {organizations.length === 0 ? (
-              <div className="ml-1 font-body2 text-text-muted">
-                소속된 조직이 없습니다.
-              </div>
-            ) : (
-              <>
-                <div className="group relative flex flex-col gap-4">
-                  {organizations.map((org, idx) => (
-                    <div key={idx}>
-                      <Input
-                        value={`${org.name}  (${org.position})`}
-                        disabled
-                        containerClassName="bg-surface-200"
-                        readOnly
-                      />
-                    </div>
-                  ))}
-
-                  <div className="pointer-events-none absolute top-full mt-1 whitespace-nowrap rounded bg-surface-500 px-2 py-1 font-caption text-surface-100 opacity-0 transition-opacity group-hover:opacity-100">
-                    조직 정보는 별도 조직페이지에서 수정할 수 있습니다.
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
           <div className="col-span-2 group relative w-full">
             <Input
               label="이메일"

src/components/setting/ProfileSectionSkeleton.tsx

@@ -26,10 +26,6 @@ export default function ProfileSectionSkeleton() {
             <Skeleton className="w-20 h-5 mb-2" />
             <Skeleton className="w-full h-12 rounded-xl" />
           </div>
-          <div className="col-span-2">
-            <Skeleton className="w-20 h-5 mb-2" />
-            <Skeleton className="w-full h-12 rounded-xl" />
-          </div>
           <div className="col-span-2">
             <Skeleton className="w-24 h-5 mb-2" />
             <Skeleton className="w-full h-12 rounded-xl" />

src/constants/sidebarNav.ts

@@ -2,7 +2,6 @@ import type { INavItem } from "@/types/navigation/navItem";
 
 import AdsIcon from "@/assets/icon/sidebar/ads.svg?react";
 import DashboardIcon from "@/assets/icon/sidebar/dashboard.svg?react";
-import NotificationIcon from "@/assets/icon/sidebar/notification.svg?react";
 import SettingsIcon from "@/assets/icon/sidebar/setting.svg?react";
 import WorkspaceIcon from "@/assets/icon/sidebar/workspace.svg?react";
 
@@ -80,11 +79,6 @@ export const mainNav: INavItem[] = [
 ];
 
 export const footerNav: INavItem[] = [
-  {
-    id: "notifications",
-    label: "알림",
-    icon: NotificationIcon,
-  },
   {
     id: "settings",
     label: "설정",