feat: baan select component and BaanContext

src/app/layout.tsx

@@ -4,6 +4,7 @@ import localFont from 'next/font/local';
 import './globals.css';
 import Footer from '@/components/(main)/Footer';
 import AuthProvider from '@/context/AuthContext';
+import BaanProvider from '@/context/BaanContext';
 import { Toaster } from 'react-hot-toast';
 
 export const metadata: Metadata = {
@@ -21,7 +22,9 @@ export default function RootLayout({
         className={`${athiti.variable} ${season.variable} ${sarun.variable} bg-1 font-athiti`}
       >
         <Toaster />
-        <AuthProvider>{children}</AuthProvider>
+        <AuthProvider>
+          <BaanProvider>{children}</BaanProvider>
+        </AuthProvider>
         <Footer />
       </body>
     </html>

src/components/rpkm/Baan/BaanEmpty.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const BaanEmpty = () => {
+  return (
+    <div className="text-white text-3xl font-semibold">
+      คุณยังไม่ได้เลือกบ้าน
+    </div>
+  );
+};
+
+export default BaanEmpty;

src/components/rpkm/Baan/BaanSelect.tsx

@@ -0,0 +1,81 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import BaanEmpty from '@/components/rpkm/Baan/BaanEmpty';
+import Spinner from '@/components/firstdate/Spinner';
+import { useBaan } from '@/context/BaanContext';
+import { useAuth } from '@/context/AuthContext';
+import { getGroupByUserId } from '@/utils/group';
+import BaanCardsSection from './Section/BaanCardsSection';
+import BaanButtonsSection from './Section/BaanButtonsSection';
+import { ConfirmGroupSelection } from '@/utils/group';
+
+interface BaanSelectProps {
+  mode: 'select' | 'edit';
+}
+
+const BaanSelect: React.FC<BaanSelectProps> = ({ mode }) => {
+  const { selectedBaan, isLoading } = useBaan();
+  const { user, resetContext } = useAuth();
+  const [isLeader, setIsLeader] = useState<boolean>(false);
+  const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkGroupStatus = async () => {
+      if (user) {
+        const myGroup = await getGroupByUserId(user.id);
+        if (myGroup instanceof Error) {
+          resetContext();
+        } else if (myGroup) {
+          setIsLeader(myGroup.leaderId === user.id);
+          setIsConfirmed(myGroup.isConfirmed);
+        }
+      }
+    };
+
+    checkGroupStatus();
+  }, [user, resetContext]);
+
+  const onConfirm = async () => {
+    if (user) {
+      const confirmedGroup = await ConfirmGroupSelection(user.id);
+      if (confirmedGroup instanceof Error) {
+        resetContext();
+      } else {
+        setIsConfirmed(true);
+      }
+    }
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  const allSelections = Array.from({ length: 5 }, (_, i) => i + 1);
+
+  return (
+    <div className="flex flex-col items-center bg-zinc-800 w-80 h-auto p-5 space-y-10">
+      <h1 className="text-xl text-amber-100 font-bold">บ้านที่เลือกไว้</h1>
+      <div className="flex items-center justify-center flex-col space-y-8">
+        {!selectedBaan || selectedBaan.length === 0 ? (
+          <BaanEmpty />
+        ) : (
+          <BaanCardsSection
+            allSelections={allSelections}
+            selectedBaan={selectedBaan}
+            isConfirmed={isConfirmed}
+            mode={mode}
+          />
+        )}
+        <BaanButtonsSection
+          mode={mode}
+          isLeader={isLeader}
+          isConfirmed={isConfirmed}
+          selectedBaan={selectedBaan}
+          onConfirm={onConfirm}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BaanSelect;

src/components/rpkm/Baan/Button/BaanButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ButtonProps {
+  content: string;
+  onClick: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({ content, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={
+        'flex items-center justify-center w-48 h-10 inv-rad inv-rad-2 border-8 border-rpkm-cream'
+      }
+    >
+      <div
+        className={
+          'flex items-center justify-center bg-rpkm-red text-rpkm-cream text-lg w-44 h-8 inv-rad inv-rad-1'
+        }
+      >
+        {content}
+      </div>
+    </button>
+  );
+};
+
+export default Button;

src/components/rpkm/Baan/Button/BaanEditButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface BaanEditButtonProps {
+  onClick: () => void;
+}
+
+const BaanEditButton: React.FC<BaanEditButtonProps> = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={
+        'flex items-center justify-center w-28 h-10 inv-rad inv-rad-2 border-8 border-rpkm-cream'
+      }
+    >
+      <div
+        className={
+          'flex items-center justify-center space-x-1 bg-rpkm-red text-rpkm-cream text-lg w-44 h-8 inv-rad inv-rad-1'
+        }
+      >
+        <Image
+          src="/select/icon/edit.svg"
+          alt="แก้ไข"
+          width={20}
+          height={20}
+        />
+        <span>แก้ไข</span>
+      </div>
+    </button>
+  );
+};
+
+export default BaanEditButton;

src/components/rpkm/Baan/Card/BaanCard.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+import trashIcon from '@public/select/icon/trash.svg';
+
+interface BaanCardProps {
+  number: number;
+  imageSrc?: string;
+  title?: string;
+  isEmpty?: boolean;
+  mode: 'select' | 'edit';
+  onDelete?: () => void;
+  isConfirmed?: boolean;
+}
+
+const BaanCard: React.FC<BaanCardProps> = ({
+  number,
+  imageSrc,
+  title,
+  isEmpty = false,
+  mode,
+  onDelete,
+  isConfirmed = false,
+}) => {
+  return (
+    <div className="flex items-center justify-center flex-col space-y-2">
+      <div
+        className={cn(
+          'relative flex flex-col justify-center items-center px-1 bg-white w-20 h-28',
+          isEmpty && 'border-2 border-dashed border-rpkm-green bg-opacity-0'
+        )}
+      >
+        <div className="absolute -top-3 flex items-center justify-center w-8 h-8">
+          <Image
+            src={`/select/star/${number}.svg`}
+            alt={'Empty Baan'}
+            width={32}
+            height={32}
+          />
+        </div>
+        {!isEmpty && imageSrc && title && (
+          <div className="w-full h-full flex flex-col items-center justify-center space-y-1">
+            <Image
+              src={imageSrc}
+              alt={title}
+              width={80}
+              height={80}
+              className="max-h-20"
+            />
+            <span className="text-sm font-normal">{title}</span>
+          </div>
+        )}
+        {isEmpty && mode === 'edit' && (
+          <div className="w-5 h-5 rounded-full flex items-center justify-center bg-rpkm-green text-white">
+            +
+          </div>
+        )}
+      </div>
+      {mode === 'edit' && !isConfirmed && onDelete && (
+        <Image
+          src={trashIcon}
+          alt="ลบ"
+          width={15}
+          height={15}
+          onClick={onDelete}
+          className="cursor-pointer"
+        />
+      )}
+    </div>
+  );
+};
+
+export default BaanCard;