Fix/#77/bugs in production mode(swm 339) (#78)

4m9d · Oct 6, 2023 · a390bce · a390bce
2 parents e089311 + 80f1acb
commit a390bce
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 63 deletions.
diff --git a/src/components/gnb/NavBar.tsx b/src/components/gnb/NavBar.tsx
@@ -24,22 +24,21 @@ export default function NavBar({ logo, profileDropdown }: Props) {
   const [isEditMode, setIsEditMode] = useState(false);
 
   const [name, setName] = useState(session?.name ?? '');
-  const profile = session?.profile;
+  const profileImage = session?.profile;
 
   const navBarHidden = session ? '' : 'hidden';
 
-  const profileButtonClickHandler = async () => {
-    if (isEditMode) {
-      mutate();
-      await update({ ...session, name });
-    }
+  const profileButtonClickHandler = async (name: string) => {
     setIsEditMode((prev) => !prev);
+
+    mutate();
+    await update({ ...session, name });
   };
 
   const { mutate } = useMutation(() => updateUserProfile(name), {
     onSuccess: (data) => {
       setIsEditMode(false);
-      setName(data.name);
+      setName(() => data.name);
     }
   });
 
@@ -51,7 +50,7 @@ export default function NavBar({ logo, profileDropdown }: Props) {
     <nav className='z-20 h-12 shadow-sm navbar'>
       <div className='flex justify-between gap-4 px-4 mx-auto lg:gap-8 lg:px-24 navbar max-w-screen-2xl'>
         <h1 className='w-10 sm:w-28 lg:w-36 shrink-0'>
-          <Link href='/' className='shrink-0 mr-14'>
+          <Link href='/dashboard' className='shrink-0 mr-14'>
             {windowWidth < WIDTH_SM ? (
               <Image
                 className='w-10 h-10'
@@ -84,13 +83,13 @@ export default function NavBar({ logo, profileDropdown }: Props) {
           type='button'
           className={`${navBarHidden} dropdown dropdown-end md:dropdown-hover text-sroom-black-400`}
         >
-          {profile && (
+          {profileImage && (
             <ProfileDropdown
-              profile={profile}
+              profileImage={profileImage}
               name={name}
               profileDropdown={profileDropdown}
               isEditMode={isEditMode}
-              setName={setName}
+              setIsEditMode={setIsEditMode}
               profileButtonClickHandler={profileButtonClickHandler}
             />
           )}

diff --git a/src/components/gnb/ProfileDropdown.tsx b/src/components/gnb/ProfileDropdown.tsx
@@ -7,56 +7,78 @@ import Link from 'next/link';
 import { useCallback, useEffect, useRef } from 'react';
 
 type Props = {
-  profile: string;
-  name: string;
+  profileImage: string;
   isEditMode: boolean;
+  setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   profileDropdown?: ProfileDropdown[];
-  setName: React.Dispatch<React.SetStateAction<string>>;
-  profileButtonClickHandler: () => Promise<void>;
+  name: string;
+  profileButtonClickHandler: (name: string) => Promise<void>;
 };
 
 export default function ProfileDropdown({
-  profile,
-  name,
+  profileImage,
   isEditMode,
+  setIsEditMode,
   profileDropdown,
-  setName,
+  name,
   profileButtonClickHandler
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const enterKeyDownHandler = useCallback(
-    async (e: string) => {
-      if (e === 'Enter') {
-        await profileButtonClickHandler();
+    (e: string) => {
+      if (inputRef.current && e === 'Enter') {
+        inputRef.current.value =
+          inputRef.current.value.trim().slice(0, 10) ?? '';
+
+        const name = inputRef.current.value;
+
+        if (name === '') return;
+        profileButtonClickHandler(inputRef.current.value);
       }
     },
     [profileButtonClickHandler]
   );
 
-  useEffect(() => {
-    if (inputRef.current === null) return;
+  const saveProfileButtonClickHandler = useCallback(async () => {
+    if (inputRef.current && isEditMode) {
+      inputRef.current.value = inputRef.current.value.trim().slice(0, 10) ?? '';
+      const name = inputRef.current.value;
 
-    if (isEditMode) {
+      if (name === '') return;
+
+      await profileButtonClickHandler(name);
+    } else {
+      setIsEditMode((prev) => !prev);
+    }
+  }, [isEditMode, setIsEditMode, profileButtonClickHandler]);
+
+  useEffect(() => {
+    if (inputRef.current && isEditMode) {
       inputRef.current.focus();
       inputRef.current.setSelectionRange(
         inputRef.current.value.length,
         inputRef.current.value.length
       );
+    }
+  }, [isEditMode]);
+
+  useEffect(() => {
+    if (inputRef.current) {
       inputRef.current.value = name;
     }
-  }, [name, isEditMode]);
+  }, [name]);
 
   return (
     <>
       <div
         tabIndex={0}
         className='z-20 flex items-center justify-between h-full gap-3 rounded-none btn btn-ghost hover:bg-sroom-gray-300'
       >
-        {profile && (
+        {profileImage && (
           <div className='w-9 h-9 lg:w-10 lg:h-10'>
             <Image
-              src={profile}
+              src={profileImage}
               className='rounded-full'
               alt='프로필'
               width={40}
@@ -70,7 +92,6 @@ export default function ProfileDropdown({
           defaultValue={name}
           disabled={isEditMode === false}
           spellCheck='false'
-          onChange={(e) => setName(e.target.value.trim())}
           onKeyDown={(e) => enterKeyDownHandler(e.key)}
           maxLength={10}
           className='hidden w-32 p-1 text-xs font-semibold leading-9 text-left resize-none sm:block md:text-sm lg:text-base disabled:bg-sroom-white'
@@ -84,7 +105,7 @@ export default function ProfileDropdown({
           <div className='p-2 shadow bg-sroom-white'>
             <li className='flex justify-center border-b h-11 border-sroom-gray-400'>
               <div
-                onClick={profileButtonClickHandler}
+                onClick={saveProfileButtonClickHandler}
                 className='rounded-none active:!text-sroom-black-400 hover:bg-sroom-gray-300 active:!bg-sroom-gray-400 focus:!bg-sroom-gray-300 flex justify-between items-center'
               >
                 {isEditMode ? '저장하기' : '닉네임 수정'}

diff --git a/src/components/login/GoogleOneTapPortal.tsx b/src/components/login/GoogleOneTapPortal.tsx
@@ -1,7 +1,3 @@
-import { memo } from "react";
-
-const GoogleOneTapPortal = () => {
+export default function GoogleOneTapPortal() {
   return <div id='google-one-tap' className='absolute top-3 right-3' />;
-};
-
-export default memo(GoogleOneTapPortal);
+}
diff --git a/src/components/main/courseMaterial/CourseMaterialIntro.tsx b/src/components/main/courseMaterial/CourseMaterialIntro.tsx
@@ -4,7 +4,7 @@ export default function CourseMaterialIntro({}) {
   return (
     <>
       <div className='flex items-center col-start-3 col-end-4 row-start-1 row-end-2 pl-3 md:pl-5 xl:pl-7 bg-sroom-black-300'>
-        <p className='text-[5px] sm:text-sm md:text-base lg:text-lg xl:text-xl'>
+        <p className='text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl'>
           퀴즈 강의노트
         </p>
       </div>

diff --git a/src/components/main/enrollment/EnrollmentIntro.tsx b/src/components/main/enrollment/EnrollmentIntro.tsx
@@ -4,7 +4,7 @@ export default function EnrollmentIntro({}) {
   return (
     <div className='relative col-start-1 col-end-2 row-start-2 row-end-5 bg-sroom-black-300'>
       <div className='p-2 sm:p-3 md:p-5 xl:p-7'>
-        <p className='text-[5px] sm:text-sm md:text-base lg:text-lg xl:text-xl'>
+        <p className='text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl'>
           유튜브 강의 등록
         </p>
       </div>

diff --git a/src/components/main/scheduling/SchedulingIntro.tsx b/src/components/main/scheduling/SchedulingIntro.tsx
@@ -4,7 +4,7 @@ export default function SchedulingIntro({}) {
   return (
     <>
       <div className='col-start-2 col-end-3 row-start-2 row-end-3 p-2 sm:p-3 bg-sroom-brand md:p-5 xl:p-7'>
-        <p className='text-[5px] sm:text-sm md:text-base lg:text-lg xl:text-xl'>강의 일정 관리</p>
+        <p className='text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl'>강의 일정 관리</p>
       </div>
       <div className='relative col-start-2 col-end-3 row-start-3 row-end-6 bg-sroom-brand'>
         <div className='absolute top-0 left-0 w-full'>

diff --git a/src/components/main/ui/TextLoopIntro.tsx b/src/components/main/ui/TextLoopIntro.tsx
@@ -34,7 +34,7 @@ const TextLoop = ({
         repeatDelay: repeatDelay,
         delay: type === 'back-up' ? delay : 0
       }}
-      className={`${className} pl-[100%] absolute flex h-full min-w-full gap-3 whitespace-nowrap text-[3px] leading-3 sm:text-sm md:text-lg lg:text-xl xl:text-2xl opacity-90`}
+      className={`${className} pl-[100%] absolute flex h-full min-w-full gap-3 whitespace-nowrap leading-3 text-xs sm:text-sm md:text-lg lg:text-xl xl:text-2xl opacity-90`}
     >
       {children}
     </motion.div>
@@ -44,42 +44,22 @@ const TextLoop = ({
 export default function TextLoopIntro({}) {
   return (
     <div className='relative col-start-1 col-end-2 row-start-5 row-end-6 overflow-hidden bg-sroom-black-300'>
-      <TextLoop
-        type='main'
-        duration={20}
-        delayGap={2}
-        className='top-[20%]'
-      >
+      <TextLoop type='main' duration={20} delayGap={2} className='top-[20%]'>
         {MOTIVATION_GENERAL.map((item, index) => (
           <p key={index}>{item}</p>
         ))}
       </TextLoop>
-      <TextLoop
-        duration={20}
-        delayGap={2}
-        type='back-up'
-        className='top-[20%]'
-      >
+      <TextLoop duration={20} delayGap={2} type='back-up' className='top-[20%]'>
         {MOTIVATION_GENERAL.map((item, index) => (
           <p key={index}>{item}</p>
         ))}
       </TextLoop>
-      <TextLoop
-        type='main'
-        duration={20}
-        delayGap={3}
-        className='top-[60%]'
-      >
+      <TextLoop type='main' duration={20} delayGap={3} className='top-[60%]'>
         {MOTIVATION_SPECIFIC.map((item, index) => (
           <p key={index}>{item}</p>
         ))}
       </TextLoop>
-      <TextLoop
-        type='back-up'
-        duration={20}
-        delayGap={3}
-        className='top-[60%]'
-      >
+      <TextLoop type='back-up' duration={20} delayGap={3} className='top-[60%]'>
         {MOTIVATION_SPECIFIC.map((item, index) => (
           <p key={index}>{item}</p>
         ))}