Merge pull request #6 from boostcampwm-2024/Refactor/3

[Refactor] FSD 아키텍처로 마이그레이션

apps/client/.eslintignore

@@ -1,5 +1,5 @@
 # shadcn/ui 컴포넌트 폴더 무시
-src/components/ui/*
+src/shared/ui/shadcn/*
 
 # node_modules는 기본적으로 무시되지만, 명시적으로 추가할 수도 있습니다
 node_modules/

apps/client/src/app/layouts/Layout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+import { Toaster } from '@/shared/ui/shadcn/toaster';
+import { Header } from '@/widgets';
+import { FloatingButton } from '@/shared/ui';
+import { Providers } from '../providers';
+
+export function Layout() {
+  return (
+    <Providers>
+      <Header />
+      <main className="pt-[74px] h-full">
+        <Outlet />
+      </main>
+      <Toaster />
+      <FloatingButton />
+    </Providers>
+  );
+}

apps/client/src/app/layouts/index.ts

@@ -0,0 +1 @@
+export { Layout } from './Layout';

apps/client/src/app/providers/AuthProvider.tsx

@@ -0,0 +1,8 @@
+import { useMemo, useState } from 'react';
+import { AuthContext } from '@/shared/contexts';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [isLoggedIn, setIsLoggedIn] = useState(() => !!localStorage.getItem('accessToken'));
+  const value = useMemo(() => ({ isLoggedIn, setIsLoggedIn }), [isLoggedIn, setIsLoggedIn]);
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

apps/client/src/app/providers/Providers.tsx

@@ -0,0 +1,10 @@
+import { ThemeProvider } from '@/app/providers/ThemeProvider';
+import { AuthProvider } from '@/app/providers/AuthProvider';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthProvider>
+      <ThemeProvider>{children}</ThemeProvider>
+    </AuthProvider>
+  );
+}

apps/client/src/contexts/ThemeContext.tsx → apps/client/src/app/providers/ThemeProvider.tsx

@@ -1,19 +1,8 @@
-import { createContext, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import { ThemeContext } from '@/shared/contexts';
 
 type Theme = 'light' | 'dark' | null;
 
-type ThemeContextInterface = {
-  theme: Theme;
-  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
-};
-
-const currentTheme = localStorage.getItem('theme') ?? null;
-
-export const ThemeContext = createContext<ThemeContextInterface>({
-  theme: currentTheme as Theme,
-  setTheme: () => null,
-});
-
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem('theme') as Theme) ?? null);
   const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);

apps/client/src/app/providers/index.ts

@@ -0,0 +1 @@
+export { Providers } from './Providers';

apps/client/src/ProtectedRoute.tsx → apps/client/src/app/routes/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { AuthContext } from '@contexts/AuthContext';
 import { Navigate, Outlet } from 'react-router-dom';
+import { AuthContext } from '@/features/auth/model/AuthContext';
 
 function ProtectedRoute() {
   const { isLoggedIn } = useContext(AuthContext);

apps/client/src/app/routes/config/index.ts

@@ -0,0 +1 @@
+export { routerOptions } from './options';

apps/client/src/app/routes/config/options.ts

@@ -0,0 +1,10 @@
+export const routerOptions = {
+  future: {
+    v7_startTransition: true,
+    v7_relativeSplatPath: true,
+    v7_fetcherPersist: true,
+    v7_normalizeFormMethod: true,
+    v7_partialHydration: true,
+    v7_skipActionErrorRevalidation: true,
+  },
+};

apps/client/src/app/routes/index.ts

@@ -0,0 +1 @@
+export { router } from './router';

apps/client/src/app/routes/router.tsx

@@ -0,0 +1,59 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { HomePage } from '@pages/Home';
+import { LivePage } from '@pages/Live';
+import { BroadcastPage } from '@pages/Broadcast';
+import { AuthPage } from '@pages/Auth';
+import { RecordPage } from '@pages/Record';
+import { ProfilePage } from '@/pages/Profile';
+import { Layout } from '@/app/layouts';
+import ProtectedRoute from './ProtectedRoute';
+import { routerOptions } from './config';
+
+export const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: <Layout />,
+      children: [
+        {
+          path: '',
+          element: <HomePage />,
+        },
+        {
+          path: 'live/:liveId',
+          element: <LivePage />,
+        },
+        {
+          path: 'auth',
+          element: <AuthPage />,
+        },
+        {
+          path: '',
+          element: <ProtectedRoute />,
+          children: [
+            {
+              path: 'profile',
+              element: <ProfilePage />,
+            },
+
+            {
+              path: 'record/:attendanceId',
+              element: <RecordPage />,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      path: 'broadcast',
+      element: <ProtectedRoute />,
+      children: [
+        {
+          path: '',
+          element: <BroadcastPage />,
+        },
+      ],
+    },
+  ],
+  routerOptions,
+);

apps/client/src/features/auth/index.ts

@@ -0,0 +1 @@
+export { useAuth, AuthContext } from './model';

apps/client/src/features/auth/model/AuthContext.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+const initialState = {
+  isLoggedIn: !!localStorage.getItem('accessToken'),
+  setIsLoggedIn: () => {},
+};
+
+type AuthContextValue = {
+  isLoggedIn: boolean;
+  setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const AuthContext = createContext<AuthContextValue>(initialState);

apps/client/src/features/auth/model/index.ts

@@ -0,0 +1,2 @@
+export { useAuth } from './useAuth';
+export { AuthContext } from './AuthContext';

apps/client/src/hooks/useAuth.ts → apps/client/src/features/auth/model/useAuth.ts

@@ -1,6 +1,6 @@
-import { AuthContext } from '@contexts/AuthContext';
 import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { AuthContext } from '@/features/auth/model/AuthContext';
 
 export const useAuth = () => {
   const navigate = useNavigate();

apps/client/src/features/broadcasting/index.ts

@@ -0,0 +1,4 @@
+export { BroadcastPlayer, BroadcastTitle, RecordButton } from './ui';
+export { useRoom, useProducer, useMedia, useScreenShare } from './model';
+
+export type { Tracks } from './model';

apps/client/src/features/broadcasting/model/index.ts

@@ -0,0 +1,4 @@
+export { useMedia } from './useMedia';
+export { useRoom, useProducer } from './mediasoup';
+export { useScreenShare } from './useScreenShare';
+export type { Tracks } from './trackTypes';

apps/client/src/constants/videoOptions.ts → apps/client/src/features/broadcasting/model/mediasoup/encodingOptions.ts

@@ -3,9 +3,3 @@ export const ENCODING_OPTIONS = [
   { maxBitrate: 2500000, scaleResolutionDownBy: 1.5, maxFramerate: 30 },
   { maxBitrate: 4000000, scaleResolutionDownBy: 1, maxFramerate: 30 },
 ];
-
-export const RESOLUTION_OPTIONS = {
-  high: { width: 1920, height: 1080 },
-  medium: { width: 1280, height: 720 },
-  low: { width: 854, height: 480 },
-};

apps/client/src/features/broadcasting/model/mediasoup/index.ts

@@ -0,0 +1,2 @@
+export { useRoom } from './useRoom';
+export { useProducer } from './useProducer';