Edit modal Ui

front-end/src/components/authservice/registerservice.tsx

@@ -6,8 +6,5 @@ export const registerUser = async (userData: {
   password: string;
   confirmPassword: string;
 }) => {
-  const response = await fetchRegisterUser(userData);
-  if (response.status === 200 || response.status === 201) {
-    alert('회원가입 완료');
-  }
+  await fetchRegisterUser(userData);
 };

front-end/src/components/playlist/CategoryPlaylist.tsx

@@ -145,4 +145,4 @@ const CategoryPlaylist: React.FC<CategoryPlaylistProps> = ({ category: initialCa
   );
 };
 
-export default CategoryPlaylist;
+export default CategoryPlaylist;

front-end/src/components/playlist/Modal.tsx

@@ -87,7 +87,7 @@ const Modal: React.FC<ModalProps> = ({
     } finally {
       setLoadingPlaylists(false);
     }
-  }, [token, setPlaylists, getVideo, detailPlaylist]);
+  }, [token, setPlaylists]);
 
   const handleSaveVideo = async () => {
     if (!selectVideo) {
@@ -211,7 +211,7 @@ const Modal: React.FC<ModalProps> = ({
                     }}
                     className={isVideoInPlaylist ? 'remove-video-button' : 'add-video-button'}
                   >
-                    {isVideoInPlaylist ? 'X' : '+'}
+                    <span>{isVideoInPlaylist ? '-' : '+'}</span>
                   </button>
 
                   <h3>{playlist.playlistName}</h3>

front-end/src/components/playlist/TeacherPlaylist.tsx

@@ -1,15 +1,12 @@
-+91
--237
-Lines changed: 91 additions & 237 deletions
-Original file line number	Original file line	Diff line number	Diff line change
-@@ -1,314 +1,168 @@
 'use client';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
+
 import { useQuery } from '@tanstack/react-query';
 import { getAllVideos, getLatestVideos } from '@/app/api/teacherAPI';
 import { Video } from '@/types/video';
+
 import { deletePlaylist, getVideo, detailPlaylist } from '@/app/api/playlistApi';
 import Cookies from 'js-cookie';
 import instructorData from '@/data/instructorData';
@@ -19,6 +16,7 @@ import { devConsoleError } from '@/utils/logger';
 import TeacherTabs from './TeacherTap';
 import TeacherVideoList from './TeacherVideolist';
 import Modal from './Modal';
+
 const TeacherPlaylistPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -30,6 +28,7 @@ const TeacherPlaylistPage = () => {
   const [showModal, setShowModal] = useState(false);
   const [selectVideo, setSelectVideo] = useState<string | null>(null);
   const [playlists, setPlaylists] = useState<PlayLists | undefined>(undefined);
+
   const token = Cookies.get('token');
 
   const handleTeacherSelect = (inst: (typeof instructorData)[number]) => {
@@ -82,6 +81,7 @@ const TeacherPlaylistPage = () => {
             const detail = await detailPlaylist(playlist.playlistId, token);
             return {
               ...playlist,
+
               videos: detail && detail.videos && Array.isArray(detail.videos) ? detail.videos : [],
             };
           } catch (detailError) {
@@ -112,9 +112,11 @@ const TeacherPlaylistPage = () => {
     }
 
     if (!token) return;
+
     try {
       await deletePlaylist(playlistId, token);
       alert('재생목록이 삭제되었습니다.');
+
       setPlaylists((prevPlaylists: PlayLists | undefined) =>
         prevPlaylists
           ? {
@@ -140,11 +142,27 @@ const TeacherPlaylistPage = () => {
         selected={selected}
         onSelectTeacher={handleTeacherSelect}
       />
+
       <TeacherVideoList
         videos={videos}
         isLoading={allQuery.isLoading || instQuery.isLoading}
         error={allQuery.error || instQuery.error}
         selectedTeacherName={selected.name}
         token={token}
         onOpenModal={openModal}
-      />
+      />
+
+      {showModal && (
+        <Modal
+          playlists={playlists}
+          setPlaylists={setPlaylists}
+          onClose={closeModal}
+          selectVideo={selectVideo}
+          onClickDelete={onClickDeletePlaylist}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TeacherPlaylistPage;

front-end/src/styles/pages/login/login.scss

@@ -76,7 +76,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 20vh;
     width: 100%;
     button {
       border-radius: 0.5rem;
@@ -104,7 +103,7 @@
   .googleLogin {
     display: flex;
     width: 18%;
-    height: 6vh;
+    height: auto;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
@@ -113,6 +112,8 @@
     font-size: 1.5rem;
     font-weight: bold;
     border-radius: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     .googleIcon {
       width: 2rem;
       margin-right: 2rem;
@@ -121,7 +122,9 @@
   .naverLogin {
     display: flex;
     width: 18%;
-    height: 6vh;
+    height: auto;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     justify-content: center;
     align-items: center;
     margin: 1rem auto;
@@ -131,4 +134,10 @@
     font-weight: bold;
     border-radius: 2rem;
   }
+  .error-message {
+    color: red;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
 }

front-end/src/styles/pages/playlist/playlist.scss

@@ -58,30 +58,43 @@
       margin-bottom: 1rem;
       justify-content: space-between;
       .remove-video-button {
-        color: white;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         display: flex;
         align-items: center;
         margin-left: 0.8rem;
+        width: 2.2rem;
+        height: 2.2rem;
         background-color: red;
-        width: 1.5rem;
         justify-content: center;
-        height: 1.5rem;
         border-radius: 5px;
-        padding: 10px;
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          position: relative;
+          top: -6%;
+        }
       }
       .add-video-button {
         color: white;
+        height: 2.2rem;
         font-size: 1.5rem;
         display: flex;
         align-items: center;
         margin-left: 0.8rem;
-        width: 1.5rem;
+        width: 2.2rem;
         background-color: var(--btn-color);
         justify-content: center;
         border-radius: 5px;
-        height: 1.5rem;
-        padding: 10px;
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          position: relative;
+          top: -5%;
+        }
       }
       input {
         width: 2rem;
@@ -221,9 +234,9 @@
     }
   }
 
-  .inner {
-    // padding: 10rem 0;
-  }
+  // .inner {
+  //   // padding: 10rem 0;
+  // }
   .dev_list_cont {
     width: 100%;
     @include pc_1280 {