design: 마이페이지 퍼블리싱

design-system/stories/buttons/TertiaryButton.stories.tsx

@@ -31,7 +31,7 @@ const meta = {
     },
     size: {
       control: 'radio',
-      options: ['small', 'medium', 'large'], // medium 추가
+      options: ['small', 'medium', 'large', 'full'],
       description: '버튼 크기',
       defaultValue: 'large',
     },
@@ -88,3 +88,12 @@ export const Medium: Story = {
     size: 'medium',
   },
 };
+
+export const Full: Story = {
+  args: {
+    label: '가장 큰 버튼',
+    type: 'button',
+    color: 'pink',
+    size: 'full',
+  },
+};

design-system/ui/buttons/TertiaryButton.tsx

@@ -2,7 +2,7 @@ interface TertiaryButtonProps {
   label: string;
   type: 'button' | 'submit';
   color: 'pink' | 'black';
-  size: 'small' | 'medium' | 'large';
+  size: 'small' | 'medium' | 'large' | 'full';
   disabled?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
@@ -16,6 +16,7 @@ const TertiaryButton = ({ label, type, color, size, disabled, onClick, className
     medium: 'px-4 py-1 text-sm',
     large:
       'text-sm sm:px-2.5 sm:py-2 sm:text-xs sm:rounded md:px-3 md:py-2.5 md:text-sm md:rounded-md lg:px-3 lg:py-2.5 lg:text-base lg:rounded-md',
+    full: 'w-full py-1 text-sm',
   };
 
   const colorStyle =

design-system/ui/textFields/DefaultTextField.tsx

@@ -14,9 +14,10 @@ interface DefaultTextFieldProps {
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
   placeholder?: string;
   errorMessage?: string;
+  errorPosition?: 'bottom' | 'right';
   className?: string;
   labelClassName?: string;
-  detailClassName?:string;
+  detailClassName?: string;
   disabled?: boolean;
   maxLength?: number;
 }
@@ -37,7 +38,8 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
       className = '',
       labelClassName = '',
       errorMessage,
-      detailClassName ='',
+      errorPosition = 'bottom',
+      detailClassName = '',
       disabled = false,
       maxLength,
       ...rest
@@ -47,27 +49,43 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
     return (
       <div>
         <label className={`block px-1 text-sm font-semibold text-gray-700 ${labelClassName}`}>{label}</label>
-        <label className={`block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13 ${detailClassName}`}>{detail}</label>
-        <div className={`flex items-center justify-center `}>
+        <label className={`block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13 ${detailClassName}`}>
+          {detail}
+        </label>
+        <div className="flex items-center justify-center relative">
           {leftText && <div className="w-24 text-base font-bold whitespace-nowrap">{leftText}</div>}
-          <input
-            ref={ref}
-            value={value}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            placeholder={placeholder}
-            disabled={disabled}
-            maxLength={maxLength}
-            {...rest}
-            className={`w-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none ${className} ${
-              errorMessage ? 'border-red-500' : ''
-            }`}
-          />
+
+          <div className="relative w-full">
+            <input
+              ref={ref}
+              value={value}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              placeholder={placeholder}
+              disabled={disabled}
+              {...rest}
+              className={`w-full h-11 px-3 py-2 border ${
+                errorMessage ? 'border-red-500' : 'border-placeholderText'
+              } rounded-[6px] text-sm placeholder:text-placeholderText outline-none ${className}`}
+            />
+            {errorMessage && errorPosition === 'right' && (
+              <>
+                {/* 데스크탑일 때만 오른쪽에 보이기 */}
+                <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap">
+                  {errorMessage}
+                </p>
+                {/* 모바일에서는 아래에 표시 */}
+                <p className="md:hidden mt-1 text-xs text-red-500">{errorMessage}</p>
+              </>
+            )}
+          </div>
+
           {rightContent && <div className="ml-3">{rightContent}</div>}
         </div>
-        {errorMessage && <p className="absolute px-1 text-10 md:text-xs text-red-500">{errorMessage}</p>}
+
+        {errorMessage && errorPosition !== 'right' && <p className="mt-1 text-xs text-red-500">{errorMessage}</p>}
       </div>
     );
   }

package.json

@@ -55,6 +55,7 @@
     "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
     "@storybook/test": "^8.4.6",
+    "@types/classnames": "^2.3.4",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.5",

src/app/Layout.tsx

@@ -1,7 +1,7 @@
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="w-full h-full min-h-screen bg-gray-50">
-      <div className="mx-auto w-full max-w-lg min-h-screen bg-white">
+      <div className="mx-auto w-full max-w-lg min-h-screen bg-white border border-gray-200">
         <main>{children}</main>
         <div id="portal" />
       </div>

src/entities/user/ui/BookmarkList.tsx

@@ -0,0 +1,44 @@
+import { useNavigate } from 'react-router-dom';
+import bookmark from '../../../../public/assets/bottomBar/Bookmark.svg';
+import { useBookmarks } from '../../../features/bookmark/hook/useBookmarkHook';
+import { formatDate } from '../../../shared/lib/date';
+import EventInfo from './EventInfo';
+
+const BookmarkList = () => {
+  const { data } = useBookmarks();
+  const navigate = useNavigate();
+
+  const sortedData = data ? [...data].sort((a, b) => a.id - b.id) : [];
+  const visibleEvents = sortedData.slice(0, 2);
+
+  return (
+    <div className="w-full h-full max-h-84 bg-white border-[0.5px] rounded-[10px] px-5 md:px-7 py-4 md:py-5">
+      <div className="flex flex-col gap-6 h-full">
+        <div className="flex items-center gap-3">
+          <img src={bookmark} alt="북마크 아이콘" className="w-5 h-5 md:w-6 md:h-6" />
+          <h1 className="text-20 md:text-22 font-bold">관심 이벤트</h1>
+        </div>
+        {visibleEvents.length > 0 ? (
+          visibleEvents.map(event => (
+            <EventInfo
+              key={event.id}
+              eventImageUrl={event.bannerImageUrl}
+              title={event.title}
+              date={formatDate(event.startDate)}
+              onClick={() => navigate(`/event-details/${event.id}`)}
+            />
+          ))
+        ) : (
+          <p className="text-center text-sm md:text-base text-gray-500">관심 있는 이벤트가 없습니다.</p>
+        )}
+        <span
+          onClick={() => navigate('/bookmark')}
+          className="text-center text-main cursor-pointer font-semibold text-xs md:text-sm"
+        >
+          전체 관심 이벤트 보기
+        </span>
+      </div>
+    </div>
+  );
+};
+export default BookmarkList;

src/entities/user/ui/EventInfo.tsx

@@ -0,0 +1,21 @@
+interface EventInfoProps {
+  eventImageUrl: string;
+  title: string;
+  date?: string;
+  onClick?: () => void;
+}
+
+const EventInfo = ({ eventImageUrl, title, date, onClick }: EventInfoProps) => {
+  return (
+    <div onClick={onClick} className="flex items-center gap-4 md:gap-6 cursor-pointer">
+      <img src={eventImageUrl} alt={`${title} 이미지`} className="w-16 h-16 md:w-20 md:h-20 rounded-[5px]" />
+      <div className="flex flex-col gap-2">
+        <span className="font-semibold text-base md:text-lg w-52 md:w-80 truncate overflow-hidden whitespace-nowrap">
+          {title}
+        </span>
+        <div className="text-gray-500 text-sm">{date}</div>
+      </div>
+    </div>
+  );
+};
+export default EventInfo;

src/entities/user/ui/ProfileInfo.tsx

@@ -0,0 +1,148 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { myPageSchema } from '../../../shared/lib/formValidation';
+import { formatPhoneNumber } from '../../../shared/utils/phoneFormatter';
+import ProfileCircle from '../../../../design-system/ui/Profile';
+import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
+import DefaultTextField from '../../../../design-system/ui/textFields/DefaultTextField';
+import useAuthStore from '../../../app/provider/authStore';
+import { useUserInfo, useUserUpdate } from '../../../features/join/hooks/useUserHook';
+import { formatProfilName } from '../../../shared/lib/formatProfileName';
+
+const ProfileInfo = () => {
+  const isLoggedIn = useAuthStore(state => state.isLoggedIn);
+  const { setName } = useAuthStore();
+  const { data, isLoading, error, refetch } = useUserInfo(isLoggedIn);
+  const { mutate: updateUser } = useUserUpdate();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+  } = useForm<{ name: string; phone: string }>({
+    defaultValues: { name: data?.name || '', phone: data?.phoneNumber || '' },
+    resolver: zodResolver(myPageSchema),
+  });
+
+  useEffect(() => {
+    if (data) {
+      setValue('name', data.name);
+      setValue('phone', data.phoneNumber);
+    }
+  }, [data, setValue]);
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhoneNumber(e.target.value);
+    setValue('phone', formatted, { shouldValidate: true });
+  };
+
+  const onSubmit: SubmitHandler<{ name: string; phone: string }> = formData => {
+    const { name, phone } = formData;
+
+    if (!data?.id) {
+      alert('사용자 정보를 불러오는 데 실패했습니다. 다시 시도해주세요.');
+      return;
+    }
+
+    const updatedData = {
+      id: data.id,
+      name: name,
+      email: data.email,
+      phoneNumber: phone,
+    };
+
+    updateUser(updatedData, {
+      onSuccess: () => {
+        setName(name);
+        refetch();
+        setIsEditing(false);
+      },
+      onError: () => {
+        alert('정보 업데이트에 실패했습니다. 다시 시도해주세요.');
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <div>로딩 중...</div>;
+  }
+  if (error) {
+    return <div>정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>;
+  }
+
+  return (
+    <div className="relative w-full h-52 md:h-56">
+      <div className="absolute inset-0 bg-main rounded-[10px]" />
+      <div className="relative z-10 bg-dashboardBg rounded-[10px] p-5 ml-2 h-full">
+        <div className="flex flex-col items-start h-full">
+          <h1 className="text-20 md:text-22 font-bold">프로필 정보</h1>
+          {!isEditing ? (
+            <>
+              <div className="flex items-center gap-3">
+                <ProfileCircle
+                  profile="userProfile"
+                  name={formatProfilName(data?.name || '')}
+                  className="w-16 h-16 md:w-18 md:h-18 text-xl md:text-2xl"
+                />
+                <div className="flex flex-col gap-1 py-5 md:py-7 mb-2">
+                  <span className="text-17 md:text-19 font-bold">{data?.name}</span>
+                  <span className="text-14 md:text-16 text-gray-500">{data?.phoneNumber}</span>
+                </div>
+              </div>
+              <TertiaryButton
+                label="수정하기"
+                type="button"
+                color="pink"
+                size="full"
+                onClick={() => setIsEditing(true)}
+              />
+            </>
+          ) : (
+            <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+              <div className="flex py-2 md:py-3 gap-3">
+                <ProfileCircle
+                  profile="userProfile"
+                  name={formatProfilName(data?.name || '')}
+                  className="w-16 h-16 md:w-18 md:h-18 text-xl md:text-2xl"
+                />
+                <div className="flex flex-col gap-1">
+                  <DefaultTextField
+                    {...register('name')}
+                    errorPosition="right"
+                    errorMessage={errors.name?.message}
+                    className="h-9"
+                  />
+                  <DefaultTextField
+                    {...register('phone')}
+                    onChange={handlePhoneChange}
+                    errorPosition="right"
+                    errorMessage={errors.phone?.message}
+                    className="h-9"
+                  />
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <TertiaryButton
+                  label="취소하기"
+                  type="button"
+                  color="pink"
+                  size="full"
+                  onClick={() => {
+                    setIsEditing(false);
+                    setValue('name', data?.name || '');
+                    setValue('phone', data?.phoneNumber || '');
+                  }}
+                />
+                <TertiaryButton label="수정하기" type="submit" color="pink" size="full" />
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileInfo;

src/features/event/ui/ShareEventModal.tsx

@@ -2,6 +2,7 @@ import link from '../../../../public/assets/event-manage/details/Link.svg';
 import kakao from '../../../../public/assets/event-manage/details/KaKao.svg';
 import { shareToKakao } from '../../../shared/lib/kakaoShare';
 import stripHtml from '../lib/stripHtml';
+import EventInfo from '../../../entities/user/ui/EventInfo';
 
 interface ShareEventModalProps {
   closeModal: () => void;
@@ -71,8 +72,7 @@ const ShareEventModal = ({
         </div>
         <h1 className="font-semibold text-xl text-center mb-6">공유하기</h1>
         <div className="flex items-center gap-5 mb-8">
-          <img src={eventImageUrl} alt="프로필 사진" className="w-20 h-20 rounded-[5px]" />
-          <span className="font-semibold text-lg">{title}</span>
+          <EventInfo eventImageUrl={eventImageUrl} title={title} />
         </div>
         <div className="flex flex-col gap-4 py-3">
           <div onClick={handleCopyLink} className="flex items-center gap-4 cursor-pointer">