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 (
-
+