[UI] Front 문제집의 문제 학습 페이지 UI 구현 (#21)

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 (
+    <Wrapper>
+      <ItemInfo>
+        <Title>정보처리기사 실기_2023</Title>
+        <span>91문제</span>
+      </ItemInfo>
+
+      <Container>
+        <UserInfo>
+          <Stat>
+            <UserImage src={UserIcon} alt="user" />
+            <UserName>소밍밍</UserName>
+          </Stat>
+          <Stat>
+            <UserImage src={LikeIcon} alt="like" />
+            28
+          </Stat>
+          <Stat>
+            <UserImage src={CmtIcon} alt="comment" />
+            04
+          </Stat>
+        </UserInfo>
+        {/* 학습하기 버튼 클릭시 해당 문제집으로 이동 */}
+        <UserImage src={StartIcon} alt="start" />
+      </Container>
+    </Wrapper>
+  );
+}
+
+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;
+`;

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 (
+    <Container>
+      <Title>추천 문제집</Title>
+      <ItemBox>
+        {recommdItems.map((_, index) => (
+          <RecommendItem key={index} />
+        ))}
+      </ItemBox>
+    </Container>
+  );
+}
+
+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;
+`;

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 <div>프론트엔드 문제 페이지입니다.</div>;
+  return (
+    <Wrapper>
+      <Title>
+        <WorkListLink to="/front/:worklistid">정보처리기사 실기_2023 문제집</WorkListLink>
+        {" > "}21번 문제제목{""}
+      </Title>
+      <Question>Q.</Question>
+      <QContent>문제 예시 입력 브라우저에서 렌더 트리를 구축하는 과정은 어떻게 될까요?</QContent>
+      <Line />
+      <Buttons>
+        <PlusModal />
+        <ShareModal />
+      </Buttons>
+      <Answer>A.</Answer>
+      <ABox>
+        <ATextArea placeholder="정답을 입력해주세요" type="text-area" />
+        <AButton to="/front/:worklistid/:workid/answer">
+          제출
+        </AButton>
+      </ABox>
+      <RecommendList />
+    </Wrapper>
+  );
 };
 
+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;