refactor: function 선언을 화살표 함수로 변환

KyeongJooni · KyeongJooni · commit fdeb401a8ca8 · 2026-01-30T17:04:18.000+09:00
diff --git a/src/app/layout/MainLayout.tsx b/src/app/layout/MainLayout.tsx
@@ -1,11 +1,13 @@
 import { Header } from '@shared/ui/Header';
 import { Outlet } from 'react-router';
 
-export default function MainLayout() {
+const MainLayout = () => {
   return (
     <div className="min-h-screen bg-white">
       <Header />
       <Outlet />
     </div>
   );
-}
+};
+
+export default MainLayout;
diff --git a/src/app/providers/ToastProvider.tsx b/src/app/providers/ToastProvider.tsx
@@ -22,7 +22,7 @@ interface ToastProviderProps {
   children: ReactNode;
 }
 
-export function ToastProvider({ children }: ToastProviderProps) {
+export const ToastProvider = ({ children }: ToastProviderProps) => {
   const { contextValue, isVisible, isAnimating, toastProps } = useToastProvider();
 
   return (
@@ -37,4 +37,4 @@ export function ToastProvider({ children }: ToastProviderProps) {
       )}
     </ToastContext.Provider>
   );
-}
+};
diff --git a/src/app/providers/index.tsx b/src/app/providers/index.tsx
@@ -5,6 +5,6 @@ type AppProvidersProps = {
   children: ReactNode;
 };
 
-export function AppProviders({ children }: AppProvidersProps) {
+export const AppProviders = ({ children }: AppProvidersProps) => {
   return <ToastProvider>{children}</ToastProvider>;
-}
+};
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -11,7 +11,7 @@ export const links = () => [
   { rel: 'manifest', href: '/site.webmanifest' },
 ];
 
