Merge pull request #252 from What-Today-FE/feat/kjhyun/245

모바일 UI 리팩토링

Author: kjhyun0830

apps/what-today/src/components/MypageSidebar.tsx

@@ -72,15 +72,6 @@ export default function MypageSidebar({ onLogoutClick, onClick, isOpen }: Mypage
           'md:flex',
         )}
       >
-        {/* {profileImgUrl ? (
-          <img
-            alt='프로필 이미지'
-            className='bg-white-100 size-120 rounded-full border border-gray-50 object-cover'
-            src={profileImgUrl}
-          />
-        ) : (
-          <ProfileLogo className='rounded-full' size={120} />
-        )} */}
         <ul className='flex w-full flex-col justify-center gap-4'>
           {items.map(({ label, icon: Icon, to }) => {
             const isSelected = location.pathname === to;

apps/what-today/src/index.css

@@ -58,6 +58,10 @@
     color: var(--color-gray-950);
     background-color: white;
   }
+
+  font {
+    word-break: break-all;
+  }
 }
 
 @layer components {

apps/what-today/src/layouts/Mypage.tsx

@@ -48,7 +48,7 @@ export default function MyPageLayout() {
         <ChevronIcon className='h-16' color='var(--color-gray-600)' direction='right' />
       </Button>
       {/* Outlet으로 상세 화면 표시 */}
-      <div className='flex-1 p-4'>
+      <div className='flex-1 overflow-x-hidden p-4 md:max-w-768 xl:max-w-635'>
         <Outlet />
       </div>
     </div>

apps/what-today/src/pages/mypage/reservations-list/index.tsx

@@ -290,7 +290,7 @@ export default function ReservationsListPage() {
         <p className='body-text text-gray-400 md:pt-10'>예약내역 변경 및 취소할 수 있습니다.</p>
       </header>
 
-      <section className='mb-10'>
+      <section className='mb-10 overflow-x-hidden'>
         <RadioGroup
           radioGroupClassName='flex flex-nowrap gap-6 overflow-x-auto no-scrollbar'
           selectedValue={selectedStatus}

packages/design-system/src/components/RadioGroup/RadioGroup.tsx

@@ -101,6 +101,7 @@ export default function RadioGroup({
       <motion.div
         animate={{ x: 0, opacity: 1 }}
         className={twMerge('no-scrollbar flex flex-nowrap gap-4 overflow-x-auto scroll-smooth', radioGroupClassName)}
+        initial={{ x: 0, opacity: 1 }}
         style={{
           scrollbarWidth: 'none',
           msOverflowStyle: 'none',
@@ -170,7 +171,7 @@ RadioGroup.Radio = function Radio({ value, children, className = '', name = 'rad
     <label className='cursor-pointer select-none' htmlFor={id}>
       <input
         checked={isSelected}
-        className='sr-only'
+        className='sr-only hidden'
         id={id}
         name={name || 'radioGroup'}
         role='radio'

packages/design-system/src/components/ReservationCard.tsx

@@ -1,3 +1,5 @@
+import UserBadge from './UserBadge';
+
 interface ReservationCardProps {
   /**
    * 체험 제목
@@ -73,26 +75,16 @@ export default function ReservationCard({
   onClick,
 }: ReservationCardProps) {
   const formatPrice = (value: number) => value.toLocaleString('ko');
-  // badge 컴포넌트로 수정 예정
-  const reservationStatus = {
-    pending: { badge: '신청 완료', style: 'bg-[#DAF0FF] text-[#0D6CD1]' },
-    confirmed: { badge: '예약 승인', style: 'bg-[#DDF9F9] text-[#1790A0]' },
-    declined: { badge: '예약 거절', style: 'bg-[#FCECEA] text-[#F96767]' },
-    canceled: { badge: '예약 취소', style: 'bg-[#E0E0E5] text-[#707177]' },
-    completed: { badge: '체험 완료', style: 'bg-[#E9FBE4] text-[#2BA90D]' },
-  };
-  const { badge, style } = reservationStatus[status];
 
   return (
     <article
-      className='flex h-150 cursor-pointer items-stretch -space-x-38 rounded-2xl border border-gray-50 md:h-160 md:-space-x-20 xl:-space-x-26'
+      className='flex h-fit w-auto cursor-pointer items-stretch -space-x-38 rounded-2xl border border-gray-50 md:-space-x-20 xl:-space-x-26'
       onClick={onClick}
     >
       <section className='z-5 flex w-full flex-col justify-between rounded-l-2xl rounded-r-3xl bg-white p-20 xl:gap-6'>
         <div className='flex flex-col gap-4 xl:gap-6'>
-          {/* badge 컴포넌트로 수정 예정 */}
-          <span className={`caption-text w-fit rounded-full px-8 py-2 text-center font-bold ${style}`}>{badge}</span>
-          <h3 className='section-text'>{title}</h3>
+          <UserBadge status={status} />
+          <h3 className='section-text line-clamp-7 md:line-clamp-3'>{title}</h3>
         </div>
         <div className='body-text text-gray-400'>
           <time>{startTime}</time>-<time>{endTime}</time>

packages/design-system/src/components/UserBadge.tsx

@@ -32,7 +32,7 @@ export default function UserBadge({ status }: UserBadgeProps) {
   const { label, style } = reservationStatus[status];
 
   const baseClass =
-    ' flex items-center justify-center gap-2 w-auto rounded-full px-6 py-1 text-center caption-text font-bold';
+    ' flex items-center justify-center gap-2 w-fit rounded-full px-8 py-2 text-center caption-text font-bold';
 
   return (
     <span className={twMerge(baseClass, style)} role='status'>