Skip to content

Feat/insert 등록페이지 step1 카드 컴포넌트 레이아웃 통일 #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tkyoun0421 merged 5 commits into from
Jun 27, 2025
Merged

Feat/insert 등록페이지 step1 카드 컴포넌트 레이아웃 통일 #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8643d7
fix: eslint error - unused import 제거
MINYOUNG-SEOK Jun 27, 2025
7f97aaa
style: 등록페이지 step1 카드 컴포넌트 레이아웃 통일
MINYOUNG-SEOK Jun 27, 2025
939e4b6
fix: step1 입력/셀렉트 핸들러 타입 일치 및 타입-only import 적용
MINYOUNG-SEOK Jun 27, 2025
501abd4
chore: lint error 수정
MINYOUNG-SEOK Jun 27, 2025
f85d13a
chore: lint error 수정
MINYOUNG-SEOK Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 9 additions & 55 deletions src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ import type { SelectChangeEvent } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import type { CSSProperties, JSX } from "react";

import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";

interface ProjectCategoryCardProps {
value: string;
onChange: (event: SelectChangeEvent) => void;
large?: boolean;
style?: CSSProperties;
}

const CARD_SHADOW =
"0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";

const ProjectCategoryCard = ({
value,
onChange,
Expand All @@ -21,49 +20,13 @@ const ProjectCategoryCard = ({
}: ProjectCategoryCardProps): JSX.Element => {
const theme = useTheme();
return (
<div
style={{
background: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
boxShadow: CARD_SHADOW,
padding: large ? theme.spacing(4) : theme.spacing(3),
minHeight: large ? 220 : 180,
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100%",
overflow: "visible",
fontFamily: theme.typography.fontFamily,
...style,
}}
<SimpleFormCard
title="프로젝트 분야"
description="어떤 분야의 프로젝트인지 선택해주세요"
helpText="가장 가까운 분야를 선택해주세요"
large={large}
style={style}
>
<div
style={{
fontWeight: theme.typography.h3.fontWeight,
fontSize: large
? theme.typography.h3.fontSize
: theme.typography.h4.fontSize,
marginBottom: 14,
color: theme.palette.text.primary,
}}
>
<span role="img" aria-label="분야">
🏷️
</span>{" "}
프로젝트 분야
</div>
<div
style={{
color: theme.palette.text.secondary,
fontSize: large
? theme.typography.h6.fontSize
: theme.typography.body1.fontSize,
marginBottom: 18,
}}
>
어떤 분야의 프로젝트인지 선택해주세요
</div>
<FormControl fullWidth>
<Select
value={value || ""}
Expand Down Expand Up @@ -100,16 +63,7 @@ const ProjectCategoryCard = ({
<MenuItem value="other">기타</MenuItem>
</Select>
</FormControl>
<div
style={{
color: theme.palette.text.disabled,
fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
marginTop: 10,
}}
>
가장 가까운 분야를 선택해주세요
</div>
</div>
</SimpleFormCard>
);
};

Expand Down
77 changes: 15 additions & 62 deletions src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useTheme } from "@mui/material/styles";
import type { ChangeEvent, CSSProperties, JSX } from "react";

import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";

interface ProjectDeadlineCardProps {
value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
Expand All @@ -14,82 +15,34 @@ const ProjectDeadlineCard = ({
large,
style,
}: ProjectDeadlineCardProps): JSX.Element => {
const theme = useTheme();
return (
<div
style={{
background: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
boxShadow:
"0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
padding: large ? theme.spacing(4) : theme.spacing(3),
minHeight: large ? 220 : 180,
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100%",
overflow: "visible",
fontFamily: theme.typography.fontFamily,
...style,
}}
<SimpleFormCard
title="모집 마감일"
description="언제까지 팀원을 모집할까요?"
helpText="충분한 시간을 두고 설정하세요!"
large={large}
style={style}
>
<div
style={{
fontWeight: theme.typography.h3.fontWeight,
fontSize: large
? theme.typography.h3.fontSize
: theme.typography.h4.fontSize,
marginBottom: 14,
color: theme.palette.text.primary,
}}
>
<span role="img" aria-label="마감">
📅
</span>{" "}
모집 마감일
</div>
<div
style={{
color: theme.palette.text.secondary,
fontSize: large
? theme.typography.h6.fontSize
: theme.typography.body1.fontSize,
marginBottom: 18,
}}
>
언제까지 팀원을 모집할까요?
</div>
<input
type="date"
name="deadline"
value={value}
onChange={onChange}
style={{
width: "100%",
padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
fontSize: large
? theme.typography.h5.fontSize
: theme.typography.body1.fontSize,
padding: large ? 18 : 14,
borderRadius: 8,
border: "1px solid #e0e0e0",
fontSize: 16,
marginBottom: 8,
fontFamily: theme.typography.fontFamily,
fontFamily: "inherit",
height: 40,
boxSizing: "border-box",
background: theme.palette.background.paper,
background: "inherit",
}}
required
/>
<div
style={{
color: "#bbb",
fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
}}
>
충분한 시간을 두고 설정하세요!
</div>
</div>
</SimpleFormCard>
);
};

Expand Down
108 changes: 39 additions & 69 deletions src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,68 @@
import { TextField } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import type { ChangeEvent, CSSProperties, JSX } from "react";

import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";

interface ProjectOneLineCardProps {
value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
large?: boolean;
style?: CSSProperties;
}

const CARD_SHADOW =
"0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";

const ProjectOneLineCard = ({
value,
onChange,
large,
style,
}: ProjectOneLineCardProps): JSX.Element => {
const theme = useTheme();

return (
<div
style={{
background: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
boxShadow: CARD_SHADOW,
padding: large ? theme.spacing(4) : theme.spacing(3),
minHeight: large ? 220 : 180,
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100%",
overflow: "visible",
fontFamily: theme.typography.fontFamily,
...style,
}}
<SimpleFormCard
title="한 줄 소개"
description="프로젝트를 한 줄로 매력적으로 소개해주세요!"
helpText="이모지를 활용하면 더 눈에 띄어요!"
large={large}
style={style}
>
<div
style={{
fontWeight: theme.typography.h3.fontWeight,
fontSize: large
? theme.typography.h3.fontSize
: theme.typography.h4.fontSize,
marginBottom: 14,
color: theme.palette.text.primary,
}}
>
<span role="img" aria-label="소개">
✨
</span>{" "}
한 줄 소개
</div>
<div
style={{
color: theme.palette.text.secondary,
fontSize: large
? theme.typography.h6.fontSize
: theme.typography.body1.fontSize,
marginBottom: 18,
}}
>
프로젝트를 한 줄로 매력적으로 소개해주세요!
</div>
<input
<TextField
type="text"
name="subtitle"
value={value}
onChange={onChange}
placeholder="예: 개인 맞춤형 학습으로 공부 효율을 높여보세요! 📚"
style={{
width: "100%",
padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
fontSize: large
? theme.typography.h5.fontSize
: theme.typography.body1.fontSize,
marginBottom: 8,
fontFamily: theme.typography.fontFamily,
height: 40,
boxSizing: "border-box",
background: theme.palette.background.paper,
placeholder="예: 개인 맞춤형 학습으로 공부 효율을 높여보세요!"
fullWidth
variant="outlined"
size="small"
sx={{
"& .MuiOutlinedInput-root": {
height: 40,
fontSize: large
? theme.typography.h5.fontSize
: theme.typography.body1.fontSize,
fontFamily: theme.typography.fontFamily,
background: "none",
border: "none",

// 호버 시 테두리 검정색
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.text.primary,
},
// 포커스 시 테두리 primary 색상
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.main,
borderWidth: "2px",
},
},
"& .MuiOutlinedInput-input": {
padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
},
}}
required
/>
<div
style={{
color: "#bbb",
fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
}}
>
이모지를 활용하면 더 눈에 띄어요!
</div>
</div>
</SimpleFormCard>
);
};

Expand Down
Loading