Feat: 모달 참여 코드 구현

WePlanPlans · Jan 19, 2024 · a85edc7 · a85edc7
1 parent 0008df4
commit a85edc7
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 8 deletions.
diff --git a/src/components/Share/CodeInput.tsx b/src/components/Share/CodeInput.tsx
@@ -0,0 +1,39 @@
+interface Props {
+  inputCode: string;
+  setInputCode: React.Dispatch<React.SetStateAction<string>>;
+  showError: boolean;
+}
+
+const CodeInput = ({ inputCode, setInputCode, showError }: Props) => {
+  const onCodeChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const changeValue = e.target.value;
+    if (changeValue.length <= 5) {
+      setInputCode(e.target.value);
+    }
+  };
+  return (
+    <div className="relative flex w-full flex-col items-start px-2 ">
+      <div
+        className={`mb-10 mt-6 w-full border-b-[1.5px] border-solid ${
+          showError ? 'border-red' : 'border-gray3 focus-within:border-main2'
+        }`}>
+        <input
+          type="number"
+          autoFocus
+          maxLength={5}
+          placeholder="편집 초대 코드를 입력해주세요."
+          className="title3 mb-2 h-5 w-full bg-transparent text-gray4 outline-none placeholder:text-gray2"
+          onChange={onCodeChange}
+          value={inputCode}
+        />
+      </div>
+      {showError && (
+        <div className="body5 absolute top-[62px] text-red">
+          편집 참여 코드를 다시 한번 확인해주세요.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodeInput;
diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx
@@ -0,0 +1,59 @@
+import { postTripsjoin } from '@api/trips';
+import CodeInput from '@components/Share/CodeInput';
+import Alert from '@components/common/alert/Alert';
+import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const EditCodeModal = () => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [inputCode, setInputCode] = useState<string>('');
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const { id: tripId } = useParams();
+  const { tripAuthority } = useGetTripsAuthority();
+
+  const handleConfirm = async () => {
+    if (tripId) {
+      try {
+        const { data } = await postTripsjoin(Number(tripId), inputCode);
+        if (data.status === 200) {
+          setIsModalOpen(false);
+        }
+      } catch (err) {
+        setShowError(true);
+        setInputCode('');
+        console.error('참여 코드 요청 중 에러 발생', err);
+      }
+    }
+  };
+
+  return (
+    <>
+      {tripAuthority === 'WRITE' ? (
+        <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
+          편집
+        </button>
+      ) : (
+        <Alert
+          title="편집 참여 코드 입력"
+          content={
+            <CodeInput
+              inputCode={inputCode}
+              setInputCode={setInputCode}
+              showError={showError}
+            />
+          }
+          isOpen={isModalOpen}
+          setIsOpen={setIsModalOpen}
+          onConfirm={handleConfirm}>
+          <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
+            편집
+          </button>
+        </Alert>
+      )}
+    </>
+  );
+};
+
+export default EditCodeModal;
diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx
@@ -1,4 +1,5 @@
 import { UserIcon } from '@components/common/icons/Icons';
+import EditCodeModal from './EditCodeModal';
 
 export const TripSchedule = () => {
   return (
@@ -12,9 +13,7 @@ export const TripSchedule = () => {
             <span className="body4 pt-[1px] text-gray4">5</span>
           </div>
         </div>
-        <button className="body3 rounded-lg border-2 border-solid border-gray2 p-2 text-gray4">
-          편집
-        </button>
+        <EditCodeModal />
       </div>
       <span className="body1 text-gray4">23.12.23 - 23.12.25</span>
     </>

diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx
@@ -3,13 +3,15 @@ import * as Dialog from '@radix-ui/react-dialog';
 
 interface AlertProps {
   title: string;
-  message: ReactNode;
+  message?: ReactNode;
   onConfirm: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
   onCancel?: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
   children: ReactNode;
   content?: ReactNode;
   closeOnConfirm?: boolean;
   isCheck?: number | null;
+  isOpen?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Alert: FC<AlertProps> = ({
@@ -21,8 +23,10 @@ const Alert: FC<AlertProps> = ({
   content,
   closeOnConfirm = false,
   isCheck = true,
+  isOpen,
+  setIsOpen,
 }) => (
-  <Dialog.Root>
+  <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
     <Dialog.Trigger asChild disabled={!isCheck}>
       {children}
     </Dialog.Trigger>
@@ -31,10 +35,10 @@ const Alert: FC<AlertProps> = ({
       <Dialog.Content
         className={`${
           content && 'pb-[16px] pt-10'
-        } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[346px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-[16px] bg-white shadow-lg focus:outline-none`}>
+        } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[309px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-2xl bg-white px-[14px] shadow-lg focus:outline-none`}>
         <Dialog.Description
           className={`${
-            content ? 'w-[80%] text-left' : 'text-center text-[15px]'
+            content ? 'w-full pl-2 text-left' : 'text-center text-[15px]'
           } mt-[10px] font-bold leading-normal`}>
           <p
             className={` ${
@@ -49,7 +53,7 @@ const Alert: FC<AlertProps> = ({
           <Dialog.Close asChild>
             <button
               onClick={onCancel}
-              className="btn-base h-[48px] w-[134px] border border-solid border-gray3 bg-white p-[8px] text-[15px] font-bold text-[#888]">
+              className="btn-base h-[48px] w-[134px] border border-solid border-gray3 bg-white p-[8px] text-[15px] font-bold text-[#888] focus:outline-none">
               취소
             </button>
           </Dialog.Close>