feat: apply tablet design

pink-boss · Apr 14, 2024 · 78f169a · 78f169a
1 parent 2aa355b
commit 78f169a
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 18 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/pages/root/ui/footer.tsx b/src/pages/root/ui/footer.tsx
@@ -7,13 +7,11 @@ export const Footer = () => {
       <nav className="border-b border-b-[#EBEBEB] py-3">
         <ul className="flex w-full flex-row items-center justify-between text-[12px]">
           <span className="basis-1/4 border-r border-r-[#EBEBEB] px-4 text-center">
-            개인정보
-            <br />
+            개인정보 <br className="md:hidden" />
             처리방침
           </span>
           <span className="border-r border-r-[#EBEBEB] basis-1/4  px-4 text-center">
-            서비스
-            <br />
+            서비스 <br className="md:hidden" />
             이용약관
           </span>
           <span className="border-r border-r-[#EBEBEB] basis-1/4  px-4 text-center">

diff --git a/src/pages/root/ui/header.tsx b/src/pages/root/ui/header.tsx
@@ -23,9 +23,9 @@ export const Header = () => {
 
   return (
     <div>
-      <header className="flex w-full flex-row items-center px-5 py-2 sm:py-3 fixed bg-white z-10">
+      <header className="flex w-full flex-row items-center px-5 py-2 sm:py-3 fixed bg-white z-10 md:py-5 md:px-20">
         <Logo />
-        <h1 className="text-[24px] font-['PT_Sans_Caption'] font-bold text-primary-500 ml-[8px] leading-[31px]">
+        <h1 className="text-[24px] font-['PT_Sans_Caption'] font-bold text-primary-500 ml-[8px] leading-[31px] md:text-[32px]">
           Joosum
         </h1>
         <button
@@ -40,7 +40,7 @@ export const Header = () => {
           <div className="bg-gray-800 w-[18px] h-[2px]" />
         </button>
         <nav className="ml-auto hidden sm:flex">
-          <ul className="flex h-full items-center gap-4 text-[18px]">
+          <ul className="flex h-full items-center gap-4 text-[18px] md:gap-[30px]">
             <li>
               <NavLink className="font-normal text-[#5D5C5D]">문의하기</NavLink>
             </li>
@@ -82,7 +82,7 @@ const NavLink = ({ className, children, href }: NavLinkProps) => {
   return (
     <a
       className={cn(
-        "rounded-[8px] p-[12px]  leading-[18px] sm:p-2 sm:text-[16px]",
+        "rounded-[8px] p-[12px] leading-[18px] sm:p-2 sm:text-[16px] md:text-[18px] md:p-[12px]",
         className,
       )}
       href={href}

diff --git a/src/pages/root/ui/page.tsx b/src/pages/root/ui/page.tsx
@@ -13,19 +13,21 @@ export const Page = () => {
       <Header />
       <Section
         color="primary-500"
-        className="items-center pt-[107px] sm:px-20 sm:pt-[155px]"
+        className="items-center pt-[107px] sm:px-20 sm:pt-[155px] md:items-start"
       >
-        <h1 className="text-white font-extrabold text-[24px] leading-[28px] text-center sm:text-[36px] sm:leading-[42px]">
-          <span>간편한 링크 아카이빙</span>
+        <h1 className="text-white font-extrabold text-[24px] leading-[28px] text-center sm:text-[36px] sm:leading-[42px] md:text-start md:text-[40px] md:leading-[47px]">
+          <span className="md:mb-[12px] md:inline-block">
+            간편한 링크 아카이빙
+          </span>
           <br />
-          <span className="text-[32px] leading-[38px] sm:text-[48px] sm:leading-[57px]">
+          <span className="text-[32px] leading-[38px] sm:text-[48px] sm:leading-[57px] md:text-[52px] md:leading-[62px]">
             지금 바로 경험하세요!
           </span>
         </h1>
         <Button color="white" className="my-[12px]">
           주섬 시작하기
         </Button>
-        <div className="mt-[20px] flex h-[300px] w-[163px] items-center justify-center rounded-[20px] bg-white sm:w-full sm:max-w-[582px]">
+        <div className="mt-[20px] flex h-[300px] w-[163px] items-center justify-center rounded-[20px] bg-white sm:w-full sm:max-w-[582px] md:hidden">
           모바일 화면
         </div>
       </Section>
@@ -39,7 +41,10 @@ export const Page = () => {
         </Section.Title>
         <UsageSwiper />
       </Section>
-      <Section color="primary-100" className="items-left pb-[48px] sm:px-20">
+      <Section
+        color="primary-100"
+        className="items-left pb-[48px] sm:px-20 md:flex-row"
+      >
         <Section.Title className="mb-4 ml-6">
           <Section.TitleSub className="sm:text-primary-500  sm:font-bold sm:text-[36px] sm:leading-[42px]">
             흩어진 정보들 모두
@@ -49,7 +54,7 @@ export const Page = () => {
             한 곳에서 봐요
           </Section.TitleMain>
         </Section.Title>
-        <div className="pl-6 sm:max-w-[582px]">
+        <div className="pl-6 sm:max-w-[582px] md:max-w-[774px]">
           {[
             "🍜 오사카 맛집",
             "👟 홈트 영상",
@@ -60,7 +65,7 @@ export const Page = () => {
           ].map((keyword) => (
             <span
               key={keyword}
-              className="bg-white text-[#555555] rounded-[50px] px-5 py-3 inline-block mr-4 mb-3 text-[16px] font-bold leading-[19px]"
+              className="bg-white text-[#555555] rounded-[50px] px-5 py-3 inline-block mr-4 mb-3 text-[16px] font-bold leading-[19px] md:text-[28px] md:py-5 md:px-[27px]"
             >
               {keyword}
             </span>

diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx
@@ -11,7 +11,7 @@ export const Button = ({ color, className, ...rest }: ButtonProps) => {
       className={classnames(
         color === "primary" && "bg-primary-500 text-white",
         color === "white" && "bg-white text-primary-500",
-        "rounded-[8px] px-[18px] py-[12px] text-[16px] font-bold leading-[19px] drop-shadow-[0_4px_4px_rgba(0,0,0,0.1)] sm:rounded-[12px] sm:px-5 sm:py-4 sm:text-[24px] sm:leading-[28px]",
+        "rounded-[8px] px-[18px] py-[12px] text-[16px] font-bold leading-[19px] drop-shadow-[0_4px_4px_rgba(0,0,0,0.1)] sm:rounded-[12px] sm:px-5 sm:py-4 sm:text-[24px] sm:leading-[28px] md:text-[28px] md:py-[22.5px] md:px-[49px]",
         className,
       )}
       {...rest}

diff --git a/src/shared/ui/logo.tsx b/src/shared/ui/logo.tsx
@@ -12,7 +12,10 @@ export const Logo = ({ classNames }: LogoProps) => {
       width={24}
       height={24}
       alt=""
-      className={classnames("w-[24px] h-[24px]", classNames)}
+      className={classnames(
+        "w-[24px] h-[24px] md:w-[32px] md:h-[32px]",
+        classNames,
+      )}
     />
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,6 +24,7 @@ export default {
     },
     screens: {
       sm: "822px",
+      md: "1240px",
     },
   },
   plugins: [],