[Feat/#253] 리뷰 컴포넌트 완성 (#255)

* feat: Review 컴포넌트 뷰 완성

* feat: Review 컴포넌트 퍼블리싱 완성

* fix: 코드리뷰 반영

* fix: 코드리뷰 반영

src/components/common/Review/Review.style.ts

@@ -0,0 +1,66 @@
+import { Theme, css } from '@emotion/react';
+
+import { flexGenerator } from '@styles/generator';
+
+export const reviewLayoutStyle = (theme: Theme) => css`
+  ${flexGenerator('column', 'center', 'flex-start')}
+  gap: 2rem;
+  width: 100%;
+  padding: 2rem;
+
+  border-radius: 10px;
+  border: 1px solid ${theme.color.lightgray0};
+  background-color: ${theme.color.white};
+`;
+
+export const reviewContentContainer = css`
+  ${flexGenerator('column', 'center', 'flex-start')}
+  gap: 1rem;
+  width: 100%;
+`;
+
+export const reviewContent = (theme: Theme) => css`
+  color: ${theme.color.midgray2};
+  ${theme.font['body02-r-14']}
+  word-break: break-word;
+`;
+
+export const tagsContainer = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem 0.4rem;
+  width: 100%;
+`;
+
+export const imgAndTitleContainer = css`
+  ${flexGenerator('column')}
+  gap: 1rem;
+  width: 100%;
+`;
+
+export const reviewImgSection = (theme: Theme) => css`
+  width: 100%;
+  height: 21rem;
+  background-color: ${theme.color.lightgray1};
+  border-radius: 10px;
+`;
+
+export const moimTitleWrapper = (theme: Theme) => css`
+  ${flexGenerator('row', 'space-between', 'center')}
+  gap: 4.8rem;
+  width: 100%;
+  padding: 1rem 0.6rem 1rem 1rem;
+
+  border-radius: 5px;
+  background-color: ${theme.color.bg_white1};
+
+  color: ${theme.color.darkgray};
+  ${theme.font['subhead05-sb-14']}
+
+  cursor: pointer;
+`;
+
+export const iconStyle = css`
+  width: 2.4rem;
+  height: 2.4rem;
+`;

src/components/common/Review/Review.tsx

@@ -0,0 +1,65 @@
+import { useNavigate } from 'react-router-dom';
+
+import { IcNext } from '@svg';
+
+import {
+  iconStyle,
+  imgAndTitleContainer,
+  moimTitleWrapper,
+  reviewContent,
+  reviewContentContainer,
+  reviewImgSection,
+  reviewLayoutStyle,
+  tagsContainer,
+} from './Review.style';
+import ReviewTag from '../ReviewTag/ReviewTag';
+import SimpleUserProfile from '../SimpleUserProfile/SimpleUserProfile';
+
+const tags = [
+  '전문성이 있어요',
+  '진행이 매끄러워요',
+  '준비가 철저해요',
+  '시간 관리를 잘해요',
+  '게스트의 반응을 잘 반영해요',
+];
+const moimId = 1;
+const moimTitle = '티엘고마가 알려주는 클래스 성공 비법';
+
+const Review = () => {
+  const navigate = useNavigate();
+
+  const handleTitleClick = () => {
+    navigate(`/class/${moimId}`);
+  };
+  return (
+    <div css={reviewLayoutStyle}>
+      <SimpleUserProfile size="large" username="갓민서입니다롱" />
+      <div css={reviewContentContainer}>
+        <p css={reviewContent}>
+          리뷰 내용입니다. 리뷰 내용입니다. 리뷰 내용입니다. 리뷰 내용입니다. 리뷰 내용입니다. 리뷰
+          내용입니다. 리뷰 내용입니다. 리뷰 내용입니다. 리뷰 내용입니다.
+        </p>
+        <div css={tagsContainer}>
+          {tags.map((tag, i) => (
+            <ReviewTag key={i}>{tag}</ReviewTag>
+          ))}
+        </div>
+      </div>
+      <div css={imgAndTitleContainer}>
+        <div css={reviewImgSection}></div>
+        {/* 클래스 뷰, 스픽커 소개뷰에서 모두 사용하기 위해 api에서 moimId 유무에 따라 보여주기 위함 */}
+        {moimId && (
+          <div css={moimTitleWrapper} onClick={handleTitleClick}>
+            {moimTitle}
+            <span css={iconStyle}>
+              <IcNext />
+            </span>
+          </div>
+        )}
+      </div>
+      <span>14시간 전</span>
+    </div>
+  );
+};
+
+export default Review;

src/components/common/ReviewTag/ReviewTag.style.ts

@@ -0,0 +1,10 @@
+import { Theme, css } from '@emotion/react';
+
+export const reviewTagContainer = (theme: Theme) => css`
+  padding: 0.5rem;
+  border-radius: 5px;
+  background-color: ${theme.color.background};
+  color: ${theme.color.midgray2};
+  ${theme.font['body03-r-12']}
+  white-space: nowrap;
+`;

src/components/common/ReviewTag/ReviewTag.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+import { reviewTagContainer } from './ReviewTag.style';
+
+const ReviewTag = ({ children }: PropsWithChildren) => {
+  return <div css={reviewTagContainer}>{children}</div>;
+};
+
+export default ReviewTag;

src/components/common/SimpleUserProfile/SimpleUserProfile.style.ts

@@ -12,7 +12,7 @@ export const profileWrapperSizeStyle = {
     gap: 2rem;
   `,
   large: css`
-    gap: 1rem;
+    gap: 1.2rem;
   `,
   medium: css`
     gap: 1rem;

src/pages/class/page/Class/Class.tsx

@@ -28,6 +28,7 @@ import Error from '@pages/error/Error';
 import { userAtom } from '@stores';
 import { IcClassPerson, IcCopyPlus, IcDate, IcMoney, IcOffline, IcOneline } from '@svg';
 import { dDayText, handleShare, smoothScroll } from '@utils';
+import Review from 'src/components/common/Review/Review';
 
 import {
   buttonContainer,
@@ -157,7 +158,8 @@ const Class = () => {
             ) : (
               <ClassNotice noticeData={moimNoticeList || []} />
             ))}
-          {selectTab === '리뷰' && <ClassReviewEmptyView />}
+          {/* {selectTab === '리뷰' && <ClassReviewEmptyView />} */}
+          {selectTab === '리뷰' && <Review />}
         </section>
         {selectTab === '공지사항' && moimDetail?.hostId === hostId && (
           <div