design: 대학 세부 페이지 디자인 변경 (#154)

* design: k50 색상변경

* refactor: CollegeDetail 리팩토링

* refactor: BottomSheet 리팩토링

* rename: CollegeBottomSheet 이름 파일명과 통일

* remove: 중복 파일 삭제

Author: wibaek

headver.json

@@ -1,3 +1,3 @@
 {
-  "head": 29
+  "head": 30
 }

…p/university/[id]/CollegeBottomsheet.tsx …p/university/[id]/CollegeBottomSheet.tsxsrc/app/university/[id]/CollegeBottomsheet.tsx renamed to src/app/university/[id]/CollegeBottomSheet.tsx src/app/university/[id]/CollegeBottomsheet.tsx renamed to src/app/university/[id]/CollegeBottomSheet.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useRef, useState } from "react";
 
+import clsx from "clsx";
+
 import {
   deleteUniversityFavoriteApi,
   getUniversityFavoriteStatusApi,
@@ -115,11 +117,12 @@ const CollegeBottomSheet = ({ collegeId, convertedKoreanName, reviewList, univer
 
   return (
     <>
-      <div className={styles.blank} />
-      <div className={styles.bottomSheet}>
-        <div className="absolute -top-3 ml-8 -translate-y-full font-serif text-3xl font-semibold text-white">
-          {university.englishName || "대학명"}
+      <div className={clsx("max-h-80", styles["flexible-height"])}>
+        <div className="flex h-full items-end pb-3 pl-8">
+          <span className="text-3xl font-semibold text-white">{university.englishName || "대학명"}</span>
         </div>
+      </div>
+      <div className="relative rounded-t-3xl bg-white">
         <div className="flex h-[69px] items-center justify-between pl-5 pr-[22px] pt-6">
           <div className="font-serif text-2xl font-semibold">{convertedKoreanName || "대학명"}</div>
           <button onClick={toggleLike} type="button">
@@ -140,7 +143,7 @@ const CollegeBottomSheet = ({ collegeId, convertedKoreanName, reviewList, univer
           <div className={styles.item}>
             <div className={"ml-5 font-serif text-base font-semibold"}>홈페이지</div>
             <div className="mx-5 mt-2.5 font-serif text-sm font-normal leading-normal">
-              <a href={university.homepageUrl || ""} target="_blank" rel="noreferrer">
+              <a className="break-words" href={university.homepageUrl || ""} target="_blank" rel="noreferrer">
                 {university.homepageUrl || "홈페이지 없음"}
               </a>
             </div>
@@ -155,7 +158,7 @@ const CollegeBottomSheet = ({ collegeId, convertedKoreanName, reviewList, univer
                     href={university.accommodationUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="font-serif text-sm font-normal leading-normal"
+                    className="break-words font-serif text-sm font-normal leading-normal"
                   >
                     {university.accommodationUrl}
                   </a>
@@ -251,7 +254,7 @@ const CollegeBottomSheet = ({ collegeId, convertedKoreanName, reviewList, univer
                     href={university.englishCourseUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="font-serif text-sm font-normal leading-normal"
+                    className="break-words font-serif text-sm font-normal leading-normal"
                   >
                     {university.englishCourseUrl}
                   </a>

src/app/university/[id]/CollegeDetail.tsx

@@ -2,20 +2,19 @@ import Image from "next/image";
 
 import styles from "./college-detail.module.css";
 
-type CollegeDetailProps = {
-  name: string;
+interface CollegeDetailProps {
   imageUrl: string;
-};
+}
 
-const CollegeDetail = ({ name, imageUrl }: CollegeDetailProps) => (
+const CollegeDetail = ({ imageUrl }: CollegeDetailProps) => (
   <div className={styles.wrapper}>
     <div className={styles.imageWrapper}>
       <Image
-        className={styles.image}
+        className="h-full w-full object-cover"
         src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${imageUrl}`}
-        alt={name}
         width={600}
         height={300}
+        alt="학교 이미지"
       />
     </div>
   </div>

src/app/university/[id]/college-bottomsheet.module.css

@@ -1,22 +1,10 @@
-.bottomSheet {
-  position: relative;
-  background-color: white;
-  border-radius: 30px 30px 0px 0px;
-}
-.bottomSheet a {
-  overflow-wrap: break-word;
-}
-
-.blank {
+.flexible-height {
   height: calc(100vw / 2);
-  /* opacity: 0;
-  visibility: hidden; */
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.85%, rgba(0, 0, 0, 0.6) 86.98%);
 }
 @media (min-width: 600px) {
-  .blank {
+  .flexible-height {
     height: 300px;
-    /* opacity: 0;
-    visibility: hidden; */
   }
 }
 
@@ -45,7 +33,7 @@
 
 /* 섹션 */
 .scrollOffset {
-  /* 네비게이션 + 탭 = 56 + 47 = 103*/
+  /* 네비게이션 + 탭 = 56 + 47 = 103 */
   /* 추가 42 */
   padding-top: 145px;
   margin-top: -103px;

src/app/university/[id]/college-detail.module.css

@@ -15,7 +15,8 @@
   height: 67vw;
   max-height: 400px;
 }
-.imageWrapper::before {
+
+/* .imageWrapper::before {
   content: "";
   position: absolute;
   top: 0;
@@ -24,29 +25,4 @@
   bottom: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.85%, rgba(0, 0, 0, 0.6) 86.98%);
   z-index: 1;
-}
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* .title {
-  position: static;
-  z-index: -1;
-  margin-left: 30px;
-  margin-top: calc(100vw / 2 - 58px);
-
-  color: #000;
-  font-family: Pretendard;
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-}
-
-@media (min-width: 600px) {
-  .title {
-    margin-top: 242px;
-  }
 } */

src/app/university/[id]/page.tsx

@@ -66,7 +66,7 @@ const CollegeDetailPage = async ({ params }: CollegeDetailPageProps) => {
         <title>{convertedKoreanName || "대학명"}</title>
       </Head>
       <TopDetailNavigation title={convertedKoreanName || "대학명"} />
-      <CollegeDetail imageUrl={collegeData.backgroundImageUrl} name={convertedKoreanName || "대학명"} />
+      <CollegeDetail imageUrl={collegeData.backgroundImageUrl} />
       <CollegeBottomSheet
         collegeId={collegeId}
         university={collegeData}

tailwind.config.ts

@@ -50,7 +50,7 @@ const config: Config = {
         },
         k: {
           "0": "#FFFFFF",
-          "50": "#EFEFF0",
+          "50": "#F5F5F5",
           "100": "#DDDDDF",
           "200": "#C6C7C9",
           "300": "#AAACAF",