[fix] 마이페이지 css 수정

bsideproject · Dec 20, 2023 · f3d38b2 · f3d38b2
1 parent 0a885e2
commit f3d38b2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/components/ImageSvg/UserInfoSvg.tsx b/components/ImageSvg/UserInfoSvg.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface ImageSvgProps {
+  imageUrl: string;
+}
+
+const UserInfoSvg = ({ imageUrl }: ImageSvgProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="52"
+      height="72"
+      viewBox="0 0 52 72"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M26.325 0L52 20.6303V59.6775H43.623L32.76 72V59.6775H0V20.6303L26.325 0Z"
+        fill="url(#pattern0)"
+      />
+      <defs>
+        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use xlinkHref="#image0_2894_10795" transform="matrix(0.00318302 0 0 0.00229885 -0.192308 0)" />
+        </pattern>
+        <image id="image0_2894_10795" width="435" height="435" xlinkHref={imageUrl} />
+      </defs>
+    </svg>
+  );
+};
+
+export default UserInfoSvg;
diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
@@ -14,6 +14,7 @@ import { signOut } from 'next-auth/react';
 import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
 // import { Profile } from '@/public/types/user';
 import { formatAge } from '@/utils/transform';
+import UserInfoSvg from '../ImageSvg/UserInfoSvg';
 
 interface ListItemProps {
   IconComponent: React.FC<React.SVGProps<SVGSVGElement>>;
@@ -77,8 +78,8 @@ export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) {
       onClick={() => handleClick({ route, onclick })}
     >
       <div className="flex items-center h-[35px]">
-        <IconComponent className="mr-[10px] w-[24px] h-[24px] stroke-g2 stroke-[1px]" />
-        <div className="text-base text-g6 font-bold">{text}</div>
+        <IconComponent className="mr-[16px] w-[24px] h-[24px] stroke-g2 stroke-[1px]" />
+        <div className="text-base font-medium text-g6">{text}</div>
       </div>
       {hoveredIndex === index && <Vector />}
     </div>
@@ -114,16 +115,16 @@ export default function ProfileCard({ imageSrc, userInfo }: ProfileCard) {
     <>
       <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[50px]">
         <div className="flex w-full">
-          <div className="ml-[20px] w-[52px] h-[72px] flex items-center justify-center mt-[20px]">
-            <img src={imageSrc || ''} alt={' '} />
+          <div className="ml-[20px] mt-[20px]">
+            <UserInfoSvg imageUrl={imageSrc || '/images/thumb.png'} />
           </div>
-          <div className="flex flex-col justify-center pl-5 h-[72px] mt-[17px]">
-            <div className="text-lg font-bold">{userInfo?.firstName}</div>
-            <div className="text-base">
+          <div className="flex flex-col justify-center pl-5 mt-[31px]">
+            <div className="text-[20px] font-semibold">{userInfo?.firstName}</div>
+            <div className="text-[14px] font-normal text-opacity-80">
               {age} years old | {userInfo?.gender}
             </div>
           </div>
-          <div className="ml-auto flex items-center pr-4">
+          <div className="flex items-center pr-4 ml-auto">
             <button
               className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]"
               onClick={handleProfileEdit}

diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Nav, ProfileCard } from '@/components/index.tsx';
 import { getProfile } from '@/api/userInfo';
 import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
+import DefaultLayout from '@/components/layouts/DefaultLayout';
 
 interface UserProfileProps {
   imgSrc: string;
@@ -30,10 +31,10 @@ export default function UserProfile({ imgSrc }: UserProfileProps) {
   return (
     <>
       {profile && <ProfileCard imageSrc={profile?.imageFile?.path || imgSrc} userInfo={profile} />}
-      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max border-t-[1px] border-g2">
+      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] max-w-max z-20 border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">
-            <Nav initMenu={3} />
+            <Nav />
           </div>
         </div>
       </div>