Merge pull request #820 from peer-42seoul/hotfix-1.0.1/admin

[ADMIN] 어드민 태그 관리 페이지 validation 적용

src/app/admin/tag/Tag.tsx

@@ -21,20 +21,6 @@ const alignCenter = {
   alignItems: 'center',
 }
 
-const style = {
-  position: 'absolute' as 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '80%',
-  height: '80%',
-  bgcolor: 'background.secondary',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-  overflowY: 'scroll',
-}
-
 const Tag = () => {
   const API_URL = process.env.NEXT_PUBLIC_CSR_API
   const [content, setContent] = useState<content[]>([])
@@ -195,7 +181,6 @@ const Tag = () => {
             tagColor={tagColor}
             setTagColor={setTagColor}
             onHandleSubmit={onHandleSubmit}
-            style={style}
           />
         </Stack>
       </Container>

src/app/admin/tag/panel/NewTag.tsx

@@ -1,22 +1,25 @@
+'use client'
+
+import CuModal from '@/components/CuModal'
 import {
+  Box,
   Button,
   Container,
-  Modal,
   Stack,
   TextField,
   Typography,
 } from '@mui/material'
+import { ChangeEvent, useState } from 'react'
 
 interface props {
-  open: boolean,
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  writeMode: React.MutableRefObject<string>,
-  tagName: string,
-  setTagName: React.Dispatch<React.SetStateAction<string>>,
-  tagColor: string,
-  setTagColor: React.Dispatch<React.SetStateAction<string>>,
-  onHandleSubmit: () => void,
-  style: any,
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  writeMode: React.MutableRefObject<string>
+  tagName: string
+  setTagName: React.Dispatch<React.SetStateAction<string>>
+  tagColor: string
+  setTagColor: React.Dispatch<React.SetStateAction<string>>
+  onHandleSubmit: () => void
 }
 
 const NewTag = ({
@@ -28,48 +31,93 @@ const NewTag = ({
   tagColor,
   setTagColor,
   onHandleSubmit,
-  style,
 }: props) => {
-    return (
-      <Modal
+  const [tagNameError, setTagNameError] = useState('')
+
+  const validateTagName = (name: string) => {
+    if (!name.trim()) {
+      setTagNameError('태그 이름은 비워둘 수 없습니다.')
+      return false
+    } else if (name.length > 10) {
+      setTagNameError('태그 이름은 10자를 초과할 수 없습니다.')
+      return false
+    }
+    setTagNameError('')
+    return true
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value
+    setTagName(name)
+    validateTagName(name)
+  }
+
+  // 색상 유효성 검사
+  const [colorError, setColorError] = useState('')
+
+  const validateColor = (tagColor: string) => {
+    const hexColorRegex = /^#([0-9A-F]{3}){2}$/i
+    return hexColorRegex.test(tagColor)
+  }
+
+  const handleColorChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const color = e.target.value
+    setTagColor(color)
+
+    if (validateColor(color)) {
+      setColorError('')
+    } else {
+      setColorError('유효하지 않은 색상 코드입니다. 예: #A333D2')
+    }
+  }
+
+  return (
+    <CuModal
+      title={
+        writeMode.current === 'write' ? '새 태그 추가하기' : '태그 수정하기'
+      }
       open={open}
       onClose={() => setOpen(false)}
-      aria-labelledby="새 태그 작성"
-      aria-describedby="새 태그를 작성할 수 있는 모달입니다."
     >
-      <Container sx={style}>
-        <Typography variant={'h4'} align="center">
-          {writeMode.current === 'write'
-            ? '새 태그 추가하기'
-            : '태그 수정하기'}
-        </Typography>
+      <Container>
         <Typography variant={'Body1'} align="center">
           태그 이름
         </Typography>
         <TextField
           value={tagName}
+          error={!!tagNameError}
+          helperText={tagNameError}
           sx={{ display: 'flex', justifyContent: 'center' }}
-          onChange={(e) => setTagName(e.target.value)}
+          // onChange={(e) => setTagName(e.target.value)}
+          onChange={handleNameChange}
         />
         <Typography variant={'Body1'} align="center">
           태그 색상
         </Typography>
         <TextField
           value={tagColor}
+          error={!!colorError}
+          helperText={colorError}
           sx={{ display: 'flex', justifyContent: 'center' }}
-          onChange={(e) => setTagColor(e.target.value)}
+          onChange={handleColorChange}
         />
-        <Stack direction={'row'} justifyContent={'flex-end'}>
-          <Button variant={'contained'} onClick={() => setOpen(false)}>
-            취소
-          </Button>
-          <Button variant={'contained'} onClick={() => onHandleSubmit()}>
-            등록
-          </Button>
-        </Stack>
+        <Box>
+          <Stack direction={'row'} justifyContent={'flex-end'}>
+            <Button variant={'contained'} onClick={() => setOpen(false)}>
+              취소
+            </Button>
+            <Button
+              variant={'contained'}
+              onClick={() => onHandleSubmit()}
+              disabled={colorError !== '' || tagNameError !== ''}
+            >
+              등록
+            </Button>
+          </Stack>
+        </Box>
       </Container>
-    </Modal>
-    )
+    </CuModal>
+  )
 }
 
-export default NewTag
+export default NewTag