📱 페이지 레이아웃, 세미나/새소식/공지 목록 반응형 추가 (#144)

* fix: 푸터 아래 로고 반응형으로 변경 * feat: 페이지 레이아웃 반응형 추가 * feat: 세미나 목록 페이지 반응형 추가 * feat: 새소식 페이지 반응형 추가 * feat: 공지목록 반응형 추가
wafflestudio · Mar 2, 2024 · 9a8848c · 9a8848c
1 parent bde528b
commit 9a8848c
Show file tree

Hide file tree

Showing 35 changed files with 126 additions and 116 deletions.
diff --git a/app/[locale]/community/news/NewsPageContent.tsx b/app/[locale]/community/news/NewsPageContent.tsx
@@ -2,6 +2,7 @@
 
 import NewsRow from '@/app/[locale]/community/news/NewsRow';
 
+import LoginStaffVisible from '@/components/common/auth/LoginStaffVisible';
 import Pagination from '@/components/common/Pagination';
 import SearchBox from '@/components/common/search/SearchBox';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
@@ -15,7 +16,6 @@ import { getPath } from '@/utils/page';
 import { news } from '@/utils/segmentNode';
 
 import AdminFeatures from './AdminFeatures';
-import LoginStaffVisible from '../../../../components/common/auth/LoginStaffVisible';
 
 const POST_LIMIT = 10;
 const newsPath = getPath(news);
@@ -40,7 +40,7 @@ export default function NewsPageContent({
         initKeyword={keyword ?? ''}
         setSearchParams={setSearchParams}
       />
-      <div className="flex flex-col gap-6 mt-10 mb-8 mx-16">
+      <div className="flex flex-col gap-5 mt-10 mb-8 sm:mx-16">
         {searchList.length > 0 ? (
           searchList.map((post) => (
             <NewsRow

diff --git a/app/[locale]/community/news/NewsRow.tsx b/app/[locale]/community/news/NewsRow.tsx
@@ -1,12 +1,11 @@
 import { Link } from '@/navigation';
 
+import ImageWithFallback from '@/components/common/ImageWithFallback';
 import Tags from '@/components/common/Tags';
 
 import { getPath } from '@/utils/page';
 import { news } from '@/utils/segmentNode';
 
-import ImageWithFallback from '../../../../components/common/ImageWithFallback';
-
 export interface NewsRowProps {
   href: string;
   title: string;
@@ -45,39 +44,50 @@ export default function NewsRow({
 
   return (
     <article
-      className={`text-neutral-700 flex pb-6 ${
-        hideDivider ? '' : 'border-neutral-200 border-b-[1px]'
+      className={`text-neutral-700 flex flex-col-reverse sm:flex-row pb-5 ${
+        hideDivider ? '' : 'border-neutral-100 border-b'
       }`}
     >
-      <div className="flex flex-col flex-1 mr-[2.5rem] justify-between p-1">
-        <Link href={href} className="hover:underline font-noto ">
-          <h3 className="text-base font-bold mb-[.69rem]">{title}</h3>
-        </Link>
+      <div className="flex flex-col flex-1 mr-[3.75rem] break-keep justify-between">
+        <time className="mt-5 mb-2.5 sm:hidden text-md text-neutral-800">{dateStr}</time>
 
-        <Link href={href} className="hover:cursor-pointer grow">
-          <p className="text-md leading-[160%] text-justify [text-align-last:left] font-normal text-neutral-500 mb-[.69rem] line-clamp-2 tracking-[0.01rem]">
-            {descriptionBold ? (
-              <>
-                {description.slice(0, descriptionBold.startIndex)}
-                <span className="font-noto font-bold">
-                  {description.slice(descriptionBold.startIndex, descriptionBold.endIndex)}
-                </span>
-                {description.slice(descriptionBold.endIndex)}
-              </>
-            ) : (
-              description
-            )}
-          </p>
-        </Link>
+        <div className="flex flex-col items-start">
+          <Link href={href} className="hover:underline">
+            <h3 className="text-base font-bold mb-2.5">{title}</h3>
+          </Link>
 
-        <div className="w-full flex justify-between items-center mt-auto">
+          <Link href={href} className="hover:cursor-pointer">
+            <p className="text-md font-normal text-neutral-500 mb-3 sm:mb-8 line-clamp-3 leading-[1.6]">
+              {descriptionBold ? (
+                <>
+                  {description.slice(0, descriptionBold.startIndex)}
+                  <span className="font-bold">
+                    {description.slice(descriptionBold.startIndex, descriptionBold.endIndex)}
+                  </span>
+                  {description.slice(descriptionBold.endIndex)}
+                </>
+              ) : (
+                description
+              )}
+            </p>
+          </Link>
+        </div>
+        <div className="flex justify-between items-center sm:gap-2.5">
           <Tags tags={tags} searchPath={newsPath} />
-          <time className="text-md text-neutral-500">{dateStr}</time>
+          <time className="hidden sm:inline self-end text-sm leading-[26px] text-neutral-800 whitespace-nowrap">
+            {dateStr}
+          </time>
         </div>
       </div>
 
-      <Link href={href} className="h-[9.375rem] aspect-[4/3] relative flex">
-        <ImageWithFallback alt="포스트 대표 이미지" src={imageURL} fill className="object-cover" />
+      <Link href={href} className="h-[280px] sm:h-[9.375rem] aspect-[4/3] relative flex">
+        <ImageWithFallback
+          alt="포스트 대표 이미지"
+          src={imageURL}
+          fill
+          className="object-fill"
+          sizes="12.5rem"
+        />
       </Link>
     </article>
   );

diff --git a/app/[locale]/community/news/create/page.tsx b/app/[locale]/community/news/create/page.tsx
@@ -11,7 +11,6 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { NEWS_TAGS } from '@/constants/tag';
 
-
 import { validateNewsForm } from '@/utils/formValidation';
 import { getPath } from '@/utils/page';
 import { news } from '@/utils/segmentNode';

diff --git a/app/[locale]/community/notice/NoticeListHeader.tsx b/app/[locale]/community/notice/NoticeListHeader.tsx
@@ -5,7 +5,7 @@ export default function NoticeListHeader({ isEditMode }: { isEditMode: boolean }
 
   return (
     <h5
-      className={`h-11 ${paddingLeft} flex text-[15px] items-center border-b border-neutral-200 text-neutral-800`}
+      className={`h-11 ${paddingLeft} hidden sm:flex text-[15px] items-center border-b border-neutral-200 text-neutral-800`}
     >
       <span className={`${NOTICE_ROW_CELL_WIDTH.title} pl-3 tracking-wide`}>제목</span>
       <span className={`${NOTICE_ROW_CELL_WIDTH.date} pl-8 tracking-wide`}>날짜</span>

diff --git a/app/[locale]/community/notice/NoticeListRow.tsx b/app/[locale]/community/notice/NoticeListRow.tsx
@@ -17,10 +17,10 @@ interface NoticeListRowProps {
 }
 
 export const NOTICE_ROW_CELL_WIDTH = {
-  check: 'w-[3.125rem]',
-  pin: 'w-[3.125rem]',
-  title: 'w-[35.625rem]',
-  date: 'w-auto',
+  check: 'sm:w-[3.125rem]',
+  pin: 'sm:w-[3.125rem]',
+  title: 'sm:w-[35.625rem]',
+  date: 'sm:w-auto',
 } as const;
 
 export default function NoticeListRow({
@@ -31,9 +31,11 @@ export default function NoticeListRow({
 }: NoticeListRowProps) {
   return (
     <li
-      className={`flex items-center text-[14px] h-11 py-2.5 ${post.isPinned && 'font-semibold'} ${
-        !isEditMode && (post.isPrivate ? 'bg-neutral-200' : 'odd:bg-neutral-50')
-      } ${isSelected && 'bg-neutral-100'} `}
+      className={`flex flex-col gap-2.5 sm:gap-0 sm:flex-row sm:items-center text-[14px] sm:h-11 py-6 sm:py-2.5 px-7 sm:px-0 sm:pr-4 ${
+        post.isPinned && 'font-semibold'
+      } ${!isEditMode && (post.isPrivate ? 'bg-neutral-200' : 'odd:bg-neutral-50')} ${
+        isSelected && 'bg-neutral-100'
+      } `}
     >
       {isEditMode && (
         <CheckboxCell
@@ -47,6 +49,7 @@ export default function NoticeListRow({
         hasAttachment={post.hasAttachment}
         id={post.id}
         isEditMode={isEditMode}
+        isPinned={post.isPinned}
       />
       <DateCell date={post.createdAt} />
     </li>
@@ -60,7 +63,7 @@ interface CheckboxCellProps {
 
 function CheckboxCell({ isChecked, toggleCheck }: CheckboxCellProps) {
   return (
-    <span className={`${NOTICE_ROW_CELL_WIDTH.check} flex justify-center`}>
+    <span className={`${NOTICE_ROW_CELL_WIDTH.check} hidden sm:flex justify-center`}>
       {isChecked ? (
         <CheckboxOrange className="cursor-pointer" onClick={toggleCheck} />
       ) : (
@@ -77,7 +80,7 @@ function CheckboxCell({ isChecked, toggleCheck }: CheckboxCellProps) {
 
 function PrivateOrPinCell({ isPrivate, isPinned }: { isPrivate: boolean; isPinned: boolean }) {
   return (
-    <span className={`${NOTICE_ROW_CELL_WIDTH.pin} px-[0.8125rem] shrink-0`}>
+    <span className={`${NOTICE_ROW_CELL_WIDTH.pin} sm:px-[0.8125rem] shrink-0`}>
       {isPrivate ? <LockIcon /> : isPinned && <PinIcon />}
     </span>
   );
@@ -88,11 +91,12 @@ interface TitleCellProps {
   hasAttachment: boolean;
   id: number;
   isEditMode: boolean;
+  isPinned: boolean;
 }
 
 const noticePath = getPath(notice);
 
-function TitleCell({ title, hasAttachment, id, isEditMode }: TitleCellProps) {
+function TitleCell({ title, hasAttachment, id, isEditMode, isPinned }: TitleCellProps) {
   if (isEditMode) {
     return (
       <span className={`${NOTICE_ROW_CELL_WIDTH.title} pl-3 flex gap-1.5`}>
@@ -104,12 +108,16 @@ function TitleCell({ title, hasAttachment, id, isEditMode }: TitleCellProps) {
     );
   } else {
     return (
-      <span className={`${NOTICE_ROW_CELL_WIDTH.title} pl-3`}>
+      <span className={`${NOTICE_ROW_CELL_WIDTH.title} sm:pl-3`}>
         <Link
           href={`${noticePath}/${id}`}
-          className="flex max-w-fit items-center gap-1.5 hover:text-main-orange"
+          className="font-semibold sm:font-normal flex max-w-fit items-center gap-1.5 hover:text-main-orange"
         >
-          <span className="whitespace-nowrap text-ellipsis overflow-hidden tracking-wide">
+          <span
+            className={`${
+              isPinned && 'text-main-orange sm:text-neutral-800'
+            } sm:whitespace-nowrap text-ellipsis overflow-hidden tracking-wide`}
+          >
             {title}
           </span>
           {hasAttachment && <ClipIcon className="shrink-0" />}
@@ -121,7 +129,7 @@ function TitleCell({ title, hasAttachment, id, isEditMode }: TitleCellProps) {
 
 function DateCell({ date }: { date: string }) {
   return (
-    <span className={`${NOTICE_ROW_CELL_WIDTH.date} pl-8 tracking-wide`}>
+    <span className={`${NOTICE_ROW_CELL_WIDTH.date} sm:pl-8 tracking-wide`}>
       {formatDate(new Date(date))}
     </span>
   );

diff --git a/app/[locale]/community/notice/NoticePageContent.tsx b/app/[locale]/community/notice/NoticePageContent.tsx
@@ -4,6 +4,7 @@ import { useReducer } from 'react';
 
 import NoticeList from '@/app/[locale]/community/notice/NoticeList';
 
+import LoginStaffVisible from '@/components/common/auth/LoginStaffVisible';
 import Pagination from '@/components/common/Pagination';
 import SearchBox from '@/components/common/search/SearchBox';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
@@ -15,7 +16,6 @@ import { NoticePreviewList } from '@/types/notice';
 import { useCustomSearchParams } from '@/utils/hooks/useCustomSearchParams';
 
 import AdminFeatures from './AdminFeatures';
-import LoginStaffVisible from '../../../../components/common/auth/LoginStaffVisible';
 
 const POST_LIMIT = 20;
 

diff --git a/app/[locale]/community/notice/create/page.tsx b/app/[locale]/community/notice/create/page.tsx
@@ -12,7 +12,6 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { NOTICE_TAGS } from '@/constants/tag';
 
-
 import { validateNoticeForm } from '@/utils/formValidation';
 import { getPath } from '@/utils/page';
 import { notice } from '@/utils/segmentNode';

diff --git a/app/[locale]/community/seminar/SeminarRow.tsx b/app/[locale]/community/seminar/SeminarRow.tsx
@@ -3,13 +3,13 @@ import Distance from '@/public/image/about/distance.svg';
 import Calendar from '@/public/image/calendar.svg';
 import Person from '@/public/image/person.svg';
 
+import ImageWithFallback from '@/components/common/ImageWithFallback';
+
 import { SeminarPreview } from '@/types/seminar';
 
 import { getPath } from '@/utils/page';
 import { seminar } from '@/utils/segmentNode';
 
-import ImageWithFallback from '../../../../components/common/ImageWithFallback';
-
 export interface SeminarRowProps {
   seminar: SeminarPreview;
   hideDivider: boolean;
@@ -24,44 +24,47 @@ export default function SeminarRow({
   const seminarPostPath = `${seminarPath}/${id}`;
 
   return (
-    <Link
-      href={seminarPostPath}
-      className={`group flex py-[1.2rem] border-neutral-200 ${
-        !isYearLast && !hideDivider ? 'border-t' : null
-      }`}
-    >
-      <ImageCell imageURL={imageURL} />
-      <div className="pl-5">
-        <TitleCell title={title} />
-        <HostInformationCell host={name} company={affiliation} />
-        <DateAndLocationCell date={new Date(startDate)} location={location} />
-      </div>
+    <Link href={seminarPostPath}>
+      <article
+        className={`group flex flex-col sm:flex-row py-[1.2rem] gap-4 sm:gap-5 border-neutral-200 ${
+          !isYearLast && !hideDivider ? 'border-t' : null
+        }`}
+      >
+        <ImageCell imageURL={imageURL} />
+        <div className="flex flex-col gap-1 sm:gap-0 items-start break-all">
+          <TitleCell title={title} />
+          <HostInformationCell host={name} company={affiliation} />
+          <DateAndLocationCell date={new Date(startDate)} location={location} />
+        </div>
+      </article>
     </Link>
   );
 }
 
 function ImageCell({ imageURL }: { imageURL: string | null }) {
   return (
     // title에 밀리는 것을 막기 위해 shrink-0 사용
-    <div className={'h-[6.25rem] w-[6.25rem] relative shrink-0'}>
-      <ImageWithFallback alt="대표 이미지" fill src={imageURL} className="object-cover" />
+    <div
+      className={`h-[160px] w-[160px] sm:h-[6.25rem] sm:w-[6.25rem] relative shrink-0 ${
+        !imageURL && 'bg-neutral-100'
+      }`}
+    >
+      <ImageWithFallback alt="대표 이미지" src={imageURL} fill className="object-cover" />
     </div>
   );
 }
 
 function TitleCell({ title }: { title: string }) {
-  return (
-    <h3 className="group-hover:underline font-bold mb-5 max-w-[calc(100% - 6.25rem)]">{title}</h3>
-  );
+  return <h3 className="group-hover:underline font-bold mb-1 sm:mb-5">{title}</h3>;
 }
 
 function HostInformationCell({ host, company }: { host: string; company: string }) {
   return (
-    <div className="hover:cursor-pointer flex gap-0.5 items-center">
+    <div className="cursor-pointer flex flex-wrap gap-0.5 items-center">
       <Person />
-      <span className="text-md font-normal text-neutral-500">{host}</span>
+      <Text text={host} />
       <VerticalDivider />
-      <span className="text-md font-normal text-neutral-500">{company}</span>
+      <Text text={company} />
     </div>
   );
 }
@@ -70,16 +73,20 @@ function DateAndLocationCell({ date, location }: { date: Date; location: string
   return (
     <div className="hover:cursor-pointer flex gap-0.5 items-center">
       <Calendar />
-      <span className="text-md font-normal text-neutral-500">{formatDateWithDays(date)}</span>
+      <Text text={formatDateWithDays(date)} />
       <VerticalDivider />
       <Distance />
-      <span className="text-md font-normal text-neutral-500">{location}</span>
+      <Text text={location} />
     </div>
   );
 }
 
+function Text({ text }: { text: string }) {
+  return <span className="text-md font-normal text-neutral-500">{text}</span>;
+}
+
 function VerticalDivider() {
-  return <span className="text-md font-normal w-5 text-center text-neutral-500">|</span>;
+  return <span className="text-md font-normal w-4 sm:w-5 text-center text-neutral-500">|</span>;
 }
 
 const DAYS = ['일', '월', '화', '수', '목', '금', '토'];

diff --git a/app/[locale]/community/seminar/create/page.tsx b/app/[locale]/community/seminar/create/page.tsx
@@ -11,7 +11,6 @@ import SeminarEditor from '@/components/editor/SeminarEditor';
 import { SeminarEditorContent } from '@/components/editor/SeminarEditorProps';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
-
 import { validateSeminarForm } from '@/utils/formValidation';
 import { getPath } from '@/utils/page';
 import { seminar } from '@/utils/segmentNode';

diff --git a/app/[locale]/reservations/introduction/page.tsx b/app/[locale]/reservations/introduction/page.tsx
@@ -3,7 +3,6 @@ import SelectionTitle from '@/components/common/selection/SelectionTitle';
 import HTMLViewer from '@/components/editor/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
-
 import { getPath } from '@/utils/page';
 import { replaceDashWithSpace } from '@/utils/replaceCharacter';
 import { reservationIntroduction } from '@/utils/segmentNode';

diff --git a/app/[locale]/search/SearchPageContent.tsx b/app/[locale]/search/SearchPageContent.tsx
@@ -12,7 +12,6 @@ import SearchBox from '@/components/common/search/SearchBox';
 import Header from '@/components/layout/header/Header';
 import PageTitle from '@/components/layout/pageLayout/PageTitle';
 
-
 import { SEARCH_TAGS } from '@/constants/tag';
 
 import { NoticeSearchResult, NewsSearchResult } from '@/types/search';

diff --git a/components/academics/ScholarshipRow.tsx b/components/academics/ScholarshipRow.tsx
@@ -4,7 +4,6 @@ import { Link } from '@/navigation';
 import { getPath } from '@/utils/page';
 import { graduateScholarship, undergraduateScholarship } from '@/utils/segmentNode';
 
-
 export interface ScholarshipRowProps {
   id: number;
   name: string;