feat: 챌린지 상세 반응형 수정

hyundai-autoever-first-project-team3 · Oct 30, 2024 · 8b2bb8b · 8b2bb8b
1 parent bfa546f
commit 8b2bb8b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 28 deletions.
diff --git a/src/components/challenge/ProblemCard.jsx b/src/components/challenge/ProblemCard.jsx
@@ -18,36 +18,30 @@ const ProblemCard = ({
 
   return (
     <div className="relative flex min-h-30 justify-between h-full py-5 px-3 my-5 border-2 p-2 rounded-lg shadow-sm">
-      <div className="flex flex-row justify-between w-5/6">
-        <div className="flex flex-col px-3">
+      <div className="flex flex-col justify-between w-5/6 gap-2 px-2 sm:flex-row sm:gap-0">
+        <div className="flex flex-col">
           <div className="text-xl font-semibold mb-2">{title}</div>
           <div className="text-lg">{siteKinds}</div>
           <div className="text- lg">{level}</div>
         </div>
 
-        <div className="flex flex-row items-center ">
-          <div className="flex flex-col mx-4 gap-2">
-            <Button
-              className="my-2"
-              variant="outlined"
-              color="success"
-              style={{ borderRadius: "1rem" }}
-              onClick={() => window.open(site)}
-            >
-              문제링크
-            </Button>
-            <Button
-              className="my-2"
-              variant="contained"
-              color="success"
-              style={{ borderRadius: "1rem" }}
-              onClick={() =>
-                navigate(`/challenges/${challengeId}/problems/${problemId}`)
-              }
-            >
-              토론방
-            </Button>
-          </div>
+        <div className="flex flex-col gap-2">
+          <Button
+            variant="outlined"
+            color="success"
+            onClick={() => window.open(site)}
+          >
+            문제링크
+          </Button>
+          <Button
+            variant="contained"
+            color="success"
+            onClick={() =>
+              navigate(`/challenges/${challengeId}/problems/${problemId}`)
+            }
+          >
+            토론방
+          </Button>
         </div>
       </div>
 

diff --git a/src/pages/ChallengePage.jsx b/src/pages/ChallengePage.jsx
@@ -20,14 +20,14 @@ const ChallengePage = () => {
   return (
     <>
       <Header />
-      <PageContainer className="px-2 xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3 pt-3">
-        <div className="flex text-5xl font-extrabold py-6 ">
+      <PageContainer className="px-2 pt-1 xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3 sm:pt-3">
+        <div className="flex text-3xl sm:text-4xl font-extrabold py-1 sm:py-3">
           오늘의 챌린지 문제
         </div>
         {isLoading ? (
           <Skeleton variant="text" className="min-h-[50px] w-[200px]" />
         ) : (
-          <div className="text-3xl mb-10">{formattedDate}</div>
+          <div className="text-xl sm:text-3xl sm:mb-10">{formattedDate}</div>
         )}
         <div>
           {isLoading ? (

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -32,6 +32,7 @@ const PostDetailPage = () => {
     if (postId) {
       refetch();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [postId]); // postsDetail 의존성 제거
 
   return (