사용자 정보 수정 페이지 구현

.gitignore

@@ -43,4 +43,5 @@ next-env.d.ts
 # local env files
 .env.local
 /.vscode
-/docs
+/docs
+/.github/copilot-instructions.md

src/app/api/user/nickname/route.ts

@@ -0,0 +1,50 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+import { createClient as createServerClient } from "@/shared/utils/supabase/server";
+
+export async function PATCH(request: Request) {
+  try {
+    const supabase = createServerClient(cookies());
+    const { data: userData, error: userError } = await supabase.auth.getUser();
+
+    if (userError || !userData.user) {
+      return NextResponse.json({ status: "error", data: null, error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { nickname } = body;
+
+    // 닉네임 검증
+    if (!nickname || typeof nickname !== "string") {
+      return NextResponse.json({ status: "error", data: null, error: "닉네임을 입력해주세요." }, { status: 400 });
+    }
+
+    if (nickname.length < 2 || nickname.length > 20) {
+      return NextResponse.json(
+        { status: "error", data: null, error: "닉네임은 2자 이상 20자 이하로 입력해주세요." },
+        { status: 400 },
+      );
+    }
+
+    // 사용자 메타데이터 업데이트
+    const { data, error } = await supabase.auth.updateUser({
+      data: {
+        nickname,
+      },
+    });
+
+    if (error) {
+      console.error("Nickname update error:", error);
+      return NextResponse.json({ status: "error", data: null, error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json(
+      { status: "success", data: { nickname: data.user.user_metadata.nickname } },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("Nickname API error:", error);
+    return NextResponse.json({ status: "error", data: null, error: "Internal server error" }, { status: 500 });
+  }
+}

src/app/setting/page.tsx

@@ -1,3 +1,14 @@
-export default function SettingsPage() {
-  return <div>Settings Page</div>;
+import { ProfileSection, UserInfoSection } from "@/features";
+
+export default function SettingPage() {
+  return (
+    <div className='flex w-full max-w-4xl flex-col gap-8 px-5 py-10'>
+      <h1 className='text-2xl font-bold text-white'>프로필 설정</h1>
+
+      <div className='flex flex-col gap-8 md:flex-row md:items-start'>
+        <ProfileSection />
+        <UserInfoSection />
+      </div>
+    </div>
+  );
 }

src/features/index.ts

@@ -1,4 +1,5 @@
 export * from "./home";
 export * from "./login";
+export * from "./setting";
 export * from "./signup";
 export * from "./wallet";

src/features/setting/apis/change-nickname.api.ts

@@ -0,0 +1,26 @@
+import { APIResponse } from "@/shared";
+
+export interface ChangeNicknameParams {
+  nickname: string;
+}
+
+export type ChangeNicknameResponse = APIResponse<{
+  nickname: string;
+}>;
+
+export const changeNicknameAPI = async ({ nickname }: ChangeNicknameParams): Promise<ChangeNicknameResponse> => {
+  const response = await fetch("/api/user/nickname", {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ nickname }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "닉네임 변경에 실패했습니다.");
+  }
+
+  return response.json();
+};

src/features/setting/apis/index.ts

@@ -0,0 +1 @@
+export * from "./change-nickname.api";

src/features/setting/components/features/EmailField.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Label, Skeleton } from "@/shared";
+
+import { useUserInfo } from "../../hooks";
+
+export const EmailField = () => {
+  const { userEmail, isLoaded } = useUserInfo();
+
+  return (
+    <div className='flex items-center gap-2'>
+      <Label className='text-md text-text-primary w-16'>이메일</Label>
+      <div className='flex h-10 min-w-70 items-center rounded-md bg-background px-3 py-2'>
+        {!isLoaded ? <Skeleton className='h-5 w-32' /> : <p className='text-text-muted text-sm'>{userEmail}</p>}
+      </div>
+    </div>
+  );
+};

src/features/setting/components/features/LastLoginField.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Label, Skeleton } from "@/shared";
+
+import { useUserInfo } from "../../hooks";
+import { formattedDate } from "../../utils";
+
+export const LastLoginField = () => {
+  const { lastUpdated, isLoaded } = useUserInfo();
+
+  const formattedLastUpdated = formattedDate(lastUpdated || "");
+
+  return (
+    <div className='flex items-center gap-4'>
+      <Label className='text-text-primary w-20'>마지막 접속일</Label>
+      <div className='bg-surface-light/30 flex h-10 min-w-70 items-center px-3 py-2'>
+        {!isLoaded ? (
+          <Skeleton className='h-5 w-32' />
+        ) : (
+          <p className='text-text-muted text-sm'>{formattedLastUpdated}</p>
+        )}
+      </div>
+    </div>
+  );
+};

src/features/setting/components/features/NicknameField.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Button, Input, Label, Skeleton, Spinner } from "@/shared";
+
+import { useChangeNickname, useUserInfo } from "../../hooks";
+
+export const NicknameField = () => {
+  const { userNickname, isLoaded } = useUserInfo();
+
+  const { fieldState, inputValue, onChangeNickname, onClickEditButton, isPending } = useChangeNickname({
+    userNickname,
+  });
+
+  return (
+    <div className='flex items-center gap-2'>
+      <Label className='text-md text-text-primary w-16'>닉네임</Label>
+      <div className='flex items-center gap-4'>
+        {fieldState === "edit" ? (
+          <Input
+            className='min-w-70'
+            value={inputValue}
+            onChange={onChangeNickname}
+            disabled={isPending}
+            placeholder='닉네임을 입력하세요'
+          />
+        ) : (
+          <div className='flex h-10 min-w-70 items-center rounded-md bg-background px-3 py-2'>
+            {!isLoaded ? <Skeleton className='h-5 w-32' /> : <p className='text-text-muted text-sm'>{userNickname}</p>}
+          </div>
+        )}
+        <Button onClick={onClickEditButton} variant='outline' className='h-10' disabled={isPending}>
+          {isPending ? <Spinner /> : fieldState === "edit" ? "저장" : "수정"}
+        </Button>
+      </div>
+    </div>
+  );
+};

src/features/setting/components/features/index.ts

@@ -0,0 +1,3 @@
+export * from "./EmailField";
+export * from "./LastLoginField";
+export * from "./NicknameField";

src/features/setting/components/index.ts

@@ -0,0 +1 @@
+export * from "./features";

src/features/setting/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useUserInfo";
+export * from "./useChangeNickname";

src/features/setting/hooks/useChangeNickname.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { createClient } from "@/shared/utils/supabase";
+
+import { changeNicknameAPI } from "../apis";
+
+type Props = {
+  userNickname: string;
+};
+
+export const useChangeNickname = ({ userNickname }: Props) => {
+  const [fieldState, setFieldState] = useState<"view" | "edit">("view");
+  const [inputValue, setInputValue] = useState(userNickname);
+  const supabase = createClient();
+
+  // userNickname이 변경되면 inputValue 동기화 (세션 새로고침 후)
+  useEffect(() => {
+    setInputValue(userNickname);
+  }, [userNickname]);
+
+  const onChangeNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const { mutate: changeNickname, isPending } = useMutation({
+    mutationFn: () => changeNicknameAPI({ nickname: inputValue }),
+    onError: (error: Error) => {
+      toast.error(error.message);
+      setInputValue(userNickname); // 에러 시 원래 값으로 복구
+    },
+    onSuccess: async () => {
+      toast.success("닉네임이 변경되었습니다.");
+      setFieldState("view");
+
+      // Supabase 세션 강제 갱신 (AuthProvider가 감지하여 Zustand 스토어 업데이트)
+      await supabase.auth.refreshSession();
+    },
+  });
+
+  const onClickEditButton = () => {
+    if (fieldState === "edit") {
+      if (inputValue.trim() === userNickname) {
+        setFieldState("view");
+        return;
+      }
+      changeNickname();
+    } else {
+      setFieldState("edit");
+    }
+  };
+
+  return {
+    fieldState,
+    inputValue,
+    onChangeNickname,
+    onClickEditButton,
+    isPending,
+  };
+};

src/features/setting/hooks/useUserInfo.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { useGetSession, useIsSessionLoaded } from "@/shared";
+
+export const useUserInfo = () => {
+  const session = useGetSession();
+  const isLoaded = useIsSessionLoaded();
+
+  const userAvatarUrl = session?.user?.user_metadata?.avatar_url || "";
+  const userNickname = session?.user?.user_metadata?.nickname || "";
+  const userEmail = session?.user?.email || "";
+  const lastUpdated = session?.user?.updated_at || "";
+
+  return { userAvatarUrl, userNickname, userEmail, lastUpdated, isLoaded };
+};

src/features/setting/index.ts

@@ -0,0 +1 @@
+export * from "./ui";

src/features/setting/ui/ProfileSection.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage, Button } from "@/shared";
+import { Camera, UserRound } from "lucide-react";
+
+import { useUserInfo } from "../hooks";
+
+export const ProfileSection = () => {
+  const { userAvatarUrl } = useUserInfo();
+
+  return (
+    <section className='flex flex-col items-center gap-4 bg-surface-dark p-10'>
+      <div className='relative'>
+        <Avatar className='border-surface-light size-32 border-2'>
+          <AvatarImage src={userAvatarUrl} alt='User Avatar' className='object-cover' />
+          <AvatarFallback className='bg-surface-light'>
+            <UserRound className='text-text-muted size-16' />
+          </AvatarFallback>
+        </Avatar>
+        <Button
+          size='icon'
+          variant='secondary'
+          className='hover:bg-surface-light absolute right-0 bottom-0 size-10 rounded-full shadow-lg'
+        >
+          <Camera className='size-5' />
+        </Button>
+      </div>
+      <p className='text-text-muted text-sm'>프로필 사진 변경</p>
+    </section>
+  );
+};

src/features/setting/ui/UserInfoSection.tsx

@@ -0,0 +1,11 @@
+import { EmailField, LastLoginField, NicknameField } from "../components";
+
+export const UserInfoSection = () => {
+  return (
+    <section className='flex w-full flex-col items-start justify-center gap-6 bg-surface-dark p-9'>
+      <EmailField />
+      <NicknameField />
+      <LastLoginField />
+    </section>
+  );
+};

src/features/setting/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./ProfileSection";
+export * from "./UserInfoSection";

src/features/setting/utils/formatted-date.ts

@@ -0,0 +1,13 @@
+export const formattedDate = (dateString: string): string => {
+  const date = dateString ? new Date(dateString) : null;
+
+  const year = date ? date.getFullYear() : "";
+  const month = date ? String(date.getMonth() + 1).padStart(2, "0") : "";
+  const day = date ? String(date.getDate()).padStart(2, "0") : "";
+
+  const Hour = date ? String(date.getHours()).padStart(2, "0") : "";
+  const Minutes = date ? String(date.getMinutes()).padStart(2, "0") : "";
+  const Seconds = date ? String(date.getSeconds()).padStart(2, "0") : "";
+
+  return `${year}년 ${month}월 ${day}일 ${Hour}:${Minutes}:${Seconds}`;
+};

src/features/setting/utils/index.ts

@@ -0,0 +1 @@
+export * from "./formatted-date";

src/shared/components/features/header/Header.tsx

@@ -1,13 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import { UserRound, Wallet } from "lucide-react";
-
 import Logo from "@/shared/assets/logo.webp";
 
 import { ROUTER_PATH } from "../../../constants";
 import { LoginButton } from "../../common";
-import { Avatar, AvatarFallback, AvatarImage } from "../../ui";
 
 export const Header = () => {
   return (
@@ -35,10 +32,10 @@ export const Header = () => {
               Portfolio
             </Link>
             <Link
-              href={ROUTER_PATH.SETTINGS}
+              href={ROUTER_PATH.SETTING}
               className='text-sm leading-normal font-medium text-text-muted-dark hover:text-white'
             >
-              Settings
+              Setting
             </Link>
           </div>
         </nav>

src/shared/components/ui/index.ts

@@ -9,6 +9,7 @@ export * from "./input";
 export * from "./label";
 export * from "./select";
 export * from "./separator";
+export * from "./skeleton";
 export * from "./sonner";
 export * from "./spinner";
 export * from "./table";

src/shared/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "../../utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot='skeleton' className={cn("animate-pulse rounded-sm bg-text-dark/20", className)} {...props} />;
+}
+
+export { Skeleton };

src/shared/constants/router-path.ts

@@ -6,6 +6,6 @@ export const ROUTER_PATH = {
   AUTO_TRADE: "/auto-trade",
   TRADE: "/trade",
   PORTFOLIO: "/portfolio",
-  SETTINGS: "/settings",
+  SETTING: "/setting",
   WALLET: "/wallet",
 };