Refactor/LCP문제 개선 (#159)

* [refactor] 무한스크롤 tanstack

* [refactor] 레시피페이지 리팩토링

* [refactor] 아코디언박스

* [feat]필터링 뒤로가기 스크롤 저장

* [chore] 머지 전 커밋

* [chore]머지 전 커밋 누락 내용 커밋

* [refactor]리팩토링 커밋

* [refactor] 정렬 중복아이템문제

* [feat] 칵테일 정렬기능

* [fix]댓글 알림 수정

* [chore] 충돌사항 수정

* [docs] 필요없는 폰트파일 정리

* [feat]sse설정

* [feat]sse알림설정

* [chore]머지후 커밋

* [style] 메인페이지 아코디언 오류 수정

* [feat]알림 SSE기능

* [chore] console.log 삭제

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

* [refactor] 전역상태에서 필터링 삭제

* refactor/이미지 개선

* chore/포매팅

Author: mtm-git1018

next.config.ts

@@ -1,12 +1,13 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  reactStrictMode: false,
   experimental: {
     scrollRestoration: false,
   },
   images: {
     // 외부 이미지 최적화 완전 비활성화 (Vercel 유료 기능 회피)
-    unoptimized: true,
+    // unoptimized: true, 
     domains: [
       'team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com',
       'team2-app-s3-bucket.s3.amazonaws.com',
@@ -15,12 +16,14 @@ const nextConfig: NextConfig = {
       {
         protocol: 'https',
         hostname: 'www.thecocktaildb.com',
+        pathname: '/images/**',
       },
     ],
   },
   env: {
     NPUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
   },
+
   // webpack 설정
   webpack: (config) => {
     // @ts-expect-error 타입 에러 무시

src/app/(with-layout)/mypage/layout.tsx

@@ -1,5 +1,5 @@
-import MyNav from '@/domains/mypage/main/MyNav';
-import MyProfile from '@/domains/mypage/main/MyProfile';
+import MyNav from '@/domains/mypage/components/main/MyNav';
+import MyProfile from '@/domains/mypage/components/main/MyProfile';
 import SkeletonLayout from '@/domains/mypage/skeleton/main/SkeletonLayout';
 import { Suspense } from 'react';
 

src/app/(with-layout)/mypage/my-setting/page.tsx

@@ -1,5 +1,4 @@
-import MySetting from '@/domains/mypage/main/MySetting';
-
+import MySetting from '@/domains/mypage/components/main/MySetting';
 import { Metadata } from 'next';
 export const metadata: Metadata = {
   title: '마이페이지',

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,7 @@
 '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,5 @@
-import useProfileSsury from '../hook/useProfileSsury';
 import Image from 'next/image';
+import useProfileSsury from '../../hook/useProfileSsury';
 
 function SsuryImage({ abvLevel }: { abvLevel: number }) {
   const profileImage = useProfileSsury(abvLevel);