홈 화면 - 추가 버튼 개발

src/components/common/PortalWrapper.tsx

@@ -14,9 +14,7 @@ export default function PortalWrapper({
 
   return container ? (
     createPortal(
-      <AnimatePresence exitBeforeEnter>
-        <>{isShowing && children}</>
-      </AnimatePresence>,
+      <AnimatePresence exitBeforeEnter>{isShowing && children}</AnimatePresence>,
       container
     )
   ) : (

src/components/common/icons/ImageIcon.tsx

@@ -0,0 +1,9 @@
+import Svg, { SvgProps } from '~/components/common/Svg';
+
+export function ImageIcon({ ...props }: SvgProps) {
+  return (
+    <Svg viewBox={24} {...props}>
+      <path d="M6 17H18L14.25 12L11.25 16L9 13ZM5 21Q4.175 21 3.587 20.413Q3 19.825 3 19V5Q3 4.175 3.587 3.587Q4.175 3 5 3H19Q19.825 3 20.413 3.587Q21 4.175 21 5V19Q21 19.825 20.413 20.413Q19.825 21 19 21Z" />
+    </Svg>
+  );
+}

src/components/common/icons/LinkIcon.tsx

@@ -0,0 +1,9 @@
+import Svg, { SvgProps } from '~/components/common/Svg';
+
+export function LinkIcon({ ...props }: SvgProps) {
+  return (
+    <Svg viewBox={24} {...props}>
+      <path d="M11 17H7Q4.925 17 3.463 15.537Q2 14.075 2 12Q2 9.925 3.463 8.462Q4.925 7 7 7H11V9H7Q5.75 9 4.875 9.875Q4 10.75 4 12Q4 13.25 4.875 14.125Q5.75 15 7 15H11ZM8 13V11H16V13ZM13 17V15H17Q18.25 15 19.125 14.125Q20 13.25 20 12Q20 10.75 19.125 9.875Q18.25 9 17 9H13V7H17Q19.075 7 20.538 8.462Q22 9.925 22 12Q22 14.075 20.538 15.537Q19.075 17 17 17Z" />
+    </Svg>
+  );
+}

src/components/common/icons/index.ts

@@ -7,6 +7,8 @@ export { DeleteIcon } from './DeleteIcon';
 export { EditIcon } from './EditIcon';
 export { FilterIcon } from './FilterIcon';
 export { HomeIcon } from './HomeIcon';
+export { ImageIcon } from './ImageIcon';
+export { LinkIcon } from './LinkIcon';
 export { PlusIcon } from './PlusIcon';
 export { RemoveCircleIcon } from './RemoveCircleIcon';
 export { SearchIcon } from './SearchIcon';

src/components/home/AppendButton.tsx

@@ -0,0 +1,91 @@
+import { css, Theme } from '@emotion/react';
+import { motion, Variants } from 'framer-motion';
+
+import { PlusIcon } from '~/components/common/icons';
+import PortalWrapper from '~/components/common/PortalWrapper';
+import { defaultEasing, defaultFadeInVariants } from '~/constants/motions';
+import useToggle from '~/hooks/common/useToggle';
+
+import AppendTooltip from './AppendTooltip';
+
+export default function AppendButton() {
+  const [isShowing, toggleIsShowing] = useToggle(false);
+
+  return (
+    <>
+      <motion.button
+        css={buttonCss}
+        onClick={toggleIsShowing}
+        variants={buttonRotateVariants}
+        initial="initial"
+        animate={isShowing ? 'true' : 'false'}
+        whileTap={{ scale: 0.9 }}
+      >
+        <PlusIcon />
+      </motion.button>
+
+      <PortalWrapper isShowing={isShowing}>
+        <motion.div
+          css={backdropCss}
+          variants={defaultFadeInVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+        >
+          <AppendTooltip />
+        </motion.div>
+      </PortalWrapper>
+    </>
+  );
+}
+
+const buttonCss = (theme: Theme) => css`
+  position: fixed;
+  right: 16px;
+  bottom: 70px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  background-color: ${theme.color.primary};
+  border-radius: 50%;
+  color: ${theme.color.gray06};
+  z-index: 9999;
+`;
+
+const backdropCss = (theme: Theme) => css`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: ${theme.color.dim03};
+  z-index: 1000;
+`;
+
+const buttonRotateVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 30,
+    transition: { duration: 0.3, ease: defaultEasing },
+  },
+  false: {
+    opacity: 1,
+    y: 0,
+    rotateZ: '0deg',
+    transition: { duration: 0.3, ease: defaultEasing },
+  },
+  true: {
+    opacity: 1,
+    y: 0,
+    rotateZ: '45deg',
+    transition: { duration: 0.3, ease: defaultEasing },
+  },
+  exit: {
+    opacity: 0,
+    y: 30,
+    transition: { duration: 0.3, ease: defaultEasing },
+  },
+};

src/components/home/AppendTooltip.tsx

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+import { css, Theme } from '@emotion/react';
+import { motion, Variants } from 'framer-motion';
+
+import { EditIcon, ImageIcon, LinkIcon } from '~/components/common/icons';
+import InternalLink from '~/components/common/InternalLink';
+import { defaultEasing } from '~/constants/motions';
+import { RouterPathType } from '~/hooks/common/useInternalRouter';
+
+export default function AppendTooltip() {
+  return (
+    <motion.div css={wrapperCss} variants={tooltipVariants}>
+      <AnchorElement href="/add/text" icon={<EditIcon />} title="글" />
+      <AnchorElement href="/add/image" icon={<ImageIcon />} title="이미지" />
+      <AnchorElement href="/add/link" icon={<LinkIcon />} title="링크" />
+    </motion.div>
+  );
+}
+
+const wrapperCss = (theme: Theme) => css`
+  position: fixed;
+  right: 16px;
+  bottom: 134px;
+
+  width: 128px;
+  padding: 10px 8px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  background-color: ${theme.color.background};
+`;
+
+interface AnchorElementProps {
+  href: RouterPathType;
+  icon: ReactNode;
+  title: string;
+}
+
+function AnchorElement({ href, icon, title }: AnchorElementProps) {
+  return (
+    <InternalLink href={href}>
+      <a css={anchorCss}>
+        {icon}
+        <span>{title}</span>
+      </a>
+    </InternalLink>
+  );
+}
+
+const anchorCss = (theme: Theme) => css`
+  width: 100%;
+  height: 48px;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: ${theme.color.gray05};
+
+  &:not(:last-child) {
+    border-bottom: solid 1px ${theme.color.gray01};
+  }
+`;
+
+const tooltipVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 30,
+    scale: 0.85,
+    transition: { duration: 0.35, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.35, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  exit: {
+    opacity: 0,
+    y: 30,
+    scale: 0.85,
+    transition: { duration: 0.35, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+};

src/constants/motions.ts

@@ -10,23 +10,41 @@ export const staggerHalf: Variants = {
   animate: { transition: { staggerChildren: 0.05 } },
 };
 
+export const defaultFadeInVariants: Variants = {
+  initial: {
+    opacity: 0,
+    transition: { duration: 0.3, ease: defaultEasing },
+    willChange: 'opacity',
+  },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.3, ease: defaultEasing },
+    willChange: 'opacity',
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.3, ease: defaultEasing },
+    willChange: 'opacity',
+  },
+};
+
 export const defaultFadeInUpVariants: Variants = {
   initial: {
     opacity: 0,
     y: 30,
-    transition: { duration: 0.5, ease: defaultEasing },
+    transition: { duration: 0.3, ease: defaultEasing },
     willChange: 'opacity, transform',
   },
   animate: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.5, ease: defaultEasing },
+    transition: { duration: 0.3, ease: defaultEasing },
     willChange: 'opacity, transform',
   },
   exit: {
     opacity: 0,
     y: 30,
-    transition: { duration: 0.5, ease: defaultEasing },
+    transition: { duration: 0.3, ease: defaultEasing },
     willChange: 'opacity, transform',
   },
 };

src/hooks/common/useInternalRouter.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { UrlObject } from 'url';
 
-export type RouterPathType = `/` | '/test';
+export type RouterPathType = `/` | '/test' | '/add/link' | '/add/text' | '/add/image';
 
 export default function useInternalRouter() {
   const router = useRouter();

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 
+import AppendButton from '~/components/home/AppendButton';
 import ContentThumbnail from '~/components/home/ContentThumbnail';
 
 export default function Root() {
@@ -28,6 +29,7 @@ export default function Root() {
         />
         <ContentThumbnail type="TEXT" content="asdf" tags={[]} />
       </section>
+      <AppendButton />
     </article>
   );
 }

src/styles/GlobalStyle/reset.ts

@@ -122,6 +122,9 @@ export const resetCss = `
     cursor: pointer;
     background-color: unset;
   }
+  a {
+    cursor: pointer;
+  }
   table {
     border-collapse: collapse;
     border-spacing: 0;