Merge pull request #78 from KW-AUTA/refactor/76-responsive

Author: youjin-hong

src/components/layout/page-layout/Header.tsx

@@ -35,7 +35,7 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
     <header className="fixed top-4 left-1/2 -translate-x-1/2 z-[999] w-[95vw] max-w-2xl bg-background/90 backdrop-blur-md flex items-center justify-between px-4 py-2 rounded-full shadow-lg transition-all md:static md:top-0 md:left-0 md:translate-x-0 md:w-full md:max-w-full md:rounded-none md:shadow-none md:px-8 md:py-6">
       {/* 모바일 햄버거 메뉴 */}
       {onMenuClick && (
-        <button className="block md:hidden mr-2 p-2 rounded-full hover:bg-gray-100 transition" onClick={onMenuClick}>
+        <button className="block lg:hidden mr-2 p-2 rounded-full hover:bg-gray-100 transition" onClick={onMenuClick}>
           <svg width="28" height="28" fill="none" stroke="currentColor">
             <path strokeLinecap="round" strokeWidth="2" d="M4 7h20M4 14h20M4 21h20" />
           </svg>
@@ -63,21 +63,21 @@ export default function Header({ onMenuClick }: { onMenuClick?: () => void }) {
           }}
         />
       </div>
-      <div className="flex items-center gap-2 md:gap-4 min-w-0">
+      <div className="flex items-center gap-2 lg:gap-4 min-w-0">
         {/* 알림 버튼 (모바일에서는 숨김) */}
-        <div className="hidden md:flex items-center">
+        <div className="hidden lg:flex items-center">
           <button>
             <img src={notificationIcon} alt="notification button" />
           </button>
         </div>
         {/* 프로필 버튼 */}
-        <button className="flex items-center min-w-0 max-w-[120px] md:max-w-44 gap-2 rounded-full px-3 py-1 bg-white shadow md:shadow-none overflow-hidden">
-          <div className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden flex-shrink-0">
+        <button className="flex items-center min-w-0 max-w-[120px] lg:max-w-44 gap-2 rounded-full px-3 py-1 bg-white shadow lg:shadow-none overflow-hidden">
+          <div className="w-8 h-8 lg:w-9 lg:h-9 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden flex-shrink-0">
             <img src={profileImg} alt="profile img" className="w-full h-full object-cover" />
           </div>
           <div className="flex flex-col justify-center items-start min-w-0">
-            <p className="font-bm text-xs md:text-sm truncate max-w-[60px] md:max-w-[100px]">{profile?.username}</p>
-            <p className="font-medium text-[10px] md:text-7 text-typography-gray truncate max-w-[60px] md:max-w-[100px]">
+            <p className="font-bm text-xs lg:text-sm truncate max-w-[60px] lg:max-w-[100px]">{profile?.username}</p>
+            <p className="font-medium text-[10px] lg:text-7 text-typography-gray truncate max-w-[60px] lg:max-w-[100px]">
               Test Automation Developer
             </p>
           </div>

src/components/layout/page-layout/Layout.tsx

@@ -54,19 +54,19 @@ export default function Layout() {
       {!shouldHideSidebarAndHeader && (
         <>
           {/* 데스크탑 사이드바 */}
-          <div className="hidden md:block">
+          <div className="hidden lg:block">
             <Sidebar />
           </div>
           {/* 모바일 오버레이 사이드바 */}
-          <div className="block md:hidden">
+          <div className="block lg:hidden">
             <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
           </div>
         </>
       )}
-      <div className={`flex flex-col w-full ${shouldHideSidebarAndHeader ? '' : 'md:ml-[280px]'}`}>
+      <div className={`flex flex-col w-full ${shouldHideSidebarAndHeader ? '' : 'lg:ml-[280px]'}`}>
         <div className="w-full">
           {!shouldHideSidebarAndHeader && <Header onMenuClick={() => setSidebarOpen((prev) => !prev)} />}
-          <main className="flex-grow py-4 pt-[90px] md:pt-0">
+          <main className="flex-grow py-4 pt-[90px] lg:pt-0">
             <Outlet />
           </main>
         </div>

src/components/layout/sidebar/Sidebar.tsx

@@ -58,12 +58,12 @@ const Sidebar: React.FC<SidebarProps> = ({ open, onClose }) => {
     <>
       {/* 모바일 오버레이 */}
       <div
-        className={`fixed inset-0 bg-black/50 z-[998] transition-opacity duration-300 md:hidden ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+        className={`fixed inset-0 bg-black/50 z-[998] transition-opacity duration-300 lg:hidden ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
         onClick={onClose}
       />
       {/* 사이드바 */}
       <aside
-        className={`fixed top-0 left-0 h-full w-[80vw] max-w-[320px] min-w-[280px] min-[450px]:min-w-[450px] bg-pointColor rounded-2xl shadow-xl z-[999] px-4 pt-24 pb-6 flex flex-col transition-transform duration-300 md:hidden ${open ? 'translate-x-0' : '-translate-x-full'}`}>
+        className={`fixed top-0 left-0 h-full w-[80vw] max-w-[320px] min-w-[280px] min-[450px]:min-w-[450px] bg-pointColor rounded-2xl shadow-xl z-[999] px-4 pt-24 pb-6 flex flex-col transition-transform duration-300 lg:hidden ${open ? 'translate-x-0' : '-translate-x-full'}`}>
         {/* 로고 */}
         <div className="w-full flex justify-center mb-6">
           <img src={smallLogo} alt="logo" className="h-10" />

src/components/ui/progressBar/CircleProgressBar.tsx

@@ -6,53 +6,56 @@ interface CircleProgressBarProps {
   color?: string;
   size?: number;
   thickness?: number;
+  className?: string;
 }
+
 export default function CircleProgressBar({
   value,
   label = 'TOTAL',
   color = '#E48989',
-  size = 150,
-  thickness = 6
+  size,
+  thickness = 6,
+  className = ''
 }: CircleProgressBarProps) {
+  // size prop이 있으면 사용, 없으면 반응형 클래스 사용
+  const sizeStyle = size ? { width: size, height: size } : {};
+  const sizeClass = size ? '' : 'w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] lg:w-[150px] lg:h-[150px]';
+
   return (
-    <div className="flex flex-col justify-center items-center gap-3">
-      <Box position="relative" display="inline-flex">
+    <div className={`flex flex-col justify-center items-center gap-2 lg:gap-3 ${className}`}>
+      <Box position="relative" display="inline-flex" className={sizeClass} style={sizeStyle}>
         {/* 배경 회색원 */}
         <CircularProgress
           variant="determinate"
           value={100}
-          size={size}
           thickness={thickness}
           sx={{
-            color: '#DDDDDD'
+            color: '#DDDDDD',
+            width: '100% !important',
+            height: '100% !important'
           }}
         />
         {/* 진행률 원 */}
         <CircularProgress
           variant="determinate"
           value={value}
-          size={size}
           thickness={thickness}
           sx={{
+            color: color,
             position: 'absolute',
             left: 0,
-            color: color
+            top: 0,
+            width: '100% !important',
+            height: '100% !important'
           }}
         />
       </Box>
+
       {/* 테스트 이름, 진행률 text */}
-      <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center">
-        <p className="font-bold text-14 text-typography-dark">{label}</p>
-        <p className="font-bold text-14 text-typography-gray">{`${Math.round(value)}%`}</p>
-      </Box>
+      <div className="flex flex-col items-center justify-center">
+        <p className="font-bold text-11 sm:text-12 lg:text-14 text-typography-dark">{label}</p>
+        <p className="font-bold text-11 sm:text-12 lg:text-14 text-typography-gray">{`${Math.round(value)}%`}</p>
+      </div>
     </div>
   );
 }

src/components/ui/progressBar/LinearProgressBar2.tsx

@@ -15,11 +15,11 @@ export default function LinearProgressBar2({
     <div className={`w-full ${className}`}>
       {/* 테스트 이름 넣기 */}
       <div className="flex justify-center mb-2">
-        <span className="font-bold text-14 text-typography-dark">{label}</span>
+        <span className="font-bold text-14 text-typography-dark max-sm:text-11">{label}</span>
       </div>
       {/* 진행률 나타내는 bar */}
-      <div className="flex items-center gap-2 ">
-        <div className="w-full bg-[#DDDDDD] rounded-20 h-8 overflow-hidden relative">
+      <div className="flex items-center gap-2">
+        <div className="w-full bg-[#DDDDDD] rounded-20 h-8 overflow-hidden relative max-sm:h-4">
           <div
             className="h-full rounded-full transition-all duration-300 ease-in-out"
             style={{ width: `${value}%`, backgroundColor: color }}

src/pages/auth/_components/AuthForm.tsx

@@ -42,37 +42,39 @@ export default function AuthForm({ type, onSubmit }: AuthFormProps) {
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <Link to={ROUTES.LANDING}>
-        <img src={bigLogo} alt="AUTA big logo" className="py-20" />
-      </Link>
-      <form onSubmit={handleSubmitAuthForm} className="flex flex-col gap-8 max-w-[446px] w-full">
-        <Input label="이메일" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
-        <Input label="비밀번호" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+    <div className="min-h-screen flex items-center justify-center max-xl2:px-8">
+      <div className="flex flex-col items-center">
+        <Link to={ROUTES.LANDING}>
+          <img src={bigLogo} alt="AUTA big logo" className="py-20" />
+        </Link>
+        <form onSubmit={handleSubmitAuthForm} className="flex flex-col gap-8 max-w-[446px] w-full">
+          <Input label="이메일" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <Input label="비밀번호" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
 
-        {type === 'signup' && (
-          <Input label="이름" type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
-        )}
+          {type === 'signup' && (
+            <Input label="이름" type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
+          )}
 
-        <Button
-          text={type === 'login' ? '로그인' : '회원가입'}
-          type="submit"
-          className="w-[90px] block mx-auto font-medium text-11 my-7"
-        />
-      </form>
+          <Button
+            text={type === 'login' ? '로그인' : '회원가입'}
+            type="submit"
+            className="w-[90px] mx-auto font-medium text-11 my-7"
+          />
+        </form>
 
-      <div className="flex justify-center font-medium text-11 text-typography-dark">
-        {type === 'login' ? (
-          <div className="flex gap-3">
-            <Link to={ROUTES.SIGNUP}>회원가입</Link>
-            <span className="text-typography-gray">|</span>
-            <Link to="#">PW 찾기</Link>
-          </div>
-        ) : (
-          <Link to={ROUTES.LOGIN} className="">
-            로그인
-          </Link>
-        )}
+        <div className="flex justify-center font-medium text-11 text-typography-dark">
+          {type === 'login' ? (
+            <div className="flex gap-3">
+              <Link to={ROUTES.SIGNUP}>회원가입</Link>
+              <span className="text-typography-gray">|</span>
+              <Link to="#">PW 찾기</Link>
+            </div>
+          ) : (
+            <Link to={ROUTES.LOGIN} className="">
+              로그인
+            </Link>
+          )}
+        </div>
       </div>
     </div>
   );

src/pages/project/ProjectCreatePage.tsx

@@ -9,7 +9,8 @@ export default function ProjectCreatePage() {
     username,
     handleProjectSubmit,
     handleCancelProject,
-    isLoading,
+    isRegisterLoading,
+    isTestLoading,
     isCancelModalOpen,
     handleCloseCancelModal,
     handleConfirmCancelProject
@@ -29,7 +30,8 @@ export default function ProjectCreatePage() {
         username={username}
         onSubmit={handleProjectSubmit}
         onCancel={handleCancelProject}
-        isLoading={isLoading}
+        isRegisterLoading={isRegisterLoading}
+        isTestLoading={isTestLoading}
       />
       <CommonModal
         isOpen={isCancelModalOpen}

src/pages/project/ProjectMangePage.tsx

@@ -8,6 +8,8 @@ import { ProjectListData } from '@/types/project.type';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/redux/store';
 import { BeatLoader } from 'react-spinners';
+import TableListCard from '@/pages/project/_components/responsive_tableListCard/TableListCard';
+import ScrollToTopButton from '@/components/ui/scrollTopButton/ScrollToTopButton';
 
 const columns = [
   { id: 'projectName', label: '프로젝트 명' },
@@ -45,60 +47,75 @@ export default function ProjectMangePage() {
   if (isError) return <div>오류가 발생했습니다.</div>;
 
   return (
-    <div className="w-[90%] flex flex-col m-auto">
-      <ProjectTitle />
-      {projects.length === 0 ? (
-        <div className="w-full text-center py-20 text-typography-gray text-16 font-medium">
-          <p>검색 결과가 없습니다.</p>
-        </div>
-      ) : (
-        <TableItem
-          columns={columns}
-          items={projects}
-          onItemClick={handleItemClick}
-          className="w-full"
-          renderCell={(column, item) => {
-            if (column.id === 'projectStatus') {
-              return <StatusBadge status={item.projectStatus} />;
-            }
-            if (column.id === 'projectMember') {
-              return (
-                <div className="flex -space-x-1 overflow-hidden">
-                  <img
-                    className="inline-block size-6 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                  />
-                  <img
-                    className="inline-block size-6 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                  />
-                  <img
-                    className="inline-block size-6 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
-                    alt=""
-                  />
-                  <img
-                    className="inline-block size-6 rounded-full ring-2 ring-white"
-                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                    alt=""
-                  />
-                </div>
-              );
-            }
-            if (column.id === 'testRate') {
-              if (item.testRate === null) {
-                return <span>-</span>;
-              } else {
-                return <span>{item.testRate}%</span>;
-              }
-            }
+    <>
+      <div className="w-[90%] flex flex-col m-auto">
+        <ProjectTitle />
+        {projects.length === 0 ? (
+          <div className="w-full text-center py-20 text-typography-gray text-16 font-medium">
+            <p>검색 결과가 없습니다.</p>
+          </div>
+        ) : (
+          <>
+            <div className="hidden md:block">
+              <TableItem
+                columns={columns}
+                items={projects}
+                onItemClick={handleItemClick}
+                className="w-full"
+                renderCell={(column, item) => {
+                  if (column.id === 'projectStatus') {
+                    return <StatusBadge status={item.projectStatus} />;
+                  }
+                  if (column.id === 'projectMember') {
+                    return (
+                      <div className="flex -space-x-1 overflow-hidden">
+                        <img
+                          className="inline-block size-6 rounded-full ring-2 ring-white"
+                          src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                          alt=""
+                        />
+                        <img
+                          className="inline-block size-6 rounded-full ring-2 ring-white"
+                          src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                          alt=""
+                        />
+                        <img
+                          className="inline-block size-6 rounded-full ring-2 ring-white"
+                          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                          alt=""
+                        />
+                        <img
+                          className="inline-block size-6 rounded-full ring-2 ring-white"
+                          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                          alt=""
+                        />
+                      </div>
+                    );
+                  }
+                  if (column.id === 'testRate') {
+                    if (item.testRate === null) {
+                      return <span>-</span>;
+                    } else {
+                      return <span>{item.testRate}%</span>;
+                    }
+                  }
 
-            return item[column.id as keyof typeof item];
-          }}
-        />
-      )}
-    </div>
+                  return item[column.id as keyof typeof item];
+                }}
+              />
+            </div>
+
+            {/* md(768px) 이하 사이즈일 때 카드 형태로 변경 */}
+            <div className="md:hidden grid grid-cols-2 max-sm:grid-cols-1 gap-4">
+              {projects.map((project: ProjectListData) => (
+                <TableListCard key={project.projectId} project={project} onClick={() => handleItemClick(project)} />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      <ScrollToTopButton />
+    </>
   );
 }