Design: 글로벌 스타일 수정에 따른 전체 페이지 스타일 조정

package.json

@@ -24,6 +24,7 @@
     }
   },
   "dependencies": {
+    "@babel/runtime": "^7.26.0",
     "@egjs/react-grid": "^1.16.0",
     "@hello-pangea/dnd": "^17.0.0",
     "@mui/material": "^5.15.9",

src/app/(home)/_components/FeedLists.css.ts

@@ -4,13 +4,17 @@ import { vars } from '@/styles/__theme.css';
 export const listBackground = createVar();
 
 export const wrapperOuter = style({
-  padding: '0 16px 30px',
+  padding: '0 16px 84px 16px',
   marginTop: '12px',
 
   display: 'flex',
   flexDirection: 'column',
 });
 
+export const feedList = style({
+  listStyle: 'none',
+});
+
 export const titleWrapper = style({
   marginBottom: '26px',
 

src/app/(home)/_components/FeedLists.tsx

@@ -73,9 +73,6 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) {
   //     </section>
   //   );
   // }
-  console.log(category);
-
-  console.log(feedLists);
 
   return (
     <section className={styles.wrapperOuter}>
@@ -87,7 +84,7 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) {
             feedLists?.map((item, index) => {
               return (
                 <Link href={`/list/${item.id}`} key={item.id}>
-                  <li>
+                  <li className={styles.feedList}>
                     <FeedListItem item={item} index={index} />
                   </li>
                 </Link>

src/app/(home)/_components/TopicsRecommendation.css.ts

@@ -37,6 +37,10 @@ export const itemsWrapper = style({
   },
 });
 
+export const topicList = style({
+  listStyle: 'none',
+});
+
 export const topic = style({
   padding: '14px',
 

src/app/(home)/_components/TopicsRecommendation.tsx

@@ -16,7 +16,7 @@ function TopicsRecommendation() {
       <ul className={styles.itemsWrapper}>
         {TopicsData.map((el, idx) => {
           return (
-            <li key={idx}>
+            <li key={idx} className={styles.topicList}>
               <TopicItem title={el} />
             </li>
           );

src/app/(home)/_components/TrendingLists.css.ts

@@ -57,7 +57,9 @@ export const testItem = style({
   height: '100%',
 });
 
-export const slide = style({});
+export const slide = style({
+  maxWidth: 430,
+});
 
 export const itemWrapper = style({
   width: '100%',
@@ -166,6 +168,8 @@ export const top3ItemNoImage = style({
   backgroundColor: '#F5FAFF',
   color: '#3D95FF',
   borderRadius: '20px',
+
+  listStyle: 'none',
 });
 
 export const top3ItemWithImage = style({
@@ -174,6 +178,8 @@ export const top3ItemWithImage = style({
   color: '#ffffff',
   borderRadius: '20px',
   backgroundColor: '#F5FAFF4D',
+
+  listStyle: 'none',
 });
 
 export const top3Wrapper = style({

src/app/(home)/_components/TrendingLists.tsx

@@ -18,14 +18,14 @@ import { vars } from '@/styles/theme.css';
 import { TrendingListsSkeleton } from '../../../components/exploreComponents/Skeleton';
 
 function TrendingList() {
-  const { data: trendingLists, isFetching } = useQuery({
-    queryKey: [QUERY_KEYS.getTrendingLists],
-    queryFn: () => getTrendingLists(),
-  });
+  // 오류로인해 주석처리 해 둠
+  // const { data: trendingLists, isFetching } = useQuery({
+  //   queryKey: [QUERY_KEYS.getTrendingLists],
+  //   queryFn: () => getTrendingLists(),
+  // });
 
   const SWIPER_STYLE = useMemo(
     () => ({
-      width: '100vw',
       height: '280px',
       padding: '10px 0',
     }),
@@ -40,9 +40,9 @@ function TrendingList() {
     []
   );
 
-  if (isFetching) {
-    return <TrendingListsSkeleton />;
-  }
+  // if (isFetching) {
+  //   return <TrendingListsSkeleton />;
+  // }
 
   return (
     <section className={styles.wrapper}>

src/app/(home)/layout.css.ts

@@ -0,0 +1,9 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  maxWidth: 430,
+  height: '100vh',
+  margin: 'auto',
+  backgroundColor: vars.color.bggray,
+});

src/app/(home)/layout.tsx

@@ -3,17 +3,18 @@
 import { ReactNode } from 'react';
 
 import Header from '@/app/(home)/_components/Header';
+import * as styles from './layout.css';
 
 interface HomeLayoutProps {
   children: ReactNode;
 }
 
 function HomeLayout({ children }: HomeLayoutProps) {
   return (
-    <>
+    <div className={styles.wrapper}>
       <Header />
       {children}
-    </>
+    </div>
   );
 }
 

src/app/(home)/page.css.ts

@@ -1,7 +1,9 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
-  marginBottom: 84,
-
+  maxWidth: 430,
+  margin: 'auto',
+  background: vars.color.bggray,
   position: 'relative',
 });

src/app/account/page.css.ts

@@ -3,13 +3,18 @@ import * as fonts from '@/styles/font.css';
 import { vars } from '@/styles/theme.css';
 
 export const container = style({
+  height: '100vh',
+
   marginTop: 18,
+  maxWidth: 430,
+  margin: 'auto',
 
   display: 'flex',
   flexDirection: 'column',
   gap: 12,
 
   padding: '0 1.6rem',
+  backgroundColor: vars.color.bggray,
 });
 
 export const section = style({

src/app/account/page.tsx

@@ -1,7 +1,8 @@
 'use client';
+
 import { useRouter } from 'next/navigation';
 import useBooleanOutput from '@/hooks/useBooleanOutput';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import useMoveToPage from '@/hooks/useMoveToPage';
 
 import NavigateIcon from '/public/icons/chevron_right.svg';
@@ -12,7 +13,6 @@ import MessageIcon from '/public/icons/message_square.svg';
 import { useLanguage } from '@/store/useLanguage';
 import { accountLocale } from '@/app/account/locale';
 import LogoutModal from './_components/LogoutModal';
-import LanguageDropdown from './_components/LanguageDropdown';
 import * as styles from './page.css';
 import SegmentedControl from '@/components/SegmentedControl/SegmentedControl';
 
@@ -32,65 +32,63 @@ export default function AccountPage() {
   };
 
   return (
-    <>
+    <div className={styles.container}>
       <Header
         left="back"
         leftClick={() => {
           router.back();
         }}
         title={accountLocale[language].settings}
       />
-      <div className={styles.container}>
-        <section className={styles.section}>
-          <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
-            <div className={styles.titleDiv}>
-              <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
-              {accountLocale[language].profileSetting}
-            </div>
-            <NavigateIcon width={16} height={16} />
+      <section className={styles.section}>
+        <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
+          <div className={styles.titleDiv}>
+            <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
+            {accountLocale[language].profileSetting}
           </div>
-        </section>
-        <section className={styles.section}>
-          <div className={styles.baseDiv}>
-            <div className={styles.titleDiv}>
-              <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
-              {accountLocale[language].language}
-            </div>
-            {/** TODO: <LanguageDropdown /> 제거하기 */}
-            <SegmentedControl
-              options={[accountLocale[language].korean, accountLocale[language].english]}
-              selected={language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
-              handleSelect={handleSelectLanguage}
-            />
+          <NavigateIcon width={16} height={16} />
+        </div>
+      </section>
+      <section className={styles.section}>
+        <div className={styles.baseDiv}>
+          <div className={styles.titleDiv}>
+            <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
+            {accountLocale[language].language}
           </div>
-        </section>
-        <section className={styles.section}>
-          <div
-            className={styles.buttonDiv}
-            onClick={() => {
-              handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
-            }}
-          >
-            <div className={styles.titleDiv}>
-              <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
-              {accountLocale[language].contact}
-            </div>
-            <NavigateIcon width={16} height={16} />
+          {/** TODO: <LanguageDropdown /> 제거하기 */}
+          <SegmentedControl
+            options={[accountLocale[language].korean, accountLocale[language].english]}
+            selected={language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
+            handleSelect={handleSelectLanguage}
+          />
+        </div>
+      </section>
+      <section className={styles.section}>
+        <div
+          className={styles.buttonDiv}
+          onClick={() => {
+            handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
+          }}
+        >
+          <div className={styles.titleDiv}>
+            <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
+            {accountLocale[language].contact}
           </div>
-          <div
-            className={styles.buttonDiv}
-            onClick={() => {
-              handleDivLinkClick('https://tally.so/r/w51Dpv');
-            }}
-          >
-            <div className={styles.titleDiv}>
-              <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
-              {accountLocale[language].sendFeedback}
-            </div>
-            <NavigateIcon width={16} height={16} />
+          <NavigateIcon width={16} height={16} />
+        </div>
+        <div
+          className={styles.buttonDiv}
+          onClick={() => {
+            handleDivLinkClick('https://tally.so/r/w51Dpv');
+          }}
+        >
+          <div className={styles.titleDiv}>
+            <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
+            {accountLocale[language].sendFeedback}
           </div>
-        </section>
-      </div>
+          <NavigateIcon width={16} height={16} />
+        </div>
+      </section>
       <div className={styles.accountFooter}>
         <button className={styles.textButton} onClick={handleSetOn}>
           {accountLocale[language].logout}
@@ -101,6 +99,6 @@ export default function AccountPage() {
         </button>
         {isOn && <LogoutModal handleSetOff={handleSetOff} />}
       </div>
-    </>
+    </div>
   );
 }

src/app/account/profile/page.css.ts

@@ -1,15 +1,24 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const page = style({
+  margin: 'auto',
+  maxWidth: 430,
+  minHeight: '100vh',
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+
+  backgroundColor: vars.color.bggray,
 });
 
 export const content = style({
   width: '100%',
   padding: '18px 16px',
 
+  flexGrow: 1,
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

src/app/account/profile/page.tsx

@@ -13,7 +13,7 @@ import toastMessage from '@/lib/constants/toastMessage';
 import { useUser } from '@/store/useUser';
 import getUserOne from '@/app/_api/user/getUserOne';
 import updateProfile from '@/app/_api/user/updateProfile';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import BlueButton from '@/components/BlueButton/BlueButton';
 
 import ProfileForm from './_components/ProfileForm';

src/app/account/withdraw/_component/WithdrawalHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import Header from '@/components/Header/__Header';
+import Header from '@/components/Header/Header';
 import { accountLocale } from '@/app/account/locale';
 import { useLanguage } from '@/store/useLanguage';
 

src/app/account/withdraw/page.css.ts

@@ -1,9 +1,13 @@
-import { vars } from '@/styles/__theme.css';
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const page = style({
   height: '100vh',
   overflow: 'hidden',
+
+  maxWidth: 430,
+  margin: 'auto',
+  backgroundColor: vars.color.bggray,
 });
 
 export const main = style({

src/app/auth/redirect/kakao/page.tsx

@@ -73,6 +73,8 @@ export default function KakaoRedirectPage() {
         alignItems: 'center',
         justifyContent: 'center',
         height: '100vh',
+        maxWidth: 430,
+        margin: 'auto',
       }}
     >
       <Loading />