From 490f02b239cc593c762e409c0d23a14c525d0194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=A3=BC?= <psj001002@koreatech.ac.kr>
Date: Wed, 24 Jun 2026 18:31:22 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9B=B9=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/assets/add-mov.svg                  |  8 ++++++++
 apps/web/src/assets/add-photo.svg                |  8 ++++++++
 .../components/UniversityClubSidebar/index.tsx   |  4 ++--
 apps/web/src/pages/Home/index.tsx                | 16 ++++++++--------
 apps/web/src/pages/UniversityClubList/index.tsx  |  8 ++++----
 5 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/assets/add-mov.svg
 create mode 100644 apps/web/src/assets/add-photo.svg

diff --git a/apps/web/src/assets/add-mov.svg b/apps/web/src/assets/add-mov.svg
new file mode 100644
index 0000000..68415c1
--- /dev/null
+++ b/apps/web/src/assets/add-mov.svg
@@ -0,0 +1,8 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4066_2839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="90" height="90">
+<rect width="90" height="90" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4066_2839)">
+<path d="M37.5 58.4138V31.5863L58.4138 45L37.5 58.4138ZM45 82.5C37.7213 82.5 31.1406 80.6288 25.2581 76.8863C19.3763 73.1432 14.7069 67.8654 11.25 61.0529V75H7.5V54.8082H27.6206V58.5582H14.25C17.1488 64.7838 21.3278 69.7057 26.7872 73.3238C32.2466 76.9413 38.3175 78.75 45 78.75C52.4281 78.75 59.1 76.5313 65.0156 72.0938C70.9313 67.6563 74.9806 61.8869 77.1638 54.7857L80.8706 55.5357C78.5387 63.6032 74.0675 70.1141 67.4569 75.0685C60.8462 80.0229 53.3606 82.5 45 82.5ZM7.6875 41.25C8.17313 37.3513 9.05281 33.8525 10.3266 30.7538C11.6009 27.655 13.4687 24.5047 15.93 21.3028L18.6778 23.9063C16.6778 26.5169 15.125 29.1432 14.0194 31.785C12.9137 34.4269 12.0603 37.5819 11.4591 41.25H7.6875ZM23.9278 18.7285L21.3244 15.9807C24.3488 13.6157 27.5387 11.7444 30.8944 10.3669C34.25 8.98941 37.7019 8.14441 41.25 7.83191V11.5819C38.2069 11.8944 35.2116 12.6635 32.2641 13.8891C29.3172 15.1154 26.5384 16.7285 23.9278 18.7285ZM65.9494 18.7285C63.6756 16.8247 60.9653 15.2238 57.8184 13.9257C54.6716 12.6275 51.6488 11.8463 48.75 11.5819V7.83191C52.3125 8.15878 55.7753 9.01941 59.1384 10.4138C62.5016 11.8075 65.6638 13.6872 68.625 16.0528L65.9494 18.7285ZM78.4181 41.25C78.0094 37.7738 77.1922 34.6066 75.9666 31.7485C74.7403 28.8904 73.1272 26.3004 71.1272 23.9785L73.8028 21.3028C76.2166 24.1685 78.1203 27.2825 79.5141 30.645C80.9084 34.0082 81.7931 37.5432 82.1681 41.25H78.4181Z" fill="#8497AA"/>
+</g>
+</svg>
diff --git a/apps/web/src/assets/add-photo.svg b/apps/web/src/assets/add-photo.svg
new file mode 100644
index 0000000..d5ed4ed
--- /dev/null
+++ b/apps/web/src/assets/add-photo.svg
@@ -0,0 +1,8 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4066_2826" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="90" height="90">
+<rect width="90" height="90" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4066_2826)">
+<path d="M16.9131 84.6331C14.9176 84.6331 13.2516 83.9727 11.915 82.6521C10.5784 81.3314 9.91016 79.6852 9.91016 77.7135V23.0206C9.91016 21.0488 10.5784 19.4026 11.915 18.082C13.2516 16.7613 14.9176 16.101 16.9131 16.101H47.2572V20.3842H16.9131C16.135 20.3842 15.4956 20.6312 14.9949 21.1252C14.495 21.6199 14.245 22.2517 14.245 23.0206V77.7135C14.245 78.4823 14.495 79.1141 14.9949 79.6088C15.4956 80.1028 16.135 80.3498 16.9131 80.3498H72.265C73.0431 80.3498 73.6825 80.1028 74.1832 79.6088C74.6831 79.1141 74.9331 78.4823 74.9331 77.7135V47.7307H79.268V77.7135C79.268 79.6852 78.5997 81.3314 77.2631 82.6521C75.9265 83.9727 74.2605 84.6331 72.265 84.6331H16.9131ZM21.9145 69.1469H67.2636L53.2588 50.6968L40.2542 66.9239L31.5845 56.627L21.9145 69.1469ZM66.2634 37.5172V28.9507H57.5936V24.6675H66.2634V16.101H70.5982V24.6675H79.268V28.9507H70.5982V37.5172H66.2634Z" fill="#8497AA"/>
+</g>
+</svg>
diff --git a/apps/web/src/components/UniversityClubSidebar/index.tsx b/apps/web/src/components/UniversityClubSidebar/index.tsx
index 462c2f1..c3a0ea3 100644
--- a/apps/web/src/components/UniversityClubSidebar/index.tsx
+++ b/apps/web/src/components/UniversityClubSidebar/index.tsx
@@ -14,8 +14,8 @@ function UniversityClubSidebar({ university, clubCount }: UniversityClubSidebarP
   const universityLabel = getUniversityLabel(university);
 
   return (
-    <aside className="flex flex-col gap-6 lg:gap-10">
-      <section className="border-text-100 flex items-center justify-center rounded-2xl border bg-white py-8 text-center sm:rounded-[20px] sm:py-7">
+    <aside className="flex w-full flex-col gap-6 md:w-64.75 lg:gap-5">
+      <section className="border-text-100 flex items-center justify-center rounded-2xl border bg-white py-8 text-center sm:min-h-41 sm:rounded-[20px] sm:py-5.5">
         <div className="flex min-w-0 flex-col items-center gap-1">
           <img className="size-10 object-contain" src={university.imageUrl} alt="" />
           <div className="flex max-w-full flex-col items-center">
diff --git a/apps/web/src/pages/Home/index.tsx b/apps/web/src/pages/Home/index.tsx
index cc75fd0..6be9e47 100644
--- a/apps/web/src/pages/Home/index.tsx
+++ b/apps/web/src/pages/Home/index.tsx
@@ -108,15 +108,15 @@ function Home() {
             해당 학교에 등록된 동아리 정보를 확인할 수 있어요.
           </p>
 
-          <label className="border-text-100 focus-within:border-primary-500 mt-12 flex h-16 w-full max-w-255 items-center rounded-[30px] border bg-white px-8 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] sm:mt-25 sm:h-19.5">
+          <label className="border-text-100 focus-within:border-primary-500 mt-12 flex h-16 w-full max-w-225 items-center rounded-[30px] border bg-white px-8 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.30)] sm:mt-20 sm:h-13">
             <span className="sr-only">학교명 검색</span>
             <input
-              className="text-text-700 placeholder:text-text-300 min-w-0 flex-1 bg-transparent text-sm outline-none sm:text-[24px] sm:leading-10 sm:font-medium"
+              className="text-text-700 placeholder:text-text-300 min-w-0 flex-1 bg-transparent text-sm outline-none sm:text-[16px] sm:leading-10 sm:font-medium"
               value={searchKeyword}
               onChange={handleSearchKeywordChange}
               placeholder="학교명을 검색해 보세요"
             />
-            <SearchIcon className="h-6 sm:h-12" />
+            <SearchIcon className="h-6 sm:h-8" />
           </label>
         </section>
 
@@ -132,8 +132,8 @@ function Home() {
             >
               <SectionTitle title="최근에 본 동아리" description="관심있게 봤던 동아리를 다시 확인해보세요." />
               <RecentClubListByIds
-                className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
-                emptyClassName="mt-4"
+                className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+                emptyClassName="mt-5"
                 recentClubIds={recentClubIds}
               />
             </section>
@@ -149,7 +149,7 @@ function Home() {
 
                 return (
                   <button
-                    className={`shrink-0 rounded-[26px] border px-3 font-medium transition-colors sm:px-5 ${
+                    className={`flex shrink-0 items-center justify-center rounded-[26px] border px-3 transition-colors sm:h-7.5 sm:min-w-13 ${
                       isSelected
                         ? 'border-primary-900 bg-primary-900 text-indigo-5'
                         : 'border-text-300 text-text-300 hover:border-primary-500 hover:text-primary-700 bg-transparent'
@@ -159,7 +159,7 @@ function Home() {
                     aria-pressed={isSelected}
                     onClick={() => handleRegionChange(region.value)}
                   >
-                    <span className="leading-7 sm:text-[20px] sm:leading-10">{region.label}</span>
+                    <span className="leading-7 sm:leading-2.5">{region.label}</span>
                   </button>
                 );
               })}
@@ -169,7 +169,7 @@ function Home() {
             </p>
           </div>
 
-          <div className="mt-7 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
             {universities.length > 0 ? (
               universities.map((university) => <UniversityCard key={university.id} university={university} />)
             ) : (
diff --git a/apps/web/src/pages/UniversityClubList/index.tsx b/apps/web/src/pages/UniversityClubList/index.tsx
index 900d6b9..5699689 100644
--- a/apps/web/src/pages/UniversityClubList/index.tsx
+++ b/apps/web/src/pages/UniversityClubList/index.tsx
@@ -101,12 +101,12 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
           ]}
         />
 
-        <div className="mt-10 grid gap-8 md:grid-cols-[279px_minmax(0,1050px)] lg:mt-15 lg:gap-5">
+        <div className="mt-10 grid gap-8 md:grid-cols-[259px_minmax(0,1050px)] lg:mt-15 lg:gap-5">
           <UniversityClubSidebar university={university} clubCount={university.clubCount} />
 
           <section className="flex min-w-0 flex-col items-center gap-10">
             <div className="flex w-full flex-col gap-5">
-              <label className="border-text-100 focus-within:border-primary-500 flex items-center rounded-[30px] border bg-white px-5 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] sm:px-8 sm:py-2.25">
+              <label className="border-text-100 focus-within:border-primary-500 flex h-13 items-center rounded-[30px] border bg-white px-5 transition-[border-color,box-shadow] focus-within:shadow-[0_0_30px_0_rgba(105,191,223,0.18)] sm:px-8 sm:py-2.25">
                 <span className="sr-only">동아리명 검색</span>
                 <input
                   className="placeholder:text-text-300 text-text-700 min-w-0 flex-1 bg-transparent leading-10 font-medium outline-none sm:text-[20px]"
@@ -137,12 +137,12 @@ function UniversityClubListContent({ universityId }: { universityId: number }) {
             </div>
 
             <div className="flex w-full flex-col gap-3">
-              <p className="text-text-400 text-[16px] leading-7">
+              <p className="text-text-400 text-[16px] leading-4.75">
                 선택한 대학의 동아리를 확인해보세요. 관심 있는 동아리의 소개를 살펴볼 수 있어요.
               </p>
 
               {clubs.length > 0 ? (
-                <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3">
+                <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
                   {clubs.map((club) => (
                     <ClubCard key={club.id} club={club} />
                   ))}