Skip to content

Commit

Permalink
💄 리뷰 프로필사진 연결
Browse files Browse the repository at this point in the history
  • Loading branch information
moooooonchild committed Dec 3, 2024
1 parent c14b07b commit d054140
Show file tree
Hide file tree
Showing 19 changed files with 808 additions and 706 deletions.
4 changes: 4 additions & 0 deletions src/assets/ReviewPage/karma-logo-gray copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/assets/ReviewPage/karma-logo-gray.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 53 additions & 46 deletions src/components/ProductDetailPage/DetailContent.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,75 @@ import styled from 'styled-components';
import * as font from '../../styles/font';

export const Container = styled.div`
width: 100%;
padding-top: 1.5rem;
width: 100%;
padding-top: 1.5rem;
@media only screen and (min-width: 768px) {
width: 768px;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
width: 768px;
margin: 0 auto;
}
`;

export const ProfileWrapper = styled.div`
display: flex;
align-items: center;
gap: 1.06rem;
margin-bottom: 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 1.06rem;
margin-bottom: 1.25rem;
cursor: pointer;
`;

export const ProfileImg = styled.img`
width: 3.5625rem;
height: 3.5625rem;
border-radius: 50%;
object-fit: cover;
`;

export const UserName = styled.div`
${font.medium}
color: var(--black02);
font-size: 25px;
font-style: normal;
font-weight: 500;
line-height: 150%;
${font.medium}
color: var(--black02);
font-size: 25px;
font-style: normal;
font-weight: 500;
line-height: 150%;
`;

export const Title = styled.div`
${font.bold}
color: var(--black02);
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: 150%;
${font.bold}
color: var(--black02);
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: 150%;
`;

export const Price = styled.div`
${font.semibold}
color: var(--gray01);
font-size: 25px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 0.69rem;
${font.semibold}
color: var(--gray01);
font-size: 25px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 0.69rem;
`;

export const Info = styled.div`
${font.semibold}
color: var(--black02);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 0.44rem;
${font.semibold}
color: var(--black02);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 0.44rem;
`;

export const Bio = styled.div`
${font.regular}
color: var(--gray01);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
width: 90%;
margin-top: 0.69rem;
`;
${font.regular}
color: var(--gray01);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
width: 90%;
margin-top: 0.69rem;
`;
60 changes: 35 additions & 25 deletions src/components/ProductDetailPage/DetailContent.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,43 @@
import * as S from './DetailContent.style'
import { ReactComponent as ProfileImg } from '../../assets/ProductDetailPage/profile.svg'
import * as S from './DetailContent.style';
import { ReactComponent as ProfileImg } from '../../assets/ProductDetailPage/profile.svg';
import { useNavigate } from 'react-router-dom';

interface ProductProps {
userId: number;
userName: string;
title: string;
price: number;
material: string;
period: number;
bio: string;
userId: number;
userName: string;
profileImg: string;
title: string;
price: number;
material: string;
period: number;
bio: string;
}

const DetailContent = ({userId, userName, title, price, material, period, bio}: ProductProps) => {
const navigate = useNavigate();

return (
<S.Container>
<S.ProfileWrapper onClick={ () => navigate(`/profile/${userId}`)}>
<ProfileImg />
<S.UserName>{userName}</S.UserName>
</S.ProfileWrapper>
<S.Title>{title}</S.Title>
<S.Price>{price.toLocaleString()}</S.Price>
<S.Info>필요한 재료 | {material}</S.Info>
<S.Info>예상 제작 기간 | 평균 {period}</S.Info>
<S.Bio>{bio}</S.Bio>
</S.Container>
);
const DetailContent = ({
userId,
userName,
profileImg,
title,
price,
material,
period,
bio,
}: ProductProps) => {
const navigate = useNavigate();

return (
<S.Container>
<S.ProfileWrapper onClick={() => navigate(`/profile/${userId}`)}>
<S.ProfileImg src={profileImg} />
<S.UserName>{userName}</S.UserName>
</S.ProfileWrapper>
<S.Title>{title}</S.Title>
<S.Price>{price.toLocaleString()}</S.Price>
<S.Info>필요한 재료 | {material}</S.Info>
<S.Info>예상 제작 기간 | 평균 {period}</S.Info>
<S.Bio>{bio}</S.Bio>
</S.Container>
);
};

export default DetailContent;
97 changes: 52 additions & 45 deletions src/components/ProductDetailPage/ReviewComponent.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,71 @@ import styled from 'styled-components';
import * as font from '../../styles/font';

export const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
width: 16.25rem;
height: 9.75rem;
align-items: flex-start;
padding: 1.2rem 1.5rem 0.62rem 1.5rem;
box-sizing: border-box;
border-radius: 0.625rem;
background: #FFFFFF;
box-shadow: 0px 0px 5px 0px rgba(61, 73, 70, 0.20);
display: flex;
flex-direction: column;
justify-content: center;
width: 16.25rem;
height: 9.75rem;
align-items: flex-start;
padding: 1.2rem 1.5rem 0.62rem 1.5rem;
box-sizing: border-box;
border-radius: 0.625rem;
background: #ffffff;
box-shadow: 0px 0px 5px 0px rgba(61, 73, 70, 0.2);
`;

