[fix] 웹 페이지 반응형 레이아웃 개선

apps/web/src/pages/ClubDetail/index.tsx

@@ -18,17 +18,15 @@ function Introduce({ introduce }: { introduce: string }) {
     </div>
   );
 }
-
 function NoneIntroduce() {
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center">
-      <img src={NoneImage} alt="" className="size-25" />
-      <div className="flex flex-col items-center leading-15">
-        <span className="text-text-400 text-[24px]">
-          동아리 소개를 준비 중이에요. 동아리 관리자라면 오른쪽 상단의 등록하기를 통해
-        </span>
-        <span className="text-text-400 text-[24px]">소개 내용을 보내주세요! 확인 후 페이지에 반영해드릴게요.</span>
-      </div>
+    <div className="flex h-full w-full flex-col items-center justify-center gap-4 py-8">
+      <img src={NoneImage} alt="" className="size-20 sm:size-25" />
+      <p className="text-text-400 text-center text-[14px] leading-7 sm:text-[20px] sm:leading-10">
+        동아리 소개를 준비 중이에요. 동아리 관리자라면 오른쪽 상단의 등록하기를 통해
+        <br className="hidden sm:block" />
+        소개 내용을 보내주세요! 확인 후 페이지에 반영해드릴게요.
+      </p>
     </div>
   );
 }

apps/web/src/pages/Home/index.tsx

@@ -80,7 +80,7 @@ function Home() {
 
   return (
     <div className="min-h-screen text-black">
-      <main className="mx-auto flex w-full max-w-254.5 flex-col items-center pt-16 pb-24 sm:pt-20 lg:pt-25">
+      <main className="mx-auto flex w-full max-w-254.5 flex-col items-center px-4 pt-16 pb-24 sm:px-6 sm:pt-20 lg:px-0 lg:pt-25">
         <section className="relative flex w-full flex-col items-center text-center">
           <div className="border-primary-400 bg-primary-100 text-primary-500 rounded-full border px-5 py-1 leading-10 font-semibold">
             전국 대학 동아리를 한 곳에서
@@ -218,7 +218,7 @@ function UniversityCard({ university }: { university: University }) {
   return (
     <Link
       to={`/universities/${university.id}/clubs`}
-      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex h-38.75 w-57.5 flex-col items-center justify-center rounded-[20px] border bg-white text-center transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
+      className="border-text-100 hover:border-primary-500 focus-visible:outline-primary-500 flex h-38.75 w-full flex-col items-center justify-center rounded-[20px] border bg-white text-center transition-colors hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2"
     >
       <img className="size-10 object-contain" src={university.imageUrl} alt="" />
       <span className="mt-1 block truncate leading-9 font-semibold text-black">{universityLabel}</span>

apps/web/src/pages/RegisterClub/InfoBadge.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { cn } from '@konect/utils/cn';
+
+function InfoBadge({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn(
+        'bg-primary-100 border-primary-400 text-primary-500 flex min-h-16 w-full items-center justify-center gap-2.5 rounded-[30px] border-2 px-7.5 py-3 text-[20px] leading-10 font-semibold sm:text-[24px]',
+        className
+      )}
+    >
+      <span className="bg-primary-500 size-2 shrink-0 rounded-full" aria-hidden="true" />
+      {children}
+    </div>
+  );
+}
+
+export default InfoBadge;

apps/web/src/pages/RegisterClub/RegisterClubList/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import UniversityDropdown from '@/components/UniversityDropdown';
+import InfoBadge from '../InfoBadge';
 export default function RegisterClubList() {
   const [selectedUniversity, setSelectedUniversity] = useState('');
   //dropdown 확인용 임시 데이터
@@ -8,16 +9,13 @@ export default function RegisterClubList() {
     { id: 'koreatech', name: '한국기술교육대학교' },
   ];
   return (
-    <main className="flex min-h-screen flex-col items-center gap-10 py-11.5">
-      <section className="flex flex-col items-center gap-5">
-        <div className="bg-primary-100 border-primary-400 text-primary-500 flex h-16 w-93 items-center justify-center gap-2.5 rounded-[30px] border-2 px-7.5 py-3 text-[24px] leading-10 font-semibold">
-          <span className="bg-primary-500 size-2 rounded-full" aria-hidden="true" />
-          동아리 소개 내용을 보내주세요
-        </div>
+    <main className="flex min-h-screen flex-col items-center gap-10 px-4 py-11.5 sm:px-6 lg:px-0">
+      <section className="flex w-full flex-col items-center gap-5">
+        <InfoBadge className="max-w-93">동아리 소개 내용을 보내주세요</InfoBadge>
         <span className="text-text-400 text-[20px]">입력하신 내용은 확인 후 동아리 상세 페이지에 등록돼요.</span>
       </section>
-      <form className="flex flex-col gap-10">
-        <section className="flex h-183.75 w-254 flex-col gap-10 rounded-[20px] border border-[#E7EBEF] bg-[#FFF] px-11 py-10">
+      <form className="flex w-full max-w-254 flex-col gap-10">
+        <section className="flex w-full flex-col gap-10 rounded-[20px] border border-[#E7EBEF] bg-[#FFF] px-5 py-8 sm:px-11 sm:py-10">
           <div className="flex w-full flex-col gap-2.5">
             <div className="flex">
               <p className="text-text-900 text-[24px] font-bold">대학교명</p>

apps/web/src/pages/RegisterClub/index.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import EditClub from '@/assets/edit-club-detail.png';
 import NewClub from '@/assets/new-club.png';
 import Register from '@/assets/register-club.png';
+import InfoBadge from './InfoBadge';
 
 export default function RegisterClub() {
   const registerClubCards = [
@@ -33,17 +34,14 @@ export default function RegisterClub() {
     },
   ];
   return (
-    <main className="flex min-h-screen flex-col items-center gap-10 py-11.5">
+    <main className="flex min-h-screen flex-col items-center gap-10 px-4 py-11.5 sm:px-6 lg:px-0">
       <section className="flex flex-col items-center gap-5">
-        <div className="bg-primary-100 border-primary-400 text-primary-500 flex h-16 w-74.25 items-center justify-center gap-2.5 rounded-[30px] border-2 px-7.5 py-3 text-[24px] leading-10 font-semibold">
-          <span className="bg-primary-500 size-2 rounded-full" aria-hidden="true" />
-          동아리 정보 등록/수정
-        </div>
+        <InfoBadge className="max-w-74.25">동아리 정보 등록/수정</InfoBadge>
         <span className="text-text-400 text-[20px]">
           작성자 유형에 따라 필요한 항목이 다릅니다. 현재 상황에 맞는 항목을 선택해주세요.
         </span>
       </section>
-      <section className="flex gap-5">
+      <section className="flex w-full flex-col gap-5 sm:flex-row sm:flex-wrap sm:justify-center">
         {registerClubCards.map((card) => (
           <RegisterClubCard key={card.title} card={card}>
             <img src={card.image} alt={card.imageAlt} />
@@ -74,7 +72,7 @@ function RegisterClubCard({
   children: ReactNode;
 }) {
   const className =
-    'border-text-100 focus-visible:outline-primary-500 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-[#ffffff] px-7.5 py-10 transition-[border-color,box-shadow] hover:border-primary-500 hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2';
+    'border-text-100 focus-visible:outline-primary-500 flex min-h-92.75 w-full flex-col items-center gap-10 rounded-[20px] border bg-white px-7.5 py-10 transition-[border-color,box-shadow] hover:border-primary-500 hover:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] focus-visible:outline-2 focus-visible:outline-offset-2 sm:w-82.75';
 
   if (card.to) {
     return (