💄 모바일 내비 디자인 반영 (#172)

* fix: 누락된 suneditor-contents 주석 추가 * refactor: 소식탭 뷰어들에 suspense 적용 * feat: PostFallback 구현 * fix: NewsRow 반응형 임시 처리' * feat: layout.tsx 수정 * design: 모바일 네비 디자인 적용 * fix: body full-width, 검색 화면에서 네비바가 접혀있음 * fix: layout이 화면을 채우도록 수정 * feat: 검색 결과 suspense 적용 * refactor: 검색 결과 섹션별로 컴포넌트화 * feat: AdmissionSection 구현 * fix: layout이 가능한 윈도우 폭에 맞도록 수정 * refactor: PR 전 리팩터링
wafflestudio · Mar 15, 2024 · 81c04c7 · 81c04c7
1 parent b600307
commit 81c04c7
Show file tree

Hide file tree

Showing 37 changed files with 818 additions and 553 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - refactor/useResponsive
+      - design/mobileNav
 
 jobs:
   build:

diff --git a/app/[locale]/MarginedMain.tsx b/app/[locale]/MarginedMain.tsx
@@ -2,12 +2,12 @@
 
 import { ReactNode } from 'react';
 
-import useCurrentSegmentNode from '@/utils/hooks/useCurrentSegmentNode';
-import { main as mainNode } from '@/utils/segmentNode';
+import { usePathname } from '@/navigation';
 
 export default function MarginedMain({ children }: { children: ReactNode }) {
-  const node = useCurrentSegmentNode();
-  const marginLeft = node === mainNode ? `sm:ml-[4.75rem]` : '';
+  const pathName = usePathname();
+  const isMain = pathName === '/';
+  const paddingLeft = isMain ? `sm:pl-[11rem]` : 'sm:pl-[6.25rem]';
 
-  return <main className={`flex grow flex-col overflow-scroll ${marginLeft}`}>{children}</main>;
+  return <main className={`flex min-h-full min-w-full flex-col ${paddingLeft}`}>{children}</main>;
 }
diff --git a/app/[locale]/about/directions/page.tsx b/app/[locale]/about/directions/page.tsx
@@ -23,7 +23,6 @@ const FIND_PATH_URL =
 
 export default async function DirectionsPage({ searchParams }: DirectionsPageProps) {
   const directionList = await getDirections();
-
   const selectedDirection = findSelectedItem(directionList, searchParams.selected);
 
   return (

diff --git a/app/[locale]/community/news/[id]/NewsViewer.tsx b/app/[locale]/community/news/[id]/NewsViewer.tsx
@@ -0,0 +1,50 @@
+// TODO: searchParams를 사용했음에도 static rendering이 되는 것 같아 추가
+export const dynamic = 'force-dynamic';
+
+import { getNewsDetail } from '@/apis/news';
+
+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 { PAGE_PADDING_BOTTOM_PX } from '@/components/layout/pageLayout/PageLayout';
+import PostFooter from '@/components/post/PostFooter';
+
+import { PostSearchQueryParams } from '@/types/post';
+
+import { formatNewsPostDateStr } from '@/utils/date';
+import { getPath } from '@/utils/page';
+import { news } from '@/utils/segmentNode';
+
+interface NewsPostPageProps {
+  id: number;
+  searchParams: PostSearchQueryParams;
+}
+
+const newsPath = getPath(news);
+
+export default async function NewsViewer({ id, searchParams }: NewsPostPageProps) {
+  const news = await getNewsDetail(id, searchParams);
+
+  return (
+    <>
+      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
+        {news.title}
+      </h2>
+
+      <div
+        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
+        style={{ paddingBottom: PAGE_PADDING_BOTTOM_PX }}
+      >
+        <Attachments files={news.attachments} />
+        <HTMLViewer htmlContent={news.description} className="mb-10" />
+        <time className="mb-3 mt-12 block text-end text-sm font-bold">
+          {formatNewsPostDateStr(news.date)}
+        </time>
+        <StraightNode />
+        <Tags tags={news.tags} margin="mt-3 ml-6" searchPath={newsPath} />
+        <PostFooter post={news} postType="news" id={id.toString()} margin="mt-12" />
+      </div>
+    </>
+  );
+}
diff --git a/app/[locale]/community/news/[id]/page.tsx b/app/[locale]/community/news/[id]/page.tsx
@@ -1,50 +1,23 @@
-// TODO: searchParams를 사용했음에도 static rendering이 되는 것 같아 추가
-export const dynamic = 'force-dynamic';
+import { Suspense } from 'react';
 
-import { getNewsDetail } from '@/apis/news';
-
-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 } from '@/components/layout/pageLayout/PageLayout';
-import PostFooter from '@/components/post/PostFooter';
+import PostFallback from '@/components/layout/fallback/PostFallback';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { PostSearchQueryParams } from '@/types/post';
 
-import { formatNewsPostDateStr } from '@/utils/date';
-import { getPath } from '@/utils/page';
-import { news } from '@/utils/segmentNode';
+import NewsViewer from './NewsViewer';
 
 interface NewsPostPageProps {
   params: { id: string };
   searchParams: PostSearchQueryParams;
 }
 
-const newsPath = getPath(news);
-
 export default async function NewsPostPage({ params, searchParams }: NewsPostPageProps) {
-  const news = await getNewsDetail(parseInt(params.id), searchParams);
-
   return (
     <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
-      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
-        {news.title}
-      </h2>
-
-      <div
-        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
-        style={{ paddingBottom: PAGE_PADDING_BOTTOM_PX }}
-      >
-        <Attachments files={news.attachments} />
-        <HTMLViewer htmlContent={news.description} className="mb-10" />
-        <time className="mb-3 mt-12 block text-end text-sm font-bold">
-          {formatNewsPostDateStr(news.date)}
-        </time>
-        <StraightNode />
-        <Tags tags={news.tags} margin="mt-3 ml-6" searchPath={newsPath} />
-        <PostFooter post={news} postType="news" id={params.id} margin="mt-12" />
-      </div>
+      <Suspense fallback={<PostFallback />}>
+        <NewsViewer id={parseInt(params.id)} searchParams={searchParams} />
+      </Suspense>
     </PageLayout>
   );
 }
diff --git a/app/[locale]/community/news/helper/NewsRow.tsx b/app/[locale]/community/news/helper/NewsRow.tsx
@@ -56,20 +56,21 @@ export default function NewsRow({
             <h3 className="mb-2.5 text-base font-bold">{title}</h3>
           </Link>
 
-          <Link href={href} className="hover:cursor-pointer">
-            <p className="mb-3 line-clamp-3 text-md font-normal leading-[1.6] text-neutral-500 sm:mb-8">
-              {descriptionBold ? (
-                <>
-                  {description.slice(0, descriptionBold.startIndex)}
-                  <span className="font-bold">
-                    {description.slice(descriptionBold.startIndex, descriptionBold.endIndex)}
-                  </span>
-                  {description.slice(descriptionBold.endIndex)}
-                </>
-              ) : (
-                description
-              )}
-            </p>
+          <Link
+            href={href}
+            className="mb-3 line-clamp-3 break-all text-md font-normal leading-[1.6] text-neutral-500 hover:cursor-pointer sm:mb-8"
+          >
+            {descriptionBold ? (
+              <>
+                {description.slice(0, descriptionBold.startIndex)}
+                <span className="font-bold">
+                  {description.slice(descriptionBold.startIndex, descriptionBold.endIndex)}
+                </span>
+                {description.slice(descriptionBold.endIndex)}
+              </>
+            ) : (
+              description
+            )}
           </Link>
         </div>
 
@@ -81,7 +82,7 @@ export default function NewsRow({
         </div>
       </div>
 
-      <Link href={href} className="relative flex aspect-[4/3] h-[280px] sm:h-[9.375rem]">
+      <Link href={href} className="relative flex aspect-[4/3] sm:h-[9.375rem]">
         <ImageWithFallback
           alt="포스트 대표 이미지"
           src={imageURL}

diff --git a/app/[locale]/community/notice/[id]/NoticeViewer.tsx b/app/[locale]/community/notice/[id]/NoticeViewer.tsx
@@ -0,0 +1,63 @@
+import { getNoticePostDetail } from '@/apis/notice';
+
+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 { PAGE_PADDING_BOTTOM_PX } from '@/components/layout/pageLayout/PageLayout';
+import PostFooter from '@/components/post/PostFooter';
+
+import { PostSearchQueryParams } from '@/types/post';
+
+import { formatPostDateStr } from '@/utils/date';
+import { getPath } from '@/utils/page';
+import { notice } from '@/utils/segmentNode';
+
+interface NoticePostPageProps {
+  id: number;
+  searchParams: PostSearchQueryParams;
+}
+
+const noticePath = getPath(notice);
+
+export default async function NoticeViewer({ id, searchParams }: NoticePostPageProps) {
+  const notice = await getNoticePostDetail(id, searchParams);
+
+  return (
+    <>
+      <Header {...notice} />
+      <div
+        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
+        style={{
+          paddingBottom: PAGE_PADDING_BOTTOM_PX,
+        }}
+      >
+        <Attachments files={notice.attachments} />
+        <HTMLViewer htmlContent={notice.description} className="mb-10" />
+        <StraightNode />
+        <Tags tags={notice.tags} margin="mt-3 ml-6" searchPath={noticePath} />
+        <PostFooter post={notice} postType="notice" id={id.toString()} margin="mt-12" />
+      </div>
+    </>
+  );
+}
+
+const Header = ({
+  title,
+  author,
+  createdAt,
+}: {
+  title: string;
+  author: string;
+  createdAt: string;
+}) => {
+  return (
+    <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>
+        <p>작성 시각: {formatPostDateStr(createdAt)}</p>
+      </div>
+    </div>
+  );
+};
diff --git a/app/[locale]/community/notice/[id]/page.tsx b/app/[locale]/community/notice/[id]/page.tsx
@@ -1,25 +1,17 @@
-import { getNoticePostDetail } from '@/apis/notice';
+import { Suspense } from 'react';
 
-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 } from '@/components/layout/pageLayout/PageLayout';
-import PostFooter from '@/components/post/PostFooter';
+import PostFallback from '@/components/layout/fallback/PostFallback';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { PostSearchQueryParams } from '@/types/post';
 
-import { formatPostDateStr } from '@/utils/date';
-import { getPath } from '@/utils/page';
-import { notice } from '@/utils/segmentNode';
+import NoticeViewer from './NoticeViewer';
 
 interface NoticePostPageProps {
   params: { id: string };
   searchParams: PostSearchQueryParams;
 }
 
-const noticePath = getPath(notice);
-
 export default async function NoticePostPage({
   params: { id: rawID },
   searchParams,
@@ -29,23 +21,11 @@ export default async function NoticePostPage({
   // ID가 잘못된 경우 예외 처리
   if (Number.isNaN(id)) return <InvalidIDFallback rawID={rawID} />;
 
-  const notice = await getNoticePostDetail(id, searchParams);
-
   return (
     <PageLayout titleType="big" bodyStyle={{ padding: 0 }}>
-      <Header {...notice} />
-      <div
-        className="bg-neutral-50 px-5 pt-9 sm:pl-[100px] sm:pr-[340px]"
-        style={{
-          paddingBottom: PAGE_PADDING_BOTTOM_PX,
-        }}
-      >
-        <Attachments files={notice.attachments} />
-        <HTMLViewer htmlContent={notice.description} className="mb-10" />
-        <StraightNode />
-        <Tags tags={notice.tags} margin="mt-3 ml-6" searchPath={noticePath} />
-        <PostFooter post={notice} postType="notice" id={rawID} margin="mt-12" />
-      </div>
+      <Suspense fallback={<PostFallback />}>
+        <NoticeViewer id={id} searchParams={searchParams} />
+      </Suspense>
     </PageLayout>
   );
 }
@@ -57,23 +37,3 @@ const InvalidIDFallback = ({ rawID }: { rawID: string }) => (
     </p>
   </PageLayout>
 );
-
-const Header = ({
-  title,
-  author,
-  createdAt,
-}: {
-  title: string;
-  author: string;
-  createdAt: string;
-}) => {
-  return (
-    <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>
-        <p>작성 시각: {formatPostDateStr(createdAt)}</p>
-      </div>
-    </div>
-  );
-};
diff --git a/app/[locale]/community/notice/page.tsx b/app/[locale]/community/notice/page.tsx
@@ -20,8 +20,6 @@ export default async function NoticePage({ searchParams }: NoticePageParams) {
 
   return (
     <PageLayout titleType="big">
-      {/* TODO: fallback */}
-      {/* https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout */}
       <Suspense>
         <NoticePageContent data={data} />
       </Suspense>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ on: @@
       push:
         branches:
           - main
-          - refactor/useResponsive
+          - design/mobileNav
     jobs:
       build:
@@ Expand Down @@