Merge pull request #10 from hyundai-autoever-first-project-team3/chae…

…lin3 feat : 챌린지상세
hyundai-autoever-first-project-team3 · Oct 23, 2024 · 9bc95c9 · 9bc95c9
2 parents 8e30508 + 92ea83c
commit 9bc95c9
Show file tree

Hide file tree

Showing 7 changed files with 15,086 additions and 1,023 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/challenge/ChallengeCard.jsx b/src/components/challenge/ChallengeCard.jsx
@@ -1,4 +1,7 @@
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { faMedal } from "@fortawesome/free-solid-svg-icons";
 
 const ChallengeCard = () => {
   const tags = ["백준-동전", "프로그래머스-등굣길", "LeetCode-Prefix"];

diff --git a/src/components/challenge/ProblemCard.jsx b/src/components/challenge/ProblemCard.jsx
@@ -5,28 +5,59 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMedal } from "@fortawesome/free-solid-svg-icons";
 
 const ProblemCard = () => {
-  const tags = ["백준-동전", "프로그래머스-등굣길", "LeetCode-Prefix"];
+  const tags = ["hard", "medium", "easy"];
   return (
-    <div className="flex flex-col justify-between min-h-40 h-full shadow-md rounded-md p-4 border">
-      <div className="flex flex-col ">
-        <div className="flex flex-row justify-end">
-          <FontAwesomeIcon icon={faMedal} style={{ color: "#FFD43B" }} />
+    <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="text-xl font-semibold mb-2">경로찾기</div>
+          <div className="text-lg">백준</div>
+          <div className="text- lg">{tags[0]}</div>
         </div>
-        <div className="text-lg font-semibold">BFS/DFS 알고리즘</div>
-        <div className="flex flex-row flex-wrap gap-2">
-          {tags.map((item) => (
-            <div className="text-sm">#{item}</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" }}
+            >
+              문제링크
+            </Button>
+            <Button
+              className="my-2"
+              variant="contained"
+              color="success"
+              style={{ borderRadius: "1rem" }}
+            >
+              토론방
+            </Button>
+          </div>
         </div>
       </div>
-      <div className="flex flex-row justify-end">
-        <div>
+
+      <div className="absolute top-0 right-5">
+        <FontAwesomeIcon
+          icon={faMedal}
+          style={{ color: "#FFD43B" }}
+          className="fa-4x"
+        />
+      </div>
+      {/* justify-between min-h-40 h-full shadow-md rounded-md p-4 border */}
+      {/* 아이콘 */}
+      {/* <div className="flex flex-row justify-end">
+        <FontAwesomeIcon icon={faMedal} style={{ color: "#FFD43B" }} />
+      </div> */}
+
+      {/* 버튼 */}
+      {/* <div>
           <Button
             variant="outlined"
             color="success"
             style={{ borderRadius: "1rem" }}
           >
-            챌린지방?
+            질문방
           </Button>
           <Button
             variant="contained"
@@ -35,13 +66,7 @@ const ProblemCard = () => {
           >
             도전하기
           </Button>
-        </div>
-      </div>
-
-      <div className="flex flex-col">
-        <div className="text-base">조회수 {234}</div>
-        <div className="text-base font-thin text-gray-3">2024년 10월 18일</div>
-      </div>
+        </div> */}
     </div>
   );
 };

diff --git a/src/components/postdetail/Footer.jsx b/src/components/postdetail/Footer.jsx
@@ -5,7 +5,7 @@ import { Button } from "@mui/material";
 function Footer() {
   return (
     <div>
-      <div className="flex flex-row justify-between items-center mb-40 h-32 ">
+      <div className="flex flex-row justify-between items-center my-20 h-32 ">
         <div className="flex flex-row items-center">
           <img
             className="size-32 rounded-full"

diff --git a/src/components/postdetail/InfoBar.jsx b/src/components/postdetail/InfoBar.jsx
@@ -1,18 +1,11 @@
 import React from "react";
-import Button from "@mui/material/Button";
+import { Button, IconButton } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 
 function InfoBar() {
   return (
     <div>
-      <div
-        className="info"
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
+      <div className="flex justify-between items-center">
         <div>
           <span className="font-bold" style={{ marginRight: "1rem" }}>
             고채린
@@ -21,11 +14,11 @@ function InfoBar() {
         </div>
         <Button
           variant="outlined"
-          color="success"
-          style={{ borderRadius: "1rem" }}
+          color="#eee"
+          startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
+          sx={{ borderRadius: "1rem" }}
         >
-          <FavoriteIcon />
-          카운트
+          101
         </Button>
       </div>
     </div>

diff --git a/src/pages/ChallengePage.jsx b/src/pages/ChallengePage.jsx
@@ -2,18 +2,22 @@ import React from "react";
 import ChallengeCard from "../components/challenge/ChallengeCard";
 import Header from "../components/common/Header";
 import PageContainer from "../components/common/PageContainer";
+import ProblemCard from "../components/challenge/ProblemCard";
 
 const ChallengePage = () => {
   return (
     <div>
-      <PageContainer>
+      <PageContainer className="xl:px-[150px] lg:px-[100px] md:px-50 sm:px-10">
+        {/* <PageContainer className="xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3"> */}
         <Header />
-        <div className="flex text-5xl font-extrabold py-10 mb-32 justify-center">
+        <div className="flex text-5xl font-extrabold py-6 ">
           오늘의 챌린지 문제
         </div>
-        <ChallengeCard />
-        <ChallengeCard />
-        <ChallengeCard />
+        <div className="text-3xl mb-10">2024년 10월 22일</div>
+
+        <ProblemCard />
+        <ProblemCard />
+        <ProblemCard />
       </PageContainer>
     </div>
   );

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -3,38 +3,36 @@ import Header from "../components/common/Header";
 import InfoBar from "../components/postdetail/InfoBar";
 import PageContainer from "../components/common/PageContainer";
 import Pagination from "@mui/material/Pagination";
-import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 import Footer from "../components/postdetail/Footer";
+import { Tag } from "@mui/icons-material";
 
 const PostDetailPage = () => {
   return (
     <div>
       <Header />
       <PageContainer className="xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3">
-        <h1
-          className="text-5xl font-extrabold"
-          style={{ marginBottom: "2rem" }}
-        >
+        <h1 className="text-5xl font-extrabold mb-8 mt-10 lg:mt-20">
           글제목 Lorem ipsum dolor sit amet.
         </h1>
         <InfoBar />
         <div className="tagwrap">
-          <Button
+          <Chip
+            icon={<Tag />}
+            label="DFS"
             variant="outlined"
             color="success"
-            style={{ borderRadius: "1rem", margin: "1rem" }}
-          >
-            #DFS
-          </Button>
-          <Button
+            className="m-1 my-2"
+          />
+          <Chip
+            icon={<Tag />}
+            label="BFS"
             variant="outlined"
             color="success"
-            style={{ borderRadius: "1rem" }}
-          >
-            #BFS
-          </Button>
+            className="m-1 my-2"
+          />
         </div>
-        <div>
+        <div className="mt-10">
           <span className="text-lg">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo at aut
             dolor quidem quam iste impedit ipsa nihil consequuntur deserunt
@@ -51,7 +49,7 @@ const PostDetailPage = () => {
           />
         </div>
         <Footer />
-        <div className="flex items-center justify-center w-full">
+        <div className="flex items-center justify-center w-full my-10">
           <Pagination count={10} color="success" />
         </div>
       </PageContainer>