Merge pull request #327 from SlamTalk/develop

[5월] Develop 반영

src/app/(auth)/login/layout.tsx

@@ -18,19 +18,30 @@ const Loginlayout = ({ children }: { children: React.ReactNode }) => {
   };
 
   return (
-    <div className="md:h-100 sm:h-100 relative h-full w-full">
+    <div className="relative h-full w-full overflow-y-auto overflow-x-hidden">
       <div
         aria-label="뒤로가기"
         role="link"
         tabIndex={0}
-        className="absolute left-4 top-0"
+        className="absolute left-4 top-4"
         onClick={handleGoBack}
         onKeyDown={handleKeyDown}
       >
         <IoChevronBackSharp size={24} />
       </div>
       <h2 className="mt-4 text-center text-lg font-semibold">로그인</h2>
       <main>{children}</main>
+
+      <footer className="sticky bottom-12 mt-72 flex w-full max-w-[600px] flex-col justify-center gap-2 bg-gray-100 px-4 pb-3 pt-8 text-xs text-gray-500 dark:bg-transparent dark:text-white">
+        <p className="text-sm">슬램톡 정보</p>
+        <a href="mailto:slamtalk.official@gmail.com">
+          <p>문의: slamtalk.official@gmail.com</p>
+        </a>
+        <hr className="my-3 h-px w-full bg-gray-300" />
+        <p className="text-gray-400 dark:text-white">
+          ©Slam Talk. All rights reserved.
+        </p>
+      </footer>
     </div>
   );
 };

src/app/(auth)/login/page.tsx

@@ -91,4 +91,5 @@ const Login = () => {
     </>
   );
 };
+
 export default Login;

src/app/(auth)/my-page/page.tsx

@@ -17,6 +17,7 @@ import {
   ModalBody,
   ModalFooter,
   useDisclosure,
+  Tooltip,
 } from '@nextui-org/react';
 import Link from 'next/link';
 import LocalStorage from '@/utils/localstorage';
@@ -160,6 +161,18 @@ const MyPage = () => {
               카카오톡 채널 문의하기
             </Button>
           </div> */}
+          <div>
+            <p className="mb-3 font-semibold">문의</p>
+            <Tooltip
+              showArrow
+              content="slamtalk.official@gmail.com"
+              placement="right-end"
+            >
+              <a href="mailto:slamtalk.official@gmail.com">
+                <span>📬 이메일 문의</span>
+              </a>
+            </Tooltip>
+          </div>
           {user.role === 'ADMIN' && (
             <div className="absolute bottom-16 right-4">
               <Button

src/app/(auth)/my-page/settings/page.tsx

@@ -160,10 +160,7 @@ const MyPageSettings = () => {
               <>
                 <ModalHeader className="flex flex-col gap-1">탈퇴</ModalHeader>
                 <ModalBody>
-                  <p>
-                    정말 탈퇴하시겠습니까? 탈퇴 후 7일 동안 같은 이메일로
-                    재가입이 불가하고 복구가 어렵습니다.
-                  </p>
+                  <p>정말 탈퇴하시겠습니까? 탈퇴하시면 복구가 어렵습니다.</p>
                 </ModalBody>
                 <ModalFooter>
                   <Button

src/app/(auth)/social-login/page.tsx

@@ -40,11 +40,6 @@ const SocialLogin = () => {
         }
       }
     });
-  } else if (login === 'false') {
-    alert(
-      '탈퇴한 유저입니다. 같은 계정으로 로그인을 원하시면 탈퇴 7일 이후에 재가입 해주세요.'
-    );
-    router.push('/login');
   }
   return null;
 };

src/app/admin/components/AdminCourtDetails.tsx

