프로필 페이지

src/features/user/styles.ts

@@ -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;
+  }
+`;

src/features/user/ui/BadgeContainer.tsx

@@ -0,0 +1,57 @@
+import {
+  BadgeListItem,
+  BadgeWrapper,
+  PaginationButton,
+  PaginationIcon,
+} 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 (
+    <>
+      <BadgeWrapper>
+        <PaginationButton>
+          <PaginationIcon src={getImageUrl('뱃지-다음버튼.svg')} />
+        </PaginationButton>
+        <ul>
+          {testBadgeList.map(badgeItem => (
+            <BadgeListItem key={badgeItem.id}>
+              <div>
+                <img src={getImageUrl(badgeItem.badgeImage)} />
+              </div>
+              <h5>{badgeItem.badgeTitle}</h5>
+            </BadgeListItem>
+          ))}
+        </ul>
+        <PaginationButton>
+          <PaginationIcon
+            src={getImageUrl('뱃지-다음버튼.svg')}
+            $rotate="180deg"
+          />
+        </PaginationButton>
+      </BadgeWrapper>
+    </>
+  );
+}

src/features/user/ui/ProfileImage.tsx

@@ -0,0 +1,10 @@
+import { getImageUrl } from '@/utils/getImageUrl';
+
+export default function ProfileImage() {
+  //기능 제작 시 자기 캐릭터에서 프로필이미지 추출하는 로직 추가
+  return (
+    <>
+      <img src={getImageUrl('테스트프로필.svg')} />
+    </>
+  );
+}

src/pages/profile/Profile.tsx

@@ -0,0 +1,112 @@
+import CokoLogo from '@common/layout/CokoLogo';
+import MenuBar from '@common/layout/MenuBar';
+import { Layout, LeftSection, RightSection, Wrapper } from '@/style/style';
+import Header from '@common/layout/Header';
+import {
+  BadgeLabel,
+  JoinDateLabel,
+  LevelDiv,
+  MyProgressDiv,
+  MyQuizInfoDiv,
+  UserNameLabel,
+  ProfileSection,
+  BadgeSection,
+  LevelList,
+  LevelLabel,
+  MyCharacterImage,
+} 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 (
+    <>
+      <Wrapper>
+        <LeftSection>
+          <CokoLogo />
+          <MenuBar />
+        </LeftSection>
+        <RightSection>
+          <Header />
+
+          <LevelDiv>
+            <div>
+              <MyCharacterImage src={getImageUrl('테스트캐릭터.svg')} />
+              <LevelLabel>Level.1</LevelLabel>
+            </div>
+            <LevelList>
+              {levelList.map(level => (
+                <React.Fragment key={level}>
+                  <li>
+                    <span>Level.{level} </span> -
+                  </li>
+                  <li>&mdash;</li>
+                </React.Fragment>
+              ))}
+            </LevelList>
+            <ProgressBar
+              $progress={40}
+              $maxProgress={100}
+              $height="20px"
+              $innerBgColor="#FFD100;"
+              $boxBgColor="#FFEFAA"
+              style={{
+                width: '600px',
+                position: 'absolute',
+                transform: 'rotate(-90deg)',
+                right: '-270px',
+                top: '300px',
+              }}
+            />
+          </LevelDiv>
+        </RightSection>
+      </Wrapper>
+      <Layout>
+        <ProfileSection>
+          <div>
+            <ProfileImage />
+            <UserNameLabel>유저 이름</UserNameLabel>
+            <JoinDateLabel>2024.10.01</JoinDateLabel>
+          </div>
+          <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>
+            <MyQuizInfoDiv>
+              <p>
+                푼 문제 <span>52</span>개
+              </p>
+              <p>
+                틀린 문제 <span>52</span>개
+              </p>
+              <p>
+                안 푼 문제 <span>52</span>개
+              </p>
+            </MyQuizInfoDiv>
+          </MyProgressDiv>
+        </ProfileSection>
+        <BadgeSection>
+          <BadgeLabel>나의 뱃지</BadgeLabel>
+          <BadgeContainer />
+        </BadgeSection>
+      </Layout>
+    </>
+  );
+}