fix(web): mentorPage 디자인 수정

.env.guide.md

@@ -99,45 +99,6 @@ NEXT_PUBLIC_KAKAO_JS_KEY=b285223d3e57a6820552018b93805658
 
 ---
 
-## AI Inspector Env Registration
-
-### 1) Web 런타임 (Next.js API Route)
-
-등록 위치:
-- 로컬: `apps/web/.env.local`
-- 배포: Vercel Project > Settings > Environment Variables (Preview/Production)
-
-필수:
-```
-NEXT_PUBLIC_API_SERVER_URL=https://api.<env>.solid-connection.com
-AI_INSPECTOR_FIREBASE_PROJECT_ID=<firebase-project-id>
-AI_INSPECTOR_FIREBASE_CLIENT_EMAIL=<service-account-client-email>
-AI_INSPECTOR_FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
-```
-
-선택:
-```
-AI_INSPECTOR_FIRESTORE_COLLECTION=aiInspectorTasks
-```
-
-### 2) Worker (GitHub Actions)
-
-등록 위치:
-- GitHub Repository > Settings > Secrets and variables > Actions > Repository secrets
-
-필수:
-- `AI_INSPECTOR_FIREBASE_PROJECT_ID`
-- `AI_INSPECTOR_FIREBASE_CLIENT_EMAIL`
-- `AI_INSPECTOR_FIREBASE_PRIVATE_KEY`
-
-선택:
-- `AI_INSPECTOR_PATCH_ENDPOINT`
-- `AI_INSPECTOR_PATCH_API_KEY`
-- `AI_INSPECTOR_PREVIEW_URL_TEMPLATE`
-- `AI_INSPECTOR_DISCORD_WEBHOOK_URL`
-
----
-
 ## Best Practices
 
 1. **환경별 값은 Vercel 대시보드에서 관리**

.env.preview

@@ -8,3 +8,7 @@ NEXT_PUBLIC_API_SERVER_URL=https://api.stage.solid-connection.com
 
 # kakao
 NEXT_PUBLIC_KAKAO_JS_KEY=c080f1d215a69b47401cda1d7528418a
+
+# Login mode configuration for preview
+# Preview 환경에서는 stage API와 쿠키 로그인 사용
+NEXT_PUBLIC_COOKIE_LOGIN_ENABLED=true

apps/web/src/app/mentor/_ui/MentorClient/_ui/MenteePageTabs/index.tsx

@@ -81,7 +81,7 @@ const MenteePageTabs = () => {
           ))}
 
       {/* 중간 밑줄 */}
-      <div className="mb-10 mt-10 h-1.5 w-full bg-k-50"></div>
+      <div className="my-8 h-1.5 w-full bg-k-50"></div>
     </>
   );
 };

apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorFindSection/index.tsx