@@ -27,8 +27,13 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
   onClose,
   refetch,
 }) => {
-  const handleReject = () => {
-    // 거절 로직 추가 필요
+  const handleReject = async () => {
+    try {
+      await axiosInstance.put(`/api/admin/reject/${selectedPlace.courtId}`);
+    } catch (error) {
+      console.error('Error while updating court data:', error);
+    }
+
     onClose();
   };
 
@@ -155,10 +160,10 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                   길찾기
                 </Button>
               </div>
-              <div className="flex justify-center " />
+              <div className="flex justify-center" />
               <hr className="w-90 my-4 h-px bg-gray-300" />
               <div className="my-4 flex flex-col gap-4">
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FaLocationDot
                     size={16}
                     className="dark:text-gray-20 text-gray-400"
@@ -168,7 +173,7 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                     <span className="text-blue-500">복사</span>
                   </button>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FaClock
                     size={14}
                     className="text-gray-400 dark:text-gray-200"
@@ -180,7 +185,7 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                     </span>
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FaPhoneAlt
                     size={15}
                     className="pointer-events-auto text-gray-400 dark:text-gray-200"
@@ -189,14 +194,14 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                     {selectedPlace.phoneNum ? selectedPlace.phoneNum : '-'}
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FeeIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="text-info text-blue-500">
                     이용료: {selectedPlace.fee}
                   </span>
                 </div>
 
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <WebsiteIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="text-blue-500">
                     {selectedPlace.website ? (
@@ -208,43 +213,43 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                     )}
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <CourtIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="font-medium">
                     코트 종류:{' '}
                     {selectedPlace.courtType ? selectedPlace.courtType : '-'}
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <CourtIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="font-medium">
                     코트 사이즈:{' '}
                     {selectedPlace.courtSize ? selectedPlace.courtSize : '-'}
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <HoopIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="font-medium">
                     골대 수:{' '}
                     {selectedPlace.hoopCount ? selectedPlace.hoopCount : '-'}
                   </span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FaLightbulb
                     size={17}
                     className="text-gray-400 dark:text-gray-200"
                   />
                   <span>야간 조명: {selectedPlace.nightLighting}</span>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <FaParking
                     size={17}
                     className="text-gray-400 dark:text-gray-200"
                   />
                   <span>주차: {selectedPlace.parkingAvailable}</span>
                 </div>
 
-                <div className="flex gap-2 align-middle text-sm">
+                <div className="flex items-center gap-2 align-middle text-sm">
                   <FaTag
                     size={17}
                     className="text-gray-400 dark:text-gray-200"
@@ -265,7 +270,7 @@ const AdminCourtDetails: React.FC<CourtDetailsProps> = ({
                       : '-'}
                   </ul>
                 </div>
-                <div className="flex gap-2 align-middle">
+                <div className="flex items-center gap-2 align-middle">
                   <InfoIcon className="text-gray-400 dark:text-gray-200" />
                   <span className="text-sm">
                     {selectedPlace.additionalInfo

src/app/chatting/chatroom/[roomId]/page.tsx

@@ -176,8 +176,8 @@ const Chatting = () => {
 
   useEffect(() => {
     inputRef.current?.focus();
+    refetch();
     if (accessToken) {
-      refetch();
       connect();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/app/chatting/list/page.tsx

@@ -2,6 +2,7 @@
 
 /* eslint-disable no-nested-ternary */
 
+import React, { useEffect } from 'react';
 import {
   Avatar,
   Modal,
@@ -10,25 +11,23 @@ import {
   ModalFooter,
   Button,
   useDisclosure,
+  ModalBody,
 } from '@nextui-org/react';
-
 import Link from 'next/link';
 import { useQuery } from '@tanstack/react-query';
-
-import LocalStorage from '@/utils/localstorage';
-
-import React, { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import LocalStorage from '@/utils/localstorage';
+import FullLoading from '@/app/components/loading/FullLoading';
 import { getUserData } from '@/services/user/getUserData';
-import { IChatRoomListItem } from '../../../types/chat/chatRoomListItem';
-
 import { getChatList } from '../../../services/chatting/getChatList';
+import { IChatRoomListItem } from '../../../types/chat/chatRoomListItem';
 
 const ChatList = () => {
   const router = useRouter();
   const isLoggedIn = LocalStorage.getItem('isLoggedIn');
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const { data: user } = useQuery({
+
+  const { data: user, isLoading: isUserLoading } = useQuery({
     queryKey: ['loginData'],
     queryFn: getUserData,
   });
@@ -37,22 +36,61 @@ const ChatList = () => {
     if (isLoggedIn === 'false' || !user) {
       onOpen();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isLoggedIn, user, onOpen]);
 
-  const { data: myChatList } = useQuery<IChatRoomListItem[]>({
+  const { data: myChatList, isLoading: isChatListLoading } = useQuery<
+    IChatRoomListItem[]
+  >({
     queryKey: ['myChatlist'],
     queryFn: getChatList,
   });
 
-  if (myChatList?.length === 0) {
-    return <div>참여중인 채팅방이 없습니다</div>;
+  if (isUserLoading || isChatListLoading) {
+    return <FullLoading />;
   }
 
-  return myChatList ? (
+  if (!myChatList || myChatList.length === 0) {
+    return (
+      <div className="flex h-[80vh] items-center justify-center">
+        <p>참여중인 채팅이 없습니다.</p>
+      </div>
+    );
+  }
+
+  if (isLoggedIn === 'false') {
+    return (
+      <>
+        <div className="flex h-[80vh] items-center justify-center">
+          <p>참여중인 채팅이 없습니다.</p>
+        </div>
+        <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
+          <ModalContent>
+            {() => (
+              <>
+                <ModalHeader>채팅</ModalHeader>
+                <ModalBody>로그인이 필요한 서비스입니다.</ModalBody>
+                <ModalFooter>
+                  <Button
+                    color="primary"
+                    onPress={() => {
+                      router.push('/login');
+                    }}
+                  >
+                    로그인하러 가기
+                  </Button>
+                </ModalFooter>
+              </>
+            )}
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  }
+
+  return (
     <div className="h-[calc(100vh-150px)] overflow-y-scroll">
       <title>슬램톡 | 채팅</title>
-      {myChatList?.map((i: IChatRoomListItem) => (
+      {myChatList.map((i: IChatRoomListItem) => (
         <div
           key={i.roomId}
           className="m-1.5 rounded-xl border border-gray-300 hover:bg-primary hover:text-white"
@@ -73,7 +111,6 @@ const ChatList = () => {
                           : undefined
                 }
               />
-
               <Link href={`/chatting/chatroom/${i.roomId}`}>
                 <div className="flex">
                   {i.roomType === 'DIRECT' && (
@@ -104,15 +141,8 @@ const ChatList = () => {
                       </p>
                     </div>
                   )}
-
-                  <div className="font-bold ">
-                    {i.roomType === 'DIRECT' && i.name}
-                    {i.roomType === 'BASKETBALL' && i.name}
-                    {i.roomType === 'TOGETHER' && i.name}
-                    {i.roomType === 'MATCHING' && i.name}
-                  </div>
+                  <div className="font-bold ">{i.name}</div>
                 </div>
-
                 <div className="text-gray-400">
                   {i.lastMessage.replace(/"/g, '')}
                 </div>
@@ -125,31 +155,7 @@ const ChatList = () => {
         </div>
       ))}
     </div>
-  ) : (
-    <div>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
-        <ModalContent>
-          {() => (
-            <>
-              <ModalHeader>로그인이 필요한 서비스입니다.</ModalHeader>
-              <ModalFooter>
-                <Button
-                  color="primary"
-                  onPress={() => {
-                    router.push('/login');
-                  }}
-                >
-                  로그인하러 가기
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-      <div className="flex h-[80vh] items-center justify-center">
-        <p>참여중인 채팅이 없습니다.</p>
-      </div>
-    </div>
   );
 };
+
 export default ChatList;

src/app/community/article/[id]/page.tsx

@@ -131,7 +131,7 @@ const Page = () => {
         onClose={CommentModal.onClose}
       >
         <ModalContent>
-          <ModalHeader>Error</ModalHeader>
+          <ModalHeader>알림</ModalHeader>
           <ModalBody>댓글 수는 200자이하로 작성해주세요</ModalBody>
           <ModalFooter>
             <Button color="primary" onPress={CommentModal.onClose}>