fix: mentor/mypage ui polish and notice emphasis (#469)

Author: manNomi

apps/web/src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx

@@ -93,8 +93,9 @@ const PostModifyForm = ({
     );
   };
 
-  const notice =
-    "글 작성 시 유의사항\n\n인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
+  const noticeTitle = "[글 작성 시 유의사항]";
+  const noticeContent =
+    "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
 
   return (
     <>
@@ -147,10 +148,10 @@ const PostModifyForm = ({
             onChange={(e) => setContent(e.target.value)}
           />
         </div>
-        <div
-          className="px-5 pt-2.5 text-gray-100 typo-regular-4"
-          dangerouslySetInnerHTML={{ __html: notice.replace(/\n/g, "<br />") }}
-        />
+        <div className="px-5 pt-2.5">
+          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
+          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+        </div>
       </div>
     </>
   );

apps/web/src/app/community/[boardCode]/create/PostForm.tsx

@@ -63,8 +63,9 @@ const PostForm = ({ boardCode }: PostFormProps) => {
     );
   };
 
-  const notice =
-    "글 작성 시 유의사항\n\n인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
+  const noticeTitle = "[글 작성 시 유의사항]";
+  const noticeContent =
+    "인종, 성별, 출신, 지역, 이념 관련 차별 관련 발언 및 타인에게 불쾌감을 유발할 수 있는 글은 삭제될 수 있습니다.\n\n솔리드 커넥션은 홍보 행위를 철저히 금지합니다.";
 
   return (
     <>
@@ -126,10 +127,10 @@ const PostForm = ({ boardCode }: PostFormProps) => {
             onChange={(e) => setContent(e.target.value)}
           />
         </div>
-        <div
-          className="px-5 pt-2.5 text-gray-100 typo-regular-4"
-          dangerouslySetInnerHTML={{ __html: notice.replace(/\n/g, "<br />") }}
-        />
+        <div className="px-5 pt-2.5">
+          <p className="text-gray-250/87 typo-sb-9">{noticeTitle}</p>
+          <p className="mt-2 whitespace-pre-line text-gray-100 typo-regular-4">{noticeContent}</p>
+        </div>
       </div>
     </>
   );

apps/web/src/app/mentor/[id]/_ui/MentorDetialContent/index.tsx

@@ -72,7 +72,7 @@ const MentorDetialContent = ({ mentorId }: MentorDetailContentProps) => {
       <p className="mb-7 text-k-500 typo-regular-2">{introduction}</p>
 
       {/* 멘토 채널 */}
-      <h3 className="mb-2 text-secondary typo-regular-1">멘토 한마디</h3>
+      <h3 className="mb-2 text-secondary typo-regular-1">멘토 채널</h3>
       <div className="mb-7">
         <div
           className={`grid gap-2 ${

apps/web/src/app/my/_ui/MyProfileContent/index.tsx

@@ -70,7 +70,7 @@ const MyProfileContent = () => {
         <p>{nickname}님은</p>
         <p>
           현재{" "}
-          <span className="text-primary typo-medium-2">
+          <span className={`text-primary ${profileData.role === UserRole.MENTEE ? "typo-sb-4" : "typo-medium-2"}`}>
             {profileData.role === UserRole.ADMIN ? "어드민" : isMentor ? "멘토" : "멘티"}
           </span>{" "}
           솔커예요.

apps/web/src/components/ui/LinkedTextWithIcon/index.tsx

@@ -58,19 +58,19 @@ const Content = ({ icon, text, subText, textColor = "text-k-700" }: ContentProps
       {/* 왼쪽 아이콘 + 텍스트 */}
       <div className="flex flex-1 items-center gap-1">
         {icon ? (
-          <div className="flex h-8 w-5 items-center justify-center rounded-full">
-            <span className="h-5 w-5">{icon}</span>
+          <div className="flex h-8 w-8 items-center justify-center rounded-full [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0">
+            {icon}
           </div>
         ) : (
-          <div className="h-8" />
+          <div className="h-8 w-8" />
         )}
         <span className={clsx("typo-medium-2", textColor)}>{text}</span>
       </div>
 
       {/* 오른쪽 subText + 아이콘 */}
       <div className="flex shrink-0 items-center gap-1">
         {subText && <span className="text-k-600 typo-regular-2">{subText}</span>}
-        <span className="h-5 w-5">
+        <span className="flex h-5 w-5 items-center justify-center [&>svg]:h-5 [&>svg]:w-5">
           <IconDirectionRight />
         </span>
       </div>