✨ feat: 마이페이지 반응형 적용

boostcampwm-2024 · Dec 4, 2024 · 2594867 · 2594867
1 parent 0f19a3b
commit 2594867
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/frontend/src/pages/my-page/MyPage.tsx b/packages/frontend/src/pages/my-page/MyPage.tsx
@@ -12,7 +12,7 @@ export const MyPage = () => {
   return (
     <div>
       <h1 className="display-bold24 mb-16">마이페이지</h1>
-      <article className="grid h-[40rem] grid-cols-[1.5fr_2.5fr] gap-5">
+      <article className="grid gap-5 lg:h-[40rem] lg:grid-cols-[1.5fr_2.5fr]">
         <section className="grid grid-rows-[1fr_2fr] gap-5">
           <section className="rounded-md bg-white p-7">
             {loginStatus?.message === 'Authenticated' ? (

diff --git a/packages/frontend/src/pages/my-page/StockInfo.tsx b/packages/frontend/src/pages/my-page/StockInfo.tsx
@@ -29,10 +29,10 @@ export const StockInfo = ({ loginStatus }: StockInfoProps) => {
             소유한 주식이 없습니다.
           </p>
         ) : (
-          <article className="grid grid-cols-2 gap-5">
+          <article className="grid gap-5 xl:grid-cols-2">
             {data?.userStocks.map((stock) => (
               <section
-                className="display-bold14 text-dark-gray bg-extra-light-gray flex cursor-pointer justify-between rounded p-10 transition-all duration-300 hover:scale-105"
+                className="display-bold14 text-dark-gray bg-extra-light-gray flex cursor-pointer items-center justify-between rounded px-4 py-2 transition-all duration-300 hover:scale-105 xl:p-8"
                 onClick={() => navigate(`/stocks/${stock.stockId}`)}
               >
                 <p>{stock.name}</p>

diff --git a/packages/frontend/src/pages/my-page/UserInfo.tsx b/packages/frontend/src/pages/my-page/UserInfo.tsx
@@ -19,7 +19,7 @@ export const UserInfo = () => {
 
   return (
     <div className="flex flex-col gap-5">
-      <section className="flex justify-between">
+      <section className="flex flex-col md:flex-row md:justify-between">
         <div className="display-medium14 text-gray flex gap-3">
           <h2 className="display-bold20 text-black">내정보</h2>
           {isEdit ? (