반응형 스타일 구현

src/app/(routes)/notification/layout.tsx

@@ -6,7 +6,13 @@ export const metadata: Metadata = {
 }
 
 const NotificationLayout = ({ children }: { children: React.ReactNode }) => {
-  return <NotificationController>{children}</NotificationController>
+  return (
+    <NotificationController>
+      <div className="flex flex-col items-center">
+        <div className="flex w-full max-w-[1200px] flex-col">{children}</div>
+      </div>
+    </NotificationController>
+  )
 }
 
 export default NotificationLayout

src/app/(routes)/search/layout.tsx

@@ -0,0 +1,9 @@
+const SearchLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex w-full max-w-[1200px] flex-col">{children}</div>
+    </div>
+  )
+}
+
+export default SearchLayout

src/app/(routes)/space/[spaceId]/comment/page.tsx

@@ -94,7 +94,7 @@ const SpaceCommentPage = ({ params }: { params: { spaceId: number } }) => {
         />
       </section>
       <form
-        className="fixed bottom-0 z-10 w-full max-w-[500px] bg-bgColor"
+        className="fixed bottom-0 z-10 w-full bg-bgColor"
         onFocus={(e) => {
           if (!isLoggedIn) {
             modalOpen()

src/app/(routes)/space/[spaceId]/page.tsx

@@ -70,83 +70,85 @@ const SpacePage = ({ params }: { params: { spaceId: number } }) => {
           ))}
         </Tab>
       )}
-      <div className="flex flex-col px-4">
-        <div className="flex items-center justify-between py-3">
-          <div className="flex items-center gap-1.5">
-            <Dropdown
-              type="tag"
-              tags={tags?.map((tag) => tag.name)}
-              size="medium"
-              placement="left"
-              defaultIndex={tagIndex}
-              onChange={handleTagChange}
-            />
-            <Dropdown
-              type="link"
-              size="medium"
-              placement="left"
-              defaultIndex={sortIndex}
-              onChange={(e) => {
-                handleSortChange(e)
-              }}
-            />
-          </div>
-          <div className="flex gap-2">
-            {space?.isCanEdit && (
-              <Button
-                className="button button-white p-1.5"
-                onClick={editToggle}>
-                {isEdit ? (
-                  <EyeIcon className="h-5 w-5" />
-                ) : (
-                  <PencilSquareIcon className="h-5 w-5" />
-                )}
-              </Button>
-            )}
-            <div>
-              <Button
-                className={cls(
-                  'rounded-md rounded-r-none border border-slate3 p-1.5 text-sm font-bold text-white',
-                  view === 'list' ? 'bg-emerald5' : 'bg-slate4',
-                )}
-                onClick={handleChangeList}>
-                <ListBulletIcon className="h-5 w-5" />
-              </Button>
-              <Button
-                className={cls(
-                  'rounded-md rounded-l-none border border-l-0 border-slate3 p-1.5 text-sm font-bold text-white',
-                  view === 'card' ? 'bg-emerald5' : 'bg-slate4',
-                )}
-                onClick={handleChangeCard}>
-                <Squares2X2Icon className="h-5 w-5" />
-              </Button>
+      <div className="flex flex-col items-center">
+        <div className="flex w-full max-w-[1200px] flex-col px-4">
+          <div className="flex items-center justify-between py-3">
+            <div className="flex items-center gap-1.5">
+              <Dropdown
+                type="tag"
+                tags={tags?.map((tag) => tag.name)}
+                size="medium"
+                placement="left"
+                defaultIndex={tagIndex}
+                onChange={handleTagChange}
+              />
+              <Dropdown
+                type="link"
+                size="medium"
+                placement="left"
+                defaultIndex={sortIndex}
+                onChange={(e) => {
+                  handleSortChange(e)
+                }}
+              />
+            </div>
+            <div className="flex gap-2">
+              {space?.isCanEdit && (
+                <Button
+                  className="button button-white p-1.5"
+                  onClick={editToggle}>
+                  {isEdit ? (
+                    <EyeIcon className="h-5 w-5" />
+                  ) : (
+                    <PencilSquareIcon className="h-5 w-5" />
+                  )}
+                </Button>
+              )}
+              <div>
+                <Button
+                  className={cls(
+                    'rounded-md rounded-r-none border border-slate3 p-1.5 text-sm font-bold text-white',
+                    view === 'list' ? 'bg-emerald5' : 'bg-slate4',
+                  )}
+                  onClick={handleChangeList}>
+                  <ListBulletIcon className="h-5 w-5" />
+                </Button>
+                <Button
+                  className={cls(
+                    'rounded-md rounded-l-none border border-l-0 border-slate3 p-1.5 text-sm font-bold text-white',
+                    view === 'card' ? 'bg-emerald5' : 'bg-slate4',
+                  )}
+                  onClick={handleChangeCard}>
+                  <Squares2X2Icon className="h-5 w-5" />
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-        {space?.spaceId && (
-          <LinkList
-            spaceId={space?.spaceId}
-            read={space?.isReadMarkEnabled}
-            summary={space?.isLinkSummarizable}
-            edit={isEdit}
-            type={view}
-            fetchFn={fetchGetLinks}
-            sort={sort ?? 'created_at'}
-            tagId={Number(tag) || undefined}
-            tags={tags ?? []}
-            isCanEdit={space.isCanEdit}
-            isMember={
-              !!space?.memberDetailInfos.find(
-                (member) => member.memberId === currentUser?.memberId,
-              )
-            }
-            refetchTags={refetchTags}
+          {space?.spaceId && (
+            <LinkList
+              spaceId={space?.spaceId}
+              read={space?.isReadMarkEnabled}
+              summary={space?.isLinkSummarizable}
+              edit={isEdit}
+              type={view}
+              fetchFn={fetchGetLinks}
+              sort={sort ?? 'created_at'}
+              tagId={Number(tag) || undefined}
+              tags={tags ?? []}
+              isCanEdit={space.isCanEdit}
+              isMember={
+                !!space?.memberDetailInfos.find(
+                  (member) => member.memberId === currentUser?.memberId,
+                )
+              }
+              refetchTags={refetchTags}
+            />
+          )}
+          <SpaceMemberList
+            spaceId={params.spaceId}
+            members={space?.memberDetailInfos}
           />
-        )}
-        <SpaceMemberList
-          spaceId={params.spaceId}
-          members={space?.memberDetailInfos}
-        />
+        </div>
       </div>
     </>
   )

