fix : 대소문자 파일 경로 수정 (#74)

* chore : 디렉토리 언어 비율에서 제외하도록 설정

* chore : 폴더 대문자로 변경

* chore : CODEOWNERS 경로 수정

.gitattributes

@@ -0,0 +1,5 @@
+# 특정 파일/디렉터리 언어 비율에서 제외
+.pnp.cjs linguist-vendored
+.pnp.loader.mjs linguist-vendored
+vite_cache/* linguist-vendored
+.yarn/* linguist-vendored

src/components/Common/Modal/Modal.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from './Modal';
+
+const meta: Meta<typeof Modal> = {
+    component: Modal,
+    title: 'atoms/Modal',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+    args: {}
+};

src/components/Common/Modal/Modal.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Overlay } from '@/components/Common/Overlay/Overlay';
+
+interface ModalProps {
+    children: React.ReactNode;
+    clickEvent: () => void;
+}
+
+export const Modal = ({ children, clickEvent }: ModalProps) => {
+    return (
+        <Overlay>
+            <div
+                className="bg-white w-[370px] h-[200px] rounded-2xl p-2 relative shadow-lg animate-fadeIn"
+                onClick={clickEvent}
+            >
+                <div className="relative h-full">{children}</div>
+            </div>
+        </Overlay>
+    );
+};

src/components/Common/Overlay/Overlay.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Overlay } from '@/components/Common/Overlay/Overlay';
+
+const meta: Meta<typeof Overlay> = {
+    component: Overlay,
+    title: 'atoms/Overlay',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof Overlay>;
+
+export const Default: Story = {
+    args: {
+        children: <>즐겁단</>
+    }
+};

src/components/Common/Overlay/Overlay.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+
+interface OverlayProps {
+    children: ReactNode;
+}
+
+export const Overlay = ({ children }: OverlayProps) => {
+    return (
+        <div className="fixed inset-0 flex items-center justify-center w-full h-full bg-black/10">
+            {children}
+        </div>
+    );
+};

src/components/Common/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SearchInput } from './SearchInput';
+
+const meta: Meta<typeof SearchInput> = {
+    component: SearchInput,
+    title: 'Atoms/SearchInput',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof SearchInput>;
+
+export const Default: Story = {
+    args: {
+        placeholder: '원하는 키워드로 편지를 필터링 해보세요!'
+    }
+};

src/components/Common/SearchInput/SearchInput.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MdOutlineManageSearch } from 'react-icons/md';
+
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder: string;
+    width?: number;
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({
+    value,
+    onChange,
+    onSubmit,
+    placeholder,
+    width = 330
+}) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(e.target.value);
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        onSubmit(value);
+    };
+
+    return (
+        <form
+            onSubmit={handleSubmit}
+            className="relative bg-[#EEEEEE] rounded-[12px] px-5 py-3 flex items-center"
+            style={{ width: `${width}px` }}
+        >
+            <input
+                value={value}
+                onChange={handleChange}
+                placeholder={placeholder}
+                type="text"
+                className="pr-[12px] w-full bg-[#EEEEEE] outline-none text-sm"
+            />
+            <button
+                type="submit"
+                className="absolute right-[10px] top-1/2 transform -translate-y-1/2 text-gray-500"
+            >
+                <MdOutlineManageSearch className="text-[24px]" />
+            </button>
+        </form>
+    );
+};

src/components/Common/Toast/Toast.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Toast from './Toast';
+
+const meta: Meta<typeof Toast> = {
+    component: Toast,
+    title: 'molecule/Toast',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof Toast>;
+
+export const Success: Story = {
+    args: {
+        children: <>성공</>,
+        variant: 'success'
+    }
+};
+
+export const Warning: Story = {
+    args: {
+        children: <>주의</>,
+        variant: 'warning'
+    }
+};
+
+export const Error: Story = {
+    args: {
+        children: <>실패</>,
+        variant: 'error'
+    }
+};

src/components/Common/Toast/Toast.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { IoIosWarning, IoMdClose } from 'react-icons/io';
+import { FaCheck } from 'react-icons/fa6';
+import { MdOutlineError } from 'react-icons/md';
+
+interface ToastProps {
+    children: React.ReactNode;
+    variant: 'success' | 'warning' | 'error';
+    onClose: () => void;
+}
+
+const iconStyles = 'w-8 h-8 absolute left-8 top-5';
+const closeStyles = 'w-8 h-8 absolute right-8 top-5';
+
+const iconComponents = {
+    success: <FaCheck className={iconStyles} />,
+    warning: <IoIosWarning className={iconStyles} />,
+    error: <MdOutlineError className={iconStyles} />
+};
+
+const Toast = ({ children, variant = 'success', onClose }: ToastProps) => {
+    const Icon = iconComponents[variant];
+
+    return (
+        <div
+            className={`relative flex items-center justify-center w-[514px] h-[77px] mb-2 px-5 rounded-lg text-white font-sans font-normal text-[22px] leading-[26px] shadow-md 
+            ${
+                variant === 'success'
+                    ? 'bg-green-500'
+                    : variant === 'warning'
+                      ? 'bg-red-500'
+                      : 'bg-yellow-400'
+            }
+            animate-toast-slide-in`}
+        >
+            {Icon}
+            <span className="truncate w-[350px] text-center">{children}</span>
+            <IoMdClose onClick={onClose} className={closeStyles} />
+        </div>
+    );
+};
+
+export default Toast;

src/components/Common/ToastContainer/ToastContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Toast from '../Toast/Toast';
+import { useToastStore } from '@/hooks/useToastStore';
+
+const ToastContainer = () => {
+    const { toasts, removeToast } = useToastStore();
+
+    return (
+        <div className="fixed z-[9999] top-5 right-5 space-y-3">
+            {toasts
+                .slice()
+                .reverse()
+                .map((toast) => (
+                    <Toast
+                        key={toast.id}
+                        variant={toast.variant}
+                        onClose={() => removeToast(toast.id)}
+                    >
+                        {toast.message}
+                    </Toast>
+                ))}
+        </div>
+    );
+};
+
+export default ToastContainer;