style: apply responsive styles for mobile support

apps/web/src/app/(backButton)/events/category/page.tsx

@@ -14,7 +14,7 @@ export default function Page() {
     }
 
     return (
-        <div className="h-min-screen items-center justify-items-center min-h-screen bg-inherit">
+        <div className="items-center justify-items-center bg-inherit">
             <div className="w-full h-full bg-inherit">
                 <EventList category={category._id} />
             </div>

apps/web/src/app/(backButton)/layout.tsx

@@ -3,9 +3,9 @@ import { PageTitleHeader } from '@/components/header'
 
 export default function BackButtonLayout({ children }: { children: React.ReactNode }) {
     return (
-        <div className="grid w-full h-screen">
+        <div className="flex flex-col w-full h-dvh">
             <PageTitleHeader />
-            <div className="w-full h-full overflow-y-scroll">{children}</div>
+            <div className="w-full overflow-y-scroll">{children}</div>
         </div>
     )
 }

apps/web/src/app/(navigation)/layout.tsx

@@ -4,7 +4,7 @@ import { Navigation } from '@/components/navigation'
 
 export default function NavigationLayout({ children }: { children: React.ReactNode }) {
     return (
-        <div className="grid w-full h-screen">
+        <div className="flex flex-col w-full h-dvh">
             <LogoHeader />
             <div className="w-full h-full overflow-y-scroll">{children}</div>
             <Navigation />

apps/web/src/app/(navigation)/setting/page.tsx

@@ -34,27 +34,27 @@ export default function Setting() {
                         안녕하세요 👋 <br />
                         {userNickname}님
                     </span>
-                    <SmileIcon width={100} height={100} />
+                    <SmileIcon width="6.25rem" height="6.25rem" />
                 </div>
                 <button className="rounded-lg h-12 w-3/4 text-white bg-[#FF9575] py-3">프로필 수정</button>
             </div>
             <div className="grid border-b gap-4 w-full py-8 border-gray-300">
                 <SettingItem text="서비스 이용약관">
-                    <ServiceTermIcon height={32} width={32} />
+                    <ServiceTermIcon height="2rem" width="2rem" />
                 </SettingItem>
                 <SettingItem text="개인정보 처리방침">
-                    <PrivacyPolicyIcon height={32} width={32} />
+                    <PrivacyPolicyIcon height="2rem" width="2rem" />
                 </SettingItem>
                 <SettingItem text="문의하기">
-                    <EnquiryIcon height={32} width={32} />
+                    <EnquiryIcon height="2rem" width="2rem" />
                 </SettingItem>
             </div>
             <div className="grid gap-4 w-full py-8">
                 <SettingItem text="로그아웃" onClick={logoutToggle}>
-                    <LogoutIcon width={32} height={32} />
+                    <LogoutIcon width="2rem" height="2rem" />
                 </SettingItem>
                 <SettingItem text="회원 탈퇴" onClick={() => onDeleteModalClose(true)}>
-                    <DeleteAccountIcon width={32} height={32} />
+                    <DeleteAccountIcon width="2rem" height="2rem" />
                 </SettingItem>
             </div>
             <DeleteAccountModal isOpen={isDeleteModal} onClose={() => onDeleteModalClose(false)} />

apps/web/src/app/globals.css

@@ -14,8 +14,18 @@
     }
 }
 
-body {
+html {
     color: var(--foreground);
     background: var(--background);
     font-family: Arial, Helvetica, sans-serif;
+
+    @media (max-width: 981px) {
+        font-size: 95%;
+    }
+    @media (max-width: 640px) {
+        font-size: 90%;
+    }
+    @media (max-width: 375px) {
+        font-size: 80%;
+    }
 }

apps/web/src/components/events/categoryItem.tsx

@@ -21,22 +21,22 @@ export function CategoryItem({ category, isFavorites }: Props) {
     if (category.code === CategoryCode.MYEVENT) {
         return (
             <Link className="flex flex-row w-full items-center justify-start p-4 gap-4" href={`/events/category`} onClick={onClick}>
-                <WrittenCategoryIcon width={40} height={40} />
+                <WrittenCategoryIcon width="2.5rem" height="2.5rem" />
                 <div className="text-3xl text-center">{category.title}</div>
             </Link>
         )
     } else if (category.code === CategoryCode.HOTEVENT) {
         return (
             <Link className="flex flex-row w-full items-center justify-start p-4 gap-4" href={`/events/category`} onClick={onClick}>
-                <HottestCategoryIcon width={40} height={40} />
+                <HottestCategoryIcon width="2.5rem" height="2.5rem" />
                 <div className="text-3xl text-center">{category.title}</div>
             </Link>
         )
     } else {
         // TODO: add logic making to Favorites
         return (
             <Link className="flex flex-row w-full items-center justify-start p-4 gap-4" href={`/events/category`} onClick={onClick}>
-                <BaseCategoryIcon width={40} height={40} isFavorites={isFavorites} />
+                <BaseCategoryIcon width="2.5rem" height="2.5rem" isFavorites={isFavorites} />
                 <div className="text-3xl text-center pt-1">{category.title}</div>
             </Link>
         )

apps/web/src/components/events/eventDetail.tsx

@@ -54,22 +54,22 @@ export default function EventDetail({ event }: Props) {
                 </div>
 
                 <div className="mt-6">
-                    <p className="text-sm text-gray-700 whitespace-pre-wrap">{event.description}</p>
+                    <p className="text-sm text-gray-700 whitespace-pre-wrap break-all">{event.description}</p>
                 </div>
             </div>
             <div className="flex justify-between p-4 mt-4 pt-4 border-t border-gray-200">
                 {/* TODO: add like function */}
                 <button className="flex items-center space-x-3">
-                    <UnlikeIcon width={20} height={20} />
+                    <UnlikeIcon width="1.25rem" height="1.25rem" />
                     <span className="text-sm">{event.likeCount}</span>
                 </button>
                 <div className="flex items-center space-x-3">
-                    <CommentIcon width={20} height={20} />
+                    <CommentIcon width="1.25rem" height="1.25rem" />
                     <div className="text-sm">{event.commentCount}</div>
                 </div>
                 {/* TODO: add share function */}
                 <button className="flex items-center space-x-2">
-                    <ShareIcon width={20} height={20} />
+                    <ShareIcon width="1.25rem" height="1.25rem" />
                     <div className="text-sm">공유하기</div>
                 </button>
             </div>

apps/web/src/components/events/eventForm.tsx

@@ -113,7 +113,7 @@ const EventForm: React.FC<EventFormProps> = ({ selectedCategories, photos, initE
                     ))}
                 </div>
                 <button type="button" onClick={initEvent ? handleUpdateCategorySelect : handleCategorySelect} className="text-blue-500 ml-auto">
-                    <ArrowIcon width={24} height={24} />
+                    <ArrowIcon width="1.5rem" height="1.5rem" />
                 </button>
             </div>
             <EventTimeSelector

apps/web/src/components/events/eventMap.tsx

@@ -7,7 +7,7 @@ export interface Props {
 
 export function EventMap({ lng, lat }: Props) {
     return (
-        <Map center={{ lat: lat, lng: lng }} style={{ width: '100%', height: '200px' }}>
+        <Map center={{ lat: lat, lng: lng }} style={{ width: '100%', height: '12.5rem' }}>
             <MapMarker position={{ lat: lat, lng: lng }} />
         </Map>
     )

apps/web/src/components/header/logo.tsx

@@ -2,14 +2,14 @@ import { NotificationIcon, TextLogo } from '@/components/icon'
 
 export function LogoHeader() {
     return (
-        <div className="flex flex-row w-full items-center justify-between bg-white pt-10 p-2">
+        <div className="flex flex-row w-full h-[6.25rem] items-center justify-between bg-white pt-10 p-2">
             <div className="ps-4">
-                <TextLogo width={150} height={48} />
+                <TextLogo width="9.375rem" height="3rem" />
             </div>
             <div className="flex flex-row pe-4 gap-4">
                 {/*TODO: navigate to notification page*/}
                 <button type="button">
-                    <NotificationIcon width={36} height={36} />
+                    <NotificationIcon width="2.25rem" height="2.25rem" />
                 </button>
             </div>
         </div>

apps/web/src/components/header/pageTitle.tsx

@@ -21,9 +21,9 @@ export function PageTitleHeader() {
     }
 
     return (
-        <div className="flex flex-row items-center w-full bg-white pt-10 p-2">
+        <div className="flex flex-row items-center w-full h-[6.25rem] bg-white pt-4 p-2">
             <button className="absolute z-1 ps-4" onClick={onClick}>
-                <BackButtonIcon width={30} height={30} />
+                <BackButtonIcon width="1.75rem" height="1.75rem" />
             </button>
             <span className="text-3xl text-center font-semibold w-full">{title}</span>
         </div>

apps/web/src/components/icon/icon.tsx

@@ -1,6 +1,6 @@
 export interface IconProps {
-    width: number
-    height: number
+    width: string
+    height: string
 }
 
 interface BaseCategoryProps extends IconProps {

apps/web/src/components/modal.tsx

@@ -15,7 +15,7 @@ export function FullScreenDialog({ isOpen, onClose, hasClose, children }: Props)
                         ${isOpen ? 'translate-y-[2rem]' : 'translate-y-full'} transition-transform duration-300 p-6`}
         >
             <button className={`${hasClose ? '' : 'hidden'} flex justify-start w-full mb-4`} onClick={onClose}>
-                <CloseIcon width={24} height={24} />
+                <CloseIcon width="1.5rem" height="1.5rem" />
             </button>
             {children}
         </div>

apps/web/src/components/navigation/navigation.tsx

@@ -29,7 +29,7 @@ export function Navigation() {
     return (
         <div className="flex flex-col items-center justify-center w-full">
             <div
-                className={`fixed grid grid-cols-2 w-48 h-48 z-30 bg-white rounded-full shadow-[0_-1px_4px_rgba(0,0,0,0.25)] transition-all duration-700 pb-16 ${isVisible ? 'opacity-100 -translate-y-16' : 'opacity-0 translate-y-10'}`}
+                className={`fixed grid grid-cols-2 w-48 h-48 z-30 bg-white rounded-full shadow-[0_-1px_4px_rgba(0,0,0,0.25)] transition-all duration-700 pb-16 ${isVisible ? 'opacity-100 -translate-y-[4rem]' : 'opacity-0 translate-y-10'}`}
             >
                 <div className="absolute top-5 h-1/3 left-1/2 w-[1px] bg-gray-300" />
                 <NavigationItem
@@ -40,32 +40,32 @@ export function Navigation() {
                         handleEventRegisterClick()
                     }}
                 >
-                    <AddEventButtonIcon width={32} height={32} />
+                    <AddEventButtonIcon width="2rem" height="2rem" />
                 </NavigationItem>
-                <NavigationItem uri={'/schedules/register'} text={'일정 등록'} isClicked={false} onClick={() => setTitle('일정 등록')}>
-                    <AddScheduleButtonIcon width={32} height={32} />
+                <NavigationItem uri={'/schedule/register'} text={'일정 등록'} isClicked={false} onClick={() => setTitle('일정 등록')}>
+                    <AddScheduleButtonIcon width="2rem" height="2rem" />
                 </NavigationItem>
             </div>
-            <div className="grid h-32 max-w-lg grid-cols-5 mx-auto font-medium bg-white shadow-[0_-1px_4px_rgba(0,0,0,0.25)] z-40">
+            <div className="grid h-28 w-full grid-cols-5 mx-auto font-medium bg-white shadow-[0_-1px_4px_rgba(0,0,0,0.25)] z-40">
                 <NavigationItem uri={'/'} text={'홈'} isClicked={pathname === '/'}>
-                    <HomeNavigationIcon isClicked={pathname === '/'} width={48} height={48} />
+                    <HomeNavigationIcon isClicked={pathname === '/'} width="3rem" height="3rem" />
                 </NavigationItem>
                 <NavigationItem uri={'/schedules'} text={'캘린더'} isClicked={pathname === '/schedules'}>
-                    <CalenderNavigationIcon isClicked={pathname === '/schedules'} width={48} height={48} />
+                    <CalenderNavigationIcon isClicked={pathname === '/schedules'} width="3rem" height="3rem" />
                 </NavigationItem>
                 <div className="inline-flex flex-col items-center justify-center p-2">
                     <button
                         className="w-20 h-20 inline-flex flex-col items-center justify-center bg-transparent shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-full"
                         onClick={() => setIsVisible(!isVisible)}
                     >
-                        <NavigationPlusIcon width={22} height={22} />
+                        <NavigationPlusIcon width="1.375rem" height="1.375rem" />
                     </button>
                 </div>
                 <NavigationItem uri={'/events'} text={'카테고리'} isClicked={pathname === '/events'}>
-                    <CategoryNavigationIcon isClicked={pathname === '/events'} width={48} height={48} />
+                    <CategoryNavigationIcon isClicked={pathname === '/events'} width="3rem" height="3rem" />
                 </NavigationItem>
                 <NavigationItem uri={'/setting'} text={'마이페이지'} isClicked={pathname === '/setting'}>
-                    <MyInfoNavigationIcon isClicked={pathname === '/setting'} width={48} height={48} />
+                    <MyInfoNavigationIcon isClicked={pathname === '/setting'} width="3rem" height="3rem" />
                 </NavigationItem>
             </div>
         </div>

apps/web/src/components/searchBar.tsx

@@ -30,7 +30,7 @@ export default function SearchBar() {
                 })}
             />
             <button type="submit" disabled={isSubmitting}>
-                <SearchIcon width={32} height={32} />
+                <SearchIcon width="2rem" height="2rem" />
             </button>
         </form>
     )