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

* Design: 글로벌 스타일 수정에 따른 홈(home) 페이지 스타일 수정 * Design: 글로벌 스타일 수정에 따른 마이피드 페이지, 콜렉션 페이지 스타일 수정 * Design: 글로벌 스타일 수정에 따른 설정페이지, 프로필수정 페이지, 탈퇴페이지 스타일 수정 * Design: 글로벌 스타일 수정에 따른 요청 주제 페이지, 탈퇴 알림페이지, 온보딩 페이지, 알림페이지 스타일 수정 * Design: 리스트 상세페이지, 히스토리 페이지 max-width, height 수정 * Design: 인트로페이지, 홈페이지 일부(트랜딩 리스트, 추천 리스터), 콜렉션 페이지 일부 스타일 수정 * Design: 팔로잉/팔로워 페이지 넓이, 높이 수정 및 배경색 등 스타일 일부 수정 * Design: 공통 컴포넌트 (모달, NoData, 하단네브바) 글로벌스타일에 맞게 수정 * Style: (홈)페이지 사용하지 않는 API 주석처리 * Design: 리스트 생성/수정 페이지 넓이, 높이 수정 * Design: 로그인 리다이렉트 페이지 스타일 수정 * Design: 글로벌 스타일 수정 및 최종 스타일 점검 * Chore: 빌드 에러 해결을 위한 babel/runtime 라이브러리 설치 * Feat: Next.js 미들웨어를 사용하여 url pathname에 따라 다른 페이지 레이아웃 스타일 적용 * Design: 레이아웃 스타일에 따라 전체 페이지 스타일 수정 * Design: 히스토리 페이지 스타일 수정
8-Sprinters · Dec 9, 2024 · a42eb68 · a42eb68
1 parent dd44db8
commit a42eb68
Show file tree

Hide file tree

Showing 42 changed files with 206 additions and 170 deletions.
diff --git a/src/app/(home)/_components/FeedLists.css.ts b/src/app/(home)/_components/FeedLists.css.ts
@@ -4,7 +4,7 @@ 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',

diff --git a/src/app/(home)/_components/FeedLists.tsx b/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}>

