feat(community): 마이 페이지 추가

apps/community/src/app/api/mock/users/data.ts

@@ -0,0 +1,10 @@
+const user = {
+  name: '강민하',
+  phone: '010-0000-0000',
+  email: 'aics1204@kyonggi.ac.kr',
+  role: '학부생',
+  major: '컴퓨터공학부',
+  id: '201912000',
+};
+
+export { user };

apps/community/src/app/api/mock/users/route.ts

@@ -0,0 +1,5 @@
+import { user } from './data';
+
+export function GET() {
+  return Response.json({ data: user });
+}

apps/community/src/app/users/page.tsx

@@ -0,0 +1,36 @@
+import { PageHeader } from '~/components/page-header';
+import { UserCard } from '~/components/users/user-card';
+import { UserList } from '~/components/users/user-list';
+import { getUser } from './remotes';
+
+// TODO: for mocking but will be replaced with a proper solution later
+export const dynamic = 'force-dynamic';
+
+export default async function UserPage() {
+  const { data } = await getUser();
+
+  const userDetails = [
+    { title: '이름', value: data.name },
+    { title: '학번', value: data.id },
+    { title: '전화번호', value: data.phone },
+    { title: '이메일', value: data.email },
+    { title: '구분', value: data.role },
+    { title: '전공', value: data.major },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        title="회원 정보"
+        description="등록한 회원 정보를 확인할 수 있어요."
+      />
+      <UserCard>
+        {userDetails.map((detail) => (
+          <UserList key={detail.title} title={detail.title}>
+            <UserList.Row>{detail.value}</UserList.Row>
+          </UserList>
+        ))}
+      </UserCard>
+    </>
+  );
+}

apps/community/src/app/users/remotes.ts

@@ -0,0 +1,17 @@
+import { MOCK_END_POINT } from '~/constants/api';
+import { http } from '~/utils/http';
+
+interface User {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  role: string;
+  major: string;
+}
+
+function getUser() {
+  return http.get<User>(MOCK_END_POINT.USERS);
+}
+
+export { type User, getUser };

apps/community/src/components/users/user-card.css.ts

@@ -0,0 +1,27 @@
+import { themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const cardWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeVars.spacing.lg,
+  padding: themeVars.spacing.xl,
+  border: `1px solid ${themeVars.color.gray300}`,
+  borderRadius: themeVars.borderRadius.xl,
+  boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1)',
+});
+
+const cardTitle = style({
+  marginBottom: themeVars.spacing.lg,
+  fontSize: themeVars.fontSize['2xl'],
+  fontWeight: themeVars.fontWeight.bold,
+});
+
+const cardContent = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gap: themeVars.spacing.lg,
+  fontSize: themeVars.fontSize.lg,
+});
+
+export { cardWrapper, cardTitle, cardContent };

apps/community/src/components/users/user-card.tsx

@@ -0,0 +1,16 @@
+import * as style from '~/components/users/user-card.css';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+function UserCard({ children }: Props) {
+  return (
+    <div className={style.cardWrapper}>
+      <h2 className={style.cardTitle}>내 프로필</h2>
+      <div className={style.cardContent}>{children}</div>
+    </div>
+  );
+}
+
+export { UserCard };

apps/community/src/components/users/user-list.css.ts

@@ -0,0 +1,17 @@
+import { themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const list = style({
+  margin: '1.5rem 0',
+  padding: 0,
+});
+
+const listTitle = style([
+  themeVars.textSize.xl,
+  {
+    fontWeight: themeVars.fontWeight.semibold,
+    marginBottom: 0,
+  },
+]);
+
+export { list, listTitle };

apps/community/src/components/users/user-list.tsx

@@ -0,0 +1,23 @@
+import * as styles from '~/components/users/user-list.css';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+}
+
+function UserList({ title, children }: Props) {
+  return (
+    <div>
+      <h3 className={styles.listTitle}>{title}</h3>
+      <ul className={styles.list}>{children}</ul>
+    </div>
+  );
+}
+
+function Row({ children }: { children: React.ReactNode }) {
+  return <li>{children}</li>;
+}
+
+UserList.Row = Row;
+
+export { UserList };

apps/community/src/constants/api.ts

@@ -6,6 +6,7 @@ const MOCK_END_POINT = {
   PROFESSORS: `${MOCK_BASE_URL}/professors`,
   CLUB: `${MOCK_BASE_URL}/about/club`,
   CONTACT: `${MOCK_BASE_URL}/about/contact`,
+  USERS: `${MOCK_BASE_URL}/users`,
 } as const;
 
 export { MOCK_BASE_URL, MOCK_END_POINT };