💄 디자인 qa 반영 (#177)

* fix: 시설 안내 아이콘 위치, 텍스트 색상 수정 * fix: 공지 목록 폰트 크기, 마진 수정 * fix: 연락처 이미지 위치 조정 * fix: 본문형 제목 line height 조정 * fix: 첨부파일 모바일뷰 수정 * fix: 모바일 소개 이미지 너비 꽉 차게 * fix: 시설 안내 반응형 * fix: 새소식 날짜 위치 변경 * fix: 신임교수초빙 html 스타일 변경
wafflestudio · Mar 25, 2024 · 1f26dbe · 1f26dbe
1 parent b1b77fe
commit 1f26dbe
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 42 deletions.
diff --git a/app/[locale]/about/contact/page.tsx b/app/[locale]/about/contact/page.tsx
@@ -16,7 +16,9 @@ export default async function ContactPage() {
           url: `https://cse-dev-waffle.bacchus.io/sites/default/files/styles/scale-width-220/public/node--contact/301.jpg?itok=zbUgVCfd`,
           widthPX: 240,
           heightPX: 360,
+          marginTopPx: 28,
         }}
+        className="mt-[-1.5rem]"
       />
     </PageLayout>
   );

diff --git a/app/[locale]/about/facilities/FacilitiesList.tsx b/app/[locale]/about/facilities/FacilitiesList.tsx
@@ -1,4 +1,4 @@
-import Distance from '@/public/image/about/distance.svg';
+import Distance from '@/public/image/distance.svg';
 
 import ImageWithFallback from '@/components/common/ImageWithFallback';
 import HTMLViewer from '@/components/editor/HTMLViewer';
