Merge pull request #84 from MINYOUNG-SEOK/develop

style: 등록페이지 반응형 추가

Author: tkyoun0421

src/entities/projects/ui/project-insert/ProjectDetailDescriptionCard.tsx

@@ -1,4 +1,5 @@
 import { TextField } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
@@ -18,6 +19,7 @@ const ProjectDetailDescriptionCard = ({
   style,
 }: ProjectDetailDescriptionCardProps): JSX.Element => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
     onChange(e.target.value);
@@ -52,9 +54,11 @@ AI 기술을 활용하여 개인별 학습 패턴을 분석하고, 최적화된
         variant="outlined"
         sx={{
           "& .MuiOutlinedInput-root": {
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: isMobile
+              ? theme.typography.body2.fontSize
+              : large
+                ? theme.typography.h5.fontSize
+                : theme.typography.body1.fontSize,
             fontFamily: "monospace",
             lineHeight: 1.6,
             padding: 0,

src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx

@@ -1,5 +1,6 @@
 import AddIcon from "@mui/icons-material/Add";
 import { Box, Button } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type {
   ChangeEvent,
@@ -27,6 +28,7 @@ const ProjectPreferentialCard = ({
   style,
 }: ProjectPreferentialCardProps): JSX.Element => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [newPreferential, setNewPreferential] = useState("");
 
   const addPreferential = (): void => {
@@ -70,9 +72,11 @@ const ProjectPreferentialCard = ({
             height: 40,
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${theme.palette.divider}`,
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: isMobile
+              ? theme.typography.body2.fontSize
+              : large
+                ? theme.typography.h5.fontSize
+                : theme.typography.body1.fontSize,
             fontFamily: theme.typography.fontFamily,
             background: theme.palette.background.paper,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),

src/entities/projects/ui/project-insert/ProjectRequirementsCard.tsx

@@ -1,6 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, IconButton, TextField, Button } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
@@ -20,6 +21,7 @@ const ProjectRequirementsCard = ({
   style,
 }: ProjectRequirementsCardProps): JSX.Element => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const displayValue = value;
 
@@ -72,9 +74,11 @@ const ProjectRequirementsCard = ({
               sx={{
                 "& .MuiOutlinedInput-root": {
                   height: 40,
-                  fontSize: large
-                    ? theme.typography.h5.fontSize
-                    : theme.typography.body1.fontSize,
+                  fontSize: isMobile
+                    ? theme.typography.body2.fontSize
+                    : large
+                      ? theme.typography.h5.fontSize
+                      : theme.typography.body1.fontSize,
                   fontFamily: theme.typography.fontFamily,
                   background: "none",
                   border: "none",

src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx

@@ -51,9 +51,15 @@ const ProjectSimpleDescCard = ({
             },
           },
           "& .MuiOutlinedInput-input": {
-            padding: large ? 5 : 5,
-            fontSize: 16,
-            color: "#222",
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px",
+                sm: "15px",
+                md: "16px",
+              },
+              color: "#999",
+            },
           },
         }}
         required

src/entities/projects/ui/project-insert/ProjectWorkflowCard.tsx

@@ -1,5 +1,6 @@
-import { FormControl, Select, MenuItem } from "@mui/material";
 import type { SelectChangeEvent } from "@mui/material";
+import { FormControl, Select, MenuItem } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { CSSProperties, JSX } from "react";
 
@@ -43,6 +44,7 @@ export default function ProjectWorkflowCard({
   style,
 }: ProjectWorkflowCardProps): JSX.Element {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const handleChange = (event: SelectChangeEvent<Workflow>): void => {
     onChange(event.target.value as Workflow);
@@ -62,9 +64,11 @@ export default function ProjectWorkflowCard({
           size={large ? "medium" : "small"}
           displayEmpty
           sx={{
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: isMobile
+              ? theme.typography.body2.fontSize
+              : large
+                ? theme.typography.h5.fontSize
+                : theme.typography.body1.fontSize,
             fontFamily: theme.typography.fontFamily,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
 

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

@@ -1,5 +1,5 @@
 import type { CSSObject } from "@emotion/react";
-import { Button, Container } from "@mui/material";
+import { Container } from "@mui/material";
 import type { ContainerProps } from "@mui/material/Container";
 import type { Theme } from "@mui/material/styles";
 import { styled } from "@mui/material/styles";
@@ -16,7 +16,7 @@ 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, goPrevPageforTest } = useProjectInsert();
+  const { currentStep, updateForm } = useProjectInsert();
 
   return (
     <MainContainer>
@@ -28,9 +28,9 @@ const ProjectInsertPage = (): JSX.Element => {
       {currentStep === 3 && <Step3 updateForm={updateForm} />}
       {currentStep === 4 && <Step4 updateForm={updateForm} />}
 
-      <Button variant="contained" color="inherit" onClick={goPrevPageforTest}>
+      {/* <Button variant="contained" color="inherit" onClick={goPrevPageforTest}>
         이것은 테스트용 뒤로가기 버튼입니다. 배포시에는 해당 버튼을 삭제해주세요
-      </Button>
+      </Button> */}
 
       <HoneyTipBox />
     </MainContainer>