Merge pull request #117 from Linkup-3mw/feature/membership

[Style] add swiper to main home membership page

package.json

@@ -30,7 +30,7 @@
     "react-responsive": "^10.0.0",
     "react-spinners": "^0.13.8",
     "recoil": "^0.7.7",
-    "swiper": "^11.1.3",
+    "swiper": "^11.1.4",
     "tailwind-scrollbar-hide": "^1.1.7",
     "zod": "^3.23.8"
   },

src/app/(auth)/components/signin/Login.tsx

@@ -1,9 +1,7 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Link from 'next/link';
 import { signIn } from 'next-auth/react';
-import debounce from 'lodash.debounce';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 
 import InputBox from '@common/components/form/InputBox';
@@ -59,7 +57,7 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
 
       if (res?.status === 200) {
         router.push(callbackUrl);
-        window.location.reload();
+        router.refresh();
       }
       if (res?.status === 401) {
         setErrMsg((prev): ILoginErrMsg => {
@@ -69,7 +67,9 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
     } catch (error) {
       console.error(error);
     } finally {
-      setIsLoading(false);
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 1000);
     }
   };
 
@@ -123,9 +123,10 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
         <div className="mt-[1.5rem] max-md:mt-[0.6rem]">
           <BlueSquareBtn
             name="로그인"
-            type="button"
+            type="submit"
+            // type="button"
             disabled={!isDirty || !isValid}
-            onClick={debounce(handleSubmit(onSubmit), 1000)}
+            // onClick={debounce(handleSubmit(onSubmit), 1000)}
           />
         </div>
       </form>

src/app/(auth)/components/signup/SignupForm.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
 import debounce from 'lodash.debounce';
@@ -16,6 +17,7 @@ import CompanyInput from './CompanyInput';
 import BirthdayInput from './BirthdayInput';
 import PhoneNumberInput from './PhoneNumberInput';
 import NicknameInput from './NicknameInput';
+import Alert from '@/app/common/components/modal/Alert';
 
 interface Props {
   type: string;
@@ -28,6 +30,14 @@ export interface FormValues {
 export default function SignupForm({ type }: Props) {
   const { data: industryList } = useIndustryQuery();
   const { data: occupationList } = useOccupationQuery();
+  const [showAlert, setShowAlert] = useState(false);
+  const [alert, setAlert] = useState<{
+    message: string;
+    onClick: (() => void) | null;
+  }>({
+    message: '',
+    onClick: null,
+  });
 
   const router = useRouter();
   const {
@@ -77,12 +87,29 @@ export default function SignupForm({ type }: Props) {
     try {
       const res = await signUp(params);
       if (res.status_code === 200) {
-        alert('가입이 완료되었습니다.');
-        router.push('/signin');
+        setAlert((prev) => ({
+          ...prev,
+          message: '가입이 완료되었습니다.',
+          onClick: () => router.push('/signin'),
+        }));
+        setShowAlert(true);
+      } else {
+        setAlert((prev) => ({
+          ...prev,
+          message: `오류가 발생했습니다.\n 잠시 후 다시 시도해 주세요`,
+          onClick: null,
+        }));
+        setShowAlert(true);
       }
-    } catch (e) {
+    } catch (e: any) {
       console.error(e);
-      alert('오류가 발생했습니다. 잠시 후 다시 시도해 주세요.');
+      const data = e.response.data;
+      setAlert((prev) => ({
+        ...prev,
+        message: data.message,
+        onClick: null,
+      }));
+      setShowAlert(true);
     }
   };
 
@@ -210,6 +237,13 @@ export default function SignupForm({ type }: Props) {
           onClick={debounce(handleSubmit(onSubmit), 1000)}
         />
       </form>
+      {showAlert && (
+        <Alert
+          setIsShow={setShowAlert}
+          message={alert.message}
+          onClick={alert.onClick || undefined}
+        />
+      )}
     </div>
   );
 }