💄 Improve overall UI layout (Taegon21#33)

* 💄 Adjust sidebar UI size * 💄 Set global font-family for font optimization * 🔧 Configure proxy to bypass CORS * 💄 Update UI to display user data managed by global state
DEVROOM-OFFICIAL · Jun 27, 2024 · 185adb3 · 185adb3
1 parent cc10f67
commit 185adb3
Show file tree

Hide file tree

Showing 38 changed files with 135 additions and 292 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -12,6 +12,14 @@ const nextConfig = {
 
     return config;
   },
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`,
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/public/fonts/Pretendard-Bold.ttf b/public/fonts/Pretendard-Bold.ttf
diff --git a/public/fonts/Pretendard-Medium.ttf b/public/fonts/Pretendard-Medium.ttf
diff --git a/public/fonts/Pretendard-Regular.ttf b/public/fonts/Pretendard-Regular.ttf
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -4,7 +4,8 @@ import Cookies from "js-cookie";
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 const apiClient = axios.create({
-  baseURL: apiUrl,
+  // baseURL: apiUrl,
+  baseURL: "/api",
   headers: {
     "Content-Type": "application/json",
   },

diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
@@ -6,7 +6,7 @@ export const API_ENDPOINTS = {
   },
   PROFESSOR: {
     CHECK: (professorId: string) => `/class/${professorId}/pod`,
-    CREATE: (professorId: string) => `/class/${professorId}/create`,
+    CREATE: (professorId: string) => `api/class/${professorId}/create`,
     DELETE: (professorId: string) => `/class/${professorId}/delete`,
   },
 };
diff --git a/src/app/(main)/container/[id]/page.module.css b/src/app/(main)/container/[id]/page.module.css
@@ -6,7 +6,6 @@
 
 .headerTitle {
   font-size: 24px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   padding: 10px 0;
 }

diff --git a/src/app/(main)/help/page.module.css b/src/app/(main)/help/page.module.css
@@ -3,7 +3,6 @@
 }
 .headerTitle {
   font-size: 24px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   padding: 10px 0;
 }

diff --git a/src/app/(main)/layout.module.css b/src/app/(main)/layout.module.css
@@ -1,6 +1,6 @@
 .layout {
   display: flex;
-  min-height: 100dvh;
+  min-height: 100vh;
   height: 100%;
   background-color: var(--gray-color);
 }
@@ -28,7 +28,6 @@
 
 .school {
   font-size: 24px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   height: 80px;
   display: flex;
@@ -47,54 +46,47 @@
   display: flex;
   padding-bottom: 5px;
   gap: 5px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   font-size: 20px;
 }
 
-.studentsId {
-  font-family: "Pretendard-Regular";
-  font-size: 16px;
-}
-
+.studentsId,
 .studentId {
-  font-family: "Pretendard-Regular";
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .menu {
   padding: 50px 0 20px 0;
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 20px;
 }
 
 .menuItem {
   display: flex;
   align-items: center;
   gap: 15px;
-  height: 60px;
+  height: 50px;
   padding: 10px;
   border-radius: 10px;
-  font-family: "Pretendard-bold";
+  font-size: 18px;
   font-weight: 700;
   transition: color 0.3s ease, background-color 0.3s ease;
 }
 
 .menuText {
-  font-size: 20px;
-  font-family: "Pretendard-bold";
+  font-size: 18px;
   font-weight: 700;
 }
 
 .subMenu {
   padding-left: 20px;
-  margin-top: -20px;
+  margin-top: -12px;
+  margin-bottom: -8px;
 }
 
 .subMenu div {
-  font-family: "Pretendard-Medium";
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .down {
@@ -106,7 +98,6 @@
   color: var(--white-color);
   text-decoration: none;
   font-size: 20px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
 }
 
@@ -129,7 +120,7 @@
 .left {
   background-color: var(--black-color);
   width: 100%;
-  height: 100dvh;
+  min-height: 100vh;
   transition: 0.15s ease;
 }
 
@@ -139,8 +130,8 @@
   align-items: center;
   padding: 50px 40px 0;
   font-size: 24px;
-  font-family: "Pretendard-Medium";
   gap: 10px;
+  font-weight: 500;
   background-color: var(--black-color);
 }
 

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -2,22 +2,20 @@
 
 import { ReactNode, useEffect, useState } from "react";
 import styles from "./layout.module.css";
-import { useAuthStore } from "@/store/authStore";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import LeftArrowIcon from "/public/icons/LeftArrow.svg";
 import HamburgerIcon from "/public/icons/Hamburger.svg";
+import { useUserStore } from "@/store/userStore";
 
 interface LayoutProps {
   children: ReactNode;
 }
 
 export default function Layout({ children }: LayoutProps) {
-  const user = useAuthStore((state) => state.user);
-
+  const { name, role, studentId } = useUserStore((state) => state);
   const [isSidebarOpen, setSidebarOpen] = useState<boolean>(true);
-
   const navigation = usePathname();
 
   const isActive = (path: string) => {
@@ -67,26 +65,26 @@ export default function Layout({ children }: LayoutProps) {
           />
           <div>
             <div className={styles.userInfo}>
-              <div>{user?.name}</div>
-              <div>{user?.isStudent ? "- 학생" : " - 교수"}</div>
+              <div>{name}</div>
+              <div>{role === "Student" ? "- 학생" : " - 교수"}</div>
             </div>
-            <div className={styles.studentsId}>{user?.studentId}</div>
+            <div className={styles.studentsId}>{studentId}</div>
           </div>
         </div>
         <div className={styles.menu}>
           <div className={styles.menuItem}>
             <Image
               src="/icons/Space.svg"
               alt="container"
-              width={35}
-              height={35}
+              width={25}
+              height={25}
             />
             <div className={styles.menuText}>스페이스</div>
             <Image
               src="/icons/Down.svg"
               alt="container"
-              width={15}
-              height={15}
+              width={12}
+              height={12}
               className={styles.down}
             />
           </div>
@@ -126,8 +124,8 @@ export default function Layout({ children }: LayoutProps) {
               <Image
                 src="/icons/Notice.svg"
                 alt="notice"
-                width={35}
-                height={35}
+                width={25}
+                height={25}
               />
               <div>공지</div>
             </div>
@@ -137,15 +135,15 @@ export default function Layout({ children }: LayoutProps) {
               <Image
                 src="/icons/Message.svg"
                 alt="community"
-                width={35}
-                height={35}
+                width={25}
+                height={25}
               />
               <div>메세지</div>
             </div>
           </Link>
           <Link href="/help">
             <div className={`${styles.menuItem} ${isActive("/help")}`}>
-              <Image src="/icons/Help.svg" alt="help" width={35} height={35} />
+              <Image src="/icons/Help.svg" alt="help" width={25} height={25} />
               <div>도움말</div>
             </div>
           </Link>
@@ -154,8 +152,8 @@ export default function Layout({ children }: LayoutProps) {
               <Image
                 src="/icons/Mypage.svg"
                 alt="mypage"
-                width={35}
-                height={35}
+                width={22}
+                height={22}
               />
               <div>마이페이지</div>
             </div>
@@ -176,8 +174,8 @@ export default function Layout({ children }: LayoutProps) {
               className={styles.iconButton}
             />
           )}
-          <div className={styles.studentId}>{user?.name}</div>
-          <div className={styles.studentId}> / {user?.studentId}</div>
+          <div className={styles.studentId}>{name}</div>
+          <div className={styles.studentId}> / {studentId}</div>
         </div>
         <div
           className={`${styles.content} ${

diff --git a/src/app/(main)/message/page.module.css b/src/app/(main)/message/page.module.css
@@ -23,7 +23,6 @@
 
 .headerTitle {
   font-size: 24px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   padding: 10px 0;
 }

diff --git a/src/app/(main)/mypage/page.tsx b/src/app/(main)/mypage/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import { useAuthStore } from "@/store/authStore";
+import { useUserStore } from "@/store/userStore";
 import styles from "./page.module.css";
 import ProfilePic from "/public/icons/MyProfile.svg";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 const MyPage = () => {
-  const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
   const router = useRouter();
+  const { name, role, studentId, email, logout } = useUserStore(
+    (state) => state
+  );
 
   const handleLogout = () => {
     logout();
@@ -25,29 +25,31 @@ const MyPage = () => {
     <div className={styles.container}>
       <div className={styles.profileSection}>
         <ProfilePic />
-        <h1 className={styles.userName}>{user?.name}</h1>
-        <p className={styles.userRole}>{user?.isStudent ? "학생" : "교수"}</p>
-        <p className={styles.userId}>{user?.studentId}</p>
+        <h1 className={styles.userName}>{name}</h1>
+        <p className={styles.userRole}>
+          {role === "Student" ? "학생" : "교수"}
+        </p>
+        <p className={styles.userId}>{studentId}</p>
       </div>
       <div className={styles.infoSection}>
         <h2 className={styles.sectionTitle}>내 정보</h2>
         <div className={styles.infoItem}>
           <span className={styles.infoLabel}>이름:</span>
-          <span className={styles.infoValue}>{user?.name}</span>
+          <span className={styles.infoValue}>{name}</span>
         </div>
         <div className={styles.infoItem}>
           <span className={styles.infoLabel}>역할:</span>
           <span className={styles.infoValue}>
-            {user?.isStudent ? "학생" : "교수"}
+            {role === "Student" ? "학생" : "교수"}
           </span>
         </div>
         <div className={styles.infoItem}>
           <span className={styles.infoLabel}>학번/교번:</span>
-          <span className={styles.infoValue}>{user?.studentId}</span>
+          <span className={styles.infoValue}>{studentId}</span>
         </div>
         <div className={styles.infoItem}>
           <span className={styles.infoLabel}>이메일:</span>
-          <span className={styles.infoValue}>{user?.email}</span>
+          <span className={styles.infoValue}>{email}</span>
         </div>
       </div>
 

diff --git a/src/app/(main)/notice/[id]/page.module.css b/src/app/(main)/notice/[id]/page.module.css
@@ -11,7 +11,6 @@
 
 .headerTitle {
   font-size: 24px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   padding: 10px 0;
 }
@@ -65,7 +64,6 @@
 
 .noticeTitle {
   font-size: 20px;
-  font-family: "Pretendard-bold";
   font-weight: 700;
   margin-bottom: 10px;
 }
@@ -83,7 +81,6 @@
 }
 
 .courseName {
-  font-family: "Pretendard-bold";
   font-weight: 700;
 }