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

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

@@ -1,4 +1,4 @@
-const user = {
+const myProfile = {
   name: '강민하',
   phone: '010-0000-0000',
   email: '[email protected]',
@@ -7,4 +7,4 @@ const user = {
   id: '201912000',
 };
 
-export { user };
+export { myProfile };

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

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

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

@@ -1,13 +1,14 @@
+import { MyInfoCard } from '~/components/my/my-info-card';
+import { MyInfoField } from '~/components/my/my-info-field';
 import { PageHeader } from '~/components/page-header';
-import { UserCard } from '~/components/users/user-card';
-import { UserList } from '~/components/users/user-list';
-import { getUser } from './remotes';
+import { getMyProfile } 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();
+export default async function MyPage() {
+  const { data } = await getMyProfile();
+  console.log(data);
 
   const userDetails = [
     { title: '이름', value: data.name },
@@ -24,13 +25,15 @@ export default async function UserPage() {
         title="회원 정보"
         description="등록한 회원 정보를 확인할 수 있어요."
       />
-      <UserCard>
+      <MyInfoCard>
         {userDetails.map((detail) => (
-          <UserList key={detail.title} title={detail.title}>
-            <UserList.Row>{detail.value}</UserList.Row>
-          </UserList>
+          <MyInfoField
+            key={detail.title}
+            title={detail.title}
+            value={detail.value}
+          />
         ))}
-      </UserCard>
+      </MyInfoCard>
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import { MOCK_END_POINT } from '~/constants/api';
 import { http } from '~/utils/http';
 
-interface User {
+interface MyProfile {
   id: string;
   name: string;
   phone: string;
@@ -10,8 +10,8 @@ interface User {
   major: string;
 }
 
-function getUser() {
-  return http.get<User>(MOCK_END_POINT.USERS);
+function getMyProfile() {
+  return http.get<MyProfile>(MOCK_END_POINT.MY_PROFILE);
 }
 
-export { type User, getUser };
+export { type MyProfile, getMyProfile };

apps/community/src/components/users/user-card.tsx → apps/community/src/components/my/my-info-card.tsx

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

apps/community/src/components/my/my-info-field.tsx

@@ -0,0 +1,19 @@
+import * as styles from '~/components/my/my-info-field.css';
+
+interface Props {
+  title: string;
+  value: React.ReactNode;
+}
+
+function MyInfoField({ title, value }: Props) {
+  return (
+    <div>
+      <h3 className={styles.listTitle}>{title}</h3>
+      <ul className={styles.list}>
+        <li>{value}</li>
+      </ul>
+    </div>
+  );
+}
+
+export { MyInfoField };

apps/community/src/constants/api.ts

@@ -6,7 +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`,
+  MY_PROFILE: `${MOCK_BASE_URL}/my`,
   BOARD: `${MOCK_BASE_URL}/board`,
   BOARD_DETAIL: `${MOCK_BASE_URL}/board/detail`,
 } as const;