feat(@zakelstorm/blog, @zakelstorm/ui): toast animation 적용

apps/blog/README.md

@@ -1,38 +1,45 @@
-## Getting Started
-
-First, run the development server:
-
-```bash
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello).
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
-
-# Sanity Clean Content Studio
-
-Congratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend.
-
-Now you can do the following things:
-
-- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
-- [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
-- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)
+## 기술 스택
+
+<table>
+  <th>구분</th>
+  <th>기술 스택</th>
+  <tr>
+    <td align="center"><b>common<b></td>
+    <td>
+      <img src="https://img.shields.io/badge/pnpm-FFCB00.svg?style=flat&logo=pnpm&logoColor=white" />
+      <img src="https://img.shields.io/badge/Turborepo-EF4444.svg?style=flat&logo=turborepo&logoColor=white" />
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><b>frontend</b></td>
+    <td>
+      <img src="https://img.shields.io/badge/Next.js-000000.svg?style=flat&logo=next.js&logoColor=white" />
+      <img src="https://img.shields.io/badge/Server%20Component-000000.svg?style=flat&logo=next.js&logoColor=white" />
+      <img src="https://img.shields.io/badge/Zustand-000000?style=flat&logo=zustand&logoColor=white" />
+      <img src="https://img.shields.io/badge/TailwindCss-06B6D4.svg?style=flat&logo=tailwindcss&logoColor=white" />
+      <img src="https://img.shields.io/badge/Framer%20Motion-0055FF.svg?style=flat&logo=framer&logoColor=white" />
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><b>backend</b></td>
+    <td>
+      <img src="https://img.shields.io/badge/Sanity-ef3f2f.svg?style=flat&logo=sanity&logoColor=white" />
+    </td>
+  </tr>
+
+  <tr>
+    <td align="center"><b>CI/CD</b></td>
+    <td>
+      <img src="https://img.shields.io/badge/GitHub%20Actions-%232671E5.svg?style=flat&logo=githubactions&logoColor=white" />
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><b>deployment</b></td>
+    <td>
+      <img src="https://img.shields.io/badge/docker-1D63ED.svg?style=flat&logo=docker&logoColor=white" />
+      <img src="https://img.shields.io/badge/NGINX-%23009639.svg?style=flat&logo=nginx&logoColor=white" />
+      <img src="https://img.shields.io/badge/aws-%23FF9900.svg?style=flat&logo=amazon-aws&logoColor=white" />
+    </td>
+  </tr>
+
+</table>

apps/blog/features/List/CommentList.tsx

@@ -75,10 +75,10 @@ export const CommentList = ({ contents, deleteAction }: CommentListProps) => {
                 placement='bottom-end'>
                 <PopoverHandler>
                   <IconButton
-                    className='shadow-none h-[1.5rem] w-[1.5rem]'
+                    className='shadow-none h-[24px] w-[24px]'
                     aria-controls='remove-comment-container'
                     aria-label='댓글 삭제하기'>
-                    <TrashIcon strokeWidth={2} className='h-[1rem] w-[1rem]' />
+                    <TrashIcon strokeWidth={2} className='h-[16px] w-[16px]' />
                   </IconButton>
                 </PopoverHandler>
                 <PopoverContent className='p-2'>
@@ -104,9 +104,9 @@ export const CommentList = ({ contents, deleteAction }: CommentListProps) => {
                     />
                     <FormButton
                       type='submit'
-                      className='h-[1.5rem] w-[1.5rem]'
+                      className='h-[24px] w-[24px]'
                       isIcon>
-                      <CheckCircleIcon className='h-[1rem] w-[1rem]' />
+                      <CheckCircleIcon className='h-[16px] w-[16px]' />
                     </FormButton>
                   </form>
                 </PopoverContent>

apps/blog/styles/globals.css

@@ -30,27 +30,6 @@ a {
   @apply no-underline;
 }
 
-@media (max-width: 1100px) {
-  html,
-  body {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 500px) {
-  html,
-  body {
-    font-size: 8px;
-  }
-}
-
-@media (max-width: 400px) {
-  html,
-  body {
-    font-size: 6px;
-  }
-}
-
 @layer base {
   h1 {
     @apply text-2xl;

packages/ui/.storybook/main.ts

@@ -12,7 +12,7 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: [
     '../components/**/*.mdx',
-    '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../{components,hooks}/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),

packages/ui/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react'
-import '../index.css'
+import './tailwind.css'
 
 const preview: Preview = {
   parameters: {

packages/ui/.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/ui/components/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { buttonStyle } from './theme'
 
 import { Button } from './index'
+import { buttonStyle } from './theme'
 
 const meta: Meta<typeof Button> = {
   component: Button,

packages/ui/components/Button/index.tsx

@@ -3,7 +3,7 @@ import { ComponentProps, forwardRef, memo, PropsWithChildren } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { recordValuesToString } from '../../util/recordValuesToString'
-import Spinner from '../Spinner'
+import { Spinner } from '../Spinner'
 import { buttonStyle } from './theme'
 
 type variant = 'filled' | 'outlined' | 'text'

packages/ui/components/Input/theme/outlined/index.ts

@@ -25,7 +25,7 @@ export const inputOutlined = {
       position: '-top-1.5',
       fontSize: 'peer-placeholder-shown:text-sm',
       floated: {
-        fontSize: 'text-[1rem] peer-focus:text-[1rem]',
+        fontSize: 'text-[16px] peer-focus:text-[16px]',
       },
       before: {
         content: "before:content[' ']",

packages/ui/components/Popover/Popover.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { popoverStyle } from './theme'
 
-import { Popover, PopoverContent, PopoverHandler } from './index'
 import { Button } from '../Button'
+import { Popover, PopoverContent, PopoverHandler } from './index'
+import { popoverStyle } from './theme'
 
 const meta: Meta<typeof Popover> = {
   component: Popover,

packages/ui/components/Popover/PopoverContent.tsx

@@ -2,25 +2,22 @@
 
 // @floating-ui
 import {
-  FloatingPortal,
   FloatingFocusManager,
+  FloatingPortal,
   useMergeRefs,
 } from '@floating-ui/react'
-
-// framer-motion
-import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion'
-
 // utils
 import classnames from 'classnames'
+// framer-motion
+import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import { ComponentProps, FC, forwardRef, memo } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-// context
-import { popoverStyle } from './theme'
-import { usePopover } from './PopoverContext'
-
 import { recordValuesToString } from '../../util/recordValuesToString'
 import { NewAnimatePresenceProps } from '../../util/type'
-import { ComponentProps, FC, forwardRef, memo } from 'react'
+import { usePopover } from './PopoverContext'
+// context
+import { popoverStyle } from './theme'
 
 export type PopoverContentProps = ComponentProps<'div'>
 
@@ -93,5 +90,3 @@ export const PopoverContent = memo(
 )
 
 PopoverContent.displayName = 'PopoverContent'
-
-export default PopoverContent

packages/ui/components/Popover/PopoverContext.tsx

@@ -1,7 +1,8 @@
 'use client'
 import { FloatingContext, ReferenceType, Strategy } from '@floating-ui/react'
+import { createContext, HTMLProps, ReactNode, Ref, useContext } from 'react'
+
 import { Animation } from '../../util/type'
-import { HTMLProps, ReactNode, Ref, createContext, useContext } from 'react'
 
 export interface ContextValue {
   open?: boolean

packages/ui/components/Popover/PopoverHandler.tsx

@@ -1,16 +1,16 @@
 // @floating-ui
 import { useMergeRefs } from '@floating-ui/react'
-
-// context
-import { usePopover } from './PopoverContext'
 import {
-  ComponentProps,
-  ReactNode,
   cloneElement,
+  ComponentProps,
   forwardRef,
   memo,
+  ReactNode,
 } from 'react'
 
+// context
+import { usePopover } from './PopoverContext'
+
 export interface PopoverHandlerProps extends ComponentProps<any> {
   children: ReactNode | ComponentProps<any>
 }
@@ -33,5 +33,3 @@ export const PopoverHandler = memo(
 )
 
 PopoverHandler.displayName = 'PopoverHandler'
-
-export default PopoverHandler

packages/ui/components/Popover/index.tsx

@@ -1,41 +1,31 @@
 'use client'
 
-import {
-  Dispatch,
-  PropsWithChildren,
-  Ref,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-
 // @floating-ui
 import {
-  offset as fuiOffset,
+  autoUpdate,
   flip,
+  offset as fuiOffset,
+  Placement,
   shift,
-  autoUpdate,
+  useClick,
+  useDismiss,
+  UseDismissProps,
   useFloating,
+  useId,
   useInteractions,
   useRole,
-  useDismiss,
-  useId,
-  useClick,
-  Placement,
-  UseDismissProps,
 } from '@floating-ui/react'
-
 // utils
 import { merge } from 'lodash-es'
+import { PropsWithChildren, Ref, useEffect, useMemo, useState } from 'react'
 
-// context
-import { popoverStyle } from './theme'
+import { Animation } from '../../util/type'
+import { PopoverContent, PopoverContentProps } from './PopoverContent'
 import { PopoverContextProvider, usePopover } from './PopoverContext'
-
 // popover components
 import { PopoverHandler, PopoverHandlerProps } from './PopoverHandler'
-import { PopoverContent, PopoverContentProps } from './PopoverContent'
-import { Animation } from '../../util/type'
+// context
+import { popoverStyle } from './theme'
 
 export interface PopoverProps extends PropsWithChildren {
   open?: boolean
@@ -151,9 +141,5 @@ const Popover = ({
 
 Popover.displayName = 'Popover'
 
-export type { PopoverHandlerProps, PopoverContentProps }
-export { Popover, PopoverHandler, PopoverContent, usePopover }
-export default Object.assign(Popover, {
-  Handler: PopoverHandler,
-  Content: PopoverContent,
-})
+export type { PopoverContentProps, PopoverHandlerProps }
+export { Popover, PopoverContent, PopoverHandler, usePopover }

packages/ui/components/Spinner/Spinner.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { spinnerStyle } from './theme'
 
 import { Spinner } from './index'
+import { spinnerStyle } from './theme'
 
 const meta: Meta<typeof Spinner> = {
   component: Spinner,

packages/ui/components/Spinner/index.tsx

@@ -1,7 +1,6 @@
-import React, { ComponentProps, forwardRef } from 'react'
-
 // utils
 import classnames from 'classnames'
+import { ComponentProps, forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { recordValuesToString } from '../../util/recordValuesToString'
@@ -57,5 +56,3 @@ export const Spinner = forwardRef<
 })
 
 Spinner.displayName = 'Spinner'
-
-export default Spinner

packages/ui/hooks/Toast/Description.tsx

@@ -1,6 +1,5 @@
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import * as Toast from '@radix-ui/react-toast'
-
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export const ToastDescription = forwardRef<

packages/ui/hooks/Toast/Root.tsx

@@ -10,7 +10,7 @@ export const ToastRoot = forwardRef<
     <Toast.Root
       ref={ref}
       className={twMerge(
-        'bg-white group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+        "bg-white rounded-md shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut",
         className
       )}
       {...props}