✨ MaxWidthWrapper css 속성 변경 및 각 페이지 적용

team-nabi · Nov 21, 2023 · 42111bd · 42111bd
1 parent f15848a
commit 42111bd
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 28 deletions.
diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { CategoryObjs, PriceRangeObjs } from '@/types/card'
@@ -50,7 +49,7 @@ const CardListContent = () => {
   console.log('content', data)
 
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-between items-center mb-6">
         <SearchInput setCardTitle={setCardTitle} />
         <FilterFormDialog
@@ -71,7 +70,7 @@ const CardListContent = () => {
         </ExceptionBoundary>
       </div>
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default CardListContent
diff --git a/src/app/(root)/(routes)/cards/page.tsx b/src/app/(root)/(routes)/cards/page.tsx
@@ -1,15 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import CardListContent from './components/card-list-content'
 
 interface CardListPageProps {}
 
 const CardListPage: FunctionComponent<CardListPageProps> = ({}) => {
   return (
-    <div>
+    <MaxWidthWrapper>
       <PageTitle title="물건 목록" />
       <CardListContent />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

diff --git a/...)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/...)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, Fragment } from 'react'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList'
@@ -27,7 +26,7 @@ const MyTradeHistoryListContent = () => {
   const isEmpty = data?.pages[0].data.historyList.length === 0
 
   return (
-    <MaxWidthWrapper>
+    <>
       <div>
         <ExceptionBoundary
           isLoading={isLoading}
@@ -40,7 +39,7 @@ const MyTradeHistoryListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MyTradeHistoryListContent
diff --git a/src/app/(root)/(routes)/mypage/histories/page.tsx b/src/app/(root)/(routes)/mypage/histories/page.tsx
@@ -1,17 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import MyTradeHistoryList from './components/my-trade-history-list-content'
 
 interface MyHistoryListPageProps {}
 
 const MyHistoryListPage: FunctionComponent<MyHistoryListPageProps> = ({}) => {
   return (
-    <div>
-      <div className="mb-8">
-        <PageTitle title="내 거래 완료 내역" />
-      </div>
+    <MaxWidthWrapper>
+      <PageTitle title="내 거래 완료 내역" />
       <MyTradeHistoryList />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx
@@ -32,7 +32,7 @@ const MyCardListContent = () => {
 
   const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-center items-center my-12">
         <TradeStatusTabs
           tradeStatus={tradeStatus}
@@ -51,7 +51,7 @@ const MyCardListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MyCardListContent
diff --git a/src/app/(root)/(routes)/mypage/mycards/page.tsx b/src/app/(root)/(routes)/mypage/mycards/page.tsx
@@ -1,15 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import MyCardListContent from './components/my-card-list-content'
 
 interface MyCardListPageProps {}
 
 const MyCardListPage: FunctionComponent<MyCardListPageProps> = ({}) => {
   return (
-    <div>
+    <MaxWidthWrapper>
       <PageTitle title="내 물건 페이지" />
       <MyCardListContent />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

diff --git a/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx b/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { DirectionType, SuggestionType } from '@/types/suggestion'
@@ -35,7 +34,7 @@ const MySuggestionListContent = () => {
 
   const isEmpty = data?.pages[0].data.suggestionList.length === 0
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-center items-center my-12">
         <SuggestionStatusTabs
           setSuggestionTypeState={setSuggestionTypeState}
@@ -58,7 +57,7 @@ const MySuggestionListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MySuggestionListContent
diff --git a/src/app/(root)/(routes)/mypage/suggestions/[myCardId]/page.tsx b/src/app/(root)/(routes)/mypage/suggestions/[myCardId]/page.tsx
@@ -22,13 +22,11 @@ const SuggestCheckListPage = async ({
   const myCard = await getMyCardInfo(myCardId)
 
   return (
-    <div>
-      <MaxWidthWrapper>
-        <PageTitle title="제안 확인" />
-        <MyCardDescriptionSection card={myCard as CardDetail} />
-        <MySuggestionListContent />
-      </MaxWidthWrapper>
-    </div>
+    <MaxWidthWrapper>
+      <PageTitle title="제안 확인" />
+      <MyCardDescriptionSection card={myCard as CardDetail} />
+      <MySuggestionListContent />
+    </MaxWidthWrapper>
   )
 }
 

diff --git a/src/components/domain/max-width-wrapper/MaxWidthWrapper.tsx b/src/components/domain/max-width-wrapper/MaxWidthWrapper.tsx
@@ -3,7 +3,7 @@ const MaxWidthWrapper = ({
 }: {
   children: JSX.Element[] | JSX.Element
 }) => {
-  return <div className="max-w-[450px] mx-auto">{children}</div>
+  return <div className="w-4/5 mx-auto">{children}</div>
 }
 
 export default MaxWidthWrapper