-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: Review 컴포넌트 뷰 완성 * feat: Review 컴포넌트 퍼블리싱 완성 * fix: 코드리뷰 반영 * fix: 코드리뷰 반영
- Loading branch information
1 parent
4e6bf1d
commit 09d7937
Showing
6 changed files
with
154 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters