Merge pull request #306 from Guzzing/dev

[Deploy] : 2차 QA 반영
Guzzing · Dec 3, 2023 · 32d3aed · 32d3aed
2 parents 2e86cd4 + f6d41d7
commit 32d3aed
Show file tree

Hide file tree

Showing 33 changed files with 453 additions and 174 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/icon/Logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=gheq9zrnsh"></script>
+    <title>Studay</title>
+    <script
+      type="text/javascript"
+      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=gheq9zrnsh"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
+    "framer-motion": "^10.16.12",
     "jotai": "^2.4.3",
     "react": "^18.2.0",
     "react-datepicker": "^4.21.0",

diff --git a/src/components/BottomSheet/Dimmer.tsx b/src/components/BottomSheet/Dimmer.tsx
@@ -0,0 +1,20 @@
+import { MouseEventHandler, RefObject } from 'react'
+
+export type DimmerPropsType = {
+  dimmerRef: RefObject<HTMLDivElement>
+  onClick: MouseEventHandler<HTMLDivElement>
+}
+
+const Dimmer = ({ dimmerRef, onClick }: DimmerPropsType) => {
+  return (
+    <div
+      ref={dimmerRef}
+      onClick={onClick}
+      className={
+        'fixed top-0 left-0 w-full h-full z-10 bg-black-800 opacity-50 '
+      }
+    />
+  )
+}
+
+export default Dimmer
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
@@ -41,8 +41,8 @@ const Button = ({
         } ${BUTTON_TEXT_COLOR['blue500']} ${BUTTON_BORDER_COLOR['blue500']}`
       : buttonType === 'Plain-disabled'
       ? `${BUTTON_RADIUS['middle']} ${
-          fullWidth ? 'w-full' : width ? 'w-[317px]' : BUTTON_WIDTH[width]
-        } ${height ? 'h-[43px]' : BUTTON_HEIGHT[height]} ${
+          fullWidth ? 'w-full' : width ? 'w-[343px]' : BUTTON_WIDTH[width]
+        } ${height ? 'h-[56px]' : BUTTON_HEIGHT[height]} ${
           BUTTON_BG_COLOR['white0']
         } ${BUTTON_TEXT_COLOR['gray500']} ${BUTTON_BORDER_COLOR['gray500']}`
       : buttonType === 'Plain-red'

diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
@@ -66,7 +66,12 @@ const Header = ({
           </span>
         ) : headerType === 'CloseWithTitle' ? (
           <div className={'flex cursor-pointer items-center'}>
-            <span onClick={onClick ? onClick : () => navigate(-1)}>
+            <span
+              onClick={
+                backUrl.length > 0
+                  ? () => navigate(backUrl)
+                  : () => navigate(-1)
+              }>
               <Icon icon={'Close'} classStyle={'cursor-pointer'} />
             </span>
             <span className={'mx-[20px] font-nsk subHead-18'}>{pageTitle}</span>

diff --git a/src/components/common/inputbox/input/Input.tsx b/src/components/common/inputbox/input/Input.tsx
@@ -21,22 +21,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const [inputValue, setInputValue] = useState('')
     const [searchInputValue, setSearchInputValue] = useState('')
-
     return inputType === 'Default' ? (
       <div className={'my-[10px]'}>
         <input
           type={'text'}
           className={`${
             fullWidth ? 'w-full h-[52px]' : 'w-[323px] h-[52px]'
           } rounded-[10px] ${
-            field === 'email' &&
-            !validate('email', inputValue) &&
+            (field === 'email' ||
+              field === 'nickname' ||
+              field === 'childname') &&
+            !validate(field, inputValue) &&
             inputValue !== ''
               ? 'border border-red-600'
-              : field === 'nickname' &&
-                !validate('nickname', inputValue) &&
-                inputValue !== ''
-              ? 'border border-red-600'
               : 'border border-blue-350'
           }  px-[20px] font-nsk text-black-800 bg-white-200 body-18 placeholder:text-gray-600 outline-none`}
           value={inputValue}
@@ -54,8 +51,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         />
         <p className={'font-nsk caption-13 text-red-600 px-3 mt-1'}>
           {field === 'email' &&
-          !validate('email', inputValue) &&
-          inputValue !== ''
+          inputValue !== '' &&
+          !validate('email', inputValue)
             ? (errorMessage = '잘못된 이메일입니다')
             : field === 'nickname' &&
               !validate('nickname', inputValue) &&

diff --git a/src/components/common/label/LabelType.ts b/src/components/common/label/LabelType.ts
@@ -20,7 +20,7 @@ export const LabelColorVariant = {
 
 export const LabelTextColorVariant = {
   default: {
-    medium: 'stroke-blue-500 text-blue-500 ',
+    medium: 'stroke-blue-500 text-blue-500',
     small: 'text-white-0'
   },
   selected: {

diff --git a/src/components/common/profile/Profile.tsx b/src/components/common/profile/Profile.tsx
@@ -19,27 +19,27 @@ const Profile = ({
 
   const handleImageChange = (editId: number) => {
     if (imgRef.current && imgRef.current?.files) {
+      setImage(URL.createObjectURL(imgRef.current.files[0]))
       const formData = new FormData()
       formData.append('file', imgRef.current.files[0], 'myfile')
-      try {
-        request
-          .post(`/children/${editId}/profile`, formData, {
-            headers: {
-              'Content-Type': 'multipart/form-data'
-            }
-          })
-          .then((res) => {
-            setImage(res.data.profileImageUrl)
+      request
+        .post(`/children/${editId}/profile`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(() => {
+          setToast({
+            comment: '프로필 사진을 수정했어요.',
+            type: 'success'
           })
-          .catch(() => {
-            setToast({
-              comment: '파일 용량이 너무 커서 업로드를 실패했어요.',
-              type: 'error'
-            })
+        })
+        .catch(() => {
+          setToast({
+            comment: '파일 용량이 너무 커서 업로드를 실패했어요.',
+            type: 'error'
           })
-      } catch {
-        setToast({ comment: '파일 업로드를 실패했어요.', type: 'error' })
-      }
+        })
     }
   }
   return (
@@ -81,7 +81,7 @@ const Profile = ({
       {imageLabel && (
         <p
           className={
-            'relative text-center text-ellipsis overflow-hidden whitespace-nowrap w-[70px] text-center'
+            'relative text-center text-ellipsis overflow-hidden whitespace-nowrap w-[70px]'
           }>
           {imageLabel}
         </p>

diff --git a/src/components/common/scheduleBox/ScheduleBox.tsx b/src/components/common/scheduleBox/ScheduleBox.tsx
@@ -37,8 +37,12 @@ const ScheduleBox = ({
             <div className={'subHead-18'}>{mainTitle}</div>
           )}
           <div className={'flex cursor-pointer text-black-800 items-center'}>
-            <Icon icon={'Edit'} onClick={handleEdit} />
-            <Icon icon={'Close'} onClick={handleDelete} />
+            <div onClick={handleEdit}>
+              <Icon icon={'Edit'} />
+            </div>
+            <div onClick={handleDelete}>
+              <Icon icon={'Close'} />
+            </div>
           </div>
         </div>
         <div className={'grow-6'}>

diff --git a/src/components/common/scheduleBox/ScheduleBoxType.ts b/src/components/common/scheduleBox/ScheduleBoxType.ts
@@ -8,7 +8,7 @@ export interface ScheduleBoxProps extends ComponentProps<'div'> {
   rightBottomElement?: ReactNode // HTML태그를 넣을 수 있음!
   isRegister?: boolean
   cntOfChild?: number
-  handleToggle?: () => void
-  handleEdit?: () => void
-  handleDelete?: () => void
+  handleToggle?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  handleEdit?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  handleDelete?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
diff --git a/src/components/common/toast/index.tsx b/src/components/common/toast/index.tsx
@@ -3,10 +3,11 @@ const Toast = () => {
   return (
     <ToastContainer
       position={'top-center'}
-      autoClose={3500}
+      autoClose={1500}
       closeButton={false}
       newestOnTop
-      limit={5}
+      hideProgressBar={true}
+      limit={1}
       toastStyle={{
         borderRadius: '12px',
         backgroundColor: 'white',