-export default function Root() {
+const Root = () => {
   return (
     <html lang="ko">
       <head>
@@ -30,4 +30,6 @@ export default function Root() {
       </body>
     </html>
   );
-}
+};
+
+export default Root;
diff --git a/src/pages/login/ui/LoginPage.tsx b/src/pages/login/ui/LoginPage.tsx
@@ -3,7 +3,7 @@ import { kakaoLoginImg } from '@shared/assets/icons';
 import { Logo } from '@shared/ui/Logo';
 import { loginStyles as s } from './LoginPage.styles';
 
-export default function LoginPage() {
+const LoginPage = () => {
   return (
     <div className={s.wrapper} style={{ backgroundImage: `url(${loginBackgroundImg})` }}>
       <div className="flex h-full w-full flex-col items-center justify-center gap-[26px] px-6 py-12">
@@ -19,4 +19,6 @@ export default function LoginPage() {
       </div>
     </div>
   );
-}
+};
+
+export default LoginPage;
diff --git a/src/pages/main/ui/MainPage.tsx b/src/pages/main/ui/MainPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router';
 import { BANNER_CARDS } from './BannerCards';
 import { CAROUSEL_SLIDES } from './CarouselSlides';
 
-export default function MainPage() {
+const MainPage = () => {
   const navigate = useNavigate();
 
   return (
@@ -36,4 +36,6 @@ export default function MainPage() {
       />
     </main>
   );
-}
+};
+
+export default MainPage;
diff --git a/src/pages/mypage/ui/AccountSettingsPage.tsx b/src/pages/mypage/ui/AccountSettingsPage.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router';
 import { PageContainer } from './PageContainer';
 import { getProfileSummary, saveProfile } from '../model/profileStorage';
 
-export default function AccountSettingsPage() {
+const AccountSettingsPage = () => {
   const navigate = useNavigate();
   const profileSummary = getProfileSummary();
   const [profileImage, setProfileImage] = useState(profileSummary.profileImage ?? MY_PAGE_PROFILE.profileImage);
@@ -80,4 +80,6 @@ export default function AccountSettingsPage() {
       </PageContainer>
     </main>
   );
-}
+};
+
+export default AccountSettingsPage;
diff --git a/src/pages/mypage/ui/MyPage.tsx b/src/pages/mypage/ui/MyPage.tsx
@@ -15,7 +15,7 @@ const MAIN_TABS: Array<MyPageTab<MainTabId>> = [
   { id: 'favorite', label: '찜한 목록' },
 ];
 
-export default function MyPage() {
+const MyPage = () => {
   const navigate = useNavigate();
   const profileSummary = getProfileSummary();
 
@@ -104,4 +104,6 @@ export default function MyPage() {
       </PageContainer>
     </main>
   );
-}
+};
+
+export default MyPage;
diff --git a/src/pages/mypage/ui/ProfileInfoPage.tsx b/src/pages/mypage/ui/ProfileInfoPage.tsx
@@ -4,7 +4,7 @@ import { PageContainer } from './PageContainer';
 import { PersonalInfoForm } from './PersonalInfoForm';
 import { getPersonalInfoDefaults, saveProfile } from '../model/profileStorage';
 
-export default function ProfileInfoPage() {
+const ProfileInfoPage = () => {
   const navigate = useNavigate();
   const defaultValues = useMemo(() => getPersonalInfoDefaults(), []);
 
@@ -22,4 +22,6 @@ export default function ProfileInfoPage() {
       </PageContainer>
     </main>
   );
-}
+};
+
+export default ProfileInfoPage;
diff --git a/src/pages/sell-confirm/ui/SellConfirmPage.tsx b/src/pages/sell-confirm/ui/SellConfirmPage.tsx
@@ -20,7 +20,7 @@ const CONDITION_LABELS = {
 
 type SellConfirmState = SellState;
 
-export default function SellConfirmPage() {
+const SellConfirmPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { showToast } = useToast();
@@ -129,4 +129,6 @@ export default function SellConfirmPage() {
       </div>
     </div>
   );
-}
+};
+
+export default SellConfirmPage;
diff --git a/src/pages/signup/ui/SignupForm.tsx b/src/pages/signup/ui/SignupForm.tsx
@@ -18,7 +18,7 @@ const FORM_FIELDS = [
   { name: 'nickname', label: '닉네임', placeholder: '2~20자의 닉네임', type: 'text' },
 ] as const;
 
-export function SignupForm() {
+export const SignupForm = () => {
   const { imageUrl: profileImage, fileInputRef, handleSelectImage, handleImageChange } = useImageUpload();
 
   const {
@@ -83,4 +83,4 @@ export function SignupForm() {
       </section>
     </form>
   );
-}
+};
diff --git a/src/pages/signup/ui/SignupHeader.tsx b/src/pages/signup/ui/SignupHeader.tsx
@@ -1,6 +1,6 @@
 import { Logo } from '@shared/ui/Logo';
 
-export function SignupHeader() {
+export const SignupHeader = () => {
   return (
     <section className="gap-xxs flex w-full flex-col items-center bg-green-50 px-6 py-10">
       <header className="gap-m flex flex-col items-center xl:flex-row xl:gap-[35px]">
@@ -12,4 +12,4 @@ export function SignupHeader() {
       </header>
     </section>
   );
-}
+};
diff --git a/src/pages/signup/ui/SignupPage.tsx b/src/pages/signup/ui/SignupPage.tsx
@@ -1,7 +1,7 @@
 import { SignupForm } from './SignupForm';
 import { SignupHeader } from './SignupHeader';
 
-export default function SignupPage() {
+const SignupPage = () => {
   return (
     <div className="flex min-h-screen w-full justify-center overflow-x-hidden bg-white">
       <div className="flex w-full max-w-[1440px] flex-col items-center px-6 pb-24">
@@ -10,4 +10,6 @@ export default function SignupPage() {
       </div>
     </div>
   );
-}
+};
+
+export default SignupPage;
diff --git a/src/shared/hooks/useClickOutside.ts b/src/shared/hooks/useClickOutside.ts
@@ -1,6 +1,10 @@
 import { useEffect, type RefObject } from 'react';
 
-export function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, isOpen: boolean, onClose: () => void) {
+export const useClickOutside = <T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  isOpen: boolean,
+  onClose: () => void
+) => {
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -25,4 +29,4 @@ export function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>,
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [ref, isOpen, onClose]);
-}
+};
diff --git a/src/shared/hooks/useImageUpload.ts b/src/shared/hooks/useImageUpload.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-export function useImageUpload() {
+export const useImageUpload = () => {
   const [imageUrl, setImageUrl] = useState<string | undefined>();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -33,4 +33,4 @@ export function useImageUpload() {
     handleSelectImage,
     handleImageChange,
   };
-}
+};
diff --git a/src/shared/hooks/useModal.ts b/src/shared/hooks/useModal.ts
@@ -1,11 +1,11 @@
 import { useCallback, useState } from 'react';
 
-export function useModal(initialState = false) {
+export const useModal = (initialState = false) => {
   const [isOpen, setIsOpen] = useState(initialState);
 
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);
   const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
 
   return { isOpen, open, close, toggle };
-}
+};
diff --git a/src/shared/hooks/useToastProvider.ts b/src/shared/hooks/useToastProvider.ts
@@ -5,7 +5,7 @@ const ANIMATION_DELAY_MS = 10;
 const FADE_OUT_DELAY_MS = 2700;
 const HIDE_DELAY_MS = 3000;
 
-export function useToastProvider() {
+export const useToastProvider = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [message, setMessage] = useState('');
@@ -32,4 +32,4 @@ export function useToastProvider() {
     isAnimating,
     toastProps: { message, tone, onDismiss: handleDismiss },
   };
-}
+};
diff --git a/src/shared/ui/Logo/Logo.tsx b/src/shared/ui/Logo/Logo.tsx
@@ -6,7 +6,7 @@ type LogoProps = {
   className?: string;
 };
 
-export function Logo({ className }: LogoProps) {
+export const Logo = ({ className }: LogoProps) => {
   const navigate = useNavigate();
   const handleClick = () => navigate(ROUTES.MAIN, { viewTransition: true });
 
@@ -20,4 +20,4 @@ export function Logo({ className }: LogoProps) {
       aria-label="LOOPIT 홈으로 이동"
     />
   );
-}
+};
diff --git a/src/shared/ui/Portal/Portal.tsx b/src/shared/ui/Portal/Portal.tsx
@@ -6,7 +6,7 @@ interface PortalProps {
   containerId?: string;
 }
 
-export function Portal({ children, containerId = 'portal-root' }: PortalProps) {
+export const Portal = ({ children, containerId = 'portal-root' }: PortalProps) => {
   const [container, setContainer] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
@@ -32,4 +32,4 @@ export function Portal({ children, containerId = 'portal-root' }: PortalProps) {
   }
 
   return createPortal(children, container);
-}
+};
diff --git a/src/shared/ui/Toast/Toast.tsx b/src/shared/ui/Toast/Toast.tsx
@@ -15,7 +15,7 @@ const TOAST_ICONS: Record<ToastTone, React.FC<React.SVGProps<SVGSVGElement>>> =
   success: ChatCircleCheckIcon,
 };
 
-export function Toast({ message, tone = 'default', dismissible = true, onDismiss }: ToastProps) {
+export const Toast = ({ message, tone = 'default', dismissible = true, onDismiss }: ToastProps) => {
   const styles = toastVariants({ tone });
   const Icon = TOAST_ICONS[tone];
 
@@ -34,4 +34,4 @@ export function Toast({ message, tone = 'default', dismissible = true, onDismiss
       </div>
     </div>
   );
-}
+};
