Refactor: 링크 페이지 UI 개선

components/Layout/CardsLayout.tsx

@@ -6,7 +6,7 @@ interface CardsLayoutProps {
 
 const CardsLayout = ({ children }: CardsLayoutProps) => {
   return (
-    <div className="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-[20px] w-full">
+    <div className="flex flex-wrap items-center gap-5 md:gap-6 lg:gap-[20px] w-full">
       {children}
     </div>
   );

components/Layout/Container.tsx

@@ -24,7 +24,7 @@ const Container = ({ children }: ContainerProps) => {
   }, []);
 
   return (
-    <div className="w-full max-w-[1125px] mx-auto p-[10px] md:p-10 lg:p-10 px-[32.5px]">
+    <div className="w-full lg:max-w-[1060px] md:max-w-[704px] sm:max-w-[325px] mx-auto">
       {children}
       {showBtn && <ToTopBtn />}
     </div>

components/Layout/Footer.tsx

@@ -3,8 +3,8 @@ import SocialLinks from "../SocialLinks";
 
 const Footer = () => {
   return (
-    <footer className="bg-black200 pt-8 sm:px-8 pb-[108px] md:px-[104px] lg:px-[104px]">
-      <nav className="relative flex justify-between">
+    <footer className="bg-black200 pt-8 sm:px-8 pb-[108px] md:px-[104px] lg:px-[104px] flex justify-center">
+      <nav className="relative w-full lg:max-w-[1520px] md:max-w-[800px] sm:max-w-[326px] flex justify-between">
         <p className="text-gray700 sm:absolute sm:top-[60px] leading-[18.4px]">
           ©codeit - 2023
         </p>

components/Layout/Header.tsx

@@ -5,8 +5,8 @@ import HeaderMenu from "../HeaderMenu";
 
 const Header = () => {
   return (
-    <header className="bg-gray100 py-[13px] px-[32px] md:py-[33px] md:px-[200px] lg:py-[33px] lg:px-[200px]">
-      <div className="flex justify-between items-center max-w-[1520px]">
+    <header className="bg-gray100 py-[13px] px-[30px] flex justify-center">
+      <div className="flex justify-between items-center w-full lg:max-w-[1520px] md:max-w-[800px] sm:max-w-[326px]">
         <h1 className="w-[88.67px] h-[16px] md:w-[133px] md:h-[24px] lg:w-[133px] lg:h-[24px]">
           <Link href={"/"}>
             <Image src={Logo} width={133} height={24} alt="로고" />

components/Link/AddLinkInput.tsx

@@ -35,18 +35,22 @@ const AddLinkInput = ({ folderList }: FolderListData) => {
   };
 
   return (
-    <div className="flex bg-white gap-[12px] items-center w-[800px] h-[69px] py-[16px] px-[20px] border border-blue-500 rounded-[10px] md:w-[704px] sm:w-[325px] sm:h-[53px] transition-all">
+    <div className="flex bg-white items-center w-full lg:max-w-[800px] md:max-w-[704px] sm:max-w-[325px] h-[69px] lg:px-5 md:px-5 sm:px-[10px] border border-blue-500 rounded-[10px] md:w-[704px] sm:w-[325px] sm:h-[53px] transition-all">
       <Image src="/icons/link.svg" width={20} height={20} alt="link icon" />
       <input
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         value={link}
         placeholder="링크를 추가해 보세요."
-        className="flex-grow"
+        className="flex-grow lg:ml-3 md:ml-3 sm:ml-[8px]"
       />
-      <div onClick={handleClick}>
-        <SubmitButton className="w-[80px] h-[37px]">추가하기</SubmitButton>
-      </div>
+      <SubmitButton
+        onClick={handleClick}
+        className="w-[80px] h-[37px] text-[14px]"
+      >
+        추가하기
+      </SubmitButton>
+
       {isOpen && <Modal />}
     </div>
   );

components/Search/SearchInput.tsx

@@ -1,8 +1,6 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import toast from "react-hot-toast";
-import toastMessages from "@/lib/toastMessage";
 
 export const SearchInput = () => {
   const router = useRouter();

pages/link/index.tsx

@@ -81,8 +81,8 @@ const LinkPage = ({
       <div className="bg-gray100 w-full h-[219px] flex justify-center items-center">
         <AddLinkInput folderList={folderList} />
       </div>
-      <main className="mt-[40px] relative">
-        <Container>
+      <Container>
+        <main className="mt-[40px] relative">
           <SearchInput />
           {search && <SearchResultMessage message={search} />}
           <div className="flex justify-between mt-[40px]">
@@ -111,12 +111,12 @@ const LinkPage = ({
           ) : (
             <RenderEmptyLinkMessage />
           )}
-        </Container>
-        {isOpen && <Modal />}
-        {isMobile && (
-          <AddFolderButton setFolderList={setFolderList} isModal={true} />
-        )}
-      </main>
+        </main>
+      </Container>
+      {isOpen && <Modal />}
+      {isMobile && (
+        <AddFolderButton setFolderList={setFolderList} isModal={true} />
+      )}
     </>
   );
 };