[SWM-363] Feat : FeedbackMessage component

4m9d · Oct 25, 2023 · 230a1de · 230a1de
1 parent 15b83c1
commit 230a1de
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 24 deletions.
diff --git a/src/components/course/drawer/courseMaterial/lectureNotes/CourseMaterialLectureNotes.tsx b/src/components/course/drawer/courseMaterial/lectureNotes/CourseMaterialLectureNotes.tsx
@@ -19,6 +19,7 @@ import getRelativeTime from '@/src/util/time/getRelativeTime';
 import ClipboardSVG from '@/public/icon/Clipboard';
 import { SessionStorageKeys } from '@/src/constants/materials/materials';
 import { ONE_SECOND_IN_MS } from '@/src/constants/time/time';
+import FeedbackMessage from '@/src/components/ui/feedback/FeedbackMessage';
 
 const MarkdownPreview = dynamic(
   () => import('@uiw/react-markdown-preview').then((mod) => mod.default),
@@ -156,18 +157,12 @@ export default function CourseMaterialLectureNotes({
             </span>
             복사하기
           </Button>
-          <AnimatePresence>
-            {isCopied && (
-              <motion.span
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className='text-xs font-medium text-sroom-green'
-              >
-                클립보드에 복사되었어요!
-              </motion.span>
-            )}
-          </AnimatePresence>
+          {isCopied && (
+            <FeedbackMessage
+              type='success'
+              message='클립보드에 복사되었어요!'
+            />
+          )}
           <Button
             onClick={toggleButtonClickHandler}
             className='w-full mt-2 border py-7 border-sroom-black-400 bg-sroom-white'

diff --git a/src/components/dashboard/main/weeklyCalendar/WeeklyCalendar.tsx b/src/components/dashboard/main/weeklyCalendar/WeeklyCalendar.tsx
@@ -83,7 +83,7 @@ export default function WeeklyCalendar({ learning_histories }: Props) {
 
   return (
     <div className='flex flex-col items-center justify-center col-start-3 col-end-4 row-start-1 row-end-4 bg-sroom-gray-300 text-sroom-black-400'>
-      <div className='flex items-center justify-center py-2 sm:py-3 md:py-4 xl:py-7'>
+      <div className='flex items-center justify-center py-2 sm:py-3 md:py-4 xl:py-5'>
         <p className='text-xs font-semibold md:text-base xl:text-lg'>
           <span className='px-1 md:px-2 py-[2px] mr-1 font-bold bg-sroom-white rounded-sm text-sroom-black-300'>
             {selectedMonth === 'Invalid Date' ? '' : selectedMonth}

diff --git a/src/components/gnb/NavBar.tsx b/src/components/gnb/NavBar.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import SearchInput from './SearchInput';
 import Image from 'next/image';
 import useWindowSize from '@/src/hooks/useWindowSize';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSession } from 'next-auth/react';
 import { useMutation } from '@tanstack/react-query';
 import { updateUserProfile } from '@/src/api/members/members';
@@ -19,6 +19,7 @@ export default function NavBar({ logo, profileDropdown }: Props) {
   const { data: session, update } = useSession();
   const { width: windowWidth } = useWindowSize();
   const [isEditMode, setIsEditMode] = useState(false);
+  const [isNameModified, setIsNameModified] = useState(false);
 
   const [name, setName] = useState(session?.name ?? '');
   const profileImage = session?.profile;
@@ -32,11 +33,20 @@ export default function NavBar({ logo, profileDropdown }: Props) {
     await update({ ...session, name });
   };
 
+  const nameModificationHandler = useCallback(() => {
+    setIsNameModified(() => true);
+
+    setTimeout(() => {
+      setIsNameModified(() => false);
+    }, 2000);
+  }, []);
+
   const { mutate } = useMutation(() => updateUserProfile(name), {
     onSuccess: (data) => {
       setIsEditMode(false);
       if (!data) return;
       setName(() => data.name);
+      nameModificationHandler();
     }
   });
 
@@ -79,6 +89,7 @@ export default function NavBar({ logo, profileDropdown }: Props) {
             <ProfileDropdown
               profileImage={profileImage}
               name={name}
+              isNameModified={isNameModified}
               profileDropdown={profileDropdown}
               isEditMode={isEditMode}
               setIsEditMode={setIsEditMode}

diff --git a/src/components/gnb/ProfileDropdown.tsx b/src/components/gnb/ProfileDropdown.tsx
@@ -5,10 +5,12 @@ import SaveSVG from '@/public/icon/Save';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useCallback, useEffect, useRef } from 'react';
+import FeedbackMessage from '../ui/feedback/FeedbackMessage';
 
 type Props = {
   profileImage: string;
   isEditMode: boolean;
+  isNameModified: boolean;
   setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   profileDropdown?: ProfileDropdown[];
   name: string;
@@ -18,6 +20,7 @@ type Props = {
 export default function ProfileDropdown({
   profileImage,
   isEditMode,
+  isNameModified,
   setIsEditMode,
   profileDropdown,
   name,
@@ -86,16 +89,21 @@ export default function ProfileDropdown({
             />
           </div>
         )}
-        <input
-          ref={inputRef}
-          type='text'
-          defaultValue={name}
-          disabled={isEditMode === false}
-          spellCheck='false'
-          onKeyDown={(e) => enterKeyDownHandler(e.key)}
-          maxLength={10}
-          className='hidden w-32 p-1 text-xs font-semibold text-left resize-none h- sm:block md:text-sm disabled:bg-sroom-white'
-        />
+        <div className='flex flex-col'>
+          <input
+            ref={inputRef}
+            type='text'
+            defaultValue={name}
+            disabled={isEditMode === false}
+            spellCheck='false'
+            onKeyDown={(e) => enterKeyDownHandler(e.key)}
+            maxLength={10}
+            className='hidden w-32 p-1 text-xs font-semibold text-left resize-none h- sm:block md:text-sm disabled:bg-sroom-white'
+          />
+          {isNameModified && (
+            <FeedbackMessage type='success' message='닉네임이 변경되었어요!' />
+          )}
+        </div>
       </div>
       <ul
         tabIndex={0}

diff --git a/src/components/ui/feedback/FeedbackMessage.tsx b/src/components/ui/feedback/FeedbackMessage.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { AnimatePresence, motion } from 'framer-motion';
+
+type Props = {
+  message: string;
+  type: 'success' | 'error';
+};
+
+export default function FeedbackMessage({ message, type }: Props) {
+  return (
+    <AnimatePresence>
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className={`text-xs font-medium ${
+          type === 'success'
+            ? 'text-sroom-green'
+            : type === 'error'
+            ? 'text-sroom-red'
+            : ''
+        }`}
+      >
+        {message}
+      </motion.span>
+    </AnimatePresence>
+  );
+}