@@ -30,13 +30,13 @@ export interface FacilitiesRowProps {
 
 function FacilitiesRow({ name, description, location, imageURL }: FacilitiesRowProps) {
   return (
-    <article className={`flex flex-row items-start justify-between gap-5 py-5`}>
+    <article className={`flex flex-col-reverse items-start justify-between gap-5 py-5 sm:flex-row`}>
       <div className="flex w-[35.5rem] flex-col">
         <h3 className="mb-3 text-base font-bold leading-5">{name}</h3>
         <HTMLViewer htmlContent={description} />
-        <div className="flex translate-x-[-4px] items-center gap-px">
+        <div className="flex translate-x-[-4px] items-start gap-px">
           <Distance className="shrink-0" />
-          <p className="text-md">{location}</p>
+          <p className="pt-0.5 text-md text-neutral-500">{location}</p>
         </div>
       </div>
       <FacilitiesRowImage imageURL={imageURL} />
@@ -46,7 +46,7 @@ function FacilitiesRow({ name, description, location, imageURL }: FacilitiesRowP
 
 function FacilitiesRowImage({ imageURL }: { imageURL: string }) {
   return (
-    <div className="relative h-40 w-60 shrink-0">
+    <div className="relative h-44 w-full shrink-0 sm:w-60">
       <ImageWithFallback alt="대표 이미지" src={imageURL} fill sizes="10rem" />
     </div>
   );

diff --git a/app/[locale]/about/history/page.tsx b/app/[locale]/about/history/page.tsx
@@ -15,6 +15,7 @@ export default async function History() {
         imageURL={history_image.src}
         imageWidth={320}
         imageHeight={360}
+        imageMarginBottom={0}
       />
     </PageLayout>
   );

diff --git a/app/[locale]/about/overview/page.tsx b/app/[locale]/about/overview/page.tsx
@@ -19,13 +19,13 @@ export default async function OverviewPage() {
       <div className="flex flex-col-reverse items-start gap-6 bg-neutral-100 px-5 pb-12 pt-7 sm:flex-row sm:gap-10 sm:py-11 sm:pl-[6.25rem] sm:pr-[22.5rem]">
         <HTMLViewer htmlContent={description} className="sm:w-[20rem] sm:grow" />
         {/* image 크기를 반응형으로 줄이기 위해 필요한 wrapper div */}
-        <div>
+        <div className="w-full sm:w-auto">
           <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={216}
-            className="object-contain"
+            className="w-full object-contain sm:w-80"
           />
         </div>
       </div>

diff --git a/app/[locale]/about/student-clubs/ClubDetails.tsx b/app/[locale]/about/student-clubs/ClubDetails.tsx
@@ -11,7 +11,13 @@ export default function ClubDetails({
   return (
     <div>
       <ClubTitle name={name} engName={engName} />
-      <ContentWithImage imageURL={imageURL} content={description} containerClassName="px-2.5" />
+      <ContentWithImage
+        imageURL={imageURL}
+        content={description}
+        containerClassName="px-2.5"
+        imageWidth={320}
+        imageHeight={200}
+      />
     </div>
   );
 }

diff --git a/app/[locale]/community/faculty-recruitment/page.tsx b/app/[locale]/community/faculty-recruitment/page.tsx
diff --git a/app/[locale]/community/news/[id]/NewsViewer.tsx b/app/[locale]/community/news/[id]/NewsViewer.tsx
@@ -28,23 +28,28 @@ export default async function NewsViewer({ id, searchParams }: NewsPostPageProps
 
   return (
     <>
-      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
-        {news.title}
-      </h2>
-
+      <Header title={news.title} createdAt={news.createdAt} />
       <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>
     </>
   );
 }
+
+function Header({ title, createdAt }: { title: 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 leading-[1.4]">{title}</h2>
+      <time className="text-sm font-normal tracking-wide text-neutral-500">
+        작성 일자: {formatNewsPostDateStr(createdAt)}
+      </time>
+    </div>
+  );
+}
diff --git a/app/[locale]/community/notice/[id]/NoticeViewer.tsx b/app/[locale]/community/notice/[id]/NoticeViewer.tsx
@@ -53,7 +53,7 @@ const Header = ({
 }) => {
   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>
+      <h2 className="text-[1.25rem] font-semibold leading-[1.4]">{title}</h2>
       <div className="flex gap-5 text-sm font-normal tracking-wide text-neutral-500">
         <p>글쓴이: {author}</p>
         <p>작성 시각: {formatPostDateStr(createdAt)}</p>

diff --git a/app/[locale]/community/notice/helper/NoticeList.tsx b/app/[locale]/community/notice/helper/NoticeList.tsx
@@ -24,7 +24,7 @@ export default function NoticeList({
   if (posts.length === 0) return <NoSearchResult />;
 
   return (
-    <div className="mx-2.5 mb-10 mt-9 border-y border-neutral-200">
+    <div className="mb-10 mt-9 border-y border-neutral-200 sm:mx-2.5">
       <NoticeListHeader isEditMode={isEditMode} />
       <ul className={`${isEditMode && 'divide-y divide-dashed divide-neutral-200'}`}>
         {posts.map((post) => (

diff --git a/app/[locale]/community/notice/helper/NoticeListRow.tsx b/app/[locale]/community/notice/helper/NoticeListRow.tsx
@@ -120,7 +120,7 @@ function TitleCell({ title, hasAttachment, id, isEditMode, isPinned }: TitleCell
           <span
             className={`${
               isPinned && 'font-semibold text-main-orange sm:text-neutral-800'
-            } overflow-hidden text-ellipsis tracking-wide hover:text-main-orange sm:whitespace-nowrap`}
+            } overflow-hidden text-ellipsis text-base tracking-wide hover:text-main-orange sm:whitespace-nowrap sm:text-md`}
           >
             {title}
           </span>

diff --git a/app/[locale]/community/seminar/[id]/SeminarViewer.tsx b/app/[locale]/community/seminar/[id]/SeminarViewer.tsx
@@ -23,7 +23,7 @@ export default async function SeminarViewer({ id, searchParams }: SeminarPostPag
 
   return (
     <>
-      <h2 className="px-5 py-9 text-[1.25rem] font-semibold sm:pl-[100px] sm:pr-[340px]">
+      <h2 className="px-5 py-9 text-[1.25rem] font-semibold leading-[1.4] sm:pl-[100px] sm:pr-[340px]">
         {seminar.title}
       </h2>
       <div

diff --git a/app/[locale]/community/seminar/helper/SeminarRow.tsx b/app/[locale]/community/seminar/helper/SeminarRow.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@/navigation';
-import Distance from '@/public/image/about/distance.svg';
 import Calendar from '@/public/image/calendar.svg';
+import Distance from '@/public/image/distance.svg';
 import Person from '@/public/image/person.svg';
 
 import ImageWithFallback from '@/components/common/ImageWithFallback';

diff --git a/app/[locale]/research/centers/ResearchCenterDetails.tsx b/app/[locale]/research/centers/ResearchCenterDetails.tsx
@@ -15,7 +15,13 @@ export default function ResearchCenterDetails({
   return (
     <>
       <ResearchCenterTitle name={name} link={websiteURL} />
-      <ContentWithImage imageURL={imageURL} content={description} containerClassName="px-2.5" />
+      <ContentWithImage
+        imageURL={imageURL}
+        content={description}
+        containerClassName="px-2.5"
+        imageWidth={320}
+        imageHeight={200}
+      />
     </>
   );
 }

diff --git a/app/[locale]/research/labs/[id]/ResearchLabDetailContent.tsx b/app/[locale]/research/labs/[id]/ResearchLabDetailContent.tsx
@@ -31,7 +31,7 @@ export default function ResearchLabDetailContent({ lab }: { lab: ResearchLab })
             ? { type: 'component', content: <ResearchLabInfo lab={lab} /> }
             : undefined
         }
-        className="mt-6 "
+        className="mt-6"
       />
     </div>
   );

diff --git a/components/common/Attachments.tsx b/components/common/Attachments.tsx
@@ -11,15 +11,12 @@ export default function Attachments({ files }: { files: Attachment[] }) {
   if (files.length === 0) return <></>;
 
   return (
-    // 좌측 정렬을 위한 wrapper div
-    <div className="flex flex-col items-start">
-      <div className="relative mb-11 mt-5 flex flex-col gap-2 self-start rounded-sm border border-neutral-200 bg-white py-3 pl-4 pr-[10rem]">
-        {files.map((file, index) => (
-          <AttachmentAnchor key={index} {...file} />
-        ))}
+    <div className="relative mb-9 mt-3 flex flex-col gap-2 self-start rounded-sm border border-neutral-200 bg-white py-3 pl-4 pr-20 sm:mb-11 sm:mt-5 sm:w-auto sm:max-w-fit sm:pr-[10rem] ">
+      {files.map((file, index) => (
+        <AttachmentAnchor key={index} {...file} />
+      ))}
 
-        <Clip className="absolute right-2 top-[-1.5rem]" />
-      </div>
+      <Clip className="absolute right-2 top-[-1.5rem]" />
     </div>
   );
 }

diff --git a/components/common/ContentWithImage.tsx b/components/common/ContentWithImage.tsx
@@ -9,8 +9,9 @@ interface ContentWithImageProps {
   imageURL?: string | null;
   content: string;
   containerClassName?: string;
-  imageWidth?: number;
-  imageHeight?: number;
+  imageWidth: number;
+  imageHeight: number;
+  imageMarginBottom?: number;
 }
 
 export default function ContentWithImage({
@@ -19,24 +20,31 @@ export default function ContentWithImage({
   containerClassName,
   imageWidth,
   imageHeight,
+  imageMarginBottom,
 }: ContentWithImageProps) {
   const { screenType } = useResponsive();
 
   return (
     <div className={containerClassName}>
-      {imageURL && (
-        <div className="relative mb-7 aspect-[4/3] sm:hidden">
-          <ImageWithFallback alt={`대표_이미지`} src={imageURL} className="object-contain" fill />
+      {screenType === 'mobile' && imageURL && (
+        <div className="relative mb-7 w-full" style={{ marginBottom: imageMarginBottom }}>
+          <ImageWithFallback
+            alt={`대표_이미지`}
+            src={imageURL}
+            width={imageWidth}
+            height={imageHeight}
+            className="w-full object-contain"
+          />
         </div>
       )}
       <HTMLViewer
         htmlContent={content}
         topRightContent={
-          imageURL && screenType === 'desktop'
+          screenType === 'desktop' && imageURL
             ? {
                 type: 'image',
-                widthPX: imageWidth ?? 320,
-                heightPX: imageHeight ?? 200,
+                widthPX: imageWidth,
+                heightPX: imageHeight,
                 url: imageURL,
               }
             : undefined

diff --git a/components/editor/HTMLViewer.tsx b/components/editor/HTMLViewer.tsx
@@ -10,6 +10,7 @@ type TopRightImage =
       url: string;
       widthPX: number;
       heightPX: number;
+      marginTopPx?: number;
     }
   | {
       type: 'imageUnoptimized';
@@ -40,7 +41,7 @@ export default function HTMLViewer({
   const linkedHTML = Autolinker.link(htmlContent);
 
   return (
-    <div className={`flow-root ${className} `}>
+    <div className={`flow-root ${className}`}>
       {(topRightContent?.type === 'image' || topRightContent?.type === 'imageUnoptimized') && (
         <TopRightImageContent {...topRightContent} />
       )}
@@ -56,9 +57,12 @@ export default function HTMLViewer({
 
 function TopRightImageContent(props: TopRightImage) {
   if (props.type === 'image') {
-    const { url, widthPX: width, heightPX: height } = props;
+    const { url, widthPX: width, heightPX: height, marginTopPx: marginTop } = props;
     return (
-      <div className="relative float-right mb-[28px] ml-[28px]" style={{ width, height }}>
+      <div
+        className="relative float-right mb-[28px] ml-[28px]"
+        style={{ width, height, marginTop }}
+      >
         <Image src={url} alt="대표 이미지" fill className="object-cover" sizes={`${width}px`} />
       </div>
     );

diff --git a/public/image/about/distance.svg → public/image/distance.svg b/public/image/about/distance.svg → public/image/distance.svg