Merge pull request #11 from DS-UMC-7th/feature/#3-review

Feature/#3 review
DS-UMC-7th · Nov 23, 2024 · 461a3a6 · 461a3a6
2 parents 8dcf11b + 8d59f2f
commit 461a3a6
Show file tree

Hide file tree

Showing 15 changed files with 400 additions and 10 deletions.
diff --git a/review/index.html b/review/index.html
@@ -1,11 +1,44 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <!-- 아이콘 이미지 -->
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href="https://font.elice.io/css?family=Elice+DX+Neolli" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Review In Class</title>
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-size: 10px;
+        position: relative;
+      }
+
+      * {
+        margin: 0;
+        box-sizing: border-box;
+      }
+
+      ul,
+      ol {
+        padding: 0;
+      }
+
+      li {
+        list-style: none;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+      input {
+        outline: none;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/review/src/assets/icon/check-11x10.svg b/review/src/assets/icon/check-11x10.svg
diff --git a/review/src/assets/icon/dropdown-down-14x8.svg b/review/src/assets/icon/dropdown-down-14x8.svg
diff --git a/review/src/assets/icon/dropdown-up-14x8.svg b/review/src/assets/icon/dropdown-up-14x8.svg
diff --git a/review/src/assets/icon/star-empty-25x26.png b/review/src/assets/icon/star-empty-25x26.png
diff --git a/review/src/assets/icon/star-filled-25x26.png b/review/src/assets/icon/star-filled-25x26.png
diff --git a/review/src/components/review/review-all/FilterComp.jsx b/review/src/components/review/review-all/FilterComp.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import * as S from "./ReviewAll.style";
+import DropdownDownSvg from "../../../assets/icon/dropdown-down-14x8.svg";
+import DropdownUpSvg from "../../../assets/icon/dropdown-up-14x8.svg";
+import CheckSvg from "../../../assets/icon/check-11x10.svg";
+
+export default function FilterComp({ dropdownTitle, btnWidth }) {
+  const [isSelected, setIsSelected] = useState(false);
+
+  const handleClickBtn = () => {
+    setIsSelected(!isSelected);
+  };
+
+  return (
+    <>
+      <S.DropdownContainer>
+        <S.DropdownBtn onClick={handleClickBtn} $width={btnWidth}>
+          {dropdownTitle}
+          <S.DropdownImg src={isSelected ? DropdownUpSvg : DropdownDownSvg} alt="다운" />
+        </S.DropdownBtn>
+
+        {/* 목록 */}
+        {isSelected && (
+          <S.CheckListContainer $width={btnWidth}>
+            <S.CheckItem>
+              입문자
+              <S.CheckBox $isChecked={true} $imgUrl={CheckSvg}></S.CheckBox>
+            </S.CheckItem>
+            <S.CheckItem>
+              초급자
+              <S.CheckBox $isChecked={false} $imgUrl={CheckSvg}></S.CheckBox>
+            </S.CheckItem>
+            <S.CheckItem>
+              중급자
+              <S.CheckBox $isChecked={false} $imgUrl={CheckSvg}></S.CheckBox>
+            </S.CheckItem>
+            <S.CheckItem>
+              상급자
+              <S.CheckBox $isChecked={false} $imgUrl={CheckSvg}></S.CheckBox>
+            </S.CheckItem>
+          </S.CheckListContainer>
+        )}
+      </S.DropdownContainer>
+    </>
+  );
+}
diff --git a/review/src/components/review/review-all/ReviewAll.style.js b/review/src/components/review/review-all/ReviewAll.style.js
@@ -0,0 +1,156 @@
+import styled, { css } from "styled-components";
+import color from "../../../styles/color";
+import font from "../../../styles/font";
+
+// common
+export const SpaceBetween = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+// ReviewFilter
+export const ReviewFilterContainer = styled.div`
+  padding: 4rem 12.4rem 9rem 12.4rem;
+  ${SpaceBetween}
+`;
+export const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const DropdownContainer = styled.div`
+  position: relative;
+  width: ${(props) => props.$width};
+`;
+// ReviewFilter - 컴포넌트 off
+export const DropdownBtn = styled.button`
+  position: relative;
+
+  margin-right: 1.5rem;
+  padding: 1rem 2rem;
+  width: ${(props) => props.$width};
+
+  background-color: ${color.primary_main};
+  border: none;
+  border-radius: 2.4rem;
+
+  ${font.eli_medium_20}
+  color: ${color.white};
+
+  z-index: 2;
+  cursor: pointer;
+`;
+export const DropdownImg = styled.img`
+  margin-left: 1rem;
+  width: 1.4rem;
+  height: 0.8rem;
+`;
+// ReviewFilter - 컴포넌트 on
+export const CheckListContainer = styled.div`
+  position: absolute;
+  top: 2.1rem;
+  left: 0;
+
+  padding: 2.3rem 1.1rem 2.1rem 1.1rem;
+  width: ${(props) => props.$width};
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  background-color: ${color.white};
+  border: 1px solid ${color.primary_main};
+  border-radius: 0 0 2rem 2rem;
+
+  box-shadow: 0px 7px 5.7px 0px rgba(0, 0, 0, 0.16);
+  z-index: 1;
+`;
+export const CheckItem = styled.div`
+  margin-top: 1.2rem;
+  width: 100%;
+  ${SpaceBetween}
+
+  color: ${color.black};
+  ${font.eli_medium_14}
+
+  cursor: pointer;
+`;
+export const CheckBox = styled.div`
+  margin-left: 0.6rem;
+  width: 1.8rem;
+  height: 1.8rem;
+
+  background-color: ${color.grayscale_f1};
+  border-radius: 0.3rem;
+
+  background-image: url(${(props) => props.$isChecked && props.$imgUrl});
+  background-repeat: no-repeat;
+  background-position: center;
+`;
+// ReviewFilter - 추천순/최신순
+export const AlignText = styled.p`
+  margin-left: 0.5rem;
+
+  ${font.eli_light_20}
+  color: ${(props) => (props.$isSelected ? color.primary_main : color.grayscale_6c)}; //
+
+  cursor: pointer;
+`;
+
+// ReviewCard
+export const ReviewCardContainer = styled.div`
+  margin-bottom: 5.5rem;
+  padding: 6.2rem 12.4rem;
+
+  border-top: 1px solid ${color.primary_main};
+  border-bottom: 1px solid ${color.primary_main};
+  background-color: ${color.review_bg};
+`;
+
+export const ReviewMainContainer = styled.div`
+  ${SpaceBetween}
+`;
+export const ReviewClassTitle = styled.p`
+  ${font.eli_medium_24}
+  color: ${color.primary_main};
+  line-height: 124.9%;
+  letter-spacing: 0.48px;
+`;
+export const ReviewStarList = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+export const ReviewStar = styled.img`
+  width: 2.5rem;
+  height: 2.6rem;
+`;
+
+export const ReviewSubContainer = styled(ReviewMainContainer)`
+  margin-top: 1rem;
+`;
+export const ReviewInfoText = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+export const ReviewInfoTextLeft = styled.p`
+  margin-right: 1.3rem;
+
+  ${font.eli_medium_15}
+  line-height: 124.9%;
+  letter-spacing: 0.3px;
+`;
+export const ReviewInfoTextRight = styled.p`
+  ${font.eli_medium_15}
+  line-height: 124.9%;
+  letter-spacing: 0.3px;
+`;
+
+export const ReviewContentsContainer = styled.div`
+  margin-top: 2.6rem;
+  padding-right: 18.5rem;
+
+  ${font.pre_medium_18}
+  line-height: 176%;
+  letter-spacing: 0.36px;
+`;
diff --git a/review/src/components/review/review-all/ReviewCard.jsx b/review/src/components/review/review-all/ReviewCard.jsx
@@ -0,0 +1,41 @@
+import * as S from "./ReviewAll.style";
+import StarOnPng from "../../../assets/icon/star-filled-25x26.png";
+import StarOffPng from "../../../assets/icon/star-empty-25x26.png";
+
+export default function ReviewCard({
+  reviewTitle,
+  reviewClass,
+  reviewName,
+  reviewDate,
+  reviewContent,
+  reviewStarNum = 5,
+}) {
+  return (
+    <>
+      <S.ReviewCardContainer>
+        <div>
+          <S.ReviewMainContainer>
+            <S.ReviewClassTitle>{reviewTitle}</S.ReviewClassTitle>
+            <S.ReviewStarList>
+              {Array.from({ length: reviewStarNum }, (_, index) => (
+                <S.ReviewStar key={index} src={StarOnPng} alt="채워진 별" />
+              ))}
+              {Array.from({ length: 5 - reviewStarNum }, (_, index) => (
+                <S.ReviewStar key={index} src={StarOffPng} alt="빈 별" />
+              ))}
+            </S.ReviewStarList>
+          </S.ReviewMainContainer>
+          <S.ReviewSubContainer>
+            <S.ReviewInfoText>
+              <S.ReviewInfoTextLeft>{reviewClass}</S.ReviewInfoTextLeft>
+              <S.ReviewInfoTextLeft>|</S.ReviewInfoTextLeft>
+              <S.ReviewInfoTextLeft>{reviewName}</S.ReviewInfoTextLeft>
+            </S.ReviewInfoText>
+            <S.ReviewInfoTextRight>{reviewDate}</S.ReviewInfoTextRight>
+          </S.ReviewSubContainer>
+        </div>
+        <S.ReviewContentsContainer>{reviewContent}</S.ReviewContentsContainer>
+      </S.ReviewCardContainer>
+    </>
+  );
+}
diff --git a/review/src/components/review/review-all/ReviewFilter.jsx b/review/src/components/review/review-all/ReviewFilter.jsx
@@ -0,0 +1,32 @@
+import * as S from "./ReviewAll.style";
+import FilterComp from "./FilterComp";
+import { useState } from "react";
+
+export default function ReviewFilterAlign() {
+  const [alignSelected, setAlignSelected] = useState(1);
+
+  const handleClickAlignBtn = (num) => {
+    setAlignSelected(num);
+  };
+
+  return (
+    <>
+      <S.ReviewFilterContainer>
+        <S.FlexContainer>
+          <FilterComp dropdownTitle="카테고리" btnWidth="14.2rem" />
+          <FilterComp dropdownTitle="난이도" btnWidth="12.3rem" />
+          <FilterComp dropdownTitle="수강 기간" btnWidth="14.5rem" />
+        </S.FlexContainer>
+        <S.FlexContainer>
+          <S.AlignText onClick={() => handleClickAlignBtn(1)} $isSelected={alignSelected === 1}>
+            추천순
+          </S.AlignText>
+          <S.AlignText>|</S.AlignText>
+          <S.AlignText onClick={() => handleClickAlignBtn(2)} $isSelected={alignSelected === 2}>
+            최신순
+          </S.AlignText>
+        </S.FlexContainer>
+      </S.ReviewFilterContainer>
+    </>
+  );
+}
diff --git a/review/src/components/review/review-all/ReviewList.jsx b/review/src/components/review/review-all/ReviewList.jsx
@@ -0,0 +1,30 @@
+import ReviewCard from "./ReviewCard";
+
+export default function ReviewList() {
+  return (
+    <>
+      <ReviewCard
+        reviewTitle="한 입 크기로 잘라먹는 Next.js(15+)"
+        reviewClass="인프런"
+        reviewName="이정환"
+        reviewDate="2024.03.08"
+        reviewContent="제빵일을 하고있지만 구움과자의 섬세함을 배우려면 기초부터 잘 알아야하는데
+        선생님의 스콘 클래스를 듣고나면 혼자 해보면서 ‘왜 이렇게 해야하지?‘ 궁금했던 점을 다
+        알려주세요. 그래서 다른 유튜브나 인스타에서 보이는 레시피를 보아도 기준점이 생겼어요 :)
+        너무 흔하지도, 유행을 따라가지도 않는 맛을 골라주시고 좋은 재료를 사용해서 적당히 달고
+        고소한 버터의 맛이 잘 살아있는 스콘을 경험 할 수 있었어요. 홈베이킹용으로도 사업자용으로도
+        최고의 수업입니다"
+        reviewStarNum={4}
+      />
+      <ReviewCard
+        reviewTitle="두 입 크기로 잘라먹는 Next.js(15+)"
+        reviewClass="클래스101"
+        reviewName="이정인"
+        reviewDate="2024.03.06"
+        reviewContent="무조건 들어야하는 클래스!!! 제 구움과자 스킬은 선생님 클래스를 듣기 전과 후로
+        나뉘어요."
+        reviewStarNum={2}
+      />
+    </>
+  );
+}
diff --git a/review/src/components/review/review-detail/ReviewDetail.style.js b/review/src/components/review/review-detail/ReviewDetail.style.js
@@ -0,0 +1,3 @@
+import styled from "styled-components";
+import color from "../../../styles/color";
+import font from "../../../styles/font";
diff --git a/review/src/pages/Reviews.jsx b/review/src/pages/Reviews.jsx
@@ -1,14 +1,13 @@
-import styled from "styled-components";
+import ReviewFilterAlign from "../components/review/review-all/ReviewFilter";
+import ReviewList from "../components/review/review-all/ReviewList";
 
 const Reviews = () => {
-  return <StyledContent>Reviews Page</StyledContent>;
+  return (
+    <>
+      <ReviewFilterAlign />
+      <ReviewList />
+    </>
+  );
 };
 
 export default Reviews;
-
-const StyledContent = styled.h1`
-  height: 100%;
-  background-color: white;
-  color: black;
-  margin-top: 5px;
-`;