amicable-development-center · tkyoun0421 · Jun 27, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
diff --git a/src/app/assets/icon.svg → public/logo.svg b/src/app/assets/icon.svg → public/logo.svg
diff --git a/src/app/index.html b/src/app/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./assets/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
@@ -28,7 +28,7 @@
       name="og:description"
       content="프로젝트 잼 - 함께 만들어가는 사이드 프로젝트"
     />
-    <meta name="og:image" content="./assets/icon.svg" />
+    <meta name="og:image" content="./public/logo.svg" />
     <meta name="og:url" content="https://project-jam-gamma.vercel.app/" />
     <meta name="og:site_name" content="프로젝트 잼" />
     <meta name="og:type" content="website" />

diff --git a/src/app/public/logo.svg b/src/app/public/logo.svg
diff --git a/src/app/routes/App.tsx b/src/app/routes/App.tsx
@@ -7,7 +7,8 @@ import MainLayout from "@app/routes/MainLayout";
 import PrivateRoute from "@app/routes/PrivateRoute";
 
 import { useAuthObserver } from "@shared/hooks/useAuthObserver";
-import LoadingSpinner from "@shared/ui/loading-spinner/LoadingSpinner";
+import { useLoadingCursor } from "@shared/hooks/useLoadingCursor";
+import PageTransitionLoader from "@shared/ui/loading-spinner/PageTransitionLoader";
 
 const HomePage = lazy(() => import("@pages/home/ui/HomePage"));
 const NotFoundPage = lazy(() => import("@pages/not-found/ui/NotFoundPage"));
@@ -26,47 +27,55 @@ const ProjectListPage = lazy(
   () => import("@pages/project-list/ui/ProjectListPage")
 );
 
+function AppContent(): JSX.Element {
+  useLoadingCursor();
+
+  return (
+    <Suspense fallback={<PageTransitionLoader />}>
+      <Routes>
+        {/* 헤더 없는 레이아웃 (로그인/회원가입 전용) */}
+        <Route element={<AuthLayout />}>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignUpPage />} />
+        </Route>
+
+        {/* 헤더 포함 레이아웃 (메인 페이지) */}
+        <Route element={<MainLayout />}>
+          {/* 공개 페이지 */}
+          <Route path="/" element={<HomePage />} />
+          <Route path="/project" element={<ProjectListPage />} />
+          <Route path="/project/:id" element={<ProjectDetailPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+
+          {/* 비공개 페이지 */}
+          <Route
+            path="/profile"
+            element={
+              <PrivateRoute>
+                <UserProfilePage />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/project/insert"
+            element={
+              <PrivateRoute>
+                <ProjectInsertPage />
+              </PrivateRoute>
+            }
+          />
+        </Route>
+      </Routes>
+    </Suspense>
+  );
+}
+
 function App(): JSX.Element {
   useAuthObserver();
 
   return (
     <BrowserRouter basename="/">
-      <Suspense fallback={<LoadingSpinner />}>
-        <Routes>
-          {/* 헤더 없는 레이아웃 (로그인/회원가입 전용) */}
-          <Route element={<AuthLayout />}>
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignUpPage />} />
-          </Route>
-
-          {/* 헤더 포함 레이아웃 (메인 페이지) */}
-          <Route element={<MainLayout />}>
-            {/* 공개 페이지 */}
-            <Route path="/" element={<HomePage />} />
-            <Route path="/project" element={<ProjectListPage />} />
-            <Route path="/project/:id" element={<ProjectDetailPage />} />
-            <Route path="*" element={<NotFoundPage />} />
-
-            {/* 비공개 페이지 */}
-            <Route
-              path="/profile"
-              element={
-                <PrivateRoute>
-                  <UserProfilePage />
-                </PrivateRoute>
-              }
-            />
-            <Route
-              path="/project/insert"
-              element={
-                <PrivateRoute>
-                  <ProjectInsertPage />
-                </PrivateRoute>
-              }
-            />
-          </Route>
-        </Routes>
-      </Suspense>
+      <AppContent />
     </BrowserRouter>
   );
 }

