Nugudi · dydals3440 · Nov 13, 2025 · Nov 11, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/apps/web/app/(auth)/profile/edit/page.tsx b/apps/web/app/(auth)/profile/edit/page.tsx
@@ -1,5 +1,7 @@
+import { UserProfileEditView } from "@/src/domains/user/presentation/ui/views/user-profile-edit-view";
+
 const ProfileEditPage = () => {
-  return <div>ProfileEditPage</div>;
+  return <UserProfileEditView />;
 };
 
 export default ProfileEditPage;
diff --git a/apps/web/public/images/intern-nuguri.png b/apps/web/public/images/intern-nuguri.png
diff --git a/apps/web/src/domains/user/domain/entities/user.entity.ts b/apps/web/src/domains/user/domain/entities/user.entity.ts
@@ -23,6 +23,8 @@ export interface UserProfile {
   getNickname(): string;
   getEmail(): string | undefined;
   getProfileImageUrl(): string | undefined;
+  getHeight(): number | undefined;
+  getWeight(): number | undefined;
   getCreatedAt(): string | undefined;
   getUpdatedAt(): string | undefined;
 
@@ -59,6 +61,8 @@ export class UserProfileEntity implements UserProfile {
   private readonly _nickname: string;
   private readonly _email?: string;
   private readonly _profileImageUrl?: string;
+  private readonly _height?: number;
+  private readonly _weight?: number;
   private readonly _createdAt?: string;
   private readonly _updatedAt?: string;
 
@@ -67,6 +71,8 @@ export class UserProfileEntity implements UserProfile {
     nickname: string;
     email?: string;
     profileImageUrl?: string;
+    height?: number;
+    weight?: number;
     createdAt?: string;
     updatedAt?: string;
   }) {
@@ -123,6 +129,8 @@ export class UserProfileEntity implements UserProfile {
     this._nickname = params.nickname;
     this._email = params.email;
     this._profileImageUrl = params.profileImageUrl;
+    this._height = params.height;
+    this._weight = params.weight;
     this._createdAt = params.createdAt;
     this._updatedAt = params.updatedAt;
   }
@@ -144,6 +152,14 @@ export class UserProfileEntity implements UserProfile {
     return this._profileImageUrl;
   }
 
+  getHeight(): number | undefined {
+    return this._height;
+  }
+
+  getWeight(): number | undefined {
+    return this._weight;
+  }
+
   getCreatedAt(): string | undefined {
     return this._createdAt;
   }
@@ -279,6 +295,8 @@ export class UserProfileEntity implements UserProfile {
       nickname: this._nickname,
       email: this._email,
       profileImageUrl: this._profileImageUrl,
+      height: this._height,
+      weight: this._weight,
       createdAt: this._createdAt,
       updatedAt: this._updatedAt,
     };

diff --git a/apps/web/src/domains/user/presentation/schemas/profile-edit.schema.ts b/apps/web/src/domains/user/presentation/schemas/profile-edit.schema.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+export const profileEditSchema = z.object({
+  nickname: z
+    .string()
+    .min(2, "닉네임은 최소 2자 이상이어야 합니다")
+    .max(10, "닉네임은 최대 10자까지 가능합니다")
+    .regex(
+      /^[a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]+$/,
+      "닉네임은 영문, 한글, 숫자만 사용할 수 있습니다",
+    )
+    .refine((val) => !val.includes(" "), {
+      message: "닉네임에 공백을 포함할 수 없습니다",
+    }),
+  height: z
+    .number()
+    .min(130, "키는 최소 130cm 이상이어야 합니다")
+    .max(220, "키는 최대 220cm까지 입력 가능합니다")
+    .optional(),
+  weight: z
+    .number()
+    .min(30, "몸무게는 최소 30kg 이상이어야 합니다")
+    .max(250, "몸무게는 최대 250kg까지 입력 가능합니다")
+    .optional(),
+});
+
+export type ProfileEditFormData = z.infer<typeof profileEditSchema>;
diff --git a/apps/web/src/domains/user/presentation/shared/adapters/user.adapter.ts b/apps/web/src/domains/user/presentation/shared/adapters/user.adapter.ts
@@ -1,15 +1,6 @@
 import type { UserProfile } from "../../../domain/entities/user.entity";
 import type { UserProfileItem } from "../types/user.type";
 
-type UserProfileData = {
-  id: number;
-  nickname: string;
-  email?: string;
-  profileImageUrl?: string;
-  createdAt?: string;
-  updatedAt?: string;
-};
-
 export const UserAdapter = {
   /**
    * Transform UserProfile entity to UI item
@@ -25,6 +16,8 @@ export const UserAdapter = {
       nickname: profile.getNickname(),
       email: profile.getEmail(),
       profileImageUrl: profile.getProfileImageUrl(),
+      height: profile.getHeight(),
+      weight: profile.getWeight(),
       createdAt: profile.getCreatedAt(),
       updatedAt: profile.getUpdatedAt(),
     };
@@ -170,7 +163,7 @@ export const UserAdapter = {
    * @param changes - Partial profile data with proposed changes
    * @returns True if profile can be updated with these changes
    */
-  canEdit(profile: UserProfile, changes: Partial<UserProfileData>): boolean {
+  canEdit(profile: UserProfile, changes: Partial<UserProfileItem>): boolean {
     if (
       "canUpdateProfile" in profile &&
       typeof profile.canUpdateProfile === "function"

diff --git a/apps/web/src/domains/user/presentation/shared/types/user.type.ts b/apps/web/src/domains/user/presentation/shared/types/user.type.ts
@@ -3,6 +3,8 @@ export interface UserProfileItem {
   nickname: string;
   email?: string;
   profileImageUrl?: string;
+  height?: number;
+  weight?: number;
   createdAt?: string;
   updatedAt?: string;
 }

diff --git a/apps/web/src/domains/user/presentation/shared/ui/components/user-points-balance/index.css.ts b/apps/web/src/domains/user/presentation/shared/ui/components/user-points-balance/index.css.ts
@@ -3,6 +3,7 @@ import { style } from "@vanilla-extract/css";
 export const container = style({
   position: "relative",
   height: 190,
+  boxSizing: "border-box",
 });
 
 export const imageWrapper = style({

diff --git a/apps/web/src/domains/user/presentation/shared/ui/components/user-points-balance/index.tsx b/apps/web/src/domains/user/presentation/shared/ui/components/user-points-balance/index.tsx
@@ -17,7 +17,7 @@ interface UserPointsBalanceProps {
 
 export const UserPointsBalance = ({ balance }: UserPointsBalanceProps) => {
   return (
-    <VStack gap={8} width="full" className={styles.container}>
+    <VStack gap={8} width="full" className={styles.container} pX={16}>
       <MyPointInfo balance={balance} />
       <NuguriImage />
     </VStack>

diff --git a/...src/domains/user/presentation/shared/ui/sections/user-points-history-section/index.css.ts b/...src/domains/user/presentation/shared/ui/sections/user-points-history-section/index.css.ts
@@ -0,0 +1,6 @@
+import { vars } from "@nugudi/themes";
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  backgroundColor: vars.colors.$static.light.color.white,
+});
diff --git a/...eb/src/domains/user/presentation/shared/ui/sections/user-points-history-section/index.tsx b/...eb/src/domains/user/presentation/shared/ui/sections/user-points-history-section/index.tsx
@@ -5,13 +5,14 @@ import {
   type DailyPointData,
   UserPointsHistoryList,
 } from "../../components/user-points-history-list";
+import * as styles from "./index.css";
 
 export const UserPointsHistorySection = () => {
   // TODO: Replace with actual data from API
   const pointsData = usePointsData();
 
   return (
-    <VStack gap={16}>
+    <VStack gap={16} pY={16} grow={1} className={styles.container}>
       <UserPointsHistoryList pointsData={pointsData} />
     </VStack>
   );

diff --git a/apps/web/src/domains/user/presentation/shared/ui/sections/user-profile-section/index.css.ts b/apps/web/src/domains/user/presentation/shared/ui/sections/user-profile-section/index.css.ts
@@ -4,13 +4,14 @@ import { style } from "@vanilla-extract/css";
 export const container = style({
   width: "100%",
   gap: "16px",
-  padding: "16px",
+  paddingLeft: vars.box.spacing[4],
+  paddingRight: vars.box.spacing[4],
   boxSizing: "border-box",
   alignItems: "center",
 });
 
 export const profileImage = style({
-  objectFit: "cover",
+  objectFit: "contain",
 });
 
 export const infoWrapper = style({
@@ -26,18 +27,24 @@ export const levelText = style({
   color: vars.colors.$scale.main[500],
 });
 
-export const nameText = style({
-  ...classes.typography.title.t3,
-  fontWeight: vars.typography.fontWeight[600],
-  color: vars.colors.$scale.zinc[600],
-});
-
 export const nameSuffix = style({
   ...classes.typography.body.b4,
 });
 
 export const editButton = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
   color: vars.colors.$scale.zinc[600],
+  cursor: "pointer",
+  transition: "color 0.2s ease",
+  "::before": {
+    content: '""',
+    position: "absolute",
+    inset: "-12px",
+    zIndex: 0,
+  },
   ":hover": {
     color: vars.colors.$scale.main[500],
   },

diff --git a/apps/web/src/domains/user/presentation/shared/ui/sections/user-profile-section/index.tsx b/apps/web/src/domains/user/presentation/shared/ui/sections/user-profile-section/index.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { PencilIcon } from "@nugudi/assets-icons";
-import { Flex } from "@nugudi/react-components-layout";
+import { Badge } from "@nugudi/react-components-badge";
+import { Body, Flex, HStack, Title } from "@nugudi/react-components-layout";
 import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -24,12 +25,17 @@ export const UserProfileSection = () => {
 const UserProfileSectionSkeleton = () => {
   return (
     <Flex className={styles.container}>
-      <div className="h-[60px] w-[60px] animate-pulse rounded-full bg-zinc-200" />
+      <div className="h-[130px] w-[165px] animate-pulse bg-zinc-200" />
       <Flex className={styles.infoWrapper}>
-        <div className="h-5 w-32 animate-pulse rounded bg-zinc-200" />
-        <div className="h-7 w-24 animate-pulse rounded bg-zinc-200" />
+        <div className="h-5 w-10 animate-pulse rounded bg-zinc-200" />
+        <Flex direction="column" gap={4}>
+          <div className="h-6 w-24 animate-pulse rounded bg-zinc-200" />
+          <Flex gap={4} align="center">
+            <div className="h-5 w-16 animate-pulse rounded bg-zinc-200" />
+            <div className="h-4 w-4 animate-pulse rounded bg-zinc-200" />
+          </Flex>
+        </Flex>
       </Flex>
-      <div className="h-10 w-10 animate-pulse rounded-full bg-zinc-200" />
     </Flex>
   );
 };
@@ -40,23 +46,30 @@ const UserProfileSectionError = () => {
     <Flex className={styles.container}>
       <Image
         priority
-        src="/images/nuguri.webp"
+        src="/images/intern-nuguri.png"
         alt="profile"
-        width={60}
-        height={60}
+        width={165}
+        height={130}
         className={styles.profileImage}
       />
       <Flex className={styles.infoWrapper}>
-        <span className={styles.levelText}>Lv.1 기본 너구리</span>
-        <Flex gap={4} align="end">
-          <h1 className={styles.nameText}>
-            손님 <span className={styles.nameSuffix}>님</span>
-          </h1>
+        <Badge tone="positive" size="xs" variant="weak">
+          Lv.1
+        </Badge>
+        <Flex direction="column" gap={4}>
+          <Title fontSize="t3" color="main" colorShade={800}>
+            인턴 너구리
+          </Title>
+          <HStack gap={4} align="center">
+            <Body fontSize="b3b" colorShade={700}>
+              손님
+            </Body>
+            <Link href="/profile/edit" className={styles.editButton}>
+              <PencilIcon width={16} height={16} />
+            </Link>
+          </HStack>
         </Flex>
       </Flex>
-      <Link href="/profile/edit" className={styles.editButton}>
-        <PencilIcon />
-      </Link>
     </Flex>
   );
 };
@@ -72,23 +85,30 @@ const UserProfileSectionContent = () => {
     <Flex className={styles.container}>
       <Image
         priority
-        src={profileImageUrl ?? "/images/nuguri.webp"}
+        src={profileImageUrl ?? "/images/intern-nuguri.png"}
         alt="profile"
-        width={60}
-        height={60}
+        width={165}
+        height={130}
         className={styles.profileImage}
       />
       <Flex className={styles.infoWrapper}>
-        <span className={styles.levelText}>Lv.1 기본 너구리</span>
-        <Flex gap={4} align="end">
-          <h1 className={styles.nameText}>
-            {nickname} <span className={styles.nameSuffix}>님</span>
-          </h1>
+        <Badge tone="positive" size="xs" variant="weak">
+          Lv.1
+        </Badge>
+        <Flex direction="column" gap={4}>
+          <Title fontSize="t3" color="main" colorShade={800}>
+            인턴 너구리
+          </Title>
+          <HStack gap={4} align="center">
+            <Body fontSize="b3b" colorShade={700}>
+              {nickname}
+            </Body>
+            <Link href="/profile/edit" className={styles.editButton}>
+              <PencilIcon width={16} height={16} />
+            </Link>
+          </HStack>
         </Flex>
       </Flex>
-      <Link href="/profile/edit" className={styles.editButton}>
-        <PencilIcon />
-      </Link>
     </Flex>
   );
 };
diff --git a/apps/web/src/domains/user/presentation/shared/ui/views/user-points-view/index.css.ts b/apps/web/src/domains/user/presentation/shared/ui/views/user-points-view/index.css.ts
@@ -3,6 +3,7 @@ import { style } from "@vanilla-extract/css";
 
 export const container = style({
   boxSizing: "border-box",
+  backgroundColor: vars.colors.$static.light.zinc[50],
 });
 
 export const content = style({

diff --git a/apps/web/src/domains/user/presentation/shared/ui/views/user-points-view/index.tsx b/apps/web/src/domains/user/presentation/shared/ui/views/user-points-view/index.tsx
@@ -15,10 +15,8 @@ export const UserPointsView = () => {
       w="full"
       className={styles.container}
     >
-      <VStack gap={24} p={16} className={styles.content}>
-        <NavBar title="내 포인트" />
-        <UserPointsBalanceSection />
-      </VStack>
+      <NavBar title="내 포인트" background="transparent" />
+      <UserPointsBalanceSection />
       <UserPointsHistorySection />
     </VStack>
   );

diff --git a/apps/web/src/domains/user/presentation/shared/ui/views/user-profile-view/index.tsx b/apps/web/src/domains/user/presentation/shared/ui/views/user-profile-view/index.tsx
@@ -1,5 +1,5 @@
 import { AppHeader } from "@core/ui/components/app-header";
-import { Flex } from "@nugudi/react-components-layout";
+import { Flex, VStack } from "@nugudi/react-components-layout";
 import { UserProfileLogoutButton } from "../../components/user-profile-logout-button";
 import { UserProfileMenuSection } from "../../sections/user-profile-menu-section";
 import { UserProfilePointSection } from "../../sections/user-profile-point-section";
@@ -10,8 +10,10 @@ export const UserProfileView = () => {
   return (
     <Flex direction="column" className={styles.container}>
       <AppHeader />
-      <UserProfileSection />
-      <UserProfilePointSection />
+      <VStack w="full">
+        <UserProfileSection />
+        <UserProfilePointSection />
+      </VStack>
       <UserProfileMenuSection />
       <UserProfileLogoutButton />
     </Flex>