Merge pull request #297 from prgrms-web-devcourse-final-project/refactor/296-signUp

[refactor] 회원가입 리펙토링 & 필요없는 콘솔 제거

Author: kangsuyeong

src/apis/auth.ts

@@ -39,7 +39,7 @@ export const reissueToken = async () => {
 
   if (code === 200) {
     useAuthStore.getState().setAccessToken(accessToken); // 토큰 전역 상태 저장
-    console.log('토큰 재발급 성공:', accessToken);
+    // // console.log('토큰 재발급 성공:', accessToken);
   } else {
     throw new Error('토큰 재발급 실패');
   }

src/apis/axios.ts

@@ -26,12 +26,12 @@ axiosChatInstance.interceptors.request.use(
     // 토큰이 있으면 요청 헤더에 추가
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
-      // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
+      // // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
     }
     return config;
   },
   (error) => {
-    console.log('요청 인터셉터 에러', error);
+    // console.log('요청 인터셉터 에러', error);
     Promise.reject(error);
   },
 );
@@ -44,12 +44,12 @@ axiosInstance.interceptors.request.use(
     // 토큰이 있으면 요청 헤더에 추가
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
-      // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
+      // // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
     }
     return config;
   },
   (error) => {
-    console.log('요청 인터셉터 에러', error);
+    // console.log('요청 인터셉터 에러', error);
     Promise.reject(error);
   },
 );

src/components/ButtonInput.tsx

@@ -55,17 +55,17 @@
 //   //채팅 요청 취소(요청 보낸 사람)
 //   const cancel = async () => {
 //     if (!currentRecord?.recordId) {
-//       console.log('record가 존재하지 않습니다');
+//       // console.log('record가 존재하지 않습니다');
 //       return;
 //     }
 //     try {
-//       console.log(currentRecord);
+//       // console.log(currentRecord);
 //       await cancelChatRequest(currentRecord.recordId);
-//       console.log('채팅 취소');
+//       // console.log('채팅 취소');
 
 //       closeSheet('isChatLoadingSheetOpen');
 //     } catch (error) {
-//       console.log(error);
+//       // console.log(error);
 //     }
 //   };
 
@@ -77,15 +77,15 @@
 //     try {
 //       //1 = recordId
 //       const data = await createChatroom(1, '루루');
-//       console.log(data);
+//       // console.log(data);
 //       const chatRoomId = data.data.chatRoomId;
 
 //       //200
 //       //409 이면 이미 채팅방 있음 => 기존 채팅방으로
 //       navigate(`/chatroom/${chatRoomId}`);
 //       closeAllSheets();
 //     } catch (error) {
-//       console.log(error);
+//       // console.log(error);
 //     }
 //   };
 

src/components/ChatConnectLoadingSheet.tsx

