Main

src/apis/auth.ts

@@ -115,7 +115,7 @@ export const getSocialLoginUrl = (provider: SocialProvider) =>
 export const exchangeSocialLoginCode = (code: string) =>
   post<LoginResult>("/api/auth/login/oauth2/exchange", { code });
 
-const requestLoginMethods = async <T,>(method: "GET" | "POST" | "PATCH", path = ""): Promise<T> => {
+const requestLoginMethods = async <T,>(method: "GET" | "POST" | "DELETE", path = ""): Promise<T> => {
   const accessToken = getAccessToken();
   if (!accessToken) throw new ApiError("로그인이 필요합니다.", 401);
 
@@ -150,7 +150,7 @@ export const connectLoginMethod = async (provider: SocialLoginMethodProvider): P
 };
 
 export const unlinkLoginMethod = (provider: SocialLoginMethodProvider) =>
-  requestLoginMethods<null>("PATCH", `/${provider}`);
+  requestLoginMethods<null>("DELETE", `/${provider}`);
 
 export const logout = async (): Promise<void> => {
   const accessToken = getAccessToken();

src/pages/Auth/OAuthCallbackPage.tsx

@@ -14,6 +14,11 @@ import { connectExistingPush } from "@/utils/fcm/connectExistingPush";
 
 const pendingExchanges = new Map<string, Promise<LoginResult>>();
 
+const oauthErrorMessages: Record<string, string> = {
+  AUTH_409_004:
+    "이미 다른 Quespot 계정에 연결된 소셜 계정이에요. 해당 계정으로 로그인하거나 다른 소셜 계정을 이용해주세요.",
+};
+
 const exchangeOnce = (code: string) => {
   const pending = pendingExchanges.get(code);
   if (pending) return pending;
@@ -27,14 +32,22 @@ export default function OAuthCallbackPage() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [error, setError] = useState("");
+  const isAccountLinkConflict = searchParams.get("error") === "AUTH_409_004";
 
   useEffect(() => {
     const oauthError = searchParams.get("error") || searchParams.get("message");
+    const linkedProvider = searchParams.get("linkedProvider");
     const code = searchParams.get("code");
 
     if (oauthError) {
       cancelSocialLogin();
-      setError(oauthError);
+      setError(oauthErrorMessages[oauthError] || oauthError);
+      return;
+    }
+    if (linkedProvider) {
+      completeSocialLogin("");
+      const redirectPath = takeLoginRedirect();
+      navigate(redirectPath || PATH.MY, { replace: true });
       return;
     }
     if (!code) {
@@ -78,7 +91,11 @@ export default function OAuthCallbackPage() {
       <section className="w-full max-w-[320px] rounded-[24px] bg-white px-6 py-10 shadow-[0_8px_30px_rgba(62,102,142,0.08)]">
         {error ? (
           <>
-            <h1 className="type-label1">로그인하지 못했어요</h1>
+            <h1 className="type-label1">
+              {isAccountLinkConflict
+                ? "계정을 연결하지 못했어요"
+                : "로그인하지 못했어요"}
+            </h1>
             <p
               className="type-caption2 mb-6 mt-3 break-keep text-[#e46f6f]"
               role="alert"
@@ -87,10 +104,16 @@ export default function OAuthCallbackPage() {
             </p>
             <button
               className="type-body6 h-11 w-full rounded-xl bg-[#5bb5f8] text-white"
-              onClick={() => navigate(PATH.LOGIN, { replace: true })}
+              onClick={() =>
+                navigate(isAccountLinkConflict ? PATH.MY : PATH.LOGIN, {
+                  replace: true,
+                })
+              }
               type="button"
             >
-              로그인으로 돌아가기
+              {isAccountLinkConflict
+                ? "마이페이지로 돌아가기"
+                : "로그인으로 돌아가기"}
             </button>
           </>
         ) : (

src/pages/My/MyPage.tsx

@@ -17,6 +17,7 @@ import {
   Link2,
   Pencil,
   Plane,
+  RotateCcw,
   Settings2,
   ShieldCheck,
   Sparkles,
@@ -168,6 +169,7 @@ export default function MyPage() {
   );
   const [draftProfileImageFile, setDraftProfileImageFile] =
     useState<File | null>(null);
+  const [shouldResetProfileImage, setShouldResetProfileImage] = useState(false);
   const [draftInterests, setDraftInterests] = useState<string[]>(
     profile.interests?.length ? profile.interests : DEFAULT_INTEREST_IDS,
   );
@@ -287,10 +289,14 @@ export default function MyPage() {
     try {
       const profileImageObjectKey = draftProfileImageFile
         ? await uploadFile(draftProfileImageFile, "PROFILE")
-        : undefined;
+        : shouldResetProfileImage
+          ? ""
+          : undefined;
       const updatedProfile = await updateBasicProfile({
         nickname,
-        ...(profileImageObjectKey ? { profileImageObjectKey } : {}),
+        ...(profileImageObjectKey !== undefined
+          ? { profileImageObjectKey }
+          : {}),
         travelStyles: categoryIdsToTravelStyles(
           profile.interests?.length ? profile.interests : DEFAULT_INTEREST_IDS,
         ),
@@ -306,6 +312,7 @@ export default function MyPage() {
         JSON.stringify({ ...readProfile(), ...next }),
       );
       setDraftProfileImageFile(null);
+      setShouldResetProfileImage(false);
       setEditing(false);
       setStatusMessage("프로필을 수정했어요.");
     } catch (profileError) {
@@ -323,20 +330,31 @@ export default function MyPage() {
     setDraftNickname(profile.nickname || "Quespot 탐험가");
     setDraftProfileImage(profile.profileImageUrl || questyProfile);
     setDraftProfileImageFile(null);
+    setShouldResetProfileImage(false);
     setEditing(true);
   };
 
   const handleProfileImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
     setDraftProfileImageFile(file);
+    setShouldResetProfileImage(false);
     const reader = new FileReader();
     reader.onload = () =>
       typeof reader.result === "string" && setDraftProfileImage(reader.result);
     reader.readAsDataURL(file);
     event.target.value = "";
   };
 
+  const handleResetProfileImage = () => {
+    setDraftProfileImage(questyProfile);
+    setDraftProfileImageFile(null);
+    setShouldResetProfileImage(true);
+    if (profileImageInputRef.current) {
+      profileImageInputRef.current.value = "";
+    }
+  };
+
   const openTravelEditor = () => {
     const availableInterests = profile.interests ?? [];
     setDraftInterests(
@@ -1049,6 +1067,11 @@ export default function MyPage() {
                   className="h-full w-full rounded-full object-cover"
                   src={draftProfileImage}
                   alt="선택한 프로필 사진"
+                  onError={() => {
+                    if (draftProfileImage !== questyProfile) {
+                      setDraftProfileImage(questyProfile);
+                    }
+                  }}
                 />
                 <span className="absolute -bottom-1 -right-1 grid h-8 w-8 place-items-center rounded-full border-[3px] border-white bg-[#50ace9] text-white">
                   <Camera size={14} />
@@ -1061,9 +1084,26 @@ export default function MyPage() {
                 onChange={handleProfileImageChange}
                 type="file"
               />
-              <span className="mt-2 text-[9px] font-bold text-[#8495a5]">
-                사진 변경
-              </span>
+              <div className="mt-2 flex items-center gap-2 text-[9px] font-bold">
+                <button
+                  className="rounded-full px-2 py-1 text-[#8495a5] transition-colors hover:bg-[#f2f7fb] hover:text-[#50ace9] disabled:opacity-50"
+                  disabled={isSaving}
+                  onClick={() => profileImageInputRef.current?.click()}
+                  type="button"
+                >
+                  사진 변경
+                </button>
+                <span className="h-3 w-px bg-[#dce6ee]" aria-hidden="true" />
+                <button
+                  className="flex items-center gap-1 rounded-full px-2 py-1 text-[#8495a5] transition-colors hover:bg-[#f2f7fb] hover:text-[#50ace9] disabled:opacity-50"
+                  disabled={isSaving || shouldResetProfileImage}
+                  onClick={handleResetProfileImage}
+                  type="button"
+                >
+                  <RotateCcw size={10} />
+                  기본 이미지로 변경
+                </button>
+              </div>
             </div>
             <label className="grid gap-2 text-[11px] font-bold text-[#536071]">
               닉네임