@@ -24,8 +24,8 @@ const MentorFindSection = () => {
   usePrefetchMentorFindTab();
 
   return (
-    <div className="px-4">
-      <h2 className="mb-3 text-gray-900 typo-bold-5">멘토 찾기</h2>
+    <>
+      <h2 className="mb-3 text-gray-900 typo-sb-5">멘토 찾기</h2>
 
       {/* 필터 탭 */}
       <div className="mb-3 flex gap-2">
@@ -58,7 +58,7 @@ const MentorFindSection = () => {
       </div>
 
       <FloatingUpBtn />
-    </div>
+    </>
   );
 };
 

apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/_ui/MyMentorSection/index.tsx

@@ -12,7 +12,7 @@ const MyMentorSection = () => {
 
   return (
     <>
-      <h2 className="text-gray-900 typo-bold-5">나의 멘토 페이지</h2>
+      <h2 className="text-gray-900 typo-sb-5 mt-5">나의 멘토 페이지</h2>
       <div className="mt-[14px]">
         <MentorCard key={myMentorProfile?.id} isMine mentor={myMentorProfile} />
       </div>

apps/web/src/app/mentor/_ui/MentorClient/_ui/MentorPage/index.tsx

@@ -30,7 +30,7 @@ const MentorPage = () => {
 
       <div className="mb-10 mt-4">
         <div className="mb-2 flex justify-between">
-          <h2 className="text-gray-900 typo-bold-5">나의 멘티</h2>
+          <h2 className="text-gray-900 typo-sb-5">나의 멘티</h2>
           {/* 전체보기 버튼 */}
           {isMyMenteeTab && myMenteeList.length > 2 && (
             <Link href={`/mentor/chat`} className="flex items-center text-k-500 typo-medium-3">
@@ -63,6 +63,8 @@ const MentorPage = () => {
                 );
               })
             )}
+            {/* 중간 밑줄 */}
+            <div className="my-8 h-1.5 w-full bg-k-50"></div>
             {/* 나의 멘토 페이지 */}
             <MyMentorSection />
           </>

apps/web/src/components/mentor/MentorCard/index.tsx

@@ -38,17 +38,16 @@ const MentorCard = ({ mentor, observeRef, isMine = false }: MentorCardProps) =>
 
   return (
     <div
-      className="rounded-lg bg-white p-4 shadow-sdwB"
+      className="rounded-lg bg-white px-4 pt-4 pb-3 shadow-sdwB"
       ref={observeRef} // observeRef를 div에 연결
     >
       {/* 멘토 프로필 헤더 */}
       <div className="flex items-start gap-3">
         <div className="flex flex-col items-center">
           <ProfileWithBadge profileImageUrl={profileImageUrl} hasBadge={hasBadge} />
-          <span className="text-primary-1 typo-sb-11">누적 멘티 {menteeCount}명</span>
         </div>
 
-        <div className="flex flex-1 flex-col items-stretch gap-3">
+        <div className="flex flex-1 flex-col items-stretch">
           <div className="mb-1 flex items-center justify-between">
             <span className="text-primary-1 typo-sb-7">{country}</span>
             {isDetail && <StudyDate term={term!} />}
@@ -65,21 +64,21 @@ const MentorCard = ({ mentor, observeRef, isMine = false }: MentorCardProps) =>
         <>
           {/* 멘토 한마디 */}
           <div className="mb-4 mt-5">
-            <h4 className="mb-2 text-blue-600 typo-medium-5">멘토 한마디</h4>
-            <p className="text-k-500 typo-regular-2">{introduction}</p>
+            <h4 className="mb-2 text-blue-600 typo-sb-5">멘토 한마디</h4>
+            <p className="text-k-900 typo-regular-2">{introduction}</p>
           </div>
 
           {/* 합격 레시피 */}
           {isDetail && (
             <div className="mb-4">
-              <h4 className="mb-2 text-blue-600 typo-medium-5">합격 레시피</h4>
-              <p className="text-k-500 typo-regular-2">{passTip || "정보가 없습니다."}</p>
+              <h4 className="mb-2 text-blue-600 typo-sb-5">합격 레시피</h4>
+              <p className="text-k-900 typo-regular-2">{passTip || "정보가 없습니다."}</p>
             </div>
           )}
 
           {/* 멘토 채널 */}
           <div className="mb-4">
-            <h4 className="mb-2 text-blue-600 typo-medium-5">멘토 채널</h4>
+            <h4 className="mb-2 text-blue-600 typo-sb-5">멘토 채널</h4>
             <div
               className={clsx("grid gap-2", {
                 "grid-cols-1": channels?.length === 1,
@@ -131,8 +130,8 @@ const MentorCard = ({ mentor, observeRef, isMine = false }: MentorCardProps) =>
 
       {/* 접기/펼치기 버튼 */}
       <div className="mt-1 flex justify-center border-t border-t-k-50 pt-2">
-        <button onClick={() => setIsExpanded(!isExpanded)} className="flex h-6 w-6 items-center justify-center">
-          <span className="h-6 w-6">{isExpanded ? <IconDirectionUp /> : <IconDirectionDown />}</span>
+        <button onClick={() => setIsExpanded(!isExpanded)} className="flex h-6 w-7 items-center justify-center">
+          <span className="h-6 w-7">{isExpanded ? <IconDirectionUp /> : <IconDirectionDown />}</span>
         </button>
       </div>
     </div>

apps/web/src/components/ui/ProfileWithBadge.tsx

@@ -30,7 +30,7 @@ const ProfileWithBadge = ({
       {/* 프로필 이미지 */}
       <div
         className={`h-full w-full overflow-hidden rounded-full ${
-          showMentorBadge ? "border-2 border-primary-1" : "border border-gray-200"
+          showMentorBadge ? "border-2 border-primary-2" : "border-none"
         }`}
       >
         <Image