@@ -17,16 +17,16 @@ function ChatRequestButton({ type }: { type: 'sending' | 'receiving' }) {
   //채팅 요청 취소(요청 보낸 사람)
   const cancel = async () => {
     if (!currentRecord?.recordId && !pastRecord?.recordId) {
-      console.log('record가 존재하지 않습니다');
+      // console.log('record가 존재하지 않습니다');
       return;
     }
     try {
-      console.log(currentRecord);
+      // console.log(currentRecord);
       const { code } = await cancelChatRequest(
         currentRecord?.recordId || Number(pastRecord?.recordId),
       );
       if (code === 200) {
-        console.log('취소 요청 성공');
+        // console.log('취소 요청 성공');
         closeSheet('isRequestSendingSheetOpen');
       } else {
         throw new Error('취소 요청 실패');
@@ -42,11 +42,10 @@ function ChatRequestButton({ type }: { type: 'sending' | 'receiving' }) {
   //sse로 받은 상대 정보로 '보내는 사람' 바꾸기
   const createChat = async () => {
     try {
-      const { code, data, message } = await createChatroom(
+      const { code, data } = await createChatroom(
         requesterInfo.emotionRecordId as number,
         requesterInfo.nickname,
       );
-      console.log(code, message, data);
 
       if (code === 200) {
         const chatRoomId = data.chatRoomId;
@@ -66,7 +65,7 @@ function ChatRequestButton({ type }: { type: 'sending' | 'receiving' }) {
         throw new Error('이미 취소된 요청입니다.');
       }
     } catch (error) {
-      console.log(error);
+      // console.log(error);
       openModal({
         title: '이미 취소된 요청입니다',
         onConfirm: () => {
@@ -87,7 +86,7 @@ function ChatRequestButton({ type }: { type: 'sending' | 'receiving' }) {
         requesterInfo.nickname,
       );
       if (code === 200) {
-        console.log('거절 성공');
+        // console.log('거절 성공');
         closeSheet('isRequestReceivingSheetOpen');
       } else {
         throw new Error('요청 취소 실패');

src/components/ChatConnectLoadingSheet/ChatRequestButton.tsx

@@ -29,12 +29,12 @@ export default function ChatHistoryCard({ item }: ChatHistoryCardProps) {
   //요청 보내면 sse로 recordId, 보낸 사람 정보 보내줘야 함
   const request = async () => {
     if (!item.recordId) {
-      console.log('recordId가 존재하지 않습니다.');
+      //// console.log('recordId가 존재하지 않습니다.');
       return;
     }
     try {
       const { code, message } = await requestChat(Number(item.recordId));
-      console.log(code, message);
+      // console.log(code, message);
 
       //200
       if (code === 200) {
@@ -51,7 +51,7 @@ export default function ChatHistoryCard({ item }: ChatHistoryCardProps) {
       }
       //자신의 게시글에 요청했을 경우
     } catch (error) {
-      console.log(error);
+      // console.log(error);
       openModal({
         title: '잠시 후 다시 시도해 주세요',
         onConfirm: () => {

src/components/ChatHistoryCard.tsx

@@ -1,75 +1,48 @@
-import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
 import Input from '@/components/Input';
 import { twMerge } from 'tailwind-merge';
 
-type ButtonHandler = {
-  buttonEnabled: boolean; // 버튼 비활성화 여부
-  buttonText: string; // 버튼 text
-  isPending: boolean; // pending 중인지 판단
-  onClick: () => void; // 클릭 함수
-};
-
 interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string;
   label: string;
   isValid?: boolean;
-  validationMessage?: string;
-  buttonHandler?: ButtonHandler;
+  message?: string;
+  actionButton?: React.ReactNode;
 }
 
 export default function InputField({
   id,
   label,
   isValid,
-  validationMessage,
-  buttonHandler,
+  message,
+  actionButton,
   ...props
 }: InputFieldProps) {
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full gap-0.5">
       {/* 라벨 */}
-      <label htmlFor={id} className="body-r text-gray-80 ml-[5px] mb-0.5">
+      <label htmlFor={id} className="body-r text-gray-80 pl-[5px]">
         {label}
       </label>
 
       {/* 입력 필드 + 버튼 */}
       <div className="flex gap-2">
         <Input id={id} {...props} />
-        {buttonHandler && (
-          <LoadingSpinnerButton
-            {...buttonHandler}
-            className="w-[65px] flex-shrink-0"
-            type="button"
-          />
-        )}
+        {actionButton && <div className="shrink-0">{actionButton}</div>}
       </div>
 
       {/* 유효성 검사 메시지 */}
-      <div className="flex items-center h-5">
-        {validationMessage && (
+      <div className="flex items-center h-[18px]">
+        {message && (
           <p
             className={twMerge(
-              'text-[9px]/[18px] ml-1',
+              'text-[9px]/[18px] pl-[5px]',
               isValid ? 'text-functional-success' : 'text-functional-danger',
             )}
           >
-            {validationMessage}
+            {message}
           </p>
         )}
       </div>
     </div>
   );
 }
-
-//사용 예시
-{
-  // <InputField
-  //   type="text"
-  //   id="nickname"
-  //   label="닉네임"
-  //   placeholder="닉네임을 입력해 주세요"
-  //   errorMessage="닉네임 중복"
-  //   variant="primary"
-  //   buttonText="중복확인"
-  // />
-}

src/components/InputField.tsx

@@ -11,7 +11,7 @@ function KaKaoRedirection() {
 
   const handleKaKaoLogin = async () => {
     try {
-      console.log('kakaoCode', kakaoCode);
+      // console.log('kakaoCode', kakaoCode);
       const { code, data } = await getKakaoLogin(kakaoCode as string);
       if (code === 200) {
         setAccessToken(data.accessToken);
@@ -26,7 +26,7 @@ function KaKaoRedirection() {
 
   useEffect(() => {
     if (kakaoCode) {
-      console.log('🔴 kakaoCode', kakaoCode);
+      // console.log('🔴 kakaoCode', kakaoCode);
       handleKaKaoLogin();
     }
   }, []);

src/components/KaKaoRedirection.tsx

@@ -89,11 +89,11 @@ export default function Modal() {
     confirmText:'확인', // default: '확인'
     cancelText:'취소', // default: '취소'
     onConfirm() {
-      console.log('확인');
+      // console.log('확인');
       closeModal();
     },
     onCancel() {
-      console.log('취소');
+      // console.log('취소');
       closeModal();
     },
   })

src/components/Modal.tsx

@@ -48,11 +48,11 @@ export default MoreOptionsSelect;
 
 // 함수 선언하기
 //   const handleEditProfile = () => {
-//     console.log('프로필 수정 클릭!');
+//     // console.log('프로필 수정 클릭!');
 //   };
 
 //   const handleLogout = () => {
-//     console.log('로그아웃 클릭!');
+//     // console.log('로그아웃 클릭!');
 //   };
 
 {