diff --git a/frontend/src/components/UI/molecules/TitleInput/index.tsx b/frontend/src/components/UI/molecules/TitleInput/index.tsx index f79876a..882ebee 100644 --- a/frontend/src/components/UI/molecules/TitleInput/index.tsx +++ b/frontend/src/components/UI/molecules/TitleInput/index.tsx @@ -4,17 +4,23 @@ import * as S from './style'; export interface Props { text?: string; value?: string; + errorMsg?: string; className?: string; titleRef?: any; } -const App = ({ - text, value, className, titleRef, ...props -}: Props) => ( - - - - -); +function TitleInput({ + text, value, errorMsg, className, titleRef, ...props +}: Props) { + return ( + + + + + + + + ); +} -export default App; +export default TitleInput; diff --git a/frontend/src/components/UI/molecules/TitleInput/style.ts b/frontend/src/components/UI/molecules/TitleInput/style.ts index c941e44..41b0f80 100644 --- a/frontend/src/components/UI/molecules/TitleInput/style.ts +++ b/frontend/src/components/UI/molecules/TitleInput/style.ts @@ -7,12 +7,24 @@ export const TitleInput = styled.div` border-radius: ${({ theme }) => theme.size.mainInputRadius}; `; +export const Title = styled.div` + display: flex; + justify-content: space-between; +`; + export const Text = styled(TextComponent)` padding: 0.5rem 0 0 0.4rem ; margin: 0 1rem; font-size: 1.2rem; `; +export const ErrorMessage = styled(TextComponent)` + padding: 0.5rem 0 0 0.4rem ; + margin: 0 1rem; + font-size: 1.2rem; + color: red; +`; + export const Input = styled(InputComponent)` margin: 0.5rem 1rem; width: calc(100% - 2rem); diff --git a/frontend/src/components/UI/organisms/RecodeInput/index.tsx b/frontend/src/components/UI/organisms/RecodeInput/index.tsx index f68eae3..1e1ba57 100644 --- a/frontend/src/components/UI/organisms/RecodeInput/index.tsx +++ b/frontend/src/components/UI/organisms/RecodeInput/index.tsx @@ -15,6 +15,22 @@ export interface Props { className?: string; } +function isInputError(title: string, startHour:string, startMin: string, selectedCategory: string) { + if (title === '') { + return 'title을 입력하세요'; + } + if (startHour === '') { + return 'startHour을 입력하세요'; + } + if (startMin === '') { + return 'startMin을 입력하세요'; + } + if (selectedCategory === '') { + return '카테고리를 입력하세요'; + } + return null; +} + function RecodeInput({ labelList, refetch, recodeId, toggleRecodeInput, className, selectedDate, }: Props) { @@ -25,6 +41,7 @@ function RecodeInput({ const endMinRef = useRef(null); const switchButtonRef = useRef(null); const [fullFetched, setFullFetched] = useState(false); + const [errorMsg, setErrorMsg] = useState(''); const [selectedCategory, setSelectedCategory] = useState(''); const { @@ -61,6 +78,13 @@ function RecodeInput({ }; const bActive = switchButtonRef?.current?.classList.contains('active'); + const inputErrorMsg = isInputError(title!, startHour!, startMin!, selectedCategory); + if (inputErrorMsg) { + setErrorMsg(inputErrorMsg); + return; + } + setErrorMsg(''); + if (recodeId) { await updateTimeRecodeMutation({ variables: { @@ -176,7 +200,7 @@ function RecodeInput({ } return ( - +