[스타일 수정] 페이지 Root 위치값 (#352)

* feat(atom): RootBox 추가

* feat: RootBox 적용

Author: MINJE-98

src/components/common/atom/box/RootBox.tsx

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+
+interface RootBoxProps extends HTMLAttributes<HTMLDivElement> {}
+
+const RootBox = ({ children, ...props }: RootBoxProps) => (
+  <div {...props} className="m-auto max-w-[1280px] items-center mt-20 px-5">
+    {children}
+  </div>
+);
+
+export default RootBox;

src/pages/404.tsx

@@ -1,15 +1,16 @@
+import RootBox from "@Components/common/atom/box/RootBox";
 import { NextPage } from "next";
 
 const NotFoundPage: NextPage = () => {
   return (
-    <div className="md:mx-20 2xl:mx-60">
+    <RootBox>
       <article className="text-center ">
         <header>
           <h1>404</h1>
         </header>
         <p>페이지를 찾을 수 없습니다.</p>
       </article>
-    </div>
+    </RootBox>
   );
 };
 

src/pages/blog/[username].tsx

@@ -7,6 +7,7 @@ import { UserInfoProfile, PostCardList } from "@Components/modules/blog";
 import useGetStringTypeToRouter from "@Hooks/router/useGetStringTypeToRouter";
 import api from "@Library/api";
 import { userBlogDetailSeo } from "@Library/utility/seo";
+import RootBox from "@Components/common/atom/box/RootBox";
 
 interface BlogPagePageProps {
   seo: DefaultSeoProps;
@@ -19,7 +20,7 @@ const BlogPage: NextPage<BlogPagePageProps> = ({ seo }: BlogPagePageProps) => {
       <NextSeo {...seo} />
       <CategorySortButtonList userId={1} />
 
-      <div className="m-auto max-w-[1280px] h-full mt-20 items-center px-5">
+      <RootBox>
         <div className="grid justify-center grid-flow-row p-3 md:justify-between md:grid-flow-col">
           <div className="w-full max-w-[450px]">
             <UserInfoProfile userId={1} />
@@ -54,7 +55,7 @@ const BlogPage: NextPage<BlogPagePageProps> = ({ seo }: BlogPagePageProps) => {
             userId={1}
           />
         </div>
-      </div>
+      </RootBox>
     </div>
   );
 };

src/pages/index.tsx

@@ -13,6 +13,7 @@ import {
 } from "@Library/constants/post";
 import useGetStringTypeToRouter from "@Hooks/router/useGetStringTypeToRouter";
 import DateScopeLink from "@Components/common/molecules/link/DateScopeLink";
+import RootBox from "@Components/common/atom/box/RootBox";
 
 const Home: NextPage = () => {
   const categoryName = useGetStringTypeToRouter("category");
@@ -21,7 +22,7 @@ const Home: NextPage = () => {
     <div>
       <IntroThumbnail />
       <CategorySortButtonList />
-      <div className="m-auto max-w-[1280px] items-center px-5">
+      <RootBox>
         <div className="my-10">
           <CardTitle
             title={
@@ -62,7 +63,7 @@ const Home: NextPage = () => {
             />
           </div>
         </div>
-      </div>
+      </RootBox>
     </div>
   );
 };

src/pages/post/[postId].tsx

@@ -10,6 +10,7 @@ import useGetPostDetailQuery from "@Hooks/react-query/post/useGetPostDetailQuery
 import useGetStringTypeToRouter from "@Hooks/router/useGetStringTypeToRouter";
 import api from "@Library/api";
 import { notFoundPostSeo, postDefaultSeo } from "@Library/utility/seo";
+import RootBox from "@Components/common/atom/box/RootBox";
 
 interface PostDetailPageProps {
   seo: DefaultSeoProps;
@@ -31,32 +32,34 @@ const PostDetailPage: NextPage<PostDetailPageProps> = ({
   return (
     <div>
       <DefaultSeo {...newSeo} />
-      <div>
-        <article className="w-full">
-          <PostHeader post={post} />
-          <figure>
-            <PostThumbnail
-              id={post.id}
-              thumbnailUrl={post.thumbnailUrl}
-              title={post.title}
-            />
-          </figure>
-          <div className="mt-5 lg:grid lg:grid-flow-col lg:space-x-5 lg:grid-cols-3">
-            <div className="lg:col-span-2">
-              <TiptapViewer content={JSON.parse(post.content)} />
-            </div>
-            <section>
-              <div className="w-full rounded h-fit bg-neutral-100 dark:bg-neutral-800">
-                <PostWriter userInfo={post.user} />
+      <RootBox>
+        <div>
+          <article className="w-full">
+            <PostHeader post={post} />
+            <figure>
+              <PostThumbnail
+                id={post.id}
+                thumbnailUrl={post.thumbnailUrl}
+                title={post.title}
+              />
+            </figure>
+            <div className="mt-5 lg:grid lg:grid-flow-col lg:space-x-5 lg:grid-cols-3">
+              <div className="lg:col-span-2">
+                <TiptapViewer content={JSON.parse(post.content)} />
               </div>
-            </section>
-          </div>
-        </article>
-      </div>
-      <div className="mt-5">
-        <PostLike postId={post.id} count={post.like} />
-        <Comment postId={post.id} />
-      </div>
+              <section>
+                <div className="w-full rounded h-fit bg-neutral-100 dark:bg-neutral-800">
+                  <PostWriter userInfo={post.user} />
+                </div>
+              </section>
+            </div>
+          </article>
+        </div>
+        <div className="mt-5">
+          <PostLike postId={post.id} count={post.like} />
+          <Comment postId={post.id} />
+        </div>
+      </RootBox>
     </div>
   );
 };

src/pages/settings.tsx

@@ -16,6 +16,7 @@ import useHandleSubmit from "@Hooks/pages/settings/hooks/useHandleSubmit";
 import useGetMeQuery from "@Hooks/react-query/user/useGetMeQuery";
 
 import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+import RootBox from "@Components/common/atom/box/RootBox";
 
 const SettingPage: NextPage = () => {
   const router = useRouter();
@@ -34,7 +35,7 @@ const SettingPage: NextPage = () => {
   if (userInfo.isLoading) return <h1>유저 설정 로딩중..</h1>;
 
   return (
-    <div className="m-auto max-w-[1000px] h-full p-10 items-center px-5">
+    <RootBox>
       <Head>
         <title>설정</title>
       </Head>
@@ -51,7 +52,7 @@ const SettingPage: NextPage = () => {
           </form>
         </FormProvider>
       </div>
-    </div>
+    </RootBox>
   );
 };
 

src/pages/writer.tsx

@@ -14,12 +14,13 @@ import { TITLE_WRITER } from "@Library/constants/writer";
 import useHandleSummit from "@Hooks/pages/writer/hooks/useHandleSummit";
 
 import WriterFormTypes from "@Components/modules/writer/interface/writerFormTypes";
+import RootBox from "@Components/common/atom/box/RootBox";
 
 const WriterPage: NextPage = () => {
   const method = useForm<WriterFormTypes>();
   const onSummit = useHandleSummit();
   return (
-    <div className="m-auto max-w-[1000px] h-full p-10 items-center px-5">
+    <RootBox>
       <Head>
         <title>{TITLE_WRITER.ko}</title>
       </Head>
@@ -37,7 +38,7 @@ const WriterPage: NextPage = () => {
           </div>
         </form>
       </FormProvider>
-    </div>
+    </RootBox>
   );
 };