fix: typescript 구문 에러 해결

Author: dev-ant

src/app/(auth)/social-callback/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import SocialSignUpForm from "@/components/auth/SocialSignUpForm";
@@ -13,7 +13,7 @@ import {
 } from "@/lib/auth/socialAuth";
 import { useAuth } from "@/contexts/AuthContext";
 
-export default function SocialCallbackPage() {
+function SocialCallbackContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
   const { refreshUser } = useAuth();
@@ -179,3 +179,20 @@ export default function SocialCallbackPage() {
 
   return null;
 }
+
+export default function SocialCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50">
+          <div className="text-center">
+            <Loader2 className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
+            <p className="text-gray-600">로딩 중...</p>
+          </div>
+        </div>
+      }
+    >
+      <SocialCallbackContent />
+    </Suspense>
+  );
+}

src/app/(main)/community/page.tsx

@@ -45,7 +45,7 @@ function CommunityPage() {
       </div>
 
       {/* Post List */}
-      <PostList boardId={selectedBoardId} sort={sortOption} />
+      <PostList boardId={selectedBoardId} />
 
       {/* Post Create Modal */}
       <PostCreateModal

src/app/(main)/mypage/page.tsx

@@ -18,7 +18,20 @@ import { useAuth } from "@/contexts/AuthContext";
 import LoginModal from "@/components/auth/LoginModal";
 
 // TODO: 실제 API 연동 시 교체
-const mockUserData = {
+interface ExtendedUser {
+  userId?: number;
+  id?: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string | null;
+  status?: string;
+  role?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  lastLoginAt?: string;
+}
+
+const mockUserData: ExtendedUser = {
   id: 1,
   email: "user@example.com",
   nickname: "데브노기유저",
@@ -36,7 +49,7 @@ export default function MyPage() {
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   // authUser가 있으면 authUser 사용, 없으면 mockData 사용 (개발 편의상)
-  const user = authUser || mockUserData;
+  const user: ExtendedUser = authUser || mockUserData;
 
   useEffect(() => {
     // 로딩이 끝나고 인증되지 않은 경우 로그인 모달 표시
@@ -153,7 +166,7 @@ export default function MyPage() {
               <h1 className="text-2xl font-bold text-gray-900">
                 {authUser?.nickname || user.nickname}
               </h1>
-              {getStatusBadge(user.status)}
+              {getStatusBadge(user.status || "ACTIVE")}
             </div>
             <p className="text-gray-600 flex items-center gap-2 mb-4">
               <Mail className="w-4 h-4" />
@@ -192,7 +205,7 @@ export default function MyPage() {
           <InfoRow
             icon={<Shield className="w-5 h-5 text-gray-400" />}
             label="권한"
-            value={user.role === "USER" ? "일반 회원" : "관리자"}
+            value={(user.role || "USER") === "USER" ? "일반 회원" : "관리자"}
           />
           {user.createdAt && (
             <InfoRow

src/app/api/auth/check-email/route.ts

@@ -34,7 +34,7 @@ export async function GET(request: NextRequest) {
         console.error("에러 상태:", axiosError.response.status);
         console.error("에러 데이터:", axiosError.response.data);
         console.error("에러 헤더:", axiosError.response.headers);
-        console.error("요청 URL:", axiosError.config?.baseURL + axiosError.config?.url);
+        console.error("요청 URL:", (axiosError.config?.baseURL || "") + (axiosError.config?.url || ""));
 
         return NextResponse.json(
           {

src/components/auth/LoginModal.tsx

@@ -36,7 +36,7 @@ const loginSchema = z.object({
     .string()
     .min(6, { message: "비밀번호는 6자 이상 입력해주세요" })
     .max(50, { message: "비밀번호는 50자 이하로 입력해주세요" }),
-  rememberMe: z.boolean().default(false),
+  rememberMe: z.boolean(),
 });
 
 type LoginFormData = z.infer<typeof loginSchema>;

src/components/commons/Category.tsx

@@ -92,7 +92,7 @@ export default function ItemCategorySection({
   categories: ItemCategory[];
 }) {
   const [isScrolling, setIsScrolling] = useState(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleScroll = () => {

src/components/commons/CategoryModal.tsx

@@ -100,7 +100,7 @@ export default function CategoryModal({
   categories,
 }: CategoryModalProps) {
   const [isScrolling, setIsScrolling] = useState(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleScroll = () => {