Hotfix/#267 mobile UI

src/features/bookmark-selected/bookmark-selected-list.tsx

@@ -20,11 +20,11 @@ const BookmarkSelectedList = () => {
 
   const targetRef = useInfiniteScroll({ fetchNextPage, hasNextPage });
 
-  if (!userId) return <ErrorComponent />;
+  if (!userId) return;
 
   if (isPending || status === 'loading') {
     return (
-      <section className='flex h-[70dvh] flex-col items-center justify-center'>
+      <section className='flex w-full flex-col items-center justify-center'>
         <LoadingAnimation />
       </section>
     );

src/features/character/character-detail-modal.tsx

@@ -26,7 +26,7 @@ const CharacterDetailModal = ({ session }: Props) => {
 
   if (isPending) {
     return (
-      <div className='flex h-full w-full items-center justify-center'>
+      <div className='flex w-full items-center justify-center'>
         <LoadingAnimation />
       </div>
     );

src/features/interview-history/interview-history-list.tsx

@@ -32,7 +32,7 @@ const InterviewHistoryList = () => {
 
   if (isPending)
     return (
-      <div className='flex h-full items-center justify-center'>
+      <div className='flex items-center justify-center'>
         <LoadingAnimation />
       </div>
     );

src/features/interview/select-interviewer-box.tsx

@@ -118,13 +118,13 @@ const SelectInterviewerBox = ({ session }: Props) => {
       <section className='hidden w-full flex-wrap items-center justify-center gap-5 mobile:flex'>
         <div
           onClick={() => setInterviewType(CALM)}
-          className={`w-54 h-36 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border ${interviewType === CALM ? activeClass : deActiveClass}`}
+          className={`aspect-[6/4] w-[220px] cursor-pointer overflow-hidden rounded-lg border ${interviewType === CALM ? activeClass : deActiveClass}`}
         >
           <LottieAnimation active={interviewType === CALM} animationData={Sunset} />
         </div>
         <div
           onClick={() => setInterviewType(PRESSURE)}
-          className={`w-54 h-36 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border ${interviewType === PRESSURE ? activeClass : deActiveClass}`}
+          className={`aspect-[6/4] w-[220px] cursor-pointer overflow-hidden rounded-lg border ${interviewType === PRESSURE ? activeClass : deActiveClass}`}
         >
           <LottieAnimation active={interviewType === PRESSURE} animationData={Pressure} />
         </div>

src/features/job/job-postings-box.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import LoadingAnimation from '@/components/common/loading-animation';
-import Typography from '@/components/ui/typography';
 import { PATH } from '@/constants/path-constant';
 import { QUERY_KEY } from '@/constants/query-key';
 import { useJobPostingQuery } from '@/features/job/hooks/use-job-posting-query';
@@ -14,7 +13,7 @@ import { sanitizeQueryParams } from '@/utils/sanitize-query-params';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ChangeEvent, useEffect, useState } from 'react';
-import SaraminButton from './saramin-button';
+import SaraminButton from '@/features/job/saramin-button';
 
 type Props = {
   userId: string;
@@ -62,7 +61,6 @@ const JobPostingsBox = ({ userId }: Props) => {
     return (
       <section className='flex h-[400px] flex-col items-center justify-center gap-4 self-stretch'>
         <LoadingAnimation />
-        <Typography>채용 공고를 불러오는 중...</Typography>
       </section>
     );
   }

src/features/resume-list/resume-list.tsx

@@ -19,7 +19,7 @@ const ResumeList = () => {
 
   if (isPending) {
     return (
-      <div className='flex h-[70dvh] items-center justify-center'>
+      <div className='flex items-center justify-center'>
         <LoadingAnimation />
       </div>
     );