📱 구성원 모바일 추가 (#191)

* fix: 교수진 개별 페이지 모바일 반응형 * fix: 행정직원 개별 페이지 모바일 * fix: 역대 교수진 모바일 * fix: 이미지 밑 마진 조정
wafflestudio · Apr 6, 2024 · fdb2491 · fdb2491
1 parent 52e4eef
commit fdb2491
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/app/[locale]/people/emeritus-faculty/[id]/page.tsx b/app/[locale]/people/emeritus-faculty/[id]/page.tsx
@@ -15,36 +15,43 @@ export default async function EmeritusFacultyMemberPage({ params }: { params: {
 
   return (
     <PageLayout title={<PageTitle {...faculty} />} titleType="big" titleMargin="mb-9">
-      <div className="relative mb-10 flow-root">
-        <ProfileImage imageURL={faculty.imageURL} />
-        {(faculty.office || faculty.email || faculty.website) && (
-          <article className="mb-7 flex flex-col text-neutral-700">
-            <h3 className=" text-base font-bold leading-8">연락처 정보</h3>
-            <ul className="list-inside list-disc">
-              {faculty.office && <BulletRow>교수실: {faculty.office}</BulletRow>}
-              {faculty.email && (
-                <BulletRow>
-                  이메일:
-                  <Link className="ml-1 text-link hover:underline" href={`mailto:${faculty.email}`}>
-                    {faculty.email}
-                  </Link>
-                </BulletRow>
-              )}
-              {faculty.website && (
-                <BulletRow>
-                  웹사이트:
-                  <Link className="ml-1 text-link hover:underline" href={`${faculty.website}`}>
-                    {faculty.website}
-                  </Link>
-                </BulletRow>
-              )}
-            </ul>
-          </article>
-        )}
-        <HeaderAndList header="학력" list={faculty.educations} />
-        <HeaderAndList header="연구 분야" list={faculty.researchAreas ?? []} />
-        <div className=" mb-7 text-sm font-medium text-neutral-700">
-          재직 기간: {careerTime.startTime} - {careerTime.endTime}
+      <div className="relative mb-10 flex flex-col-reverse sm:flex-row sm:gap-10">
+        <div>
+          <HeaderAndList header="학력" list={faculty.educations} />
+          <HeaderAndList header="연구 분야" list={faculty.researchAreas ?? []} />
+          <div className=" mb-7 text-sm font-medium text-neutral-700">
+            재직 기간: {careerTime.startTime} - {careerTime.endTime}
+          </div>
+        </div>
+        <div>
+          <ProfileImage imageURL={faculty.imageURL} />
+          {(faculty.office || faculty.email || faculty.website) && (
+            <article className="mb-7 mt-2 flex flex-col  text-neutral-700">
+              <h3 className=" text-base font-bold leading-8">연락처 정보</h3>
+              <ul className="list-inside list-disc">
+                {faculty.office && <BulletRow>교수실: {faculty.office}</BulletRow>}
+                {faculty.email && (
+                  <BulletRow>
+                    이메일:
+                    <Link
+                      className="ml-1 text-link hover:underline"
+                      href={`mailto:${faculty.email}`}
+                    >
+                      {faculty.email}
+                    </Link>
+                  </BulletRow>
+                )}
+                {faculty.website && (
+                  <BulletRow>
+                    웹사이트:
+                    <Link className="ml-1 text-link hover:underline" href={`${faculty.website}`}>
+                      {faculty.website}
+                    </Link>
+                  </BulletRow>
+                )}
+              </ul>
+            </article>
+          )}
         </div>
       </div>
     </PageLayout>

diff --git a/app/[locale]/people/faculty/[id]/page.tsx b/app/[locale]/people/faculty/[id]/page.tsx
@@ -23,7 +23,7 @@ export default async function FacultyMemberPage({ params }: { params: { id: numb
 
   return (
     <PageLayout title={<PageTitle {...faculty} />} titleType="big" titleMargin="mb-9">
-      <div className="relative mb-10 flow-root">
+      <div className="relative mb-10 sm:flow-root">
         <Profile
           office={faculty.office}
           phone={faculty.phone}

diff --git a/app/[locale]/people/helper/Profile.tsx b/app/[locale]/people/helper/Profile.tsx
@@ -13,7 +13,7 @@ interface ProfileProps {
 
 export default function Profile({ office, phone, fax, email, website, imageURL }: ProfileProps) {
   return (
-    <div className="relative float-right">
+    <div className="relative mb-8 sm:float-right">
       <ProfileImage imageURL={imageURL} />
 
       <div className="mt-5 flex flex-col gap-[9px] bg-white text-sm font-medium text-neutral-600">

diff --git a/app/[locale]/people/staff/[id]/page.tsx b/app/[locale]/people/staff/[id]/page.tsx
@@ -19,10 +19,11 @@ export default async function StaffMemberPage({ params }: { params: { id: number
       titleType="big"
       titleMargin="mb-9"
     >
-      <div className="relative mb-32 flow-root">
-        <ProfileImage imageURL={staff.imageURL} />
-        <div className="break-all">
-          <article className="mb-7 flex flex-col text-neutral-700">
+      <div className="relative mb-32 flex flex-col-reverse sm:flex-row sm:gap-8">
+        <HeaderAndList header="주요 업무" list={staff.tasks} />
+        <div>
+          <ProfileImage imageURL={staff.imageURL} />
+          <article className="mb-7 mt-2 flex flex-col text-neutral-700">
             <h3 className=" text-base font-bold leading-8">연락처 정보</h3>
             <ul className="list-inside list-disc">
               <BulletRow>위치: {staff.office}</BulletRow>
@@ -35,7 +36,6 @@ export default async function StaffMemberPage({ params }: { params: { id: number
               </BulletRow>
             </ul>
           </article>
-          <HeaderAndList header="주요 업무" list={staff.tasks} />
         </div>
       </div>
     </PageLayout>