[#595] Toast UI 개선 (#597)

* refactor: Toast UI 리디자인 * fix: toast type 수정 (normal -> warning)
prgrms-web-devcourse · Jun 17, 2024 · 52e9992 · 52e9992
1 parent 2beb0f2
commit 52e9992
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 55 deletions.
diff --git a/public/icons/check-circle.svg b/public/icons/check-circle.svg
diff --git a/public/icons/error-circle.svg b/public/icons/error-circle.svg
diff --git a/public/icons/error-with-exclamation.svg b/public/icons/error-with-exclamation.svg
diff --git a/public/icons/index.ts b/public/icons/index.ts
@@ -21,8 +21,10 @@ export { default as IconHeart } from './heart.svg';
 
 // 검색
 export { default as IconSearch } from './search.svg';
-export { default as IconWarningCircle } from './warning-circle.svg';
-export { default as IconCheckCircle } from './check-circle.svg';
+export { default as IconWarning } from './warning-circle.svg';
+export { default as IconSuccess } from './check-circle.svg';
+export { default as IconError } from './error-circle.svg';
+export { default as IconErrorExclamation } from './error-with-exclamation.svg';
 
 // 독서 모임
 export { default as IconAvatar } from './avatar.svg';

diff --git a/public/icons/warning-circle.svg b/public/icons/warning-circle.svg
diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx
@@ -60,14 +60,13 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => {
 
   const handleClickLikeButton = () => {
     if (!isAuthenticated) {
-      showToast({ message: '로그인 후 이용해주세요.', type: 'normal' });
+      showToast({ message: '로그인 후 이용해주세요' });
       return;
     }
 
     if (userId === myId) {
       showToast({
-        message: '내 책장에는 좋아요를 누를 수 없어요.',
-        type: 'normal',
+        message: '내 책장에는 좋아요를 누를 수 없어요',
       });
       return;
     }

diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx
@@ -31,14 +31,14 @@ const GroupPage = () => {
   const isAuthenticated = checkAuthentication();
 
   const handleSearchInputClick = () => {
-    showToast({ message: '아직 준비 중인 기능이에요 🥹', type: 'normal' });
+    showToast({ message: '아직 준비 중인 기능이에요 🥹' });
   };
 
   const handleCreateGroupClick = () => {
     if (isAuthenticated) {
       router.push('/group/create');
     } else {
-      showToast({ message: '로그인 후에 이용할 수 있어요!', type: 'normal' });
+      showToast({ message: '로그인 후 이용해주세요' });
     }
 
     return;

diff --git a/src/stories/base/Toast.stories.tsx b/src/stories/base/Toast.stories.tsx
@@ -14,11 +14,11 @@ export default meta;
 
 type Story = StoryObj<typeof ToastItem>;
 
-const NormalToast = () => {
+const WarningToast = () => {
   const toast = useToast();
   const handleButtonClick = () =>
     toast.show({
-      type: 'normal',
+      type: 'warning',
       message: '5초 동안 보여지는 토스트 메세지에요.',
       duration: 5000,
     });
@@ -46,11 +46,17 @@ export const Default: Story = {
   args: {
     message: '토스트 예시',
   },
-  render: args => <ToastItem {...args} />,
+  render: args => (
+    <div className="flex flex-col gap-[1rem]">
+      <ToastItem type="warning" {...args} />
+      <ToastItem type="error" {...args} />
+      <ToastItem type="success" {...args} />
+    </div>
+  ),
 };
 
 export const Normal: Story = {
-  render: NormalToast,
+  render: WarningToast,
 };
 
 export const Success: Story = {

diff --git a/src/v1/base/ErrorMessage.tsx b/src/v1/base/ErrorMessage.tsx
@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
-import { IconWarningCircle } from '@public/icons';
+import { IconErrorExclamation } from '@public/icons';
 
 const ErrorMessage = ({ children }: { children?: ReactNode }) => {
   return (
     <>
       {children && (
         <div className="flex items-center gap-[0.4rem] text-warning-800 font-caption1-regular">
           <div className="h-[1.2rem] w-[1.2rem]">
-            <IconWarningCircle />
+            <IconErrorExclamation />
           </div>
           {children}
         </div>

diff --git a/src/v1/base/ShareButton.tsx b/src/v1/base/ShareButton.tsx
@@ -10,7 +10,7 @@ const ShareButton = () => {
     navigator.clipboard
       .writeText(url)
       .then(() => {
-        showToast({ message: '링크를 복사했어요.', type: 'success' });
+        showToast({ message: '링크를 복사했어요', type: 'success' });
       })
       .catch(() => {
         showToast({ message: '잠시 후 다시 시도해주세요', type: 'error' });

diff --git a/src/v1/base/Toast/ToastItem.tsx b/src/v1/base/Toast/ToastItem.tsx
@@ -1,40 +1,21 @@
-import { IconCheckCircle, IconWarningCircle } from '@public/icons';
+import { IconSuccess, IconWarning, IconError } from '@public/icons';
 import { ToastOption } from './types';
 
-const schemes = {
-  success: {
-    icon: <IconCheckCircle />,
-    backgroundColor: 'bg-success-500',
-    textColor: 'text-success-900',
-    fillColor: 'fill-success-900',
-  },
-  error: {
-    icon: <IconWarningCircle />,
-    backgroundColor: 'bg-warning-500',
-    textColor: 'text-warning-800',
-    fillColor: 'fill-warning-800',
-  },
-  normal: {
-    icon: null,
-    backgroundColor: 'bg-black-500',
-    textColor: 'text-white',
-    fillColor: 'fill-white',
-  },
+const ICONS = {
+  success: <IconSuccess />,
+  error: <IconError />,
+  warning: <IconWarning />,
 } as const;
 
-const ToastItem = ({ type = 'normal', message }: ToastOption) => {
-  const scheme = schemes[type];
+const ToastItem = ({ type = 'warning', message }: ToastOption) => {
+  const icon = ICONS[type];
 
   return (
     <div
-      className={`flex min-h-[5.3rem] w-full min-w-fit flex-row items-center gap-[1rem] rounded-full px-[2rem] ${scheme.backgroundColor}`}
+      className={`flex min-h-[5.3rem] w-full min-w-fit flex-row items-center gap-[1rem] rounded-full bg-black-500/[.98] px-[2rem] shadow-bookcover`}
     >
-      {scheme.icon && (
-        <div className={`h-[2rem] w-[2rem] ${scheme.fillColor}`}>
-          {scheme.icon}
-        </div>
-      )}
-      <p className={`!leading-tight font-body2-regular ${scheme.textColor}`}>
+      {icon}
+      <p className={`!leading-tight tracking-wide text-white font-body2-bold`}>
         {message}
       </p>
     </div>

diff --git a/src/v1/base/Toast/types.ts b/src/v1/base/Toast/types.ts
@@ -1,4 +1,4 @@
-export type ToastType = 'normal' | 'success' | 'error';
+export type ToastType = 'warning' | 'success' | 'error';
 
 export type ToastOption = {
   type?: ToastType;

diff --git a/src/v1/book/detail/BookInfo.tsx b/src/v1/book/detail/BookInfo.tsx
@@ -54,7 +54,7 @@ const BookmarkButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {
   const handleButtonClick = () => {
     if (!isAuthenticated) {
       // TODO: 로그인 유도 모달로 변경
-      showToast({ type: 'normal', message: '로그인 후에 책을 꽂을 수 있어요' });
+      showToast({ message: '로그인 후에 책을 꽂을 수 있어요' });
       return;
     }
 

diff --git a/src/v1/profile/AddJobProfile.tsx b/src/v1/profile/AddJobProfile.tsx
@@ -60,7 +60,7 @@ const AddJobProfile = ({ jobCategories }: AddJobProfileProps) => {
   const showToastEditFailed = () =>
     toast.show({
       type: 'error',
-      message: '잠시 후 다시 시도해 주세요.',
+      message: '잠시 후 다시 시도해 주세요',
       duration: 3000,
     });
 

diff --git a/src/v1/profile/EditProfile.tsx b/src/v1/profile/EditProfile.tsx
@@ -52,14 +52,14 @@ const EditProfile = ({ profile, jobGroups }: UserProfileProps) => {
   const showToastEditSuccess = () =>
     toast.show({
       type: 'success',
-      message: '프로필 수정 완료!',
+      message: '프로필을 수정했어요',
       duration: 3000,
     });
 
   const showToastEditFailed = () =>
     toast.show({
       type: 'error',
-      message: '알 수 없는 에러가 발생했어요.',
+      message: '잠시 후 다시 시도해주세요',
       duration: 3000,
     });