📱 소식탭 본문 모바일 반응형 추가 (#153)

* fix: 공지 세부 페이지 반응형 추가 * fix: 첨부파일 반응형 추가 * fix: 새소식 상세 페이지 반응형 추가 * fix: 세미나 페이지 모바일 반응형 추가
wafflestudio · Mar 9, 2024 · 2446aec · 2446aec
1 parent d6efbec
commit 2446aec
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 95 deletions.
diff --git a/app/[locale]/community/news/[id]/page.tsx b/app/[locale]/community/news/[id]/page.tsx
@@ -5,7 +5,7 @@ import Attachments from '@/components/common/Attachments';
 import { StraightNode } from '@/components/common/Nodes';
 import Tags from '@/components/common/Tags';
 import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import PageLayout, { PAGE_PADDING_BOTTOM_PX } from '@/components/layout/pageLayout/PageLayout';
 
 import { PostSearchQueryParams } from '@/types/post';
 
@@ -29,27 +29,30 @@ export default async function NewsPostPage({ params, searchParams }: NewsPostPag
   }월 ${date.getDate()}일 ${date.toLocaleString('ko-KR', { weekday: 'long' })}`;
 
   return (
-    <PageLayout title={currPost.title} titleType="small" titleMargin="mb-5">
-      {currPost.attachments.length !== 0 && <Attachments files={currPost.attachments} />}
-      <HTMLViewer
-        htmlContent={currPost.description}
-        className="mt-4"
-        topRightContent={
-          currPost.imageURL
-            ? { type: 'imageUnoptimized', url: currPost.imageURL, width: 320 }
-            : undefined
-        }
-      />
-      <time className=" mt-12 block text-end text-sm font-bold">{dateStr}</time>
-      <StraightNode margin="mt-[2.4375rem]" />
-      <Tags tags={currPost.tags} margin="mt-3 ml-6" searchPath={newsPath} />
-      <AdjPostNav
-        prevPost={prevPostPreview}
-        nextPost={nextPostPreview}
-        postType="news"
-        id={params.id}
-        margin="mt-12"
-      />
+    <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
+      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
+        {currPost.title}
+      </h2>
+
+      <div
+        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
+        style={{
+          paddingBottom: PAGE_PADDING_BOTTOM_PX,
+        }}
+      >
+        {currPost.attachments.length !== 0 && <Attachments files={currPost.attachments} />}
+        <HTMLViewer htmlContent={currPost?.description || ''} className="mb-10" />
+        <time className="mb-3 mt-12 block text-end text-sm font-bold">{dateStr}</time>
+        <StraightNode />
+        <Tags tags={currPost?.tags || []} margin="mt-3 ml-6" searchPath={newsPath} />
+        <AdjPostNav
+          prevPost={prevPostPreview}
+          nextPost={nextPostPreview}
+          postType="notice"
+          id={params.id}
+          margin="mt-12"
+        />
+      </div>
     </PageLayout>
   );
 }
diff --git a/app/[locale]/community/notice/[id]/page.tsx b/app/[locale]/community/notice/[id]/page.tsx
@@ -5,12 +5,7 @@ import Attachments from '@/components/common/Attachments';
 import { StraightNode } from '@/components/common/Nodes';
 import Tags from '@/components/common/Tags';
 import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout, {
-  PAGE_PADDING_BOTTOM_PX,
-  PAGE_PADDING_LEFT_PX,
-  PAGE_PADDING_RIGHT_PX,
-  PAGE_PADDING_TOP_PX,
-} from '@/components/layout/pageLayout/PageLayout';
+import PageLayout, { PAGE_PADDING_BOTTOM_PX } from '@/components/layout/pageLayout/PageLayout';
 
 import { PostSearchQueryParams } from '@/types/post';
 
@@ -35,7 +30,7 @@ export default async function NoticePostPage({
     return (
       <PageLayout titleType="small" titleMargin="mb-5">
         <p>
-          <b>{`'${rawId}'`}</b>는 올바르지 않은 id입니다.
+          <b>{rawId}</b>는 올바르지 않은 id입니다.
         </p>
         <AdjPostNav postType="notice" margin="mt-12" />
       </PageLayout>
@@ -46,18 +41,16 @@ export default async function NoticePostPage({
   const { prevPostPreview, nextPostPreview } = getAdjPostsInfo(currPost, searchParams, noticePath);
 
   return (
-    <PageLayout titleType="big" titleMargin="mb-5" bodyStyle={{ padding: 0 }}>
+    <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
       <Header title={currPost.title} author={currPost.author} dateStr={currPost.createdAt} />
       <div
-        className="bg-neutral-50 pt-9"
+        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
         style={{
-          paddingLeft: PAGE_PADDING_LEFT_PX,
-          paddingRight: PAGE_PADDING_RIGHT_PX,
           paddingBottom: PAGE_PADDING_BOTTOM_PX,
         }}
       >
         {currPost.attachments.length !== 0 && <Attachments files={currPost.attachments} />}
-        <HTMLViewer htmlContent={currPost?.description || ''} className="mb-10 mt-4" />
+        <HTMLViewer htmlContent={currPost?.description || ''} className="mb-10" />
         <StraightNode />
         <Tags tags={currPost?.tags || []} margin="mt-3 ml-6" searchPath={noticePath} />
         <AdjPostNav
@@ -74,10 +67,7 @@ export default async function NoticePostPage({
 
 function Header({ title, author, dateStr }: { title: string; author: string; dateStr: string }) {
   return (
-    <div
-      className="mb-9 flex flex-col gap-4"
-      style={{ paddingTop: PAGE_PADDING_TOP_PX, paddingLeft: PAGE_PADDING_LEFT_PX }}
-    >
+    <div className="flex flex-col gap-4 px-5 py-9 sm:pl-[100px] sm:pr-[340px]">
       <h2 className="text-[1.25rem] font-semibold">{title}</h2>
       <div className="flex gap-5 text-sm font-normal tracking-wide text-neutral-500">
         <p>글쓴이: {author}</p>

diff --git a/app/[locale]/community/seminar/[id]/page.tsx b/app/[locale]/community/seminar/[id]/page.tsx
@@ -8,7 +8,7 @@ import Attachments from '@/components/common/Attachments';
 import ImageWithFallback from '@/components/common/ImageWithFallback';
 import { StraightNode } from '@/components/common/Nodes';
 import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import PageLayout, { PAGE_PADDING_BOTTOM_PX } from '@/components/layout/pageLayout/PageLayout';
 
 import { PostSearchQueryParams } from '@/types/post';
 
@@ -31,60 +31,65 @@ export default async function SeminarPostPage({ params, searchParams }: SeminarP
   const { prevPostPreview, nextPostPreview } = getAdjPostsInfo(currPost, searchParams, seminarPath);
 
   return (
-    <PageLayout title={currPost.title} titleType="small" titleMargin="mb-5">
-      <div className="mb-9 flow-root break-all text-sm leading-[1.63rem] text-neutral-700">
+    <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
+      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
+        {currPost.title}
+      </h2>
+      <div
+        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
+        style={{
+          paddingBottom: PAGE_PADDING_BOTTOM_PX,
+        }}
+      >
         {currPost.attachments.length !== 0 && <Attachments files={currPost.attachments} />}
-
-        <div className="relative float-right mb-7 ml-7 mt-4 h-60 w-60">
-          <ImageWithFallback
-            src={currPost.imageURL ?? undefined}
-            alt="대표 이미지"
-            fill
-            className="flex-1 object-cover"
-            sizes="240px"
-          />
-        </div>
-
-        <div>
-          {'이름: '}
-          <LinkOrText href={currPost.speakerURL}>{currPost.name}</LinkOrText>
-        </div>
-
-        <div>{currPost.speakerTitle && <p>직함: {currPost.speakerTitle}</p>}</div>
-        <div>
-          {'소속: '}
-          <LinkOrText href={currPost.affiliationURL}>{currPost.affiliation}</LinkOrText>
+        <div className="mb-9 flex flex-col-reverse justify-between gap-5 text-md leading-loose sm:flex-row">
+          <div className="whitespace-nowrap">
+            <div>
+              {'이름: '}
+              <LinkOrText href={currPost.speakerURL}>{currPost.name}</LinkOrText>
+            </div>
+            <div>{currPost.speakerTitle && <p>직함: {currPost.speakerTitle}</p>}</div>
+            <div>
+              {'소속: '}
+              <LinkOrText href={currPost.affiliationURL}>{currPost.affiliation}</LinkOrText>
+            </div>
+            <div className="mt-10">주최: {currPost.host}</div>
+            <div>일시: {formatStartEndDate(currPost.startDate, currPost.endDate)}</div>
+            <div>장소: {currPost.location}</div>
+          </div>
+          <div className="relative mx-7 aspect-square sm:h-60 sm:w-60">
+            <ImageWithFallback
+              alt={`대표_이미지`}
+              src={currPost.imageURL}
+              className="object-contain"
+              fill
+            />
+          </div>
         </div>
 
-        <div className="mt-10">주최: {currPost.host}</div>
-
-        <div>일시: {formatStartEndDate(currPost.startDate, currPost.endDate)}</div>
-
-        <div>장소: {currPost.location}</div>
-
         {currPost.description && (
           <>
-            <div className="mt-12  font-bold">요약</div>
+            <div className="mt-10 font-bold">요약</div>
             <HTMLViewer htmlContent={currPost.description} />
           </>
         )}
 
         {currPost.introduction && (
           <>
-            <div className="mt-12  font-bold">연사 소개</div>
+            <div className="mt-10 font-bold">연사 소개</div>
             <HTMLViewer htmlContent={currPost.introduction} />
           </>
         )}
-      </div>
 
-      <StraightNode />
-      <AdjPostNav
-        prevPost={prevPostPreview}
-        nextPost={nextPostPreview}
-        postType="seminar"
-        id={params.id}
-        margin="mt-12"
-      />
+        <StraightNode margin="mt-10" />
+        <AdjPostNav
+          prevPost={prevPostPreview}
+          nextPost={nextPostPreview}
+          postType="notice"
+          id={params.id}
+          margin="mt-12"
+        />
+      </div>
     </PageLayout>
   );
 }

diff --git a/components/common/Attachments.tsx b/components/common/Attachments.tsx
@@ -10,7 +10,7 @@ export default function Attachments({ files }: { files: Attachment[] }) {
   if (files.length === 0) return <></>;
 
   return (
-    <div className="relative mb-6 mt-5 flex w-[40rem] flex-col gap-2 rounded-sm border border-neutral-300 bg-white px-4 py-3">
+    <div className="relative mb-6 mt-5 flex flex-col gap-2 rounded-sm border border-neutral-300 bg-white px-4 py-3">
       {files.map((file, index) => (
         <AttachmentAnchor key={index} {...file} />
       ))}
@@ -23,12 +23,13 @@ const AttachmentAnchor = ({ name, bytes, url }: Attachment) => {
   const kilobyte = Math.round(bytes / 100);
   return (
     <a
-      className="w-fit text-sm font-normal hover:underline"
+      className="flex text-sm font-normal hover:underline"
       href={url}
       download={name}
       target="_blank"
     >
-      {name}({kilobyte / 10}KB)
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</span>
+      <span>({kilobyte / 10}KB)</span>
     </a>
   );
 };
diff --git a/components/common/selection/SelectionList.tsx b/components/common/selection/SelectionList.tsx
@@ -37,7 +37,7 @@ export default function SelectionList({
   const gridStyle = `grid-cols-[repeat(2,_1fr)] ${listGridColumnClass}`;
 
   return (
-    <ul className={`grid ${gridStyle} mb-6 gap-3 pt-7 sm:mb-9 sm:pt-[44px]`}>
+    <ul className={`grid ${gridStyle} mb-6 gap-3 pt-7 sm:mb-9 sm:pt-11`}>
       {names.map((name) => (
         <SelectionItem
           key={name}

diff --git a/package-lock.json b/package-lock.json