tune style and content

src/components/content/dynamic-card/DynamicCard.tsx

@@ -236,7 +236,7 @@ export default function DynamicCard() {
           </IllustRoot>
           <PersonalContent>
             <Text color="white" weight={800} size={26}>
-              이소영
+              SoYoung
             </Text>
             <Text
               color="white"
@@ -253,7 +253,7 @@ export default function DynamicCard() {
               monospace={true}
               style={{ marginTop: 15 }}
             >
-              2022년 12월 23일
+              2022. 12. 23
             </Text>
           </PersonalContent>
           <div

src/components/content/link-preview/LinkPreview.tsx

@@ -31,7 +31,7 @@ const LinkPreview = ({ label, preview, url }: Props) => {
             className="TooltipContent"
             sideOffset={12}
             side="top"
-            align="start"
+            align="center"
           >
             {imgLoading && <LoadingSkeleton />}
             <Tooltip.Image
@@ -60,18 +60,20 @@ const Link = styled('a', {
 
   '&::after': {
     content: '""',
-    width: 0,
+    width: '100%',
     height: 2,
     backgroundColor: '$gray10',
     position: 'absolute',
     bottom: -2,
-    left: 0,
-    transition: 'width 0.2s ease',
+    left: '50%',
+    transition: 'transform 0.2s ease',
+    transformOrigin: 'center',
+    transform: 'translateX(-50%) scaleX(0)',
   },
 
   '&:focus, &:hover': {
     '&::after': {
-      width: '100%',
+      transform: 'translateX(-50%) scaleX(1)',
     },
   },
 });

src/components/content/link-preview/styled.tsx

@@ -53,7 +53,7 @@ const Content = styled(RadixTooltip.Content, {
 });
 
 const Image = styled('img', {
-  borderRadius: 12,
+  borderRadius: 9,
   width: 200,
   height: 120,
   objectFit: 'cover',

src/components/content/menu-dock/DockContent.tsx

@@ -83,9 +83,9 @@ export const DockContentImpl = forwardRef<HTMLDivElement, DockContentProps>(
             animate="center"
             exit="exit"
             transition={{
-              ease: [0.45, 0, 0.55, 1],
-              duration: 0.5,
-              opacity: { duration: 0.3 },
+              type: 'spring',
+              duration: 0.6,
+              bounce: 0.1,
             }}
             {...restProps}
           >

src/components/content/menu-dock/DockItem.tsx

@@ -75,11 +75,12 @@ export function DockItem({
         },
       }}
       transition={{
-        ease: [0.45, 0, 0.55, 1],
-        duration: 0.6,
         scale: {
-          duration: 0.3,
+          duration: 0.1,
         },
+        type: 'spring',
+        duration: 0.6,
+        bounce: 0.1,
       }}
       {...restProps}
     >

src/components/content/stacked-toast/AnimationItem.tsx

@@ -150,7 +150,7 @@ const originGeometryVariants: MotionProps = {
     },
   },
   transition: {
-    duration: 0.4,
+    duration: 0.35,
     type: 'ease',
   },
 };
@@ -168,7 +168,7 @@ const scaleDownVariants: MotionProps = {
     },
   },
   transition: {
-    duration: 0.5,
+    duration: 0.45,
     ease: [0.07, 0.19, 0.27, 1],
   },
 };
@@ -192,7 +192,7 @@ const slideInVariants: MotionProps = {
     },
   },
   transition: {
-    duration: 0.3,
+    duration: 0.25,
     ease: [0.07, 0.19, 0.27, 1],
   },
 };
@@ -207,7 +207,7 @@ const StyledItem = styled(motion.li, {
   border: '1px solid rgba(0, 0, 0, 0.06)',
   padding: '0 1rem',
   filter: 'drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.1))',
-  borderRadius: '0.5rem',
+  borderRadius: '12px',
   minHeight: TOAST_HEIGHT,
   minWidth: 320,
   py: 14,

src/components/layout/page-layout/ContentSwitchTab.tsx

@@ -87,7 +87,7 @@ interface Props {
 }
 export function ContentSwitchTab({
   defaultOpen,
-  defaultValue = CONTENTS[2].title,
+  defaultValue = CONTENTS[0].title,
 }: Props) {
   const [showHomeIcon, setShowHomeIcon, setHideHomeIcon] =
     useBooleanState(false);

src/pages/index.tsx

@@ -189,24 +189,6 @@ const IndexPage = () => {
           </Link>
         </ContentList.Item>
 
-        <ContentList.Item>
-          <Link to="/genie-window">
-            <ContentBox title="genie-window">
-              <StaticImage
-                src="../images/thumbnails/genie-effect.png"
-                alt="Modal Interaction with Genie Effect Preview"
-                objectFit="contain"
-                placeholder="blurred"
-                style={{
-                  display: 'flex',
-                  height: 250,
-                  justifyContent: 'center',
-                }}
-              />
-            </ContentBox>
-          </Link>
-        </ContentList.Item>
-
         <ContentList.Item>
           <Link to="/blurred-logo">
             <ContentBox title="blurred-logo">

src/pages/link-preview.tsx

@@ -12,8 +12,8 @@ import TextField from '../components/material/TextField';
 import Text from '../components/material/Text';
 import example1 from '../images/link-preview/soso.png';
 import example2 from '../images/link-preview/radix-ui.png';
-import example3 from '../images/link-preview/apple.png';
-import { VStack } from '../components/material/Stack';
+import example3 from '../images/link-preview/arc.png';
+import example4 from '../images/link-preview/figma.png';
 import SEO from '../components/layout/SEO';
 
 interface LinkData {
@@ -23,9 +23,10 @@ interface LinkData {
 }
 
 const initialData: LinkData[] = [
-  { url: 'https://so-so.dev', label: 'so-so', preview: example1 },
-  { url: 'https://radix-ui.com', label: 'radix-ui', preview: example2 },
-  { url: 'https://apple.com', label: 'apple', preview: example3 },
+  { url: 'https://so-so.dev', label: 'soyoung', preview: example1 },
+  { url: 'https://arc.net/', label: 'arc', preview: example3 },
+  { url: 'https://figma.com/', label: 'figma', preview: example4 },
+  { url: 'https://radix.com/', label: 'radix', preview: example2 },
 ];
 function PageContent() {
   const { error } = useToast();
@@ -76,15 +77,20 @@ function PageContent() {
         </PageLayout.DetailsContent>
       </PageLayout.Details>
 
-      <form onSubmit={handleSubmit}>
+      {/* <form onSubmit={handleSubmit}>
         <TextField
           placeholder="so-so.dev"
           leftSlot={<Text color="gray6">https://</Text>}
           value={value}
           onChange={e => setValue(e.target.value.replace('https://', ''))}
         />
-      </form>
-      <VStack asChild gap={8}>
+      </form> */}
+      <div
+        style={{
+          height: 'calc(100vh - 80px)',
+          marginTop: 'min( calc(8vh) , 60px)',
+        }}
+      >
         <Ul>
           {links.map(link => (
             <Li key={link.label}>
@@ -96,7 +102,7 @@ function PageContent() {
             </Li>
           ))}
         </Ul>
-      </VStack>
+      </div>
     </PageLayout>
   );
 }
@@ -110,13 +116,16 @@ export default function LinkPreviewPage() {
 
 const Ul = styled('ul', {
   listStyle: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
 });
 
 const Li = styled('li', {
   lineHeight: '24px',
+  color: '#222',
+  fontWeight: 600,
 
   '&:before': {
-    content: '-',
     color: '#999',
     position: 'absolute',
     marginLeft: -16,