[fix/toast-overflow-247] 🚨 Fix : 모바일 환경에서 토스트 메시지가 화면을 넘어가는 문제 수정

src/app/(landing)/_components/StepsSection.tsx

@@ -19,7 +19,7 @@ const steps = [
   {
     icon: NoteIcon,
     title: "학습하고 기록하기",
-    description: "할 일을 완료하며 학습하고,\n노트로 기록하세요",
+    description: "할 일을 완료하며 학습하고\n노트로 기록하세요",
   },
 ];
 

src/app/(protected)/notes/_components/GoalBanner.tsx

@@ -10,7 +10,7 @@ export default function GoalBanner({ title }: GoalBannerProps) {
         alt="목표 아이콘"
         className="h-8 w-8 lg:h-10 lg:w-10"
       />
-      <p className="text-gray-750 min-w-0 flex-1 truncate text-base font-semibold sm:text-xl lg:text-2xl">
+      <p className="text-gray-750 min-w-0 flex-1 text-base font-semibold sm:text-xl lg:text-2xl">
         {title}
       </p>
     </div>

src/app/(protected)/notes/_components/NoteItem.tsx

@@ -60,7 +60,7 @@ export default function NoteItem({
         <header className="mb-2 flex items-center justify-between border-b border-b-gray-100 pb-2 sm:mb-3.5 sm:pb-4 lg:mb-4 lg:pb-5">
           <NoteTitleView
             title={title}
-            className="text-sm sm:text-lg lg:text-xl"
+            className="truncate text-sm sm:text-lg lg:text-xl"
           />
           <button
             type="button"

src/app/(protected)/notes/_components/NoteLinkPreview.tsx

@@ -21,7 +21,7 @@ export function NoteLinkPreview({
     <div
       className="bg-gray-25 flex cursor-pointer flex-col gap-1 rounded-xl px-4 py-3.5"
       onClick={onClick}>
-      <div className="flex justify-between">
+      <div className="flex items-start justify-between">
         <div className="flex items-start gap-1">
           <img
             src={`https://www.google.com/s2/favicons?domain=${new URL(linkMetadata.url).hostname}&sz=32`}

src/app/(protected)/notes/_components/NoteTitleView.tsx

@@ -16,9 +16,7 @@ export default function NoteTitleView({
         alt="노트 아이콘"
         className="h-8 w-8 lg:h-10 lg:w-10"
       />
-      <span className={clsx("flex-1 truncate font-semibold", className)}>
-        {title}
-      </span>
+      <span className={clsx("flex-1 font-semibold", className)}>{title}</span>
     </h3>
   );
 }

src/app/globals.css

@@ -90,6 +90,5 @@
 }
 
 [data-sonner-toast] {
-  min-width: 400px !important;
-  max-width: 90vw !important;
+  width: min(400px, 90vw);
 }