Merge pull request #99 from Linkup-3mw/dev

Deploy

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",
     "react-responsive": "^10.0.0",
+    "react-spinners": "^0.13.8",
     "recoil": "^0.7.7",
     "swiper": "^11.1.3",
     "tailwind-scrollbar-hide": "^1.1.7",

src/api/club/searchClubs.ts

@@ -0,0 +1,77 @@
+import axios, { AxiosResponse } from 'axios';
+
+interface Club {
+  id: number;
+  member_id: number;
+  member_name: string;
+  profile_image: string | null;
+  title: string;
+  introduction: string;
+  club_thumbnail: string | null;
+  club_type: string;
+  recruit_count: number;
+  club_members: any[] | null;
+  club_meetings: any[] | null;
+}
+
+interface SearchClubsResponse {
+  status_code: number;
+  message: string;
+  status: string;
+  data: {
+    content: Club[];
+    pageable: {
+      page_number: number;
+      page_size: number;
+      sort: {
+        sorted: boolean;
+        unsorted: boolean;
+        empty: boolean;
+      };
+      offset: number;
+      unpaged: boolean;
+      paged: boolean;
+    };
+    total_elements: number;
+    last: boolean;
+    total_pages: number;
+    first: boolean;
+    number_of_elements: number;
+    sort: {
+      sorted: boolean;
+      unsorted: boolean;
+      empty: boolean;
+    };
+    number: number;
+    size: number;
+    empty: boolean;
+  };
+  success: boolean;
+}
+
+const BASE_URL = 'https://api.linkup3mw.com/api/v1';
+
+interface SearchClubsQuery {
+  location?: string;
+  category?: string[];
+  'no-coworker'?: boolean;
+  size?: number;
+  page?: number;
+}
+
+export async function searchClubs(
+  query: SearchClubsQuery,
+): Promise<SearchClubsResponse> {
+  try {
+    const response: AxiosResponse<SearchClubsResponse> = await axios.get(
+      `${BASE_URL}/club/search`,
+      {
+        params: query,
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Error searching clubs:', error);
+    throw error;
+  }
+}

src/app/(auth)/components/common/ButtonInInput.tsx

@@ -1,17 +1,30 @@
+import { PulseLoader } from 'react-spinners';
+
 interface Props {
   text: string;
   disabled?: boolean;
   onClick: () => void;
+  isLoading?: boolean;
 }
-export default function ButtonInInput({ text, disabled, onClick }: Props) {
+export default function ButtonInInput({
+  text,
+  disabled,
+  onClick,
+  isLoading,
+}: Props) {
   return (
     <button
       type="button"
       disabled={disabled}
-      className="absolute right-[1.5rem] top-1/2 -translate-y-1/2 px-[0.72rem] min-w-[4.5rem] h-[2.125rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.25rem] text-white disabled:text-main-black text-[0.875rem] font-bold max-md:right-[1rem] max-md:px-[0.5rem] max-md:min-w-[4.0625rem] max-md:h-[2.125rem] max-md:text-[0.875rem]"
+      className="overflow-hidden absolute right-[1.5rem] top-1/2 -translate-y-1/2 px-[0.72rem] min-w-[4.5rem] h-[2.125rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.25rem] text-white disabled:text-main-black text-[0.875rem] font-bold max-md:right-[1rem] max-md:px-[0.5rem] max-md:min-w-[4.0625rem] max-md:h-[2.125rem] max-md:text-[0.875rem]"
       onClick={onClick}
     >
       {text}
+      {isLoading && (
+        <div className="flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[rgba(104,148,242,0.8)]">
+          <PulseLoader size={6} color="white" />
+        </div>
+      )}
     </button>
   );
 }

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

@@ -3,6 +3,7 @@ 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';
@@ -58,6 +59,7 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
 
       if (res?.status === 200) {
         router.push(callbackUrl);
+        window.location.reload();
       }
       if (res?.status === 401) {
         setErrMsg((prev): ILoginErrMsg => {
@@ -107,22 +109,23 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
             />
           </InputBox>
           <div>
-            <Link
+            {/* <Link
               href="/"
               className="inline-block -mt-[1.25rem] mb-[3.75rem] underline text-[0.875rem] font-bold leading-none text-[#8d8d9b]
               max-md:mb-[2.5rem] max-md:-mt-[0.25rem] max-md:text-[0.75rem]
               "
             >
               비밀번호를 잊으셨나요?
-            </Link>
+            </Link> */}
           </div>
           <LoginCheckbox register={register}>로그인 상태 유지</LoginCheckbox>
         </div>
         <div className="mt-[1.5rem] max-md:mt-[0.6rem]">
           <BlueSquareBtn
             name="로그인"
-            type="submit"
+            type="button"
             disabled={!isDirty || !isValid}
+            onClick={debounce(handleSubmit(onSubmit), 1000)}
           />
         </div>
       </form>

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

@@ -27,11 +27,14 @@ export default function CompanyInput({
 }: Props) {
   const [isVerify, setIsVerify] = useState(false);
   const [errMsg, setErrMsg] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const verifyCompanyFn = debounce(async () => {
     const value = getValues('auth_code');
     if (value.length == 0) return;
 
+    setIsLoading(true);
+
     try {
       const data = await verifyCompany(value);
       if (data.status_code == 200) {
@@ -48,6 +51,8 @@ export default function CompanyInput({
       setIsVerify(false);
       setErrMsg('기업 전용 코드가 정확한지 확인해 주세요.');
       console.log(e);
+    } finally {
+      setIsLoading(false);
     }
   }, 500);
 
@@ -72,6 +77,7 @@ export default function CompanyInput({
           text={isVerify ? '인증완료' : '인증하기'}
           onClick={verifyCompanyFn}
           disabled={isVerify}
+          isLoading={isLoading}
         />
       </span>
       <input type="hidden" {...register('company_id')} />

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

@@ -130,6 +130,7 @@ export default function EmailInput({
           text={!isVerify ? '인증하기' : '인증완료'}
           onClick={validateEmailFn}
           disabled={error?.email !== undefined || isVerify}
+          isLoading={isLoading}
         />
       </span>
       {showVerify && (

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

@@ -4,6 +4,7 @@ import {
   UseFormClearErrors,
   UseFormRegister,
   UseFormSetError,
+  UseFormTrigger,
 } from 'react-hook-form';
 import Input from '@common/components/form/Input';
 import InputBox from '@common/components/form/InputBox';
@@ -15,13 +16,15 @@ interface Props {
   register: UseFormRegister<FieldValues>;
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
+  trigger: UseFormTrigger<FieldValues>;
 }
 
 export default function NicknameInput({
   error,
   register,
   setError,
   clearErrors,
+  trigger,
 }: Props) {
   const [message, setMessage] = useState('');
 
@@ -32,11 +35,16 @@ export default function NicknameInput({
       return;
     }
 
+    if (username.length > 6) {
+      setMessage('');
+      return;
+    }
+
     try {
       const res = await validateNickname(username);
       if (res.status_code === 200) {
         setMessage('사용할 수 있는 닉네임입니다.');
-        clearErrors('username');
+        // clearErrors('username');
       }
     } catch (e: any) {
       if (e.response.data.status_code === 400) {
@@ -52,7 +60,10 @@ export default function NicknameInput({
 
   useEffect(() => {
     register('username', {
-      onBlur: (e) => verifyNickname(e.target.value),
+      onBlur: (e) => {
+        trigger('username');
+        verifyNickname(e.target.value);
+      },
     });
   }, [verifyNickname]);