refactor : user 페이지

app/(user)/ContritbuteDocsList.tsx

@@ -15,12 +15,8 @@ const ContritbuteDocsList = ({ contributes }: { contributes: Array<ContributeDoc
           key={contribute.versionDocsId}
           className={styles.contributeBox}
         >
-          <hgroup className={styles.hgroup}>
-            <h1 className={styles.docsTitle}>
-              {contribute.title}#{contribute.versionDocsId}
-            </h1>
-            <span className={styles.modifiedAt}>{formatDate(contribute.createTime)}</span>
-          </hgroup>
+          {contribute.title}#{contribute.versionDocsId}
+          <time className={styles.modifiedAt}>{formatDate(contribute.createTime)}</time>
         </Link>
       ))}
     </Accordion>

app/(user)/LikeDocsList.tsx

@@ -13,11 +13,7 @@ const LikeDocsList = ({ likeList }: { likeList: Array<ContributeDocsType> }) =>
           key={docs.versionDocsId}
           className={styles.contributeBox}
         >
-          <hgroup className={styles.hgroup}>
-            <h1 className={styles.docsTitle}>
-              {docs.title} ({CLASSIFY[docs.docsType]})
-            </h1>
-          </hgroup>
+          {docs.title} ({CLASSIFY[docs.docsType]})
         </Link>
       ))}
     </Accordion>

app/(user)/mypage/MyPage.tsx

@@ -4,21 +4,21 @@ import Accordion from "@/components/Accordion";
 import Container from "@/components/Container";
 import { useLogoutMutation } from "@/services/auth/auth.mutation";
 import { userQuery } from "@/services/user/user.query";
-import { useQueries } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { particle, 조사 } from "auto-particle";
-import { ROLE } from "@/record";
+import { CLASSIFY, ROLE } from "@/record";
 import Link from "next/link";
 import ContritbuteDocsList from "../ContritbuteDocsList";
 import * as styles from "../style.css";
 import LikeDocsList from "../LikeDocsList";
 
 const MyPage = () => {
-  const [{ data: user }, { data: likeList }] = useQueries({
-    queries: [userQuery.my(), userQuery.like()],
-  });
+  const { data: user } = useQuery(userQuery.my());
+  const { data: likeList } = useQuery(userQuery.like());
+  const isLoggedIn = user && likeList;
   const { mutate } = useLogoutMutation();
 
-  if (!user || !likeList)
+  if (!isLoggedIn)
     return (
       <Container title="마이페이지" docsType="mypage">
         <Link className={styles.link} href={process.env.NEXT_PUBLIC_OAUTH_URL || ""}>
@@ -28,18 +28,16 @@ const MyPage = () => {
     );
 
   return (
-    <Container title="마이페이지" docsType="mypage">
-      <div className={styles.container}>
-        <Accordion title="내정보">
-          {particle(user.nickName).word(조사.은_는)} 부마위키의 {ROLE[user.authority]}
-          이다.
-          <button onClick={() => mutate()} className={styles.button}>
-            로그아웃
-          </button>
-        </Accordion>
-        <LikeDocsList likeList={likeList} />
-        <ContritbuteDocsList contributes={user.contributeDocs} />
-      </div>
+    <Container title="마이페이지" docsType={CLASSIFY.마이페이지}>
+      <Accordion title="내정보">
+        {particle(user.nickName).word(조사.은_는)} 부마위키의 {ROLE[user.authority]}
+        이다.
+        <button onClick={() => mutate()} className={styles.button}>
+          로그아웃
+        </button>
+      </Accordion>
+      <LikeDocsList likeList={likeList} />
+      <ContritbuteDocsList contributes={user.contributeDocs} />
     </Container>
   );
 };

app/(user)/style.css.ts

@@ -1,34 +1,19 @@
 import { flex, font, theme } from "@/styles";
 import { style } from "@vanilla-extract/css";
 
-export const container = style({
-  width: "100%",
-  gap: "14px",
-  ...flex.COLUMN_FLEX,
-});
-
 export const contributeBox = style({
-  gap: "6px",
   padding: "18px",
   borderBottom: `1px solid ${theme.gray}`,
   cursor: "pointer",
+  color: theme.primary,
+  ...font.H5,
   ...flex.COLUMN_FLEX,
 
   ":hover": {
     backgroundColor: theme.hover,
   },
 });
 
-export const hgroup = style({
-  gap: "8px",
-  ...flex.VERTICAL,
-});
-
-export const docsTitle = style({
-  color: theme.primary,
-  ...font.H5,
-});
-
 export const modifiedAt = style({
   color: theme.boldgray,
   ...font.p2,

app/(user)/user/[id]/User.tsx

@@ -6,22 +6,19 @@ import { 조사, particle } from "auto-particle";
 import Container from "@/components/Container";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { userQuery } from "@/services/user/user.query";
-import { ROLE } from "@/record";
-import * as styles from "../../style.css";
+import { CLASSIFY, ROLE } from "@/record";
 import ContritbuteDocsList from "../../ContritbuteDocsList";
 
 const User: FC<{ id: number }> = ({ id }) => {
   const { data: user } = useSuspenseQuery(userQuery.id(id));
 
   return (
-    <Container title={user.nickName} docsType="user">
-      <div className={styles.container}>
-        <Accordion title="유저 정보">
-          {particle(user.nickName).word(조사.은_는)} 부마위키의 {ROLE[user.authority]}
-          이다.
-        </Accordion>
-        <ContritbuteDocsList contributes={user.contributeDocs} />
-      </div>
+    <Container title={user.nickName} docsType={CLASSIFY.유저}>
+      <Accordion title="유저 정보">
+        {particle(user.nickName).word(조사.은_는)} 부마위키의 {ROLE[user.authority]}
+        이다.
+      </Accordion>
+      <ContritbuteDocsList contributes={user.contributeDocs} />
     </Container>
   );
 };

app/(user)/user/[id]/page.tsx

@@ -14,11 +14,11 @@ interface PageProps {
 
 export const generateMetadata = async ({ params: { id } }: PageProps): Promise<Metadata> => {
   const queryClient = getQueryClient();
-  const data = await queryClient.fetchQuery(userQuery.id(id));
+  const { nickName, authority } = await queryClient.fetchQuery(userQuery.id(id));
 
   return generateOpenGraph({
-    title: data.nickName,
-    description: `부마위키 - ${data.nickName} (${CLASSIFY[data.authority]})`,
+    title: nickName,
+    description: `부마위키 - ${nickName} (${CLASSIFY[authority]})`,
   });
 };
 

record/classify.record.ts

@@ -9,6 +9,9 @@ const CLASSIFY = {
   NOTICE: "공지사항",
   STUDENT: "학생",
   FRAME: "틀",
+  MYPAGE: "마이페이지",
+  USER: "유저",
+  /** */
   "멘토 선생님": "MENTOR_TEACHER",
   "전공교과 선생님": "MAJOR_TEACHER",
   "보통교과 선생님": "TEACHER",
@@ -19,6 +22,8 @@ const CLASSIFY = {
   공지사항: "NOTICE",
   학생: "STUDENT",
   틀: "FRAME",
+  마이페이지: "MYPAGE",
+  유저: "USER",
 } as Record<string, string>;
 
 export default CLASSIFY;