main머지 (#248)

* fix: 마이페이지 리액트 쿼리 적용 (#243) * fix: 마이페이지 리액트 쿼리 적용 * fix: onSuccess시 navigate코드 * [Feat]: 일정 수정 기능 구현 (#246) * chore: 패키지 관리 * feat: edit 페이지 기본 템플릿 생성 * feat: 수정 전 정보 불러오기 * feat: 일정 수정 기능 구현 * fix: 대시보드 스케쥴 스크롤 개선 * Bug/ 215 onboarding bug (#247) * fix: 온보딩 유효성검사 한 박자 늦는 문제 해결 * fix: validate 한 박자 늦는 현상 제거, input이 빈 값일 때는 어떤 error message도 띄우지 않음 * fix: progressbar 넘어가는 문제 해결 * fix: header버튼 위치 수정 + height수정 * fix: 마이페이지 api명 수정 * fix: 홈페이지 이미지 적용 * fix: 온보딩 불필요한 코드 삭제 * fix: 리프래시 받아오면, 다시 스토리지에 저장 * fix: 온보딩 페이지 에러 수정 * fix: nickname 글자 수 10글자로 설정 --------- Co-authored-by: Eugene Kim <[email protected]>
Guzzing · Nov 30, 2023 · 8eda166 · 8eda166
1 parent f0b5bd2
commit 8eda166
Show file tree

Hide file tree

Showing 26 changed files with 334 additions and 616 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/common/inputbox/input/Input.tsx b/src/components/common/inputbox/input/Input.tsx
@@ -21,16 +21,21 @@ 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' &&
+            !validate('email', inputValue) &&
+            inputValue !== ''
               ? 'border border-red-600'
-              : field === 'nickname' && !validate('nickname', inputValue)
+              : 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`}
@@ -48,11 +53,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         <p className={'font-nsk caption-13 text-red-600 px-3 mt-1'}>
-          {field === 'email' && !validate('email', inputValue)
+          {field === 'email' &&
+          !validate('email', inputValue) &&
+          inputValue !== ''
             ? (errorMessage = '잘못된 이메일입니다')
-            : field === 'nickname' && !validate('nickname', inputValue)
-            ? (errorMessage = '한글과 영어만 사용가능합니다')
-            : field === 'childname' && !validate('childname', inputValue)
+            : field === 'nickname' &&
+              !validate('nickname', inputValue) &&
+              inputValue !== ''
+            ? (errorMessage =
+                '한글과 영어만 사용가능합니다(1 - 10글자 미만입니다)')
+            : field === 'childname' &&
+              !validate('childname', inputValue) &&
+              inputValue !== ''
             ? (errorMessage = '아이의 이름은 1글자에서 10글자여야 합니다!')
             : ''}
         </p>

diff --git a/src/components/common/scheduleBox/ScheduleBox.tsx b/src/components/common/scheduleBox/ScheduleBox.tsx
@@ -19,13 +19,17 @@ const ScheduleBox = ({
           ? 'w-[360px] h-[88px]'
           : scheduleType === 'toggle'
           ? isRegister
-            ? 'w-[345px] h-[142px] bg-white-0'
-            : 'w-[345px] h-[142px] bg-gray-200'
+            ? 'w-[345px] h-[142px] min-h-[142px] bg-white-0'
+            : 'w-[345px] h-[142px] min-h-[142px] bg-gray-200'
           : ''
       } shadow-md pt-[22px] pb-[20px] px-[24px] rounded-[20px] font-nsk`}>
       <div className={'relative w-full h-full flex-col'} {...props}>
         <div className={'flex justify-between grow-4'}>
-          <div className={'subHead-18'}>{mainTitle}</div>
+          {mainTitle.length > 15 ? (
+            <div className={'body-16'}>{mainTitle}</div>
+          ) : (
+            <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} />

diff --git a/src/components/schedule/SelectAttendanceDate.tsx b/src/components/schedule/SelectAttendanceDate.tsx
@@ -6,7 +6,7 @@ import CustomTimePicker from '@/components/academy/CustomTimePicker'
 import { scheduleAtom } from '@/libs/store/scheduleInfo'
 import { getFormattingDate } from '@/libs/utils/dateParse'
 
-const SelectAttendanceDate = () => {
+const SelectAttendanceDate = ({ isEdit = false }: { isEdit?: boolean }) => {
   const [startTime, setStartTime] = useState(new Date())
   const [endTime, setEndTime] = useState<Date | null>()
   const [isSelected, setIsSelected] = useState(false)
@@ -42,6 +42,12 @@ const SelectAttendanceDate = () => {
     setIsSelected(true)
   }
 
+  useEffect(() => {
+    if (isEdit) {
+      setIsSelected(true)
+    }
+  }, [])
+
   return (
     <div className={'w-full  my-[14px] '}>
       <div

diff --git a/src/libs/api/dashboard/DashBoardType.ts b/src/libs/api/dashboard/DashBoardType.ts
@@ -46,7 +46,7 @@ export interface AcademyScheduleType {
 
 interface AcademyLessonType {
   lessonId: number
-  subject: ServerAcademyType
+  curriculum: string
   capacity: number
   duration: string
   totalFee: number

diff --git a/src/libs/api/index.ts b/src/libs/api/index.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { setItem } from '../utils/storage'
 import { logoutApi } from './autorization/logout/LogoutApi'
 import { refreshApi } from './autorization/refresh/refreshApi'
 import useToastify from '@/libs/hooks/useToastify'
@@ -37,6 +38,7 @@ request.interceptors.response.use(
         const getRefreshToken = await refreshApi()
         const prevRequest = error.config
         prevRequest.headers.Authorization = `Bearer ${getRefreshToken.appToken}`
+        setItem('token', getRefreshToken.appToken)
         return request(prevRequest)
       } catch {
         setToast({

diff --git a/src/libs/api/mypage/myPageApi.ts b/src/libs/api/mypage/myPageApi.ts
@@ -1,10 +1,10 @@
 import type { GetMyPageResponse } from './myPageType'
 import request from '@/libs/api'
 
-export const myPageApi = async (): Promise<GetMyPageResponse> => {
+export const getAllUserInfo = async (): Promise<GetMyPageResponse> => {
   try {
-    const req = await request.get('/members')
-    return req.data
+    const myPageData = await request.get('/members')
+    return myPageData.data
   } catch {
     throw new Error('cannot get api from myPage')
   }

diff --git a/src/libs/api/queryClient.ts b/src/libs/api/queryClient.ts
@@ -11,7 +11,7 @@ export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: () => {
       alert('에러 발생! 올바른 경로로 서비스를 이용해주세요.')
-      window.location.href = '/'
+      // window.location.href = '/'
     }
   })
 })
diff --git a/src/libs/api/schedule/scheduleApi.ts b/src/libs/api/schedule/scheduleApi.ts
@@ -4,7 +4,9 @@ import {
   CalendarPropsType,
   CalendarResponse,
   DayScheduleResponse,
-  PostScheduleType
+  PostScheduleType,
+  BeforeEditInfoResponseType,
+  UpdateScheduleType
 } from '@/libs/api/schedule/scheduleType.ts'
 
 export const getMonthScheduleAll = async ({
@@ -41,3 +43,21 @@ export const postScheduleApi = async (
   const res = await request.post('/academy-schedules', schedule)
   return res.data
 }
+
+export const beforeEditInfoScheduleApi = async ({
+  scheduleId
+}: {
+  scheduleId: number
+}): Promise<BeforeEditInfoResponseType> => {
+  const res = await request.get(`/academy-schedules/${scheduleId}`)
+  return res.data
+}
+
+export const editScheduleApi = async ({
+  payload
+}: {
+  payload: UpdateScheduleType | { isAllUpdated: true }
+}) => {
+  const res = await request.put(`/academy-schedules`, payload)
+  return res.data
+}
diff --git a/src/libs/api/schedule/scheduleType.ts b/src/libs/api/schedule/scheduleType.ts
@@ -1,3 +1,4 @@
+import exp from 'node:constants'
 import { ClientWeekType } from '@/libs/api/academy/AcademyType'
 
 export interface CalendarPropsType {
@@ -54,6 +55,31 @@ export interface PostScheduleType {
   memo: string
 }
 
+export interface UpdateScheduleType {
+  lessonScheduleUpdateRequests: LessonScheduleType[]
+  attendanceDate: {
+    startDateOfAttendance: string
+    endDateOfAttendance: string
+  }
+  isAlarmed: boolean
+  periodicity: PeriodicityType
+  childId: number
+  dashboardId: number
+  memo: string
+}
+
+export interface BeforeEditInfoResponseType {
+  dashboardId: number
+  childId: number
+  academyId: number
+  lessonId: number
+  lessonSchedule: LessonScheduleType[]
+  startDateOfAttendance: string
+  endDateOfAttendance: string
+  isAlarmed: true
+  memo: string
+}
+
 export interface LessonScheduleType {
   dayOfWeek: WeekStringType
   lessonTime: {
@@ -94,3 +120,13 @@ export const ScheduleServerWeekData: ScheduleServerWeekDataType = {
   6: 'SATURDAY',
   7: 'SUNDAY'
 }
+
+export const ScheduleServerWeekDataString = {
+  MONDAY: 1,
+  TUESDAY: 2,
+  WEDNESDAY: 3,
+  THURSDAY: 4,
+  FRIDAY: 5,
+  SATURDAY: 6,
+  SUNDAY: 7
+}
diff --git a/src/libs/store/scheduleInfo.tsx b/src/libs/store/scheduleInfo.tsx
@@ -2,7 +2,7 @@ import { atom } from 'jotai'
 import { PostScheduleType } from '@/libs/api/schedule/scheduleType'
 import { getFormattingDate } from '@/libs/utils/dateParse'
 
-const initialChildAtom: PostScheduleType = {
+export const initialScheduleAtom: PostScheduleType = {
   lessonScheduleCreateRequests: [],
   attendanceDate: {
     startDateOfAttendance: getFormattingDate(new Date()),
@@ -15,4 +15,4 @@ const initialChildAtom: PostScheduleType = {
   memo: ''
 }
 
-export const scheduleAtom = atom(initialChildAtom)
+export const scheduleAtom = atom(initialScheduleAtom)
diff --git a/src/pages/academy/AcademyDashboard.tsx b/src/pages/academy/AcademyDashboard.tsx
@@ -76,14 +76,11 @@ const AcademyDashboard = () => {
   }
 
   return (
-    <div className={'h-full relative overflow-hidden'}>
+    <div className={'h-full relative'}>
       <SettingPage isOpen={toggleOpen} />
       <div>
         <Spacing size={100} />
-        <div
-          className={
-            'flex flex-col items-center w-full h-full overflow-scroll scrollbar-hide'
-          }>
+        <div className={'flex flex-col items-center w-full h-full'}>
           {data && data?.length > 0 ? (
             <div className={'w-full h-full'}>
               <SelectMyChild data={data} />
@@ -97,8 +94,9 @@ const AcademyDashboard = () => {
                 </div>
               ) : (
                 <div
+                  style={{ height: `calc(100vh - 240px)` }}
                   className={
-                    'flex flex-col items-center w-full gap-[16px] px-[20px]'
+                    'flex flex-col items-center w-full gap-[16px] px-[20px] overflow-y-scroll scrollbar-hide'
                   }>
                   {dashboardData.map((data, index) => {
                     return (
@@ -107,7 +105,7 @@ const AcademyDashboard = () => {
                         scheduleType={'toggle'}
                         mainTitle={data.academyInfo.academyName}
                         subElement={`매주 ${getWeekday(data.schedules)}요일 / ${
-                          data.lessonInfo.subject
+                          data.lessonInfo.curriculum
                         }`}
                         isRegister={data.isActive}
                         rightBottomElement={
@@ -151,16 +149,9 @@ const AcademyDashboard = () => {
                       />
                     )
                   })}
-                  <Spacing size={250} />
                 </div>
               )}
-              <div
-                className={'absolute bottom-[95px] w-full flex justify-center'}>
-                <Button
-                  buttonType={'Plain-blue'}
-                  label={`${childInfo?.nickname} 교육비 보고서 보기`}
-                />
-              </div>
+              <div className={'w-full h-[500px]'} />
             </div>
           ) : (
             <div className={'absolute top-1/2 font-nsk body-15 text-gray-600'}>

diff --git a/src/pages/academy/addSchedule/index.tsx → src/pages/academy/AddSchedule/index.tsx b/src/pages/academy/addSchedule/index.tsx → src/pages/academy/AddSchedule/index.tsx
diff --git a/src/pages/academy/editAcademy/index.tsx b/src/pages/academy/editAcademy/index.tsx
@@ -29,6 +29,7 @@ const EditAcademy = () => {
   const navigate = useNavigate()
   const { setToast } = useToastify()
   const dashboardId = useLocation().state as number
+
   const fetchDashboardData = async (dashboardId: number) => {
     if (dashboardId) {
       const res = await getDetailDashboard(dashboardId)
@@ -50,6 +51,7 @@ const EditAcademy = () => {
       setToast({ comment: '학원 정보를 수정했어요.', type: 'success' })
     }
   })
+
   useEffect(() => {
     if (data) {
       setAcademyInfo({

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -23,9 +23,11 @@ const HomePage = () => {
   }
 
   return (
-    <div className={'relative bg-white-100 h-[750px] overflow-hidden'}>
+    <div
+      className={'relative bg-white-100 overflow-hidden border'}
+      style={{ height: 'calc(100% - 80px)' }}>
       <SettingPage isOpen={toggleOpen} />
-      <div className={'h-[670px] overflow-y-scroll'}>
+      <div className={'h-[750px] overflow-y-scroll border'}>
         <Spacing size={80} />
         <div
           className={
@@ -37,6 +39,7 @@ const HomePage = () => {
                 <InformationBox
                   key={data.childId}
                   mainTitle={data.nickname}
+                  imageUrl={data.profileImageUrl}
                   subTitle={data.grade}
                   description={data.schedule}
                   onClick={() =>
@@ -55,7 +58,7 @@ const HomePage = () => {
             </div>
           )}
         </div>
-        <div className={'absolute right-[10px] bottom-[90px] cursor-pointer'}>
+        <div className={'absolute right-[10px] bottom-[30px] cursor-pointer'}>
           <Icon
             icon={'Add'}
             classStyle={'h-[60px] w-[60px]'}