Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

프로필 페이지 #82

Merged
merged 4 commits into from
Dec 7, 2024
Merged

프로필 페이지 #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4bf99e6
🎨 Publish(#81): 프로필페이지 완성
rhehfl Dec 7, 2024
0c21f4f
🔨 Refactor(#81): 태그 수정
rhehfl Dec 7, 2024
26d1e68
🔨 Refactor(#81): 태그 수정, S-dot 적용
rhehfl Dec 7, 2024
ccee0ef
🔨 Refactor(#81): 태그 수정
rhehfl Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions src/features/user/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { styled } from 'styled-components';
export const BadgeWrapper = styled.div`
display: flex;
margin-top: 39px;
width: 100%;
gap: 12px;
justify-content: space-between;
padding: 0 17px;
> ul {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
`;
export const PaginationIcon = styled.img<{ $rotate?: string }>`
width: 9px;
height: 20px;
transform: rotate(${({ $rotate }) => $rotate || 0});
`;
export const PaginationButton = styled.button`
border: 0;
background-color: transparent;
`;
export const BadgeListItem = styled.li`
display: flex;
flex-direction: column;
gap: 11px;
> div {
display: flex;
justify-content: center;
align-items: center;
width: 133px;
height: 141px;
flex-shrink: 0;
border-radius: 8px;
border: 2px solid #ffe161;
background: #ffefaa;
}
> h5 {
border-radius: 8px;
border: 2px solid #ffefaa;
background: #ffe161;
color: #fff;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 266.667% */
text-transform: lowercase;
}
`;
52 changes: 52 additions & 0 deletions src/features/user/ui/BadgeContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as S from '../styles';
import { getImageUrl } from '@/utils/getImageUrl';

const testBadgeList = [
{
id: 1,
badgeImage: '테스트뱃지.webp',
badgeTitle: '왕',
},
{
id: 2,
badgeImage: '테스트뱃지.webp',
badgeTitle: '왕왕',
},
{
id: 3,
badgeImage: '테스트뱃지.webp',
badgeTitle: '왕대대',
},
{
id: 4,
badgeImage: '테스트뱃지.webp',
badgeTitle: '왕대대왕',
},
];
export default function BadgeContainer() {
return (
<>
<S.BadgeWrapper>
<S.PaginationButton>
<S.PaginationIcon src={getImageUrl('뱃지-다음버튼.svg')} />
</S.PaginationButton>
<ul>
{testBadgeList.map(badgeItem => (
<S.BadgeListItem key={badgeItem.id}>
<div>
<img src={getImageUrl(badgeItem.badgeImage)} />
</div>
<h5>{badgeItem.badgeTitle}</h5>
</S.BadgeListItem>
))}
</ul>
<S.PaginationButton>
<S.PaginationIcon
src={getImageUrl('뱃지-다음버튼.svg')}
$rotate="180deg"
/>
</S.PaginationButton>
</S.BadgeWrapper>
</>
);
}
10 changes: 10 additions & 0 deletions src/features/user/ui/ProfileImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { getImageUrl } from '@/utils/getImageUrl';

export default function ProfileImage() {
//기능 제작 시 자기 캐릭터에서 프로필이미지 추출하는 로직 추가
return (
<>
<img src={getImageUrl('테스트프로필.svg')} />
</>
);
}
100 changes: 100 additions & 0 deletions src/pages/profile/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import CokoLogo from '@common/layout/CokoLogo';
import MenuBar from '@common/layout/MenuBar';
import * as globalS from '@/style/style';
import Header from '@common/layout/Header';
import * as S from './styles';
import ProfileImage from '@features/user/ui/ProfileImage';
import ProgressBar from '@features/progress/ui/ProgressBar';
import { getImageUrl } from '@/utils/getImageUrl';
import BadgeContainer from '@features/user/ui/BadgeContainer';
import React from 'react';
const levelList = [60, 50, 40, 30, 20, 10];
export default function Profile() {
return (
<>
<globalS.Wrapper>
<globalS.LeftSection>
<CokoLogo />
<MenuBar />
</globalS.LeftSection>
<globalS.RightSection>
<Header />

<S.LevelDiv>
<div>
<S.MyCharacterImage src={getImageUrl('테스트캐릭터.svg')} />
<S.LevelLabel>Level.1</S.LevelLabel>
</div>
<S.LevelList>
{levelList.map(level => (
<React.Fragment key={level}>
<li>
<span>Level.{level} </span> -
</li>
<li>&mdash;</li>
</React.Fragment>
))}
</S.LevelList>
<ProgressBar
$progress={40}
$maxProgress={100}
$height="20px"
$innerBgColor="#FFD100;"
$boxBgColor="#FFEFAA"
style={{
width: '600px',
position: 'absolute',
transform: 'rotate(-90deg)',
right: '-270px',
top: '300px',
}}
/>
</S.LevelDiv>
</globalS.RightSection>
</globalS.Wrapper>
<globalS.Layout>
<S.ProfileSection>
<div>
<ProfileImage />
<S.UserNameLabel>유저 이름</S.UserNameLabel>
<S.JoinDateLabel>2024.10.01</S.JoinDateLabel>
</div>
<S.MyProgressDiv>
<p>
코코에 접속한 지 벌써 <span>20</span>일이 됐어요 !
</p>
<img src={getImageUrl('출석일수.svg')}></img>
<div>
<p>진행도</p>
<ProgressBar
$progress={40}
$maxProgress={100}
$height="20px"
$innerBgColor="#BFD683"
$boxBgColor="#85705F"
style={{
width: '283px',
}}
/>
</div>
<S.MyQuizInfoDiv>
<p>
푼 문제 <span>52</span>개
</p>
<p>
틀린 문제 <span>52</span>개
</p>
<p>
안 푼 문제 <span>52</span>개
</p>
</S.MyQuizInfoDiv>
</S.MyProgressDiv>
</S.ProfileSection>
<S.BadgeSection>
<S.BadgeLabel>나의 뱃지</S.BadgeLabel>
<BadgeContainer />
</S.BadgeSection>
</globalS.Layout>
</>
);
}
172 changes: 172 additions & 0 deletions src/pages/profile/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import { styled } from 'styled-components';

export const ProfileSection = styled.section`
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 50px;
width: 50vw;
height: 312px;
background-color: #ffff;
border-radius: 20px;
box-shadow: 0 3px #e5e5e5;
`;
export const BadgeSection = styled.section`
height: 306px;
width: 50vw;
margin-top: 21px;
background-color: #ffff;
border-radius: 20px;
box-shadow: 0 3px #e5e5e5;
`;
export const LevelDiv = styled.div`
position: absolute;
display: flex;
align-items: flex-end;
width: 249px;
height: 629px;
background-color: #ffff;
border-radius: 20px;
box-shadow: 0 3px #e5e5e5;
margin: 68px 28px 0 0;
`;
export const MyProgressDiv = styled.div`
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-width: 350px;
width: 383px;
height: 198px;
margin-left: 45px;
padding-top: 80px;
border-radius: 16px;
justify-content: center;
border: 2px solid #bfd683;
background: #e3f3b8;
> p:nth-child(1) {
position: absolute;
top: -6px;
z-index: 10;
font-size: 11px;
color: #fff;
> span {
color: #bfd683;
font-size: 13px;
}
}
> img {
position: absolute;
top: -38px;
}
> div {
display: flex;
color: #9f9f9f;
justify-content: space-around;
gap: 20px;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 200% */
text-transform: lowercase;
}
`;
export const MyQuizInfoDiv = styled.div`
display: flex;
align-items: center;
margin-top: 24px;
border-radius: 8px;
background: #cbd2a1;
width: 362px;
height: 37px;
color: #9f9f9f;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 200% */
text-transform: lowercase;
span {
color: #85705f;
}
`;
export const UserNameLabel = styled.label`
display: block;
text-align: center;
border-radius: 15px;
border: 2px solid #f09900;
background: #ffb53d;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 142.857% */
text-transform: lowercase;
`;
export const JoinDateLabel = styled.label`
display: block;
color: #cbcbcb;
margin-top: 5px;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 200% */
text-transform: lowercase;
`;
export const BadgeLabel = styled.label`
display: block;
text-align: center;
border-radius: 15px;
width: 209px;
border: 2px solid #f09900;
background: #ffb53d;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 142.857% */
text-transform: lowercase;
margin: 27px auto 0 40px;
`;
export const LevelList = styled.ol`
position: absolute;
display: flex;
flex-direction: column;
gap: 25px;
top: 20px;
left: 120px;
list-style: none;
color: #ffefaa;
:nth-child(even) {
text-align: right;
font-weight: 700;
}
span {
color: #ffb53d;
}
`;
export const LevelLabel = styled.label`
display: block;
margin: 0 0 21px 70px;
text-align: center;
width: 117px;
height: 20px;
flex-shrink: 0;
border-radius: 15px;
border: 1px solid #f09900;
background: #ffb53d;
color: #fff;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 160% */
letter-spacing: 0.2px;
`;
export const MyCharacterImage = styled.img`
width: 115px;
height: 92px;
margin: 0 0 10px 10px;
`;
Loading
Loading