refactor: 화살표 함수로 변경

Author: DongEun02

app/not-found.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-export default function NotFound() {
+const NotFound = () => {
   return (
     <main className="bg-background flex min-h-screen flex-col items-center justify-center px-4">
       <h1 className="text-7xl font-extrabold text-gray-900">404</h1>
@@ -14,4 +14,6 @@ export default function NotFound() {
       </Link>
     </main>
   );
-}
+};
+
+export default NotFound;

app/page.tsx

@@ -1,7 +1,8 @@
-import { LandingHeader } from '@/components/landing/LandingHeader';
-import { HeroSection } from '@/components/landing/HeroSection';
-import { FeatureList } from '@/components/landing/FeatureList';
-import { LandingPreview } from '@/components/landing/LandingPreview';
+import LandingHeader from '@/components/landing/LandingHeader';
+import HeroSection from '@/components/landing/HeroSection';
+import FeatureList from '@/components/landing/FeatureList';
+import LandingPreview from '@/components/landing/LandingPreview';
+
 export default function Home() {
   return (
     <div className="bg-background h-full space-y-60">

components/auth/AuthCard.tsx

@@ -6,7 +6,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-export function AuthCard({ title, description, children }: Props) {
+const AuthCard = ({ title, description, children }: Props) => {
   return (
     <div className="flex h-screen w-screen -translate-y-6 flex-col items-center justify-center">
       <Link
@@ -24,4 +24,6 @@ export function AuthCard({ title, description, children }: Props) {
       </div>
     </div>
   );
-}
+};
+
+export default AuthCard;

components/auth/Button.tsx

@@ -9,13 +9,13 @@ type ButtonProps = {
   onClick?: () => void;
 };
 
-export function Button({
+const Button = ({
   children,
   variant = 'primary',
   className,
   type = 'button',
   onClick,
-}: ButtonProps) {
+}: ButtonProps) => {
   return (
     <button
       type={type}
@@ -35,4 +35,6 @@ export function Button({
       {children}
     </button>
   );
-}
+};
+
+export default Button;

components/auth/FindPasswordModal.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { Button } from './Button';
-import { FormField } from './FormField';
+import Button from './Button';
+import FormField from './FormField';
 
 type FindPasswordModalProps = {
   onClose: () => void;
 };
 
-export function FindPasswordModal({ onClose }: FindPasswordModalProps) {
+const FindPasswordModal = ({ onClose }: FindPasswordModalProps) => {
   // 이메일 state
   const [email, setEmail] = useState('');
   const emailInputRef = useRef<HTMLInputElement>(null);
@@ -88,4 +88,6 @@ export function FindPasswordModal({ onClose }: FindPasswordModalProps) {
       </div>
     </div>
   );
-}
+};
+
+export default FindPasswordModal;

components/auth/FormField.tsx

@@ -9,7 +9,7 @@ type FieldProps = {
 const inputClass =
   'border-border placeholder:text-muted hover:border-border-hover focus:border-border-focus focus:ring-border-focus h-10 w-full rounded-md border px-3 text-sm transition-colors focus:ring-1 focus:outline-none';
 
-export const FormField = forwardRef<HTMLInputElement, FieldProps>(
+const FormField = forwardRef<HTMLInputElement, FieldProps>(
   ({ id, label, type = 'text', ...rest }, ref) => {
     return (
       <div className="space-y-1">
@@ -23,3 +23,5 @@ export const FormField = forwardRef<HTMLInputElement, FieldProps>(
 );
 
 FormField.displayName = 'FormField';
+
+export default FormField;

components/auth/SignupForm.tsx

@@ -1,7 +1,7 @@
-import { FormField } from '@/components/auth/FormField';
+import FormField from '@/components/auth/FormField';
 import Link from 'next/link';
 
-export function SignupForm() {
+const SignupForm = () => {
   return (
     <>
       <div className="space-y-6">
@@ -26,4 +26,6 @@ export function SignupForm() {
       </p>
     </>
   );
-}
+};
+
+export default SignupForm;

components/landing/FeatureCard.tsx

@@ -4,7 +4,7 @@ type FeatureCardProps = {
   title: string;
   description: string;
 };
-export function FeatureCard({ title, description, icon }: FeatureCardProps) {
+const FeatureCard = ({ title, description, icon }: FeatureCardProps) => {
   return (
     <div className="rounded-xl bg-white p-6 pb-2 shadow-sm">
       <div className="mb-2">
@@ -17,4 +17,6 @@ export function FeatureCard({ title, description, icon }: FeatureCardProps) {
       <p className="text-muted mt-2 text-left text-sm">{description}</p>
     </div>
   );
-}
+};
+
+export default FeatureCard;

components/landing/FeatureContent.tsx

@@ -19,7 +19,7 @@ const ITEMS = [
   },
 ];
 
-export function FeatureContent() {
+const FeatureContent = () => {
   return (
     <ul className="space-y-6">
       {ITEMS.map((item) => (
@@ -35,4 +35,6 @@ export function FeatureContent() {
       ))}
     </ul>
   );
-}
+};
+
+export default FeatureContent;

components/landing/FeatureList.tsx

@@ -1,4 +1,4 @@
-import { FeatureCard } from '@/components/landing/FeatureCard';
+import FeatureCard from '@/components/landing/FeatureCard';
 import {
   FiBookOpen,
   FiTarget,
@@ -31,7 +31,7 @@ const FEATURES = [
       'GitHub 스타일 잔디 그래프로 학습 활동을 한눈에 확인하고 동기부여를 받아보세요.',
   },
 ];
-export function FeatureList() {
+const FeatureList = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
       <p className="bg-surface-alt rounded-mg mt-16 rounded-lg p-1 px-4 text-xs">
@@ -49,4 +49,6 @@ export function FeatureList() {
       </div>
     </div>
   );
-}
+};
+
+export default FeatureList;