diff --git a/src/entities/projects/ui/project-insert/ProjectDetailDescriptionCard.tsx b/src/entities/projects/ui/project-insert/ProjectDetailDescriptionCard.tsx index a54bd29..866f9cf 100644 --- a/src/entities/projects/ui/project-insert/ProjectDetailDescriptionCard.tsx +++ b/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): 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, diff --git a/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx b/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx index 4ad5d2f..b82b744 100644 --- a/src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx +++ b/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), diff --git a/src/entities/projects/ui/project-insert/ProjectRequirementsCard.tsx b/src/entities/projects/ui/project-insert/ProjectRequirementsCard.tsx index 302f4be..18850c3 100644 --- a/src/entities/projects/ui/project-insert/ProjectRequirementsCard.tsx +++ b/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", diff --git a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx index f4fe40d..49441cd 100644 --- a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx +++ b/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 diff --git a/src/entities/projects/ui/project-insert/ProjectWorkflowCard.tsx b/src/entities/projects/ui/project-insert/ProjectWorkflowCard.tsx index 72a1285..d6a6321 100644 --- a/src/entities/projects/ui/project-insert/ProjectWorkflowCard.tsx +++ b/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): 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), diff --git a/src/pages/project-insert/ui/ProjectInsertPage.tsx b/src/pages/project-insert/ui/ProjectInsertPage.tsx index 0ba2364..170ba14 100644 --- a/src/pages/project-insert/ui/ProjectInsertPage.tsx +++ b/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 ( @@ -28,9 +28,9 @@ const ProjectInsertPage = (): JSX.Element => { {currentStep === 3 && } {currentStep === 4 && } - + */}