Merge pull request #1 from DEVROOM-OFFICIAL/develop

💄 프론트엔드 UI 수정
DEVROOM-OFFICIAL · Sep 13, 2024 · 74fa70c · 74fa70c
2 parents 363e3ce + 34d7971
commit 74fa70c
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 28 deletions.
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -4,8 +4,8 @@ import Cookies from "js-cookie";
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 const apiClient = axios.create({
-  baseURL: apiUrl,
-  // baseURL: "/api",
+  // baseURL: apiUrl,
+  baseURL: "/api",
   headers: {
     "Content-Type": "application/json",
   },

diff --git a/src/app/(main)/container/[id]/page.tsx b/src/app/(main)/container/[id]/page.tsx
@@ -17,7 +17,7 @@ export default function Home() {
   const [filterOption, setFilterOption] = useState("");
 
   const titles = {
-    recent: "최근 실행 컨테이너",
+    // recent: "최근 실행 컨테이너",
     semester: "이번 학기 컨테이너",
     all: "전체 학기 컨테이너",
   };

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -96,15 +96,15 @@ export default function Layout({ children }: LayoutProps) {
                 <div>전체 학기 컨테이너</div>
               </div>
             </Link>
-            <Link href="/container/recent">
+            {/* <Link href="/container/recent">
               <div
                 className={`${styles.menuItem} ${isActive(
                   "/container/recent"
                 )}`}
               >
                 <div>최근 실행 컨테이너</div>
               </div>
-            </Link>
+            </Link> */}
             <Link href="/container/semester">
               <div
                 className={`${styles.menuItem} ${isActive(

diff --git a/src/app/(main)/mypage/page.tsx b/src/app/(main)/mypage/page.tsx
@@ -4,12 +4,18 @@ import { useUserStore } from "@/store/userStore";
 import styles from "./page.module.css";
 import ProfilePic from "/public/icons/MyProfile.svg";
 import { useRouter } from "next/navigation";
+import { useFetchService } from "@/api/hooks/useStudent";
+import { type ServiceSchema } from "@/type/schemas";
 
 const MyPage = () => {
   const router = useRouter();
   const { name, role, studentId, email, logout } = useUserStore(
     (state) => state
   );
+
+  const { data: serviceData, isLoading, error } = useFetchService();
+  let numberOfElements = 0;
+  if (serviceData) serviceData.map(() => (numberOfElements++));
 
   const handleLogout = () => {
     logout();
@@ -54,15 +60,15 @@ const MyPage = () => {
       </div>
 
       <div className={styles.statisticsSection}>
-        <h2 className={styles.sectionTitle}>컨테이너 사용시간 통계</h2>
+        <h2 className={styles.sectionTitle}>컨테이너 정보</h2>
         <div className={styles.statsItem}>
-          <span className={styles.statsLabel}>총 사용시간:</span>
-          <span className={styles.statsValue}>50시간</span>
+          <span className={styles.statsLabel}>총 컨테이너 수:</span>
+          <span className={styles.statsValue}>{numberOfElements}</span>
         </div>
-        <div className={styles.statsItem}>
+        {/* <div className={styles.statsItem}>
           <span className={styles.statsLabel}>이번 학기 사용시간:</span>
           <span className={styles.statsValue}>20시간</span>
-        </div>
+        </div> */}
       </div>
 
       <div className={styles.linkSection}>

diff --git a/src/app/(professor)/professor-page/page.tsx b/src/app/(professor)/professor-page/page.tsx
@@ -4,11 +4,18 @@ import styles from "./page.module.css";
 import ProfilePic from "/public/icons/MyProfile.svg";
 import { useRouter } from "next/navigation";
 import { useUserStore } from "@/store/userStore";
+import { useFetchCheck } from "@/api/hooks/useProfessor";
+import { type ServiceSchema } from "@/type/schemas";
 
 const MyPage = () => {
   const { name, role, studentId, email, logout } = useUserStore(
     (state) => state
   );
+
+  const { data: containerCheckData, isLoading, error } = useFetchCheck();
+  let numberOfElements = 0;
+  if (containerCheckData) containerCheckData.map(() => (numberOfElements++));
+
   const router = useRouter();
 
   const handleLogout = () => {
@@ -57,12 +64,12 @@ const MyPage = () => {
         <h2 className={styles.sectionTitle}>컨테이너 정보</h2>
         <div className={styles.statsItem}>
           <span className={styles.statsLabel}>운영중인 컨테이너 개수:</span>
-          <span className={styles.statsValue}>5개</span>
+          <span className={styles.statsValue}>{numberOfElements}</span>
         </div>
-        <div className={styles.statsItem}>
+        {/* <div className={styles.statsItem}>
           <span className={styles.statsLabel}>사용된 컨테이너 개수:</span>
           <span className={styles.statsValue}>67개</span>
-        </div>
+        </div> */}
       </div>
 
       <div className={styles.linkSection}>

diff --git a/src/components/container/Filter.tsx b/src/components/container/Filter.tsx
@@ -53,7 +53,7 @@ export default function Filter({ onSelect }: FilterProps) {
         className={`${styles.filterOptions} ${isFilterOpen ? styles.open : ""}`}
       >
         <div onClick={() => handleSelect("전체 학기")}>전체 학기</div>
-        <div onClick={() => handleSelect("최근 실행")}>최근 실행</div>
+        {/* <div onClick={() => handleSelect("최근 실행")}>최근 실행</div> */}
         <div onClick={() => handleSelect("이번 학기")}>이번 학기</div>
       </div>
     </div>

diff --git a/src/components/container/SSHModal.module.css b/src/components/container/SSHModal.module.css
@@ -19,13 +19,17 @@
   align-items: center;
   gap: 15px;
   padding: 20px;
-  width: 550px;
+  width: 100%;
   border-radius: 12px;
   border: 3px solid var(--orange-color);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   color: var(--gray-color);
 }
 
+.wrapper {
+  width: auto;
+}
+
 .header {
   text-align: center;
   font-size: 20px;

diff --git a/src/components/container/SSHModal.tsx b/src/components/container/SSHModal.tsx
@@ -12,20 +12,22 @@ const Modal = ({ isOpen, onClose, content }: ModalProps) => {
 
   return (
     <div className={styles.overlay}>
-      <div className={styles.modal}>
-        <button className={styles.button} onClick={onClose}>
-          X
-        </button>
-        <div className={styles.header}>
-          아래 명령어를 터미널에 입력하세요
+      <div className={styles.wrapper}>
+        <div className={styles.modal}>
+          <button className={styles.button} onClick={onClose}>
+            X
+          </button>
+          <div className={styles.header}>
+            아래 명령어를 터미널에 입력하세요
+          </div>
+
+          <div className={styles.content}>
+            {content.map((cmd, index) => (
+              <p key={index}>{cmd}</p>
+            ))}
+          </div>
+
         </div>
-
-        <div className={styles.content}>
-          {content.map((cmd, index) => (
-            <p key={index}>{cmd}</p>
-          ))}
-        </div>
-
       </div>
     </div>
   );