오직 나를 위한
diff --git a/apps/web/src/app/university/application/apply/DoneStep.tsx b/apps/web/src/app/university/application/apply/DoneStep.tsx index 271ce737..ca75cc34 100644 --- a/apps/web/src/app/university/application/apply/DoneStep.tsx +++ b/apps/web/src/app/university/application/apply/DoneStep.tsx @@ -1,7 +1,6 @@ -import Image from "next/image"; import { useRouter } from "next/navigation"; - import BlockBtn from "@/components/button/BlockBtn"; +import Image from "@/components/ui/FallbackImage"; const DoneStep = () => { const router = useRouter(); diff --git a/apps/web/src/app/university/list/[homeUniversityName]/page.tsx b/apps/web/src/app/university/list/[homeUniversityName]/page.tsx index b427c9f3..8126e5ea 100644 --- a/apps/web/src/app/university/list/[homeUniversityName]/page.tsx +++ b/apps/web/src/app/university/list/[homeUniversityName]/page.tsx @@ -41,7 +41,9 @@ export async function generateMetadata({ params }: PageProps): Promise
{newsList.map((news) => (
@@ -17,11 +14,11 @@ const NewsCards = ({ newsList }: NewsCardsProps) => {
(1);
- const [curProgress, setCurProgress] = useState(0);
-
- const [curPreparation, setCurPreparation] =
- useState(null);
-
- const [region, setRegion] = useState(
- null,
- );
- const [countries, setCountries] = useState([]);
-
- const [nickname, setNickname] = useState(baseNickname);
- const [profileImageFile, setProfileImageFile] = useState(null);
-
- const signUpMutation = usePostSignUp();
- const uploadImageMutation = useUploadProfileImagePublic();
-
- useEffect(() => {
- setCurProgress(((curStage - 1) / 3) * 100);
- }, [curStage]);
-
- const createRegisterRequest = async (): Promise => {
- const submitRegion: RegionKo[] =
- region === "아직 잘 모르겠어요" ? [] : [region as RegionKo];
-
- if (!curPreparation) {
- throw new Error("준비 단계를 선택해주세요");
- }
-
- let imageUrl: string | null = baseProfileImageUrl;
-
- if (profileImageFile) {
- try {
- const result = await uploadImageMutation.mutateAsync(profileImageFile);
- imageUrl = result.fileUrl;
- } catch (err: unknown) {
- const error = err as { message?: string };
- console.error("Error", error.message);
- // toast.error는 hook의 onError에서 이미 처리되므로 중복 호출 제거
- }
- }
-
- return {
- signUpToken: signUpToken as string,
- interestedRegions: submitRegion,
- interestedCountries: countries,
- preparationStatus: curPreparation,
- nickname,
- profileImageUrl: imageUrl,
- };
- };
-
- const submitRegisterRequest = async () => {
- try {
- const registerRequest = await createRegisterRequest();
- signUpMutation.mutate(registerRequest, {
- onSuccess: (data) => {
- setAccessToken(data.accessToken);
- toast.success("회원가입이 완료되었습니다.");
-
- setTimeout(() => {
- router.push("/");
- }, 100);
- },
- onError: (error: unknown) => {
- const axiosError = error as {
- response?: { data?: { message?: string } };
- message?: string;
- };
- if (axiosError.response) {
- console.error("Axios response error", axiosError.response);
- toast.error(
- axiosError.response.data?.message || "회원가입에 실패했습니다.",
- );
- } else {
- console.error("Error", axiosError.message);
- toast.error(axiosError.message || "회원가입에 실패했습니다.");
- }
- },
- });
- } catch (err: unknown) {
- const error = err as { message?: string };
- console.error("Error", error.message);
- toast.error(error.message || "회원가입에 실패했습니다.");
- }
- };
-
- const renderCurrentSurvey = () => {
- switch (curStage) {
- case 1:
- return (
- {
- setCurStage(2);
- }}
- />
- );
- case 2:
- return (
- {
- setCurStage(3);
- }}
- />
- );
- case 3:
- return (
- {
- setCurStage(4);
- }}
- />
- );
- case 4:
- return (
- (1);
+ const [curProgress, setCurProgress] = useState(0);
+
+ const [curPreparation, setCurPreparation] = useState(null);
+
+ const [region, setRegion] = useState(null);
+ const [countries, setCountries] = useState([]);
+
+ const [nickname, setNickname] = useState(baseNickname);
+ const [profileImageFile, setProfileImageFile] = useState(null);
+
+ const signUpMutation = usePostSignUp();
+ const uploadImageMutation = useUploadProfileImagePublic();
+
+ useEffect(() => {
+ setCurProgress(((curStage - 1) / 3) * 100);
+ }, [curStage]);
+
+ const createRegisterRequest = async (): Promise => {
+ const submitRegion: RegionKo[] = region === "아직 잘 모르겠어요" ? [] : [region as RegionKo];
+
+ if (!curPreparation) {
+ throw new Error("준비 단계를 선택해주세요");
+ }
+
+ let imageUrl: string | null = baseProfileImageUrl;
+
+ if (profileImageFile) {
+ try {
+ const result = await uploadImageMutation.mutateAsync(profileImageFile);
+ imageUrl = result.fileUrl;
+ } catch (err: unknown) {
+ const error = err as { message?: string };
+ console.error("Error", error.message);
+ // toast.error는 hook의 onError에서 이미 처리되므로 중복 호출 제거
+ }
+ }
+
+ return {
+ signUpToken: signUpToken as string,
+ interestedRegions: submitRegion,
+ interestedCountries: countries,
+ preparationStatus: curPreparation,
+ nickname,
+ profileImageUrl: imageUrl,
+ };
+ };
+
+ const submitRegisterRequest = async () => {
+ try {
+ const registerRequest = await createRegisterRequest();
+ signUpMutation.mutate(registerRequest, {
+ onSuccess: (data) => {
+ setAccessToken(data.accessToken);
+ toast.success("회원가입이 완료되었습니다.");
+
+ setTimeout(() => {
+ router.push("/");
+ }, 100);
+ },
+ onError: (error: unknown) => {
+ const axiosError = error as {
+ response?: { data?: { message?: string } };
+ message?: string;
+ };
+ if (axiosError.response) {
+ console.error("Axios response error", axiosError.response);
+ toast.error(axiosError.response.data?.message || "회원가입에 실패했습니다.");
+ } else {
+ console.error("Error", axiosError.message);
+ toast.error(axiosError.message || "회원가입에 실패했습니다.");
+ }
+ },
+ });
+ } catch (err: unknown) {
+ const error = err as { message?: string };
+ console.error("Error", error.message);
+ toast.error(error.message || "회원가입에 실패했습니다.");
+ }
+ };
+
+ const renderCurrentSurvey = () => {
+ switch (curStage) {
+ case 1:
+ return (
+ {
+ setCurStage(2);
+ }}
+ />
+ );
+ case 2:
+ return (
+ {
+ setCurStage(3);
+ }}
+ />
+ );
+ case 3:
+ return (
+ {
+ setCurStage(4);
+ }}
+ />
+ );
+ case 4:
+ return (
+ (true);
-
- // 신규 신청 없으면 표시
- if (!isInitialized || !isMentor || !isSuccess || !isModalOpen || count === 0)
- return null;
-
- return (
- (true);
+
+ // 신규 신청 없으면 표시
+ if (!isInitialized || !isMentor || !isSuccess || !isModalOpen || count === 0) return null;
+
+ return (
+ & {
+ fallbackSrc?: string;
+};
+
+const FallbackImage = ({ src, fallbackSrc = DEFAULT_FALLBACK_SRC, onError, ...props }: FallbackImageProps) => {
+ const [failedSource, setFailedSource] = useState(null);
+
+ const normalizedSrc = typeof src === "string" ? src.trim() || fallbackSrc : src;
+ const sourceKey = typeof normalizedSrc === "string" ? normalizedSrc : JSON.stringify(normalizedSrc);
+ const hasError = failedSource === sourceKey;
+ const resolvedSrc = hasError ? fallbackSrc : normalizedSrc;
+
+ return (
+ {
+ if (!hasError && resolvedSrc !== fallbackSrc) {
+ setFailedSource(sourceKey);
+ }
+ onError?.(event);
+ }}
+ />
+ );
+};
+
+export default FallbackImage;
diff --git a/apps/web/src/components/ui/OptimisticImg/index.tsx b/apps/web/src/components/ui/OptimisticImg/index.tsx
index 5b6e5345..865dd11b 100644
--- a/apps/web/src/components/ui/OptimisticImg/index.tsx
+++ b/apps/web/src/components/ui/OptimisticImg/index.tsx
@@ -1,5 +1,5 @@
-import Image from "next/image";
import { useEffect, useState } from "react";
+import Image from "@/components/ui/FallbackImage";
const OptimisticImg = ({ src, alt }: { src: string; alt: string }) => {
// 실제 서버 URL인지, 아니면 로컬 blob URL인지 판단
diff --git a/apps/web/src/components/ui/ProfileWithBadge.tsx b/apps/web/src/components/ui/ProfileWithBadge.tsx
index 48c07061..c17bf3b5 100644
--- a/apps/web/src/components/ui/ProfileWithBadge.tsx
+++ b/apps/web/src/components/ui/ProfileWithBadge.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "@/components/ui/FallbackImage";
import { IconDefaultProfile, IconGraduation } from "@/public/svgs/mentor";
import { convertUploadedImageUrl } from "@/utils/fileUtils";
@@ -37,6 +37,7 @@ const ProfileWithBadge = ({
width={width}
height={height}
className="h-full w-full object-cover"
+ fallbackSrc="/images/placeholder/profile112.png"
/>
) : (
{news.title}
diff --git a/apps/web/src/components/login/signup/SignupSurvey.tsx b/apps/web/src/components/login/signup/SignupSurvey.tsx
index fb59fab5..de393136 100644
--- a/apps/web/src/components/login/signup/SignupSurvey.tsx
+++ b/apps/web/src/components/login/signup/SignupSurvey.tsx
@@ -16,167 +16,157 @@ import SignupProfileScreen from "./SignupProfileScreen";
import SignupRegionScreen from "./SignupRegionScreen";
type SignupSurveyProps = {
- baseNickname: string;
- baseEmail: string;
- baseProfileImageUrl: string;
+ baseNickname: string;
+ baseEmail: string;
+ baseProfileImageUrl: string;
};
-const SignupSurvey = ({
- baseNickname,
- baseEmail,
- baseProfileImageUrl,
-}: SignupSurveyProps) => {
- const router = useRouter();
- const searchParams = useSearchParams();
-
- const signUpToken = searchParams?.get("token");
- if (!signUpToken) {
- router.push("/login");
- }
- const { setAccessToken } = useAuthStore();
- const [curStage, setCurStage] = useState회원 가입이 완료되었습니다
;
- }
- };
-
- return (
-
-
- );
+const SignupSurvey = ({ baseNickname, baseEmail, baseProfileImageUrl }: SignupSurveyProps) => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const signUpToken = searchParams?.get("token");
+ if (!signUpToken) {
+ router.push("/login");
+ }
+ const { setAccessToken } = useAuthStore();
+ const [curStage, setCurStage] = useState
-
-
- {renderCurrentSurvey()}
- 회원 가입이 완료되었습니다
;
+ }
+ };
+
+ return (
+
+
+ );
};
export default SignupSurvey;
diff --git a/apps/web/src/components/mentor/ArticleBottomSheetModal/index.tsx b/apps/web/src/components/mentor/ArticleBottomSheetModal/index.tsx
index 58797de4..e819c121 100644
--- a/apps/web/src/components/mentor/ArticleBottomSheetModal/index.tsx
+++ b/apps/web/src/components/mentor/ArticleBottomSheetModal/index.tsx
@@ -1,6 +1,5 @@
-import Image from "next/image";
-
import BottomSheet from "@/components/ui/BottomSheet";
+import Image from "@/components/ui/FallbackImage";
import { IconCamera } from "@/public/svgs/mentor";
import useArticleSchema from "./hooks/useArticleSchema";
diff --git a/apps/web/src/components/mentor/MentorApplyCountContent/index.tsx b/apps/web/src/components/mentor/MentorApplyCountContent/index.tsx
index 00e16474..0d996957 100644
--- a/apps/web/src/components/mentor/MentorApplyCountContent/index.tsx
+++ b/apps/web/src/components/mentor/MentorApplyCountContent/index.tsx
@@ -8,58 +8,54 @@ import { UserRole } from "@/types/mentor";
import { tokenParse } from "@/utils/jwtUtils";
const MentorApplyCountContent = () => {
- // 로그인 된경우에만 신규 신청 카운트 모달 표시
- const { accessToken, isInitialized } = useAuthStore();
- const isMentor =
- tokenParse(accessToken)?.role === UserRole.MENTOR ||
- tokenParse(accessToken)?.role === UserRole.ADMIN;
-
- const { data: count, isSuccess } = useGetUnconfirmedMentoringCount(
- isInitialized && !!accessToken && isMentor,
- );
-
- const [isModalOpen, setIsModalOpen] = useState
+
+
+ {renderCurrentSurvey()}
+
- {/* close button */}
-
- setIsModalOpen(false)}>
-
- );
+ // 로그인 된경우에만 신규 신청 카운트 모달 표시
+ const { accessToken, isInitialized } = useAuthStore();
+ const isMentor =
+ tokenParse(accessToken)?.role === UserRole.MENTOR || tokenParse(accessToken)?.role === UserRole.ADMIN;
+
+ const { data: count, isSuccess } = useGetUnconfirmedMentoringCount(isInitialized && !!accessToken && isMentor);
+
+ const [isModalOpen, setIsModalOpen] = useState
- {/* left: message */}
-
-
-
-
-
- {/* divider */}
-
-
- {/* right: count */}
- 알림
-새로운 요청이 들어왔어요!
-어서 요청을 수락해주세요.
-
- 신규 신청
-
- {count}명
-
+ {/* close button */}
+
+ setIsModalOpen(false)}>
+
+ );
};
export default MentorApplyCountContent;
diff --git a/apps/web/src/components/ui/FallbackImage.tsx b/apps/web/src/components/ui/FallbackImage.tsx
new file mode 100644
index 00000000..b2f4c981
--- /dev/null
+++ b/apps/web/src/components/ui/FallbackImage.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import NextImage from "next/image";
+import { useState } from "react";
+
+const DEFAULT_FALLBACK_SRC = "/svgs/placeholders/image-placeholder.svg";
+
+type FallbackImageProps = React.ComponentProps
+ {/* left: message */}
+
+
+
+
+
+ {/* divider */}
+
+
+ {/* right: count */}
+ 알림
+새로운 요청이 들어왔어요!
+어서 요청을 수락해주세요.
+
+ 신규 신청
+
+ {count}명
+