src/app/(routes)/user/[userId]/layout.tsx

@@ -23,7 +23,9 @@ const UserLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <ProfileTap />
-      {children}
+      <div className="flex flex-col items-center">
+        <div className="flex w-full max-w-[1200px] flex-col">{children}</div>
+      </div>
     </>
   )
 }

src/app/layout.tsx

@@ -62,7 +62,7 @@ export default function RootLayout({
             <Providers>
               <div
                 id="root"
-                className="relative	mx-auto min-h-screen w-full max-w-[500px] shadow-xl">
+                className="relative	mx-auto min-h-screen w-full pb-4 shadow-xl">
                 <Header />
                 <main className="pt-[53px]">{children}</main>
               </div>

src/app/page.tsx

@@ -29,31 +29,58 @@ export default function Home() {
     <>
       <section className="px-4 pb-8">
         <h2 className="py-4 font-bold text-gray9">인기있는 링크</h2>
-        {links && (
-          <Swiper
-            slidesPerView={2.1}
-            spaceBetween={16}
-            freeMode={true}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[FreeMode]}
-            className="mySwiper">
-            {links.map((link: PopularLinkResBody) => (
-              <SwiperSlide key={link.linkId}>
-                <LinkItem
-                  linkId={link.linkId}
-                  title={link.title}
-                  url={link.url}
-                  tagName={link.tagName}
-                  tagColor={link.tagColor as ChipColors}
-                  isInitLiked={link.isLiked}
-                  likeInitCount={link.likeCount}
-                  type="card"
-                />
-              </SwiperSlide>
-            ))}
-          </Swiper>
+        {
+          links && (
+            <Swiper
+              slidesPerView={2.1}
+              breakpoints={{
+                640: {
+                  slidesPerView: 2.1,
+                },
+                768: {
+                  slidesPerView: 3.1,
+                },
+                1024: {
+                  slidesPerView: 4.1,
+                },
+                1280: {
+                  slidesPerView: 5.1,
+                },
+                1536: {
+                  slidesPerView: 6.1,
+                },
+                1920: {
+                  slidesPerView: 7.1,
+                },
+                2148: {
+                  slidesPerView: 8.1,
+                },
+                2324: {
+                  slidesPerView: 9.1,
+                },
+              }}
+              spaceBetween={16}
+              freeMode={true}
+              pagination={{
+                clickable: true,
+              }}
+              modules={[FreeMode]}
+              className="mySwiper">
+              {links.map((link: PopularLinkResBody) => (
+                <SwiperSlide key={link.linkId}>
+                  <LinkItem
+                    linkId={link.linkId}
+                    title={link.title}
+                    url={link.url}
+                    tagName={link.tagName}
+                    tagColor={link.tagColor as ChipColors}
+                    isInitLiked={link.isLiked}
+                    likeInitCount={link.likeCount}
+                    type="card"
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
         )}
       </section>
       <section>

src/components/FloatingButton/FloatingButton.tsx

@@ -11,7 +11,7 @@ const FloatingButton = () => {
 
   return (
     <>
-      <div className="fixed bottom-10 left-1/2 right-0 z-40 flex h-0 w-full max-w-[500px] -translate-x-1/2 items-center justify-end pr-4 font-bold text-gray9">
+      <div className="fixed bottom-10 left-1/2 right-0 z-40 flex h-0 w-full -translate-x-1/2 items-center justify-end pr-4 font-bold text-gray9">
         <button
           onClick={() =>
             isLoggedIn ? router.push(`/space/create`) : modalOpen()

src/components/Login/Login.tsx

@@ -32,17 +32,19 @@ const Login = () => {
         <div>
           <LinkIcon className="h-10 w-10 text-emerald5" />
         </div>
-        <div className="text-4xl font-normal leading-10 text-emerald5">
+        <div className="mb-4 text-4xl font-normal leading-10 text-emerald5">
           LinkHub
         </div>
+        <Button
+          type="button"
+          onClick={() => router.push('/kakaoLogin')}
+          className="button button-md flex w-full max-w-[500px] items-center justify-center border-none bg-yellow-400 px-3 py-2.5">
+          <ChatBubbleOvalLeftIcon className="h-6 w-6 text-gray-800" />
+          <div className="text-sm font-bold text-gray-800">
+            카카오로 시작하기
+          </div>
+        </Button>
       </div>
-      <Button
-        type="button"
-        onClick={() => router.push('/kakaoLogin')}
-        className="button button-md flex w-full items-center justify-center border-none bg-yellow-400 px-3 py-2.5">
-        <ChatBubbleOvalLeftIcon className="h-6 w-6 text-gray-800" />
-        <div className="text-sm font-bold text-gray-800">카카오로 시작하기</div>
-      </Button>
     </div>
   )
 }

src/components/Space/SpaceForm.tsx

@@ -116,7 +116,7 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
             <Image
               className="h-[188px] object-cover"
               src={thumnail}
-              width={500}
+              width={5000}
               height={188}
               alt="spaceImage"
             />

src/components/common/Header/Header.tsx

@@ -28,7 +28,7 @@ const Header = () => {
 
   return (
     <>
-      <div className="fixed z-50 flex w-full max-w-[500px] items-center justify-between border-b border-slate-100 bg-bgColor px-4 py-2.5 dark:border-slate-800">
+      <div className="fixed z-50 flex w-full items-center justify-between border-b border-slate-100 bg-bgColor px-4 py-2.5 dark:border-slate-800">
         <div className="flex items-center justify-center">
           <Button>
             <Link href="/">

src/components/common/MainSpaceList/MainSpaceList.tsx

@@ -6,7 +6,9 @@ import useMainSpacesQuery from '@/components/SpaceList/hooks/useMainSpacesQuery'
 import { CATEGORIES_RENDER } from '@/constants'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchSpaceReqBody, SpaceResBody } from '@/types'
+import Button from '../Button/Button'
 import DeferredComponent from '../DeferedComponent/DeferedComponent'
+import { MORE_TEXT } from '../LinkList/constants'
 import Space from '../Space/Space'
 import Spinner from '../Spinner/Spinner'
 
@@ -54,7 +56,9 @@ const MainSpaceList = ({
     </DeferredComponent>
   ) : (
     <>
-      <ul className="flex flex-col gap-y-2 px-4 pt-2">
+      <ul
+        className=" mb-4 grid gap-4 gap-y-2 px-4 pt-2"
+        style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
         {spaces?.pages[0].responses.length
           ? spaces?.pages.map((group, i) => (
               <Fragment key={i}>
@@ -80,9 +84,17 @@ const MainSpaceList = ({
                 {NONE_SEARCH_RESULT}
               </div>
             )}
-
-        <div ref={target}></div>
       </ul>
+      {hasNextPage && (
+        <div className="flex justify-center">
+          <div
+            ref={target}
+            className="button-md button-round button-white flex w-40 cursor-pointer border"
+            onClick={() => fetchNextPage()}>
+            {MORE_TEXT}
+          </div>
+        </div>
+      )}
     </>
   )
 }