From 125aea8c45ebeeae10abb4e4b239377bc1fbac41 Mon Sep 17 00:00:00 2001 From: Jisu0528 <71203375+Jisu0528@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:44:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?design:=20Front=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC=ED=98=84=20#21=20-?= =?UTF-8?q?=20RecommendWorkItem=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20-=20RecommendWorkList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontWork/RecommendWorkItem.jsx | 82 +++++++++++ .../frontWork/RecommendWorkList.jsx | 35 +++++ src/pages/FrontWork.jsx | 129 +++++++++++++++++- 3 files changed, 245 insertions(+), 1 deletion(-) create mode 100644 src/components/frontWork/RecommendWorkItem.jsx create mode 100644 src/components/frontWork/RecommendWorkList.jsx diff --git a/src/components/frontWork/RecommendWorkItem.jsx b/src/components/frontWork/RecommendWorkItem.jsx new file mode 100644 index 0000000..1ef3207 --- /dev/null +++ b/src/components/frontWork/RecommendWorkItem.jsx @@ -0,0 +1,82 @@ +import styled from "styled-components"; +import UserIcon from "../../assets/people.png"; +import LikeIcon from "../../assets/heart.png"; +import CmtIcon from "../../assets/chat.png"; +import StartIcon from "../../assets/Btn_start.png"; + +export default function RecommendWorkItem() { + return ( + + + 정보처리기사 실기_2023 + 91문제 + + + + + + + 소밍밍 + + + + 28 + + + + 04 + + + {/* 학습하기 버튼 클릭시 해당 문제집으로 이동 */} + + + + ); +} + +const Wrapper = styled.div` + width: 482px; + height: 106px; + background-color: #24252b; + border: 1px solid #555555; + border-radius: 6px; + padding: 20px; +`; + +const Container = styled.div` + display: flex; + justify-content: space-between; +`; + +const UserInfo = styled.div` + display: flex; + align-items: center; +`; + +const UserImage = styled.img` + margin-right: 7px; +`; + +const UserName = styled.div` + magin-right: 20px; + font-size: 16px; +`; + +const Stat = styled.div` + display: flex; + align-items: center; + margin-right: 20px; + font-size: 16px; +`; + +const ItemInfo = styled.div` + display: flex; + align-items: center; + text-align: left; + margin-bottom: 20px; + margin-top: 20px; +`; + +const Title = styled.div` + margin-right: 36px; +`; \ No newline at end of file diff --git a/src/components/frontWork/RecommendWorkList.jsx b/src/components/frontWork/RecommendWorkList.jsx new file mode 100644 index 0000000..ce4eeb6 --- /dev/null +++ b/src/components/frontWork/RecommendWorkList.jsx @@ -0,0 +1,35 @@ +import styled from "styled-components"; +import RecommendItem from "./RecommendWorkItem"; + +export default function RecommendWorkList() { + const recommdItems = Array(6).fill(null); // 6개 추천 문제집 + // 추천 기능을 구현 안해서 우선은 6개를 렌더링했음 + + return ( + + 추천 문제집 + + {recommdItems.map((_, index) => ( + + ))} + + + ); +} + +const Container = styled.div` + margin-top: 90px; +`; + +const Title = styled.div` + font-size: 22px; + font-weight: 600; + margin-bottom: 30px; +`; + +const ItemBox = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 22px; + margin-bottom: 10px; +`; diff --git a/src/pages/FrontWork.jsx b/src/pages/FrontWork.jsx index 03796f1..a334eac 100644 --- a/src/pages/FrontWork.jsx +++ b/src/pages/FrontWork.jsx @@ -1,5 +1,132 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; +import "../assets/fonts/font.css"; +import RecommendList from "../components/frontWork/RecommendWorkList"; +import PlusModal from "../components/studyroomWork/PlusModal"; +import ShareModal from "../components/studyroomWork/ShareModal"; + const FrontWork = () => { - return
프론트엔드 문제 페이지입니다.
; + return ( + + + <WorkListLink to="/front/:worklistid">정보처리기사 실기_2023 문제집</WorkListLink> + {" > "}21번 문제제목{""} + + Q. + 문제 예시 입력 브라우저에서 렌더 트리를 구축하는 과정은 어떻게 될까요? + + + + + + A. + + + + 제출 + + + + + ); }; +const Wrapper = styled.div` + max-width: 1090px; + margin: 0 auto; +`; + +const Title = styled.div` + font-size: 14.5px; + color: #c9c9c9; + margin-bottom: 45px; +`; + +const WorkListLink = styled(Link)` + text-decoration: none; + color: #c9c9c9; + + &:hover { + color: white; + } +`; + +const Question = styled.div` + color: #5263ff; + font-size: 35px; + font-weight: 400; + font-family: "Unbounded"; +`; + +const QContent = styled.div` + margin-top: 30px; + margin-bottom: 30px; + font-size: 17px; +`; + +const Line = styled.div` + width: 1090px; + border: 1px solid #868686; + margin-top: 15px; + margin-bottom: 26px; +`; + +const Buttons = styled.div` + display: flex; + justify-content: right; + align-items: left; + text-align: left; +`; + +const Answer = styled.div` + color: #5263ff; + font-size: 35px; + font-weight: 400; + font-family: "Unbounded"; + margin-top: 15px; +`; + +const ABox = styled.div` + width: 1090px; + height: 158px; + background-color: #3f424e; + display: flex; + align-items: center; + text-align: center; + margin-top: 20px; +`; + +const ATextArea = styled.textarea` + flex: 1; + width: 958px; + height: 95px; + margin-right: 5px; + margin-left: 10px; + background-color: #8f8f8f; + border: 1px solid #dddddd; + border-radius: 6px; + padding: 10px; + + &::placeholder { + font-size: 15px; + padding: 5px; + color: #000000; + } +`; + +const AButton = styled(Link)` + width: 91px; + height: 114px; + border: none; + border-radius: 6px; + background-color: #a7a7a7; + margin-right: 10px; + text-decoration: none; + font-size: 15px; + color: #000000; + display: flex; + align-items: center; + justify-content: center; +`; + export default FrontWork; From 22f104f08c219f8a10616b34212a88c159762030 Mon Sep 17 00:00:00 2001 From: Jisu0528 <71203375+Jisu0528@users.noreply.github.com> Date: Wed, 18 Oct 2023 20:46:30 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20useModal=20position=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#21=20-=20absolute=EC=97=90=EC=84=9C=20fixed?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20-=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=EC=9D=B8=20=EA=B8=B4=20=EA=B2=BD=EC=9A=B0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=83=81=EB=8B=A8=EC=9D=B4=20=EC=95=84?= =?UTF-8?q?=EB=8B=8C=20=ED=98=84=EC=9E=AC=20=ED=99=94=EB=A9=B4=20=EC=83=81?= =?UTF-8?q?=EB=8B=A8=EC=97=90=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useModal.js b/src/hooks/useModal.js index 6ee4c57..5e330f7 100644 --- a/src/hooks/useModal.js +++ b/src/hooks/useModal.js @@ -61,7 +61,7 @@ const Background = styled.div` `; const ModalBlock = styled.div` - position: absolute; + position: fixed; top: 6.5rem; border-radius: 13px; padding: 1.5rem;