feat: add Mypage

src/pages/MyPage.tsx

@@ -1,11 +1,45 @@
 import Header from './component/Header';
+import { Link } from 'react-router-dom';
 
-const MyPage = () => {
+export default function MyPage() {
   return (
     <div className="h-screen">
       <Header text="마이페이지" setting />
+      <div className="m-5">
+        <div className="flex items-center">
+          <div className="w-[80px] bg-gray-300 h-[80px] overflow-hidden rounded-[100px]">
+            <img src="./" alt="" />
+          </div>
+          <div className="pl-5 h-[80px] flex flex-col justify-between">
+            <div className="flex items-center ">
+              <h3 className="text-xl">와유</h3>
+              <Link to={`/profileChange`} className="w-6 h-6 rotate-180">
+                <img className="w-6 h-6" src="/assets/back.png" alt="" />
+              </Link>
+            </div>
+            <div className="flex items-center h-3">
+              <p className="text-xs">팔로워 999</p>
+              <div className="w-[1px] h-3 bg-slate-300 mx-3"></div>
+              <p className="text-xs">팔로잉 2999</p>
+            </div>
+            <div className="flex items-center">
+              <span className="text-sm py-[1px] px-2 m-1 rounded-xl border border-primary text-primary">
+                #맛집
+              </span>
+              <span className="text-sm py-[1px] px-2 m-1 rounded-xl border border-primary text-primary">
+                #디자인
+              </span>
+              <span className="text-sm py-[1px] px-2 m-1 rounded-xl border border-primary text-primary">
+                #과학
+              </span>
+            </div>
+          </div>
+        </div>
+        <p className="text-sm mt-3">
+          한줄소개입니다한줄소개입니다한줄소개입니다한줄소개입니다
+        </p>
+      </div>
+      .
     </div>
   );
-};
-
-export default MyPage;
+}

src/pages/ReviewRegistration.tsx

@@ -206,7 +206,7 @@ export default function ReviewRegistration() {
               <button
                 type="button"
                 key={index}
-                className={`py-[1px] px-2 m-2 rounded-xl border ${
+                className={`py-[1px] px-2 m-2 rounded-xl border  ${
                   selectedCategories.includes(e)
                     ? 'border-primary text-primary'
                     : 'border-[#828282] text-[#828282]'

src/pages/Setting.tsx

@@ -10,7 +10,12 @@ export default function Store() {
       <SettingText text="내 개인정보 수정"></SettingText>
       <SettingText text="비밀번호 변경"></SettingText>
       <SettingText text="알림 설정"></SettingText>
-      <SettingText text="내 포인트 확인 및 교환하기" icon border></SettingText>
+      <SettingText
+        text="내 포인트 확인 및 교환하기"
+        nextUrl="/point"
+        icon
+        border
+      ></SettingText>
       <SettingText text="와유가 궁금해요"></SettingText>
       <SettingText text="공지사항"></SettingText>
       <SettingText text="자주 묻는 질문"></SettingText>

src/pages/component/Header.tsx

@@ -98,7 +98,7 @@ const Header: React.FC<HeaderProps> = ({
             className="bg-transparent outline-none h-[24px] w-[48px] flex justify-end"
           >
             <img
-              src="/assets/setting.png"
+              src={white ? '/assets/setting_white.png' : '/assets/setting.png'}
               alt="back"
               className={`object-cover w-auto h-full`}
             />

src/pages/component/MypageMenu.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import GStar from '../../assets/GStar.png';
+import YStar from '../../assets/YStar.png';
+import HalfStar from '../../assets/HalfStar.png';
+
+type GradeProps = {
+  grade?: number;
+  className?: string;
+  className2?: string;
+};
+
+const Grade: React.FC<GradeProps> = ({
+  grade = 3.5,
+  className,
+  className2,
+}) => {
+  const integerPart = Math.floor(grade);
+  const restPart = grade % 1;
+
+  const renderInteger = () => {
+    const integerElements = [];
+    for (let i = 0; i < integerPart; i++) {
+      integerElements.push(
+        <div className={`w-[6%] mr-1 ${className}`}>
+          <img className="w-full object-cover" src={YStar} alt="" />
+        </div>,
+      );
+    }
+    return integerElements;
+  };
+
+  const renderRest = () => {
+    const restElements = [];
+    if (restPart >= 0.5) {
+      restElements.push(
+        <div className={`w-[6%] mr-1 ${className}`}>
+          <img className="w-full object-cover" src={HalfStar} alt="" />
+        </div>,
+      );
+    } else {
+      restElements.push(
+        <div className={`w-[6%] mr-1 ${className}`}>
+          <img className="w-full object-cover" src={GStar} alt="" />
+        </div>,
+      );
+    }
+    for (let i = 0; i < 4 - integerPart; i++) {
+      restElements.push(
+        <div className={`w-[6%] mr-1 ${className}`}>
+          <img className="w-full object-cover" src={GStar} alt="" />
+        </div>,
+      );
+    }
+    return restElements;
+  };
+
+  return (
+    <div className="flex items-center mb-[10px]">
+      {renderInteger()}
+      {renderRest()}
+      <p className={`pl-2 text-2xl font-bold leading-[100%] ${className2}`}>
+        {grade}
+      </p>
+    </div>
+  );
+};
+
+export default Grade;