FEAT 토스트 UI 추가, 북마크 버튼 제거 (#develop)

Author: createhb21

pnpm-lock.yaml

@@ -50,6 +50,7 @@
     "axios": "^1.7.9",
     "js-cookie": "^3.0.5",
     "lexical": "^0.23.1",
+    "lucide-react": "^0.460.0",
     "motion": "^11.18.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -62,6 +63,7 @@
     "react-zoom-pan-pinch": "3.6.0",
     "rxjs": "^7.8.1",
     "swiper": "^11.1.15",
+    "uuid": "^11.1.0",
     "vaul": "^1.1.2",
     "zustand": "^5.0.2"
   },

services/ahhachul.com/package.json

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { StackFlow } from '@/stackflow';
 
+import { UiComponent } from './components';
+
 if (import.meta.env.MODE === 'mock') {
   const { worker } = await import('@/mocks');
   worker.start();
@@ -11,6 +13,7 @@ function App() {
   return (
     <React.Suspense fallback={null}>
       <StackFlow.Routes />
+      <UiComponent.ToastContainerComponent />
     </React.Suspense>
   );
 }

services/ahhachul.com/src/App.tsx

@@ -15,10 +15,10 @@ export const Desc = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6px;
+    gap: 2px;
 
     & > p {
-      ${theme.fonts.titleMedium};
+      ${theme.fonts.bodyMedium};
       color: ${theme.colors.gray[80]};
     }
   `}

services/ahhachul.com/src/components/common/comment/emptyCommentList/EmptyCommentList.styled.tsx

@@ -26,4 +26,5 @@ export * from './imageCarouselModal';
 export * from './skeleton';
 export * from './iosBottomPadding';
 
+export * from './toast';
 export * from './maintain';

services/ahhachul.com/src/components/common/index.ts

@@ -34,16 +34,21 @@ const SubwayLinePicker: React.FC<SubwayLinePickerProps> = ({
   };
 
   return (
-    <Drawer.Root open={isOpen} shouldScaleBackground onOpenChange={toggleOpen}>
+    <Drawer.Root
+      open={isOpen}
+      shouldScaleBackground
+      repositionInputs={false}
+      onOpenChange={toggleOpen}
+    >
       <Drawer.Trigger asChild>
         <S.SelectButton isActive={!!selectedLine} aria-invalid={!!errorMsg}>
           <span>{selectedLine ? subwayLineOptions[selectedLine] : buttonLabel}</span>
           <ChevronIcon />
         </S.SelectButton>
       </Drawer.Trigger>
       <Drawer.Portal>
-        <S.DrawerOverlay />
-        <S.DrawerContainer>
+        <Drawer.Overlay css={S.overlay} />
+        <Drawer.Content css={S.drawerContainer}>
           <S.ContentWrapper>
             <S.DrawerHeader>
               <S.CancelButton onClick={toggleOpen}>취소</S.CancelButton>
@@ -59,7 +64,7 @@ const SubwayLinePicker: React.FC<SubwayLinePickerProps> = ({
               />
             </S.SubwayListContainer>
           </S.ContentWrapper>
-        </S.DrawerContainer>
+        </Drawer.Content>
       </Drawer.Portal>
     </Drawer.Root>
   );

services/ahhachul.com/src/components/common/subwayLinePicker/SubwayLinePicker.component.tsx

@@ -21,7 +21,7 @@ export const SelectButton = styled.button<{ isActive: boolean }>`
   }
 `;
 
-export const DrawerOverlay = styled(Drawer.Overlay)`
+export const overlay = css`
   position: fixed;
   top: 0;
   right: 0;
@@ -30,13 +30,13 @@ export const DrawerOverlay = styled(Drawer.Overlay)`
   background-color: rgba(0, 0, 0, 0.4);
 `;
 
-export const DrawerContainer = styled(Drawer.Content)`
+export const drawerContainer = css`
   z-index: 999999999;
   display: flex;
   flex-direction: column;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  height: max-content;
+  max-height: 96%;
   position: fixed;
   bottom: 0;
   left: 0;

services/ahhachul.com/src/components/common/subwayLinePicker/SubwayLinePicker.styled.ts

@@ -1 +1,143 @@
-export {};
+import type React from 'react';
+import { useEffect } from 'react';
+
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { AlertCircle, CheckCircle, Info, X, AlertTriangle } from 'lucide-react';
+
+import { useToastStore, type ToastType } from '@/stores/toast';
+
+interface ToastProps {
+  id: string;
+  message: string;
+  type: ToastType;
+  onClose: () => void;
+}
+
+const toastIcons = {
+  success: CheckCircle,
+  warning: AlertTriangle,
+  info: Info,
+  error: AlertCircle,
+};
+
+const getToastStyle = (type: ToastType) => {
+  switch (type) {
+    case 'success':
+      return css`
+        background-color: #22c55e;
+        color: white;
+      `;
+    case 'warning':
+    case 'error':
+      return css`
+        background-color: #ef4444;
+        color: white;
+      `;
+    case 'info':
+      return css`
+        background-color: #3b82f6;
+        color: white;
+      `;
+    default:
+      return css`
+        background-color: #ef4444;
+        color: white;
+      `;
+  }
+};
+
+const ToastContainer = styled.div`
+  position: fixed;
+  bottom: 3.3rem;
+  right: 1rem;
+  left: 1rem;
+  width: calc(100% - 2rem);
+  margin: 0 auto;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+const ToastWrapper = styled.div<{ type: ToastType }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 28rem;
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.375rem;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  ${({ type }) => getToastStyle(type)}
+`;
+
+const ToastContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ToastMessage = styled.span`
+  font-weight: 500;
+  margin-left: 0.5rem;
+`;
+
+const CloseButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  color: white;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+`;
+
+const Toast: React.FC<ToastProps> = ({ message, type, onClose }) => {
+  const Icon = toastIcons[type];
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <ToastWrapper type={type} role="alert">
+      <ToastContent>
+        <Icon size={20} />
+        <ToastMessage>{message}</ToastMessage>
+      </ToastContent>
+      <CloseButton onClick={onClose} aria-label="Close">
+        <X size={16} />
+      </CloseButton>
+    </ToastWrapper>
+  );
+};
+
+const ToastContainerComponent: React.FC = () => {
+  const { toasts, removeToast } = useToastStore();
+
+  return (
+    <ToastContainer>
+      {toasts.map(toast => (
+        <Toast
+          key={toast.id}
+          id={toast.id}
+          message={toast.message}
+          type={toast.type}
+          onClose={() => removeToast(toast.id)}
+        />
+      ))}
+    </ToastContainer>
+  );
+};
+
+export default ToastContainerComponent;

services/ahhachul.com/src/components/common/toast/Toast.component.tsx

@@ -0,0 +1 @@
+export { default as ToastContainerComponent } from './Toast.component';