diff --git a/src/app/(home)/_components/TrendingLists.css.ts b/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({
+  width: '100%',
+});
 
 export const itemWrapper = style({
   width: '100%',

diff --git a/src/app/(home)/_components/TrendingLists.tsx b/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}>

diff --git a/src/app/(home)/page.css.ts b/src/app/(home)/page.css.ts
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -10,8 +10,6 @@ import LoginModal from '@/components/login/LoginModal';
 import Loading from '@/components/loading/Loading';
 import Feed from '@/app/(home)/_components/Feed';
 
-import * as styles from './page.css';
-
 import useBooleanOutput from '@/hooks/useBooleanOutput';
 import toasting from '@/lib/utils/toasting';
 import toastMessage from '@/lib/constants/toastMessage';
@@ -40,7 +38,7 @@ function LandingPage() {
 
   return (
     <>
-      <div className={styles.wrapper}>
+      <div>
         <Suspense fallback={<Loading />}>
           <PWAPrompt
             copyTitle="리스티웨이브 앱 설치하기"

diff --git a/src/app/account/page.css.ts b/src/app/account/page.css.ts
@@ -3,8 +3,6 @@ import * as fonts from '@/styles/font.css';
 import { vars } from '@/styles/theme.css';
 
 export const container = style({
-  marginTop: 18,
-
   display: 'flex',
   flexDirection: 'column',
   gap: 12,

diff --git a/src/app/account/page.tsx b/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>
   );
 }
diff --git a/src/app/account/profile/page.css.ts b/src/app/account/profile/page.css.ts
@@ -10,6 +10,8 @@ export const content = style({
   width: '100%',
   padding: '18px 16px',
 
+  flexGrow: 1,
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

diff --git a/src/app/account/profile/page.tsx b/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';

diff --git a/src/app/account/withdraw/_component/WithdrawalHeader.tsx b/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';
 

diff --git a/src/app/account/withdraw/page.css.ts b/src/app/account/withdraw/page.css.ts
@@ -1,11 +1,5 @@
-import { vars } from '@/styles/__theme.css';
 import { style } from '@vanilla-extract/css';
 
-export const page = style({
-  height: '100vh',
-  overflow: 'hidden',
-});
-
 export const main = style({
   height: '100%',
   padding: '30px 0',

diff --git a/src/app/account/withdraw/page.tsx b/src/app/account/withdraw/page.tsx
@@ -5,7 +5,7 @@ import * as styles from './page.css';
 
 export default function WithdrawPage() {
   return (
-    <div className={styles.page}>
+    <div>
       <WithdrawalHeader />
       <div className={styles.main}>
         <WithdrawalNotice />

diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts
@@ -2,11 +2,6 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import { Subtitle } from '@/styles/font.css';
 
-export const container = style({
-  height: '100vh',
-  backgroundColor: vars.color.bggray,
-});
-
 // BottomSheet Input
 export const contentInput = style({
   padding: '2rem 2.4rem',

diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx
@@ -128,7 +128,7 @@ export default function CollectionDetailPage({ params }: ParamType) {
   }, []);
 
   return (
-    <section className={styles.container}>
+    <section>
       <Collections
         collectionList={lists}
         folderName={listData?.pages[0].folderName ?? ''}

diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts
@@ -14,6 +14,9 @@ export const container = style({
 // 폴더 버튼
 export const addFolderButtonContainer = style({
   position: 'fixed',
+  margin: 'auto',
+  maxWidth: 430,
+
   bottom: 0,
   padding: '1.6rem',
   width: '100%',

diff --git a/src/app/layout.css.ts b/src/app/layout.css.ts
@@ -1,15 +1,30 @@
-import { vars } from '@/styles/theme.css';
+import { style, globalStyle } from '@vanilla-extract/css';
+
 import * as fonts from '@/styles/__font.css';
-import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+
+export const basicBodyStyle = style({
+  maxWidth: '430px',
+  height: '100%',
+  minHeight: '100vh',
 
-export const body = style({
+  margin: 'auto',
+  position: 'relative',
+
+  backgroundColor: vars.color.bggray,
+});
+
+globalStyle(`${basicBodyStyle} li`, {
+  listStyle: 'none',
+});
+
+export const adminBodyStyle = style({
   width: '100%',
   height: '100%',
   minHeight: '100vh',
   margin: 'auto',
 
   position: 'relative',
-
   backgroundColor: vars.color.bggray,
 });
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { Metadata, Viewport } from 'next';
+import { headers } from 'next/headers';
 import { ReferrerEnum } from 'next/dist/lib/metadata/types/metadata-types';
 import { OpenGraphType } from 'next/dist/lib/metadata/types/opengraph-types';
 import { ToastContainer } from 'react-toastify';
@@ -44,6 +45,9 @@ export const metadata: Metadata = {
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
+  const pathname = headers().get('pathname') || '';
+  const isAdminStyle = pathname.startsWith('/admin');
+
   return (
     <html lang="ko">
       <head>
@@ -53,7 +57,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         <link rel="apple-touch-icon" href="https://image.listywave.com/favicon/favicon.png" />
         <meta name="theme-color" content="#ffffff" />
       </head>
-      <body className={styles.body}>
+      <body className={isAdminStyle ? styles.adminBodyStyle : styles.basicBodyStyle}>
         <CommonProvider>
           <div id="modal-root" />
           <div>

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -13,6 +13,7 @@ export const formWrapperOuter = style({
   margin: 'auto',
 
   width: '100%',
+  maxWidth: 430,
   height: 'auto',
 
   position: 'fixed',

diff --git a/src/app/list/[listId]/history/page.css.ts b/src/app/list/[listId]/history/page.css.ts
@@ -1,7 +1,14 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 import * as fonts from '@/styles/font.css';
 
+export const page = style({
+  height: '100vh',
+
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 export const navContainer = style({
   margin: '35px 0px 0px',
   paddingRight: '25px',