feat(community): 구성원 소개 페이지 퍼블리싱

apps/community/next.config.ts

@@ -15,6 +15,11 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'www.kyonggi.ac.kr',
       },
+      {
+        protocol: 'https',
+        hostname: 'kutis.kyonggi.ac.kr',
+        pathname: '/webkutis/TransferImageStreamHJ.do',
+      },
     ],
   },
   experimental: {

apps/community/src/app/member/professor/mocks/professor.ts

@@ -0,0 +1,165 @@
+interface Professor {
+  id: number;
+  name: string;
+  img?: string;
+  type: string;
+  contact: string;
+  email: string;
+}
+
+const PROFESSORS: Professor[] = [
+  {
+    id: 1,
+    name: '권기현',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=AQ9z4So89iYtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9666',
+    email: '[email protected]',
+  },
+  {
+    id: 2,
+    name: '전준철',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=M18XITcvm7MtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9668',
+    email: '[email protected]',
+  },
+  {
+    id: 3,
+    name: '김인철',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=tWJOq3%2Bjp4MtyPOJr3Julw%3D%3D',
+    type: '교수',
+    contact: '031-249-9669',
+    email: '[email protected]',
+  },
+  {
+    id: 4,
+    name: '김광훈',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=j40yTvrgx0ktyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9679',
+    email: '[email protected]',
+  },
+  {
+    id: 5,
+    name: '이은정',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=kJ88Cne1X68tyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9671',
+    email: '[email protected]',
+  },
+  {
+    id: 6,
+    name: '권준희',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=mLbaZTXMcuMtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9675',
+    email: '[email protected]',
+  },
+  {
+    id: 7,
+    name: '안진호',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=GKaSCmtblD8tyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9674',
+    email: '[email protected]',
+  },
+  {
+    id: 8,
+    name: '김남기',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=j8xto4FMv4ItyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9662',
+    email: '[email protected]',
+  },
+  {
+    id: 9,
+    name: '김희열',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=hBIB9tP41MMtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9607',
+    email: '[email protected]',
+  },
+  {
+    id: 10,
+    name: '이병대',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=tpDMAWRSCektyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9676',
+    email: '[email protected]',
+  },
+  {
+    id: 11,
+    name: '배상원',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=7w7lKlDgjbQtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-9677',
+    email: '[email protected]',
+  },
+  {
+    id: 12,
+    name: '정경용',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=96QNvrxAocAtyPOJr3Julw',
+    type: '교수',
+    contact: '031-249-1382',
+    email: '[email protected]',
+  },
+  {
+    id: 13,
+    name: '김도훈',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=mpaVGc5b/5QtyPOJr3Julw',
+    type: '부교수',
+    contact: '031-249-1364',
+    email: '[email protected]',
+  },
+  {
+    id: 14,
+    name: '안준호',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=8ivFr7gENlItyPOJr3Julw',
+    type: '부교수',
+    contact: '031-249-9731',
+    email: '[email protected]',
+  },
+  {
+    id: 15,
+    name: '이재흥',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=o8p/k63GHhAtyPOJr3Julw',
+    type: '부교수',
+    contact: '031-249-1302',
+    email: '[email protected]',
+  },
+  {
+    id: 16,
+    name: '임현기',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=AQ/DoMNxSj0tyPOJr3Julw',
+    type: '조교수',
+    contact: '031-249-1318',
+    email: '[email protected]',
+  },
+  {
+    id: 17,
+    name: '윤익준',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=ue9aQU%2B0DUMtyPOJr3Julw%3D%3D',
+    type: '조교수',
+    contact: '031-249-9642',
+    email: '[email protected]',
+  },
+  {
+    id: 18,
+    name: '이한용',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=BmCUK3EvbVstyPOJr3Julw',
+    type: '조교수',
+    contact: '031-249-9637',
+    email: '[email protected]',
+  },
+  {
+    id: 19,
+    name: '나관상',
+    img: 'https://kutis.kyonggi.ac.kr/webkutis/TransferImageStreamHJ.do?gyosu_no=frnViOYq0vgtyPOJr3Julw',
+    type: '조교수',
+    contact: '031-249-1306',
+    email: '[email protected]',
+  },
+] as const;
+
+export { type Professor, PROFESSORS };

apps/community/src/app/member/professor/page.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+
+export const professorListWrapper = style({
+  display: 'grid',
+  gap: '1rem',
+  gridTemplateColumns: '1fr',
+  marginTop: '3rem',
+
+  '@media': {
+    'screen and (min-width: 640px)': {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
+    'screen and (min-width: 1280px)': {
+      gridTemplateColumns: 'repeat(3, 1fr)',
+    },
+    'screen and (min-width: 1536px)': {
+      gridTemplateColumns: 'repeat(4, 1fr)',
+    },
+  },
+});

apps/community/src/app/member/professor/page.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+
+import { PageHeader } from '~/components/page-header';
+import { ProfessorCard } from '~/components/professor-card';
+
+import * as styles from '~/app/member/professor/page.css';
+
+import { PROFESSORS } from './mocks/professor';
+
+export const metadata: Metadata = {
+  title: '교수진 소개 - 경기대학교 AI컴퓨터공학부',
+  description: '경기대학교 소프트웨어경영대학 AI컴퓨터공학부 공식 홈페이지',
+};
+
+export default function ProfessorPage() {
+  return (
+    <section>
+      <PageHeader
+        title="교수진 소개"
+        description="경기대학교 AI컴퓨터공학부의 교수진을 소개해요"
+      />
+
+      <div className={styles.professorListWrapper}>
+        {PROFESSORS.map((professor) => (
+          <ProfessorCard
+            key={`professor-${professor.id}`}
+            professor={professor}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

apps/community/src/components/page-header.css.ts

@@ -1,8 +1,15 @@
 import { style } from '@vanilla-extract/css';
 
+const pageHeaderWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.75rem',
+});
+
 const title = style({
+  margin: 0,
   fontSize: '2rem',
-  fontWeight: 'bold',
+  fontWeight: 700,
   color: '#333D4B',
 });
 
@@ -11,4 +18,4 @@ const description = style({
   color: '#4E5968',
 });
 
-export { title, description };
+export { pageHeaderWrapper, title, description };

apps/community/src/components/page-header.tsx

@@ -7,8 +7,8 @@ interface Props {
 
 function PageHeader({ title, description }: Props) {
   return (
-    <div>
-      <h2 className={styles.title}>{title}</h2>
+    <div className={styles.pageHeaderWrapper}>
+      <h1 className={styles.title}>{title}</h1>
       <p className={styles.description}>{description}</p>
     </div>
   );

apps/community/src/components/professor-card.css.ts

@@ -0,0 +1,73 @@
+import { style } from '@vanilla-extract/css';
+
+export const card = style({
+  width: '100%',
+  backgroundColor: '#fff',
+  border: '1px solid',
+  borderColor: '#e5e7eb',
+  borderRadius: '0.75rem',
+  boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  alignItems: 'center',
+  textAlign: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.5rem',
+  paddingTop: '0.75rem',
+});
+
+export const avatarImage = style({
+  marginTop: '0.375rem',
+  width: '8rem',
+  height: '8rem',
+  borderRadius: 9999,
+  objectFit: 'cover',
+});
+
+export const fallbackImage = style({
+  marginTop: '0.375rem',
+  width: '8rem',
+  height: '8rem',
+  borderRadius: 9999,
+  backgroundColor: '#e5e7eb',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  fontSize: '1rem',
+  color: '#000',
+});
+
+export const cardContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.25rem',
+});
+
+export const professorName = style({
+  fontWeight: 600,
+  letterSpacing: '-0.025em',
+  margin: 0,
+});
+
+export const professorType = style({
+  margin: 0,
+  fontSize: '0.875rem',
+  fontWeight: 400,
+  lineHeight: '1.25rem',
+  color: '#6b7280',
+});
+
+export const cardFooter = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+  paddingBottom: '1rem',
+});
+
+export const professorContact = style({
+  margin: 0,
+});
+
+export const professorEmail = style({
+  margin: 0,
+});

apps/community/src/components/professor-card.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image';
+
+import * as styles from '~/components/professor-card.css';
+
+import type { Professor } from '~/app/member/professor/mocks/professor';
+
+function ProfessorCard({ professor }: { professor: Professor }) {
+  return (
+    <div className={styles.card}>
+      <Image
+        src={professor.img ?? 'https://placehold.co/128'}
+        width={100}
+        height={100}
+        className={styles.avatarImage}
+        alt={professor.name}
+      />
+
+      <div className={styles.cardContent}>
+        <h2 className={styles.professorName}>{professor.name}</h2>
+        <p className={styles.professorType}>{professor.type}</p>
+      </div>
+
+      <div className={styles.cardFooter}>
+        <p className={styles.professorContact}>{professor.contact}</p>
+        <p className={styles.professorEmail}>{professor.email}</p>
+      </div>
+    </div>
+  );
+}
+
+export { ProfessorCard };