diff --git a/src/app/styles/global.css b/src/app/styles/global.css
@@ -59,3 +59,11 @@ body {
 *::after {
   box-sizing: inherit;
 }
+
+body.page-loading {
+  cursor: wait;
+}
+
+body.page-loading * {
+  cursor: wait !important;
+}
diff --git a/src/entities/projects/ui/projects-card/ProjectCard.tsx b/src/entities/projects/ui/projects-card/ProjectCard.tsx
@@ -1,6 +1,3 @@
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import LocationPinIcon from "@mui/icons-material/LocationPin";
-import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
 import {
   Button,
   Card,
@@ -18,30 +15,38 @@ import type { JSX } from "react";
 import { memo } from "react";
 import { Link } from "react-router-dom";
 
-import { type ProjectListRes } from "@shared/types/project";
+import { RecruitmentStatus, type ProjectListRes } from "@shared/types/project";
 import DragScrollContainer from "@shared/ui/DragScrollContainer";
+import {
+  AccessTimeIcon,
+  LocationPinIcon,
+  PeopleAltIcon,
+} from "@shared/ui/icons/CommonIcons";
 import UserProfileAvatar from "@shared/ui/user/UserProfileAvatar";
 import UserProfileWithNamePosition from "@shared/ui/user/UserProfileWithNamePosition";
 
 interface ProjectCardProps {
   project: ProjectListRes;
   simple?: boolean;
-  sx?: any;
 }
 
 const ProjectCard = ({
   project,
   simple = false,
-  sx,
 }: ProjectCardProps): JSX.Element => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.up("sm"));
+  const isRecruiting = project.status === RecruitmentStatus.recruiting;
 
   return (
-    <StyledCard sx={{ ...(simple && { minHeight: 260 }), ...sx }}>
+    <StyledCard simple={simple}>
       <StyledCardContent>
         <ProjectHeader>
-          <StatusChip label={project.status} color="primary" size="small" />
+          <StatusChip
+            label={project.status}
+            color={isRecruiting ? "primary" : "default"}
+            size="small"
+          />
         </ProjectHeader>
 
         <ContentSection>
@@ -59,7 +64,7 @@ const ProjectCard = ({
             </>
           )}
         </ContentSection>
-        <Stack flexDirection={"row"} gap={"0.8rem"} alignItems={"flex-start"}>
+        <UserProfileContainer>
           {isMobile ? (
             <UserProfileAvatar
               name={project.projectOwner.name}
@@ -74,7 +79,7 @@ const ProjectCard = ({
               flexDirection="row"
             />
           )}
-        </Stack>
+        </UserProfileContainer>
         {!simple && (
           <DragScrollContainer>
             {project.techStack.map((stack, index) => (
@@ -125,7 +130,9 @@ const ProjectCard = ({
 
 export default memo(ProjectCard);
 
-const StyledCard = styled(Card)(({ theme }) => ({
+const StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== "simple",
+})<{ simple?: boolean }>(({ theme, simple }) => ({
   height: "100%",
   flex: 1,
   width: "100%",
@@ -134,6 +141,7 @@ const StyledCard = styled(Card)(({ theme }) => ({
   transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
   cursor: "pointer",
   border: `1px solid ${theme.palette.divider}`,
+  ...(simple && { minHeight: 260 }),
 
   "&:hover": {
     transform: "translateY(-0.4rem)",
@@ -172,15 +180,9 @@ const ProjectHeader = styled(Box)(() => ({
   alignItems: "center",
 }));
 
-const StatusChip = styled(Chip)(({ theme }) => ({
+const StatusChip = styled(Chip)(() => ({
   fontWeight: 600,
   letterSpacing: "0.025em",
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-
-  "&:hover": {
-    backgroundColor: theme.palette.primary.dark,
-  },
 }));
 
 const ContentSection = styled(Box)(({ theme }) => ({
@@ -208,6 +210,12 @@ const SimpleInfo = styled(Typography)(() => ({
   WebkitBoxOrient: "vertical",
 }));
 
+const UserProfileContainer = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: theme.spacing(1),
+  alignItems: "flex-start",
+}));
+
 const TechChip = styled(Chip)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   border: `1px solid ${theme.palette.divider}`,