Merge pull request #266 from asksa1256/refactor/keyboards-etc

Refactor: 마이프로필 페이지

Author: LeeTaegyung

src/app/(global)/myprofile/page.tsx

@@ -1,7 +1,13 @@
-import Myprofile from '@/components/feature/myProfile/Myprofile';
+import MyprofileMain from '@/components/feature/myProfile/MyprofileMain';
+import MyprofileSidebar from '@/components/feature/myProfile/MyprofileSidebar';
 
 const Page = () => {
-  return <Myprofile />;
+  return (
+    <div className='flex flex-col gap-[30px] px-4 py-5 m-auto max-w-[1140px] md:gap-10 md:px-5 md:pt-4 md:pb-5 lg:flex-row lg:gap-15 lg:px-0 lg:py-[37px] lg:items-start'>
+      <MyprofileSidebar />
+      <MyprofileMain />
+    </div>
+  );
 };
 
 export default Page;

src/components/feature/Keyboards/KeyboardsList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AxiosError } from 'axios';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import KeyboardForm, { KeyboardFormValues } from '@/components/feature/Form/KeyboardForm';
 import Modal from '@/components/feature/Modal';
@@ -31,20 +31,30 @@ const MyKeyboardArea = () => {
   const [keyboardList, setKeyboardList] = useState<MyKeyboardItemType[] | null>(null);
   const [totalCount, setTotalCount] = useState<number>(0);
   const [cursor, setCursor] = useState<number | null>(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const groupRef = useRef<number>(0);
+
   const isListEmpty = keyboardList?.length === 0;
 
   const getKeyboardList = async () => {
     if (cursor === null) return;
+    if (isLoading) return;
 
+    console.log('loading');
     try {
+      setIsLoading(true);
       const data = await fetchKeyboardList(cursor);
       const { list, nextCursor, totalCount } = data;
 
       setKeyboardList((prev) => (prev === null ? list : [...prev, ...list]));
       setTotalCount(totalCount);
       setCursor(nextCursor);
+      groupRef.current++;
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -128,12 +138,18 @@ const MyKeyboardArea = () => {
       price: +formData.price,
       type: formData.type ?? KEYBOARD_TYPES_MAP[0].type,
     };
+
     // 키보드 등록 api
     try {
       const res = await apiClient.post(`/${TEAM}/wines`, payload);
       const data = res?.data;
 
-      setKeyboardList((prev) => (prev === null ? [data] : [...prev, data]));
+      setKeyboardList((prev) => {
+        if (prev === null) return [data];
+        if (prev.length >= DEFAULT_LIMIT * groupRef.current) return prev;
+        // 현재 렌더링 된 키보드리스트 개수가 LIMIT * 무한스크롤API요청횟수(LIMIT 10 * CURRENT 1) 초과시 키보드리스트에 추가하지 않음. -> 무한 스크롤을 완료하면 가장 마지막에 나오므로
+        return [...prev, data];
+      });
       setTotalCount((totalCount) => totalCount + 1);
       handleKeyboardModalClose();
       addToast({ message: '키보드 등록 성공', type: 'success', duration: 2000 });
@@ -149,6 +165,8 @@ const MyKeyboardArea = () => {
   // 데이터 로딩시
   if (keyboardList === null) return <MyListLoading />;
 
+  console.log(groupRef.current);
+
   return (
     <>
       <span className='absolute bottom-[calc(100%+16px)] right-0 text-xs text-primary leading-[26px] md:text-md md:leading-[32px] md:bottom-[calc(100%+22px)]'>

src/components/feature/myProfile/MyKeyboardArea.tsx

@@ -28,12 +28,16 @@ const MyReviewArea = () => {
   const [reviewList, setReviewList] = useState<MyReviewItemType[] | null>(null);
   const [cursor, setCursor] = useState<number | null>(0);
   const [totalCount, setTotalCount] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(false);
   const isListEmpty = reviewList?.length === 0;
 
   const getReviewList = async () => {
     if (cursor === null) return;
+    if (isLoading) return;
 
     try {
+      setIsLoading(true);
+
       const data = await fetchReviewList(cursor);
       const { list, nextCursor, totalCount } = data;
 
@@ -42,6 +46,8 @@ const MyReviewArea = () => {
       setCursor(nextCursor);
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsLoading(false);
     }
   };
 

src/components/feature/myProfile/MyProfileContents.tsx

@@ -6,6 +6,7 @@ import { ChangeEvent, FocusEvent, useRef, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 
 import CameraIcon from '@/assets/icons/CameraIcon.svg';
+import MyListLoading from '@/components/feature/myProfile/MyListLoading';
 import ButtonDefault from '@/components/ui/ButtonDefault';
 import UserThumbnail from '@/components/ui/UserThumbnail';
 import { DEFAULT_PROFILE_IMG_URL } from '@/constants';
@@ -104,60 +105,64 @@ const MyprofileSidebar = () => {
     setIsSameNickname(isSame);
   };
 
-  if (!user) return null;
-
   return (
     <article className='p-5 border border-gray-300 bg-white rounded-2xl shadow-[0_2px_20px_rgba(0,0,0,0.04)] md:px-10 md:pt-[23px] md:pb-[30px] lg:w-[280px] lg:shrink-0 lg:px-5 lg:py-[39px]'>
-      <div className='flex items-center gap-4 md:items-start md:gap-8 lg:flex-col lg:items-center'>
-        <div className='relative'>
-          <UserThumbnail
-            imgSrc={user.image}
-            userName={user.nickname}
-            className='md:w-20 lg:w-[164px]'
-          />
-          <input
-            type='file'
-            name='imgFileUpload'
-            id='imgFileUpload'
-            accept='image/*'
-            className='hidden'
-            onChange={handleUploadImage}
-            ref={fileRef}
-          />
-          <label
-            htmlFor='imgFileUpload'
-            className='absolute top-[65%] left-[65%] w-[40%] p-1 flex items-center justify-center bg-primary rounded-full cursor-pointer lg:top-0 lg:left-0 lg:w-full lg:h-full lg:bg-primary/30 lg:opacity-0 lg:hover:opacity-100 lg:transition-opacity'
-          >
-            <CameraIcon className='text-white w-[100%] h-[100%] lg:w-10 lg:h-10' />
-          </label>
-          {isUploading && (
-            <div className='absolute top-0 left-0 w-full h-full flex items-center justify-center'>
-              <div className=' w-8 h-8 border-4 mb-4 border-gray-300 border-t-primary rounded-full animate-spin' />
+      {!user ? (
+        <MyListLoading />
+      ) : (
+        <>
+          <div className='flex items-center gap-4 md:items-start md:gap-8 lg:flex-col lg:items-center'>
+            <div className='relative'>
+              <UserThumbnail
+                imgSrc={user.image}
+                userName={user.nickname}
+                className='md:w-20 lg:w-[164px]'
+              />
+              <input
+                type='file'
+                name='imgFileUpload'
+                id='imgFileUpload'
+                accept='image/*'
+                className='hidden'
+                onChange={handleUploadImage}
+                ref={fileRef}
+              />
+              <label
+                htmlFor='imgFileUpload'
+                className='absolute top-[65%] left-[65%] w-[40%] p-1 flex items-center justify-center bg-primary rounded-full cursor-pointer lg:top-0 lg:left-0 lg:w-full lg:h-full lg:bg-primary/30 lg:opacity-0 lg:hover:opacity-100 lg:transition-opacity'
+              >
+                <CameraIcon className='text-white w-[100%] h-[100%] lg:w-10 lg:h-10' />
+              </label>
+              {isUploading && (
+                <div className='absolute top-0 left-0 w-full h-full flex items-center justify-center'>
+                  <div className=' w-8 h-8 border-4 mb-4 border-gray-300 border-t-primary rounded-full animate-spin' />
+                </div>
+              )}
             </div>
-          )}
-        </div>
-        <span className='grow text-xl font-bold md:pt-[7px] md:text-2xl lg:pt-0 lg:min-h-[74px] lg:text-center'>
-          {user.nickname}
-        </span>
-      </div>
-      <div className='mt-5 md:flex md:flex-wrap md:mt-[30px] lg:mt-[48px]'>
-        <span className='block mb-2 text-md font-medium md:w-full md:mb-[10px] md:shrink md:text-base'>
-          닉네임
-        </span>
-        <Input
-          placeholder={user.nickname}
-          className='input h-[42px] py-[9px] mb-1.5 border-gray-300 shadow-none md:grow md:shrink md:basis-0 md:h-[48px] md:py-[11px] md:mb-0 md:mr-6 lg:grow-0 lg:shrink-0 lg:basis-full lg:mr-0 lg:mb-2'
-          ref={nicknameRef}
-          onBlur={checkSameNickname}
-        />
-        <ButtonDefault
-          onClick={handleUpdateNickname}
-          disabled={isSameNickname}
-          className='w-[89px] h-[42px] py-0 px-0 ml-auto text-md font-bold rounded-xl md:w-[116px] md:h-[48px] md:text-base lg:w-[96px] lg:h-[42px]'
-        >
-          변경하기
-        </ButtonDefault>
-      </div>
+            <span className='grow text-xl font-bold md:pt-[7px] md:text-2xl lg:pt-0 lg:min-h-[74px] lg:text-center'>
+              {user.nickname}
+            </span>
+          </div>
+          <div className='mt-5 md:flex md:flex-wrap md:mt-[30px] lg:mt-[48px]'>
+            <span className='block mb-2 text-md font-medium md:w-full md:mb-[10px] md:shrink md:text-base'>
+              닉네임
+            </span>
+            <Input
+              placeholder={user.nickname}
+              className='input h-[42px] py-[9px] mb-1.5 border-gray-300 shadow-none md:grow md:shrink md:basis-0 md:h-[48px] md:py-[11px] md:mb-0 md:mr-6 lg:grow-0 lg:shrink-0 lg:basis-full lg:mr-0 lg:mb-2'
+              ref={nicknameRef}
+              onBlur={checkSameNickname}
+            />
+            <ButtonDefault
+              onClick={handleUpdateNickname}
+              disabled={isSameNickname}
+              className='w-[89px] h-[42px] py-0 px-0 ml-auto text-md font-bold rounded-xl md:w-[116px] md:h-[48px] md:text-base lg:w-[96px] lg:h-[42px]'
+            >
+              변경하기
+            </ButtonDefault>
+          </div>
+        </>
+      )}
     </article>
   );
 };