마이페이지 반응형 변경

모바일 퍼스트로 작업을 한 후 데스크탑 시안을 반영하고 있다.
내가 맡았던 마이페이지부분을 먼저 반영하려고 한다.

✨ 나의 환경

tailwind css + Next.js 14 + typescript

---

🌼 진행과정

• tailwind.config.ts에서 mobile과 desktop일 때 좀 더 편리하게 구분하여 사용할 수 있도록 px지정

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      screens: {
        desktop: '1440px',
        mobile: '375px',
      },
      maxWidth: {
        desktop: '1440px',
        mobile: '375px',
      },
      ~~~
      
  },
  plugins: [],
};
export default config;

💥 아예 위치가 바뀌는 요소

• 반복되는 부분 컴포넌트화
• hidden으로 관리

  <div className='w-full mx-auto '>
      <div className='w-[90%] mx-auto pt-4  pb-1 '>
        <div className='w-full desktop:flex desktop:flex-row mobile:flex mobile:flex-col desktop:mb-20'>
          {user ? (
            <div className='desktop:h-[228px] desktop:w-[448px] flex  desktop:flex-[2] flex-col desktop:mr-6 desktop:justify-between '>
              <div className='w-full flex items-center  desktop:gap-6 desktop:pl-4 desktop:pr-4  desktop:pt-6 mobile:p-4 mobile:gap-4'>
                <div className='rounded-full mobile:w-[48px] mobile:h-[48px] desktop:w-[80px] desktop:h-[80px] overflow-hidden position: relative '>
                  <Image
                    src={profileUrl}
                    fill
                    alt='profileImage'
                    className='object-cover'
                    priority
                  />
                </div>
                <div className='flex flex-col'>
                  <h2 className='font-bold text-[16px] desktop:text-[24px]'>{user?.user?.user_metadata?.full_name}</h2>
                  <p className='text-[14px] desktop:text-[20px] color-gray-500'>{user?.user?.user_metadata?.email}</p>
                </div>
              </div>
              <div className='hidden desktop:block'>
                <SetPrivateInvitation />
              </div>
            </div>
          ) : (
            <div>정보가 없습니다</div>
          )}

          <MyInvitationCard id={userId} />
        </div>
        <div className='block desktop:hidden'>
          <SetPrivateInvitation />
        </div>
        <MyPageNavigatorList />