Merge pull request #28 from JongMany/feat/refactor-architecture

[Refactor] FSD 아키텍처 미숙한 부분 수정

fe/package.json

@@ -22,6 +22,7 @@
     "react-helmet-async": "^2.0.5",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "three": "^0.165.0"
   },
   "devDependencies": {

fe/src/App.tsx

@@ -1,7 +1,6 @@
 import { HelmetProvider } from "react-helmet-async";
 import { Router } from "./app/routes";
 import "./App.css";
-// import.meta.env.VITE_API_SERVER
 
 // ROUTES
 function App() {

fe/src/app/layout/MainLayout.tsx

@@ -2,7 +2,6 @@ import MainHeader from "@/shared/ui/header/MainHeader";
 import { Outlet } from "react-router-dom";
 
 export function MainLayout() {
-  console.log("MainLayout");
   return (
     <>
       <MainHeader />

fe/src/entities/introduction/ui/Introduction.tsx

@@ -1,4 +1,4 @@
-import { useTypingAnimation } from "@/shared/hooks/index";
+import { useTypingAnimation } from "@/shared/libs/index";
 
 export default function Introdcution() {
   const { typingText } = useTypingAnimation({

fe/src/entities/projects/index.ts

@@ -1 +1,2 @@
-export { default } from "./ui/Project";
+export { default } from "./ui/project/Project";
+export { default as FileDownloadButton } from "./ui/download-button/FileDownloadButton";

fe/src/features/download-file/ui/FileDownload.tsx → fe/src/entities/projects/libs/useDownloadFile.tsx

@@ -1,10 +1,6 @@
 import { useState } from "react";
 
-type Props = {
-  fileUrl: string;
-};
-
-export default function FileDownload({ fileUrl }: Props) {
+export function useDownloadFile(fileUrl: string) {
   const [isDownloading, setIsDownloading] = useState(false);
   const handleFileDownload = () => {
     if (!isDownloading) {
@@ -29,18 +25,5 @@ export default function FileDownload({ fileUrl }: Props) {
     }
   };
 
-  return (
-    <div>
-      <button
-        onClick={handleFileDownload}
-        disabled={isDownloading}
-        className="text-white"
-      >
-        {isDownloading ? "Downloading..." : "Download"}
-      </button>
-      <form action={fileUrl} method="get" target="_blank">
-        <button type="submit">Download</button>
-      </form>
-    </div>
-  );
+  return { isDownloading, handleFileDownload };
 }

fe/src/entities/projects/ui/download-button/FileDownloadButton.tsx

@@ -0,0 +1,45 @@
+import { useDownloadFile } from "@/entities/projects/libs/useDownloadFile";
+
+type Props = {
+  fileUrl: string;
+};
+
+export default function FileDownload({ fileUrl }: Props) {
+  // const [isDownloading, setIsDownloading] = useState(false);
+  // const handleFileDownload = () => {
+  //   if (!isDownloading) {
+  //     setIsDownloading(true);
+  //     fetch(fileUrl)
+  //       .then((response) => response.blob())
+  //       .then((blob) => {
+  //         const url = window.URL.createObjectURL(new Blob([blob]));
+  //         const linkElem = document.createElement("a");
+  //         linkElem.href = url;
+  //         linkElem.download = fileUrl.split("/").pop() || "download";
+  //         document.body.appendChild(linkElem);
+  //         linkElem.click();
+
+  //         window.URL.revokeObjectURL(url);
+  //         setIsDownloading(false);
+  //       })
+  //       .catch((error) => {
+  //         console.error(`File download failed: ${error}`);
+  //         setIsDownloading(false);
+  //       });
+  //   }
+  // };
+  const { isDownloading, handleFileDownload } = useDownloadFile(fileUrl);
+
+  return (
+    <button
+      onClick={handleFileDownload}
+      disabled={isDownloading}
+      className="font-semibold text-white px-2 py-1 rounded-md border-[1px] mt-4"
+    >
+      <span>{isDownloading ? "다운로드 중" : "다운로드하기"}</span>
+      {/* <form action={fileUrl} method="get" target="_blank">
+        <button type="submit">Download</button>
+      </form> */}
+    </button>
+  );
+}

fe/src/entities/projects/ui/Project.tsx → fe/src/entities/projects/ui/project/Project.tsx

@@ -27,7 +27,7 @@ export default function Project({
       <div
         className={`flex ${
           isAlignReverse ? "flex-row-reverse" : "flex-row"
-        } gap-x-4 w-[70vw]`}
+        } gap-x-4 w-[85vw]`}
       >
         {children}
       </div>

fe/src/pages/main/ui/page.tsx

@@ -1,6 +1,5 @@
-import MainPageWithLoading from "@/pages/main/ui/MainPageWithLoading";
 import { DetailHelmet } from "@/shared/ui/meta/DetailHelmet";
-// import LoadWrapper from "@/pages/root/components/LoadWrapper";
+import { ProjectsShowCaseWithLoading } from "@/widgets/main/projectsShowcase";
 
 export default function MainPage() {
   return (
@@ -11,7 +10,7 @@ export default function MainPage() {
         url={import.meta.env.VITE_BASE_URL + "/"}
         shortDesc="방구석 코딩쟁이의 포트폴리오를 소개합니다."
       />
-      <MainPageWithLoading />
+      <ProjectsShowCaseWithLoading />
     </>
   );
 }

fe/src/shared/constants/animationScript.ts → fe/src/shared/constants/animation/animationScript.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { lerp, scalePercent } from "@/shared/utils/lerp";
-import { points } from "@/shared/constants/points";
+import { points } from "@/shared/constants/animation/points";
 
 type AnimationTimeline = {
   start: number;

fe/src/shared/constants/webGl/StarScene.ts

@@ -3,8 +3,8 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import {
   animationScript,
   animationTimeline,
-} from "@/shared/constants/animationScript";
-import { points } from "@/shared/constants/points";
+} from "@/shared/constants/animation/animationScript";
+import { points } from "@/shared/constants/animation/points";
 import { Star } from "@/shared/constants/webGl/Star";
 import { MyStar } from "@/shared/constants/webGl/MyStar";
 

fe/src/shared/libs/media-query/__tests__/useMediaQuery.test.tsx

@@ -0,0 +1,80 @@
+import { renderHook, act } from "@testing-library/react";
+import { useMediaQuery } from "@/shared/libs/media-query/useMediaQuery";
+
+describe("useMediaQuery", () => {
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    // Restore original window.matchMedia after each test
+    window.matchMedia = originalMatchMedia;
+  });
+
+  const createMockMatchMedia = (matches: boolean) => {
+    const addListener = vi.fn();
+    const removeListener = vi.fn();
+    const addEventListener = vi.fn();
+    const removeEventListener = vi.fn();
+
+    return vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener,
+      removeListener,
+      addEventListener,
+      removeEventListener,
+      dispatchEvent: vi.fn(),
+    })) as unknown as (query: string) => MediaQueryList;
+  };
+
+  it("should return true for desktop query", () => {
+    window.matchMedia = createMockMatchMedia(true);
+
+    const { result } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+    expect(result.current).toBe(true);
+  });
+
+  it("should return false for mobile query", () => {
+    window.matchMedia = createMockMatchMedia(false);
+
+    const { result } = renderHook(() => useMediaQuery("(max-width: 767px)"));
+    expect(result.current).toBe(false);
+  });
+
+  it("should update when media query changes", () => {
+    const matchMediaListeners: { [key: string]: () => void } = {};
+    window.matchMedia = vi.fn().mockImplementation((query: string) => {
+      // const listeners: Array<() => void> = [];
+      return {
+        matches: query === "(min-width: 1024px)",
+        media: query,
+        onchange: null,
+        addListener: (listener: () => void) => {
+          matchMediaListeners[query] = listener;
+        },
+        removeListener: vi.fn(),
+        addEventListener: (event: string, listener: () => void) => {
+          matchMediaListeners[query] = listener;
+        },
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      };
+    }) as unknown as (query: string) => MediaQueryList;
+
+    const { result, rerender } = renderHook(() =>
+      useMediaQuery("(min-width: 1024px)")
+    );
+
+    expect(result.current).toBe(true);
+
+    act(() => {
+      window.matchMedia = createMockMatchMedia(false);
+      if (matchMediaListeners["(min-width: 1024px)"]) {
+        matchMediaListeners["(min-width: 1024px)"]();
+      }
+    });
+
+    rerender();
+    expect(result.current).toBe(false);
+  });
+});

fe/src/shared/libs/media-query/useDeviceSize.ts

@@ -0,0 +1,25 @@
+import { useMediaQuery } from "@/shared/libs/media-query/useMediaQuery";
+
+export function useDeviceSize() {
+  const isDesktopQuery = "(min-width: 1024px)";
+  const isTabletQuery = "(min-width: 768px) and (max-width: 1023px)";
+  const isMobileQuery = "(max-width: 767px)";
+
+  const isDesktop = useMediaQuery(isDesktopQuery);
+  const isTablet = useMediaQuery(isTabletQuery);
+  const isMobile = useMediaQuery(isMobileQuery);
+
+  if (isDesktop) {
+    return "desktop";
+  }
+
+  if (isTablet) {
+    return "tablet";
+  }
+
+  if (isMobile) {
+    return "mobile";
+  }
+
+  return "mobile";
+}