💄 디자인 및 반응형 디테일 수정 (#161)

* fix: resize 발생 전에는 모바일 감지가 제대로 되지 않던 에러 수정

* fix: 학부 소개 페이지 반응형

* fix: 학부장 인사말 페이지 반응형

* fix: 시설 안내 반응형

* fix: 소식탭 디자인 수정

* fix: 구성원 디자인 수정

* fix: 입학 디자인 수정

* fix: 학사 및 교과 디자인 수정

* feat: 10-10 프로젝트 대분류 페이지 추가

* fix: ScholarshipPreview 학부/대학원 분기처리

* fix: 모바일 크기일 때 교과과정 카드형X

* design: 교과과정 카드형 화살표 트랜지션 추가

app/[locale]/10-10-project/page.tsx

@@ -0,0 +1,5 @@
+import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
+
+export default function TenTenProjectPage() {
+  return <MajorCategoryPageLayout />;
+}

app/[locale]/about/facilities/FacilitiesList.tsx

@@ -1,22 +1,20 @@
-import Image from 'next/image';
-
 import Distance from '@/public/image/about/distance.svg';
 
-import { Facilities } from '@/types/about';
+import ImageWithFallback from '@/components/common/ImageWithFallback';
+import HTMLViewer from '@/components/editor/HTMLViewer';
 
-import HTMLViewer from '../../../../components/editor/HTMLViewer';
+import { Facilities } from '@/types/about';
 
 export default function FacilitesList({ facilities }: { facilities: Facilities }) {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col divide-y divide-neutral-200 pt-2 sm:pt-6">
       {facilities.map((post, index) => (
         <FacilitiesRow
           key={index}
           name={post.name}
           description={post.description}
           location={post.locations.join(', ')}
           imageURL={post.imageURL ?? ''} // TODO: imageURL이 non-null되면 수정
-          border={index !== 0}
         />
       ))}
     </div>
@@ -28,25 +26,19 @@ export interface FacilitiesRowProps {
   description: string;
   location: string;
   imageURL: string;
-  border: boolean;
 }
 
-function FacilitiesRow({ name, description, location, imageURL, border }: FacilitiesRowProps) {
+function FacilitiesRow({ name, description, location, imageURL }: FacilitiesRowProps) {
   return (
-    <article
-      className={`flex flex-row items-start justify-between break-all py-[1.2rem] text-neutral-700 ${
-        border ? 'border-t-[1px] border-neutral-200' : undefined
-      }`}
-    >
+    <article className={`flex flex-row items-start justify-between gap-5 py-5`}>
       <div className="flex w-[35.5rem] flex-col">
-        <h3 className=" mb-[.69rem] text-base font-bold leading-5 text-neutral-800">{name}</h3>
+        <h3 className="mb-3 text-base font-bold leading-5">{name}</h3>
         <HTMLViewer htmlContent={description} />
-        <div className="flex items-center gap-[0.12rem]">
-          <Distance />
-          <p className="translate-x-[-2px] text-md leading-[1.63rem]">{location}</p>
+        <div className="flex translate-x-[-4px] items-center gap-px">
+          <Distance className="shrink-0" />
+          <p className="text-md">{location}</p>
         </div>
       </div>
-
       <FacilitiesRowImage imageURL={imageURL} />
     </article>
   );
@@ -55,7 +47,7 @@ function FacilitiesRow({ name, description, location, imageURL, border }: Facili
 function FacilitiesRowImage({ imageURL }: { imageURL: string }) {
   return (
     <div className="relative h-40 w-60">
-      <Image alt="대표 이미지" src={imageURL} fill sizes="10rem" />
+      <ImageWithFallback alt="대표 이미지" src={imageURL} fill sizes="10rem" />
     </div>
   );
 }

app/[locale]/about/facilities/page.tsx

@@ -8,7 +8,7 @@ export default async function FacilitiesPage() {
   const facilities = await getFacilities();
 
   return (
-    <PageLayout titleType="big">
+    <PageLayout titleType="big" bodyStyle={{ paddingTop: 0 }}>
       <FacilitesList facilities={facilities} />
     </PageLayout>
   );

app/[locale]/about/greetings/page.tsx

@@ -8,15 +8,15 @@ import { getGreetings } from '@/apis/about';
 import HTMLViewer from '@/components/editor/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
-// 학부 소개 페이지 - 학부장 인삿말 페이지의 형식이 동일
+// 학부 소개 페이지 - 학부장 인사말 페이지의 형식이 동일
 // 두 곳에서만 겹쳐서 따로 컴포넌트화하지 않음
 export default async function GreetingsPage() {
   const { description } = await getGreetings();
 
   return (
     <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
-      <div className="flex items-start gap-12 bg-neutral-100 py-10 pl-[6.25rem] pr-[22rem]">
-        <HTMLViewer htmlContent={description} className="w-[37.5rem] shrink-0" />
+      <div className="flex flex-col items-start gap-12 bg-neutral-100 px-5 pb-12 pt-7 sm:flex-row sm:py-11 sm:pl-[6.25rem] sm:pr-[360px]">
+        <HTMLViewer htmlContent={description} />
         {/* TODO: 레이아웃이 바뀌어 사진은 백엔드에서 가져오지 않는데 어떻게 처리할지 고민 필요 */}
         <Image src={greetings.src} alt="학부장" width={212} height={280} />
       </div>

app/[locale]/about/overview/page.tsx

@@ -16,16 +16,16 @@ export default async function OverviewPage() {
 
   return (
     <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
-      <div className="flex items-start gap-10 bg-neutral-100 py-10 pl-[6.25rem] pr-[22rem]">
-        <HTMLViewer htmlContent={description} className="w-[37.5rem] shrink-0" />
+      <div className="flex flex-col items-start gap-10 bg-neutral-100 px-5 pb-12 pt-7 sm:flex-row sm:py-11 sm:pl-[6.25rem] sm:pr-[360px]">
+        <HTMLViewer htmlContent={description} />
         <Image
           src="https://cse-dev-waffle.bacchus.io/sites/default/files/styles/medium-larger/public/node--page/301302.jpg?itok=96k1IsL0"
           alt="학교 전경"
           width={320}
           height={213}
         />
       </div>
-      <div className="pb-[7.88rem] pl-[6.25rem] pt-10">
+      <div className="px-5 pb-16 pt-10 sm:pb-[7.88rem] sm:pl-[6.25rem] sm:pr-[360px]">
         <h2 className="mb-6 text-base font-semibold">학부 소개 책자</h2>
         <div className="mb-10 flex gap-6">
           <Image src={brochure1.src} width={227} height={320} alt="소개 책자" />

app/[locale]/academics/graduate/scholarship/page.tsx

@@ -5,5 +5,11 @@ import ScholarshipPreview from '../../helper/ScholarshipPreview';
 export default async function GraduateScholarshipListPage() {
   const data = await getMockGraduateScholarshipList();
 
-  return <ScholarshipPreview description={data.description} scholarshipList={data.scholarship} />;
+  return (
+    <ScholarshipPreview
+      description={data.description}
+      scholarshipList={data.scholarship}
+      type="GRADUATE"
+    />
+  );
 }

app/[locale]/academics/helper/ScholarshipPreview.tsx

@@ -6,26 +6,30 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 import { getPath } from '@/utils/page';
 import { undergraduateScholarship, graduateScholarship } from '@/utils/segmentNode';
 
+type GradeType = 'GRADUATE' | 'UNDERGRADUATE';
+
 const undergraduateScholarshipPath = getPath(undergraduateScholarship);
 const graduateScholarshipPath = getPath(graduateScholarship);
 
 export default async function ScholarshipPreview({
   description,
   scholarshipList,
+  type,
 }: {
   description: string;
   scholarshipList: { id: number; name: string }[];
+  type: GradeType;
 }) {
   return (
     <PageLayout titleType="big">
-      <HTMLViewer htmlContent={description} className="mt-7" />
+      <HTMLViewer htmlContent={description} />
       <div className=" mt-10 flex flex-col">
         <h3 className="border-b-[1px] border-b-neutral-200 pb-2 text-[20px] font-bold leading-10">
           장학금 종류
         </h3>
         <ul className="mt-2">
           {scholarshipList.map((item) => (
-            <ScholarshipRow id={item.id} name={item.name} key={item.id} type="UNDERGRADUATE" />
+            <ScholarshipRow id={item.id} name={item.name} key={item.id} type={type} />
           ))}
         </ul>
       </div>
@@ -36,19 +40,19 @@ export default async function ScholarshipPreview({
 export interface ScholarshipRowProps {
   id: number;
   name: string;
-  type: 'GRADUATE' | 'UNDERGRADUATE';
+  type: GradeType;
 }
 
 export function ScholarshipRow({ id, name, type }: ScholarshipRowProps) {
   return (
-    <li className="my-1 w-fit">
+    <li className="w-fit py-2">
       <Link
         href={`${
           type === 'GRADUATE' ? graduateScholarshipPath : undergraduateScholarshipPath
         }/${id}`}
-        className="group flex h-7 items-center gap-2.5 px-3"
+        className="group flex items-center gap-2.5 px-3"
       >
-        <div className="h-2.5 w-2.5 rounded-full border border-main-orange duration-300 group-hover:bg-main-orange" />
+        <div className="h-2.5 w-2.5 shrink-0 rounded-full border border-main-orange duration-300 group-hover:bg-main-orange" />
         <span className="text-sm font-medium duration-300 group-hover:text-main-orange">
           {name}
         </span>

app/[locale]/academics/helper/courses/CourseRow.tsx

@@ -28,7 +28,7 @@ export default function CourseRow({ courses, selectedOption }: CourseRowProps) {
   return (
     <div className="group flex items-center">
       <ArrowButton iconName="navigate_before" onClick={() => scrollHorizontally('left')} />
-      <div className="styled-scrollbar overflow-x-auto overflow-y-hidden py-3" ref={carouselRef}>
+      <div className="no-scrollbar overflow-x-auto overflow-y-hidden py-3" ref={carouselRef}>
         <div className="flex gap-5">
           {courses.map((course) => (
             <CourseCard course={course} selectedOption={selectedOption} key={course.code} />
@@ -47,7 +47,7 @@ interface ArrowButtonProps {
 
 function ArrowButton({ iconName, onClick }: ArrowButtonProps) {
   return (
-    <button className="invisible group-hover:visible" onClick={onClick}>
+    <button className="opacity-0 duration-300 group-hover:opacity-100" onClick={onClick}>
       <span className="material-symbols-rounded text-[44px] font-light text-main-orange">
         {iconName}
       </span>

app/[locale]/academics/undergraduate/courses/CoursePageContent.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Course, SortOption, ViewOption } from '@/types/academics';
 
+import useResponsive from '@/utils/hooks/useResponsive';
+
 import CourseToolbar from './CourseToolbar';
 import CourseCards from '../../helper/courses/CourseCards';
 import CourseList from '../../helper/courses/CourseList';
@@ -17,11 +19,21 @@ export default function CoursePageContent({ courses }: CoursePageContentProps) {
     view: '카드형',
     sort: '학년',
   });
+  const { screenType } = useResponsive();
+  const hideViewOption = screenType === 'mobile';
 
-  const changeOptions = (type: 'view' | 'sort', option: ViewOption | SortOption) => {
-    setSelectedOption((prev) => ({ ...prev, [type]: option }));
+  const changeOptions = (
+    options: { type: 'view'; option: ViewOption } | { type: 'sort'; option: SortOption },
+  ) => {
+    setSelectedOption((prev) => ({ ...prev, [options.type]: options.option }));
   };
 
+  useEffect(() => {
+    if (hideViewOption) {
+      changeOptions({ type: 'view', option: '목록형' });
+    }
+  }, [hideViewOption]);
+
   return (
     <div className={selectedOption.view === '카드형' ? 'w-[970px]' : 'w-[720px]'}>
       <h4 className="mb-8 mt-14 pl-5 text-[17px] font-bold">교과목 정보</h4>

app/[locale]/academics/undergraduate/courses/CourseToolbar.tsx

@@ -5,7 +5,9 @@ import { SortOption, ViewOption } from '@/types/academics';
 interface CourseToolbarProps {
   viewOption: ViewOption;
   sortOption: SortOption;
-  changeOptions: (type: 'view' | 'sort', option: ViewOption | SortOption) => void;
+  changeOptions: (
+    options: { type: 'view'; option: ViewOption } | { type: 'sort'; option: SortOption },
+  ) => void;
 }
 
 export default function CourseToolbar({
@@ -21,11 +23,11 @@ export default function CourseToolbar({
     >
       <ViewOptions
         selectedOption={viewOption}
-        changeOption={(option) => changeOptions('view', option)}
+        changeOption={(option) => changeOptions({ type: 'view', option })}
       />
       <SortOptions
         selectedOption={sortOption}
-        changeOption={(option) => changeOptions('sort', option)}
+        changeOption={(option) => changeOptions({ type: 'sort', option })}
       />
     </div>
   );
@@ -38,7 +40,7 @@ interface ViewOptionsProps {
 
 function ViewOptions({ selectedOption, changeOption }: ViewOptionsProps) {
   return (
-    <div className="flex gap-3 text-md text-neutral-400">
+    <div className="hidden gap-3 text-md text-neutral-400 sm:flex">
       <span
         className={selectedOption === '카드형' ? 'text-neutral-700' : 'cursor-pointer'}
         onClick={() => changeOption('카드형')}

app/[locale]/academics/undergraduate/scholarship/page.tsx

@@ -5,5 +5,11 @@ import ScholarshipPreview from '../../helper/ScholarshipPreview';
 export default async function UndergraduateScholarshipListPage() {
   const data = await getUndergraduateScholarshipList();
 
-  return <ScholarshipPreview description={data.description} scholarshipList={data.scholarship} />;
+  return (
+    <ScholarshipPreview
+      description={data.description}
+      scholarshipList={data.scholarship}
+      type="UNDERGRADUATE"
+    />
+  );
 }

app/[locale]/admissions/international/exchange/page.tsx

@@ -3,8 +3,8 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 export default async function InternationalExchangePage() {
   return (
-    <PageLayout titleType="big">
-      <HTMLViewer htmlContent={htmlContent} />
+    <PageLayout titleType="big" bodyStyle={{ paddingBottom: 0 }}>
+      <HTMLViewer htmlContent={htmlContent} className="pb-16 sm:pb-[220px]" />
     </PageLayout>
   );
 }

app/[locale]/admissions/international/scholarships/page.tsx

@@ -3,8 +3,8 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 export default async function InternationalScholarshipPage() {
   return (
-    <PageLayout titleType="big">
-      <HTMLViewer htmlContent={htmlContent} />
+    <PageLayout titleType="big" bodyStyle={{ paddingBottom: 0 }}>
+      <HTMLViewer htmlContent={htmlContent} className="pb-16 sm:pb-[220px]" />
     </PageLayout>
   );
 }

app/[locale]/community/news/NewsPageContent.tsx

@@ -3,6 +3,7 @@
 import NewsRow from '@/app/[locale]/community/news/helper/NewsRow';
 
 import LoginVisible from '@/components/common/LoginVisible';
+import NoSearchResult from '@/components/common/NoSearchResult';
 import Pagination from '@/components/common/Pagination';
 import SearchBox from '@/components/common/search/SearchBox';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
@@ -35,14 +36,14 @@ export default function NewsPageContent({
   };
 
   return (
-    <PageLayout titleType="big">
+    <PageLayout titleType="big" bodyStyle={{ width: 'fit-content' }}>
       <SearchBox
         tags={NEWS_TAGS}
         initTags={tags}
         initKeyword={keyword ?? ''}
         setSearchParams={setSearchParams}
       />
-      <div className="mb-8 mt-10 flex flex-col gap-5 sm:mx-16">
+      <div className="mb-8 mt-10 flex flex-col gap-5 sm:mx-2.5">
         {searchList.length === 0 ? (
           <NoSearchResult />
         ) : (
@@ -73,5 +74,3 @@ export default function NewsPageContent({
     </PageLayout>
   );
 }
-
-const NoSearchResult = () => <p className="mx-2.5 mb-8 mt-6">검색 결과가 존재하지 않습니다.</p>;

app/[locale]/community/news/helper/NewsRow.tsx

@@ -44,7 +44,7 @@ export default function NewsRow({
 
   return (
     <article
-      className={`flex flex-col-reverse pb-5 text-neutral-700 sm:flex-row ${
+      className={`flex flex-col-reverse pb-5 sm:flex-row ${
         hideDivider ? '' : 'border-b border-neutral-100'
       }`}
     >

app/[locale]/community/notice/NoticePageContent.tsx

@@ -17,7 +17,7 @@ import useResponsive from '@/utils/hooks/useResponsive';
 import AdminFeatures from './helper/AdminFeatures';
 import { usePostSelect } from './helper/usePostSelect';
 
-const POST_LIMIT = 20; // TODO: 모바일 크기에서는 10으로 축소
+const POST_LIMIT = 20;
 
 // TODO: edit mode에서 페이지 나가려고 할 때 경고 띄워주기: 변경사항이 저장되지 않았습니다. 정말 나가시겠습니까?
 export default function NoticePageContent({
@@ -36,7 +36,7 @@ export default function NoticePageContent({
   };
 
   return (
-    <PageLayout titleType="big" bodyStyle={{ paddingTop: 54 }}>
+    <PageLayout titleType="big">
       <SearchBox
         tags={NOTICE_TAGS}
         initTags={tags}

app/[locale]/community/notice/helper/NoticeList.tsx

@@ -1,5 +1,7 @@
 import { Dispatch } from 'react';
 
+import NoSearchResult from '@/components/common/NoSearchResult';
+
 import { NoticePreview } from '@/types/notice';
 
 import NoticeListHeader from './NoticeListHeader';
@@ -19,7 +21,7 @@ export default function NoticeList({
   selectedIds,
   dispatchIds,
 }: NoticeListProps) {
-  if (posts.length === 0) return <p className="mx-2.5 mb-8 mt-6">검색 결과가 존재하지 않습니다.</p>;
+  if (posts.length === 0) return <NoSearchResult />;
 
   return (
     <div className="mx-2.5 mb-10 mt-9 border-y border-neutral-200">