hotfix: 배포 전 마지막 픽스

src/app/routes/AuthLayout.tsx

@@ -3,9 +3,11 @@ import { Outlet } from "react-router-dom";
 
 const AuthLayout = (): JSX.Element => {
   return (
-    <main>
-      <Outlet />
-    </main>
+    <>
+      <main>
+        <Outlet />
+      </main>
+    </>
   );
 };
 

src/app/routes/MainLayout.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "react";
 import { Outlet } from "react-router-dom";
 
-import Footer from "@widgets/Footer";
+import Footer from "@widgets/Footer/Footer";
 import Header from "@widgets/Header/Header";
 
 const MainLayout = (): JSX.Element => {

src/pages/project-insert/ui/ProjectInsertPage.tsx

@@ -9,14 +9,14 @@ import HoneyTipBox from "@pages/project-insert/ui/HoneyTipBox";
 import StepBox from "@pages/project-insert/ui/StepBox";
 import TopTitle from "@pages/project-insert/ui/TopTitle";
 
-import useProjectInsert from "@features/projects/hooks/useProjectInsertForm";
+import useProjectInsertForm from "@features/projects/hooks/useProjectInsertForm";
 import Step1 from "@features/projects/ui/project-insert/Step1";
 import Step2 from "@features/projects/ui/project-insert/Step2";
 import Step3 from "@features/projects/ui/project-insert/Step3";
 import Step4 from "@features/projects/ui/project-insert/Step4";
 
 const ProjectInsertPage = (): JSX.Element => {
-  const { currentStep, updateForm } = useProjectInsert();
+  const { currentStep, updateForm } = useProjectInsertForm();
 
   return (
     <MainContainer>
@@ -28,10 +28,6 @@ const ProjectInsertPage = (): JSX.Element => {
       {currentStep === 3 && <Step3 updateForm={updateForm} />}
       {currentStep === 4 && <Step4 updateForm={updateForm} />}
 
-      {/* <Button variant="contained" color="inherit" onClick={goPrevPageforTest}>
-        이것은 테스트용 뒤로가기 버튼입니다. 배포시에는 해당 버튼을 삭제해주세요
-      </Button> */}
-
       <HoneyTipBox />
     </MainContainer>
   );

src/shared/ui/DevelopersDropdown.tsx

@@ -25,7 +25,7 @@ export default function DevelopersDropdown(): JSX.Element {
   const [open, setOpen] = useState(false);
   const [hover, setHover] = useState(false);
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const isActive = open || hover;
 
@@ -102,7 +102,7 @@ const DropdownTitle = styled(Box)<{ $active?: boolean }>(
     color: "#23294a",
     marginBottom: 8,
     transform: $active ? "scale(1.04)" : "scale(1)",
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       padding: "12px 8px",
       gap: 8,
     },
@@ -114,7 +114,7 @@ const DropdownTitleCenter = styled(Box)(({ theme }) => ({
   alignItems: "center",
   flex: 1,
   justifyContent: "center",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     gap: 4,
   },
 }));
@@ -127,7 +127,7 @@ const DropdownTitleText = styled(Typography, {
   color: $active ? "#2563eb" : "#888",
   letterSpacing: "0.2rem",
   transition: "color 0.2s",
-  [theme.breakpoints.down("sm")]: {
+  [theme.breakpoints.down("md")]: {
     fontSize: 15,
   },
 }));

src/widgets/Footer/Footer.tsx

@@ -14,7 +14,7 @@ import NavigateButton from "@shared/ui/NavigateButton";
 
 const Footer = (): JSX.Element => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   return (
     <FooterContainer>
@@ -29,46 +29,32 @@ const Footer = (): JSX.Element => {
               sx={
                 isMobile
                   ? {
-                      whiteSpace: "pre-line",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      display: "block",
                       textAlign: "center",
                     }
                   : undefined
               }
             >
-              {isMobile ? (
-                <>
-                  <b>함께 성장하는 개발자{"\n"}프로젝트 잼에서 시작하세요!!</b>
-                </>
-              ) : (
-                <>
-                  <b>
-                    모든 개발자가 자신의 전문성을 바탕으로 함께 성장할 수 있는
-                    협업의 문을 엽니다.
-                  </b>
-                  <Box component="span" display="block" mt={1}>
-                    프로잭트 잼은 단순한 프로젝트 매칭을 넘어,
-                  </Box>
-                  <Box component="span" display="block" mt={0.5}>
-                    다양한 개발 직군이 서로의 강점을 살려 함께 성장하는 생태계를
-                    만들어갑니다.
-                  </Box>
-                  <Box component="span" display="block" mt={1}>
-                    <b>
-                      함께 성장하는 개발자 커뮤니티, 프로젝트 잼에서 시작하세요!
-                      🚀
-                    </b>
-                  </Box>
-                </>
-              )}
+              <b>
+                모든 개발자가 자신의 전문성을 바탕으로 함께 성장할 수 있는
+                협업의 문을 엽니다.
+              </b>
+              <Box component="span" display="block" mt={1}>
+                프로잭트 잼은 단순한 프로젝트 매칭을 넘어,
+              </Box>
+              <Box component="span" display="block" mt={0.5}>
+                다양한 개발 직군이 서로의 강점을 살려 함께 성장하는 생태계를
+                만들어갑니다.
+              </Box>
+              <Box component="span" display="block" mt={1}>
+                <b>
+                  함께 성장하는 개발자 커뮤니티, 프로젝트 잼에서 시작하세요! 🚀
+                </b>
+              </Box>
             </VisionText>
           </InfoSection>
         </LogoSection>
 
-        {/* 네비게이션 컨테이너 */}
-        <NavigationContainer>
+        <NavSection>
           <NavigateButton
             to="/project"
             sx={{
@@ -109,8 +95,12 @@ const Footer = (): JSX.Element => {
           >
             프로젝트 등록
           </NavigateButton>
+        </NavSection>
+
+        {/* 디벨로퍼즈 드롭다운 메뉴 */}
+        <DevelopersSection>
           <DevelopersDropdown />
-        </NavigationContainer>
+        </DevelopersSection>
       </FooterContent>
 
       <Box sx={{ maxWidth: 1280, margin: "3rem auto", width: "100%" }}>
@@ -141,10 +131,10 @@ const FooterContent = styled(Box)(({ theme }) => ({
   alignItems: "flex-start",
   justifyContent: "space-between",
   gap: theme.spacing(2),
-  [theme.breakpoints.down(1200)]: {
+  [theme.breakpoints.down("md")]: {
     flexDirection: "column",
-    alignItems: "flex-start",
-    gap: theme.spacing(1),
+    alignItems: "center",
+    gap: theme.spacing(2),
   },
 }));
 
@@ -154,10 +144,11 @@ const LogoSection = styled(Box)(({ theme }) => ({
   justifyContent: "space-between",
   gap: 8,
   height: "100%",
-  [theme.breakpoints.down(1200)]: {
+  [theme.breakpoints.down("md")]: {
     alignItems: "center",
     width: "100%",
     flexDirection: "column",
+    alignSelf: "center",
   },
 }));
 
@@ -166,24 +157,38 @@ const InfoSection = styled(Box)(({ theme }) => ({
   minWidth: 200,
   marginLeft: 16,
   marginTop: 52,
-  [theme.breakpoints.down(1200)]: {
+  [theme.breakpoints.down("md")]: {
     marginTop: 0,
     marginLeft: 0,
     textAlign: "center",
   },
 }));
 
-const NavigationContainer = styled(Box)(({ theme }) => ({
+const NavSection = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  gap: "1rem",
-  marginTop: "1rem",
-
+  gap: 16,
+  marginTop: 16,
   [theme.breakpoints.down("md")]: {
+    width: "100%",
+    justifyContent: "center",
+    alignSelf: "center",
+    marginTop: 8,
+  },
+}));
+
+const DevelopersSection = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+  alignSelf: "flex-start",
+  [theme.breakpoints.down("lg")]: {
     flexDirection: "column",
-    alignItems: "center",
-    gap: "0.5rem",
+  },
+  [theme.breakpoints.down("md")]: {
     width: "100%",
+    justifyContent: "center",
+    alignSelf: "center",
   },
 }));