[docs]마이페이지 폴더구조 정리

Author: mtm-git1018

src/domains/community/hook/useItemVirtualizer.ts

@@ -1,8 +1,9 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { CommentType, Post } from '../types/post';
+import { Cocktail } from '@/domains/recipe/types/types';
 
 export function useItemVirtualizer(
-  items: CommentType[] | Post[] | null,
+  items: CommentType[] | Post[] | Cocktail[] |null,
   parentRef: React.RefObject<HTMLElement | null>
 ) {
   return useVirtualizer({

src/domains/mypage/main/MyAbv.tsx renamed to src/domains/mypage/components/main/MyAbv.tsx

@@ -1,7 +1,8 @@
 'use client';
 import Help from '@/shared/assets/icons/help_24.svg';
 import ToolTip from '@/shared/components/tool-tip/ToolTip';
-import useMedia from '../hook/useMedia';
+import useMedia from '../../hook/useMedia';
+
 
 function MyAbv({ abv }: { abv: number }) {
   const isMd = useMedia('(min-width:768px)');

src/domains/mypage/main/MyNav.tsx renamed to src/domains/mypage/components/main/MyNav.tsx

@@ -1,7 +1,8 @@
 'use client';
-import TabMenu from '@/domains/mypage/main/TabMenu';
+
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import TabMenu from './TabMenu';
 
 const MAIN_TABMENU = [
   {

src/domains/mypage/main/MyProfile.tsx renamed to src/domains/mypage/components/main/MyProfile.tsx

@@ -3,8 +3,9 @@
 import AbvGraph from '@/domains/shared/components/abv-graph/AbvGraph';
 import MyAbv from './MyAbv';
 import SsuryImage from './SsuryImage';
-import useFetchProfile from '../api/fetchProfile';
+
 import { useQuery } from '@tanstack/react-query';
+import useFetchProfile from '../../api/fetchProfile';
 
 function MyProfile() {
   const { fetchProfile } = useFetchProfile();

src/domains/mypage/main/MySetting.tsx renamed to src/domains/mypage/components/main/MySetting.tsx

@@ -4,8 +4,9 @@ import ToggleBtn from '@/domains/mypage/components/ToggleBtn';
 import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
 import TextButton from '@/shared/components/button/TextButton';
 import { useEffect, useState } from 'react';
-import useFetchProfile from '../api/fetchProfile';
+
 import { useQuery } from '@tanstack/react-query';
+import useFetchProfile from '../../api/fetchProfile';
 
 function MySetting() {
   const { fetchProfile } = useFetchProfile();

src/domains/mypage/main/SsuryImage.tsx renamed to src/domains/mypage/components/main/SsuryImage.tsx

@@ -1,5 +1,6 @@
-import useProfileSsury from '../hook/useProfileSsury';
+
 import Image from 'next/image';
+import useProfileSsury from '../../hook/useProfileSsury';
 
 function SsuryImage({ abvLevel }: { abvLevel: number }) {
   const profileImage = useProfileSsury(abvLevel);

src/domains/mypage/main/TabMenu.tsx renamed to src/domains/mypage/components/main/TabMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import CocktailFilter from './CocktailFilter';
 import CocktailList from './CocktailList';
 import Accordion from './Accordion';
@@ -10,8 +10,10 @@ import { useInView } from 'react-intersection-observer';
 import { debounce } from '@/shared/utills/debounce';
 import { useSearchParams } from 'next/navigation';
 import { Sort } from '../../types/types';
+import { useItemVirtualizer } from '@/domains/community/hook/useItemVirtualizer';
 
 function Cocktails() {
+  
   const searchParams = useSearchParams();
   const sortByParam = searchParams.get('sortBy') || 'recent';
   const [keyword, setKeyword] = useState('');
@@ -37,6 +39,9 @@ function Cocktails() {
     threshold: 0.1,
   });
 
+  const parentRef = useRef<HTMLDivElement>(null)
+  const virtualizer = useItemVirtualizer(data,parentRef)
+
   useEffect(() => {
     if (!isSearchMode && inView && hasNextPage) {
       fetchNextPage?.();
@@ -66,7 +71,10 @@ function Cocktails() {
 
       <CocktailFilter cocktailsEA={data.length} />
 
-      <section className="mt-5">
+      <section className="mt-5" ref={parentRef} style={{
+        height:`${virtualizer.getTotalSize()}px`,
+        
+      }}>
         {noResults ? <div>검색 결과가 없습니다.</div> : <CocktailList cocktails={data} />}
       </section>
       <div ref={ref} className="h-4"></div>