feat : 소속 추가

src/common/component/input/tooltip/index.tsx

@@ -2,6 +2,7 @@ import { Tooltip, Text, Center, rem, TextInput } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
 
 interface TooltipInputProps {
+  classNames?: any;
   placeholder: string;
   label?: string;
   tooltip: string;
@@ -12,6 +13,7 @@ interface TooltipInputProps {
 }
 
 const TooltipInput = ({
+  classNames,
   placeholder,
   label,
   tooltip,
@@ -22,6 +24,7 @@ const TooltipInput = ({
 }: TooltipInputProps) => {
   return (
     <TextInput
+      classNames={classNames}
       w={w}
       h={h}
       value={value}

src/pages/board/component/comment/index.tsx

@@ -40,7 +40,12 @@ export const CommentList = ({}: CommentListProps) => {
               <Group>
                 <Avatar src={comment.avartar} radius="xl" />
                 <div>
-                  <Text fz="sm">{comment.name}</Text>
+                  <div style={{ display: "flex" }}>
+                    <Text fz="sm">{comment.name}</Text>
+                    <Text pl={5} fz="sm" c="dimmed">
+                      [ {comment.company} ]
+                    </Text>
+                  </div>
                   <Text fz="xs" c="dimmed">
                     {new Date(comment.createdAt).toLocaleString()}
                   </Text>

src/pages/board/component/input/index.tsx

@@ -3,26 +3,34 @@ import {
   Button,
   Combobox,
   Container,
+  Dialog,
   Group,
   InputBase,
+  Select,
+  Text,
   TextInput,
 } from "@mantine/core";
 import { useEffect } from "react";
 import TooltipInput from "../../../../common/component/input/tooltip";
 import useAvartar from "../../hook/useAvartar";
 import useInput from "../../hook/useInput";
 import classes from "../../Board.module.css";
+import { useDisclosure } from "@mantine/hooks";
 
 const CommentInput = () => {
   const { avartarList, combobox } = useAvartar();
+  const [opened, { toggle, close }] = useDisclosure(false);
   const {
     addComment,
+    addResponse,
     setComment,
     comment,
     setName,
     name,
     setEmail,
     email,
+    setCompany,
+    company,
     setAvartar,
     avartar,
   } = useInput();
@@ -31,6 +39,12 @@ const CommentInput = () => {
     setAvartar(avartarList[0]);
   }, [avartarList]);
 
+  useEffect(() => {
+    if (addResponse) {
+      toggle();
+    }
+  }, [addResponse]);
+
   const options = avartarList.map((item) => (
     <Combobox.Option value={item} key={item} active={item === avartar}>
       <Group gap="xs">
@@ -92,12 +106,24 @@ const CommentInput = () => {
       </Group>
       <Group pb={10} gap={10}>
         <TooltipInput
+          classNames={classes}
+          label="이메일"
           w="50vw"
           placeholder="이메일을 입력하세요"
           tooltip="입력하신 이메일로 인증메일이 전송됩니다."
           value={email || ""}
           onChange={(e) => setEmail(e.currentTarget.value)}
         />
+        <Select
+          comboboxProps={{ withinPortal: true }}
+          data={["크립토", "캐리버스", "더즌", "기타"]}
+          placeholder="선택하세요."
+          label="소속"
+          onSelect={(e) => {
+            setCompany(e.currentTarget.value);
+          }}
+          classNames={classes}
+        />
         {/* <PasswordInput
           w="30vw"
           placeholder="댓글 비밀번호"
@@ -116,17 +142,29 @@ const CommentInput = () => {
         variant="white"
         color="dark"
         onClick={() => {
-          if (name && comment && avartar && email)
+          if (name && comment && avartar && email && company)
             addComment({
               name,
               comment,
               avartar,
               email,
+              company,
             });
         }}
       >
         메세지 보내기
       </Button>
+      <Dialog
+        opened={opened}
+        withCloseButton
+        onClose={close}
+        size="lg"
+        radius="md"
+      >
+        <Text size="sm" mb="xs" fw={500}>
+          인증메일이 발송되었어요. 확인해주세요
+        </Text>
+      </Dialog>
     </Container>
   );
 };

src/pages/board/hook/rest/comment.ts

@@ -22,11 +22,13 @@ interface AddCommentRequest {
   name: string;
   comment: string;
   avartar: string;
+  company: string;
 }
 
 const useComment = () => {
   const [comments, setComments] =
     useState<Response<GetCommentsResponse> | null>(null);
+  const [addResponse, setAddResponse] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -63,9 +65,10 @@ const useComment = () => {
   };
 
   const addComment = async (body: AddCommentRequest) => {
+    setAddResponse(false);
     setLoading(true);
     setError(null);
-
+    console.log(body);
     try {
       const response = await fetch(
         import.meta.env.VITE_INTRO_API_URL + "/comment",
@@ -83,14 +86,15 @@ const useComment = () => {
       }
 
       await response.json();
+      setAddResponse(true);
     } catch (error) {
       setError((error as Error).message);
     } finally {
       setLoading(false);
     }
   };
 
-  return { fetchComments, comments, addComment, loading, error };
+  return { fetchComments, comments, addComment, addResponse, loading, error };
 };
 
 export default useComment;

src/pages/board/hook/useInput.ts

@@ -3,12 +3,13 @@ import useComment from "./rest/comment";
 
 const useInput = () => {
   const [name, setName] = useState<string | null>();
+  const [company, setCompany] = useState<string | null>();
   const [pwd, setPwd] = useState<string | null>();
   const [email, setEmail] = useState<string | null>();
   const [avartar, setAvartar] = useState<string | null>();
   const [comment, setComment] = useState<string | null>();
 
-  const { addComment } = useComment();
+  const { addComment, addResponse } = useComment();
 
   return {
     setName,
@@ -21,7 +22,10 @@ const useInput = () => {
     comment,
     setEmail,
     email,
+    setCompany,
+    company,
     addComment,
+    addResponse,
   };
 };
 export default useInput;