export const ProfileWrapper = styled.div`
display: flex;
gap: 0.69rem;
align-items: center;
margin-bottom: 0.5rem;
display: flex;
gap: 0.69rem;
align-items: center;
margin-bottom: 0.5rem;
`;

export const ProfileImage = styled.img`
width: 2.5rem;
height: 2.5rem;
object-fit: cover;
border-radius: 50%;
`;

export const UserName = styled.div`
${font.bold}
color: var(--black02);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
${font.bold}
color: var(--black02);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
`;

export const Content = styled.div`
${font.medium}
color: var(--gray01);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 150%;
${font.medium}
color: var(--gray01);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 150%;
width: 13.375rem;
height: 3.375rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 13.375rem;
height: 3.375rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
`;

export const ScoreWrapper = styled.div`
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 0.3rem;
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 0.3rem;
`;

export const Score = styled.div`
${font.bold}
color: var(--gray01);
font-size: 13px;
font-style: normal;
font-weight:7400;
line-height: 150%;
`;
${font.bold}
color: var(--gray01);
font-size: 13px;
font-style: normal;
font-weight: 7400;
line-height: 150%;
`;
41 changes: 23 additions & 18 deletions src/components/ProductDetailPage/ReviewComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,31 @@ import { ReactComponent as ReviewProfileImg } from '../../assets/ProductDetailPa
import { ReactComponent as Star } from '../../assets/ProductDetailPage/star.svg';

interface ReviewProps {
profileImg: string;
userName: string;
content: string;
score: string;
profileImg: string;
userName: string;
content: string;
score: string;
}

const ReviewComponent = ({profileImg, userName, content, score}: ReviewProps) => {
return (
<S.Container>
<S.ProfileWrapper>
<ReviewProfileImg />
<S.UserName>{userName}</S.UserName>
</S.ProfileWrapper>
<S.Content>{content}</S.Content>
<S.ScoreWrapper>
<Star />
<S.Score>{score}</S.Score>
</S.ScoreWrapper>
</S.Container>
);
const ReviewComponent = ({
profileImg,
userName,
content,
score,
}: ReviewProps) => {
return (
<S.Container>
<S.ProfileWrapper>
<S.ProfileImage src={profileImg} />
<S.UserName>{userName}</S.UserName>
</S.ProfileWrapper>
<S.Content>{content}</S.Content>
<S.ScoreWrapper>
<Star />
<S.Score>{score}</S.Score>
</S.ScoreWrapper>
</S.Container>
);
};

export default ReviewComponent;
Loading

0 comments on commit d054140

Please sign in to comment.