Merge remote-tracking branch 'origin/develop' into feat/#120

src/app/basicauction/components/LeftSection.css.ts

@@ -58,6 +58,13 @@ export const searchBar = style({
   gap: '5px',
   borderBottom: `1px solid ${colors.gray7}`,
   padding: '0 10px 5px',
+  boxSizing: 'border-box',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      maxWidth: '100px',
+      padding: '0 ',
+    },
+  },
 });
 
 const buttonBase = style({
@@ -80,4 +87,11 @@ export const searchInput = style({
   ...typography.body,
   border: 'none',
   outline: 'none',
+  background: 'none',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      fontSize: '10px',
+      width: '100%',
+    },
+  },
 });

src/app/globals.css.ts

@@ -1,5 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
+import layout from '@/styles/layout';
+
 globalStyle('html, body, h1, h2, h3, h4, button, p, ul, ol, li', {
   margin: 0,
   padding: 0,
@@ -38,7 +40,7 @@ globalStyle('rc-cascader-menu-item', {
 
 export const container = style({
   position: 'relative',
-  minHeight: 'calc(100vh - 272px)',
+  minHeight: layout.minHeight,
 });
 
 export const errorContainer = style({

src/app/join/Join.css.ts

@@ -1,13 +1,14 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 
 import colors from '@/styles/color';
+import layout from '@/styles/layout';
 import shadow from '@/styles/shadow';
 
 export const backContainer = style({
   display: 'flex',
   flexDirection: 'column',
   padding: '60px 0',
-  minHeight: 'calc(100vh - 272px)',
+  minHeight: layout.minHeight,
   boxSizing: 'border-box',
   alignItems: 'center',
   backgroundColor: colors.backgroundGray1,

src/app/layout.tsx

@@ -8,7 +8,7 @@ import { Category } from '@/apis/types/category';
 import * as S from '@/app/globals.css';
 import ChattingIconButton from '@/components/Chatting/ChattingIconButton';
 import Footer from '@/components/Footer';
-import Header from '@/components/Header';
+import HeaderSection from '@/components/HeaderSection';
 import NavigationEvents from '@/components/NavigationEvents';
 import ScrollToTopButton from '@/components/ScrollToTopButton';
 import usePrefetchQueryWithCookie from '@/hooks/usePrefetchQueryWithCookie';
@@ -61,7 +61,7 @@ export default async function RootLayout({
             <NavigationEvents />
             <AuthProvider isLoggedIn={isLoggedIn}>
               <HydrationBoundary state={dehydrate(queryClient)}>
-                <Header />
+                <HeaderSection />
               </HydrationBoundary>
               <div className={S.container}>
                 {children}

src/app/login/Login.css.ts

@@ -1,13 +1,14 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 
 import colors from '@/styles/color';
+import layout from '@/styles/layout';
 import shadow from '@/styles/shadow';
 
 export const backContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  padding: '60px 0',
-  minHeight: 'calc(100vh - 272px)',
+  padding: '60px 0 0 0',
+  minHeight: layout.minHeight,
   boxSizing: 'border-box',
   alignItems: 'center',
   backgroundColor: colors.backgroundGray1,

src/components/Footer/Footer.css.ts

@@ -18,22 +18,33 @@ export const footer = style({
   margin: '0 auto',
   flexDirection: 'column',
   justifyContent: 'center',
-  height: '130px',
+  height: 'auto',
+
   maxWidth: layout.maxLayoutWidth.maxWidth,
-  padding: layout.maxLayoutWidth.padding,
+  padding: '16px 20px',
   color: colors.white,
 });
 
 export const topFooter = style({
   display: 'flex',
   justifyContent: 'space-between',
   paddingBottom: '20px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      flexDirection: 'column-reverse',
+      gap: '10px',
+    },
+  },
 });
 
 export const logoButton = style({
   color: colors.white,
-
   fontSize: '32px',
+  '@media': {
+    'screen and (max-width: 1100px)': {
+      fontSize: '28px',
+    },
+  },
 });
 
 export const categoryList = style({
@@ -43,6 +54,11 @@ export const categoryList = style({
   fontWeight: 'bold',
   alignItems: 'center',
   gap: '50px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      gap: '30px',
+    },
+  },
 });
 
 export const category = style({

src/components/HeaderSection/components/CategoryHeader/CategoryHeader.css.ts

@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
+import typography from '@/styles/typo';
+
+export const bottomHeaderWrapper = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  marginBottom: '20px',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      marginBottom: '13px',
+      width: '100%',
+    },
+  },
+});
+
+export const searchBarWrapper = style({
+  marginLeft: 'auto',
+  '@media': {
+    'screen and (max-width: 700px)': {
+      display: 'none',
+    },
+  },
+});
+
+export const bottomHeader = style({
+  ...typography.h3,
+  display: 'flex',
+  gap: '27px',
+});
+
+export const buttonStyles = style({
+  ...typography.h4,
+  padding: '12px 0px',
+  borderRadius: '4px',
+  cursor: 'pointer',
+  color: colors.gray11,
+  transition: 'background-color 0.3s ease, border-color 0.3s ease',
+
+  ':hover': {
+    color: colors.primary10,
+    borderColor: colors.primary7,
+  },
+
+  ':active': {
+    borderColor: colors.primary8,
+    color: colors.primary12,
+  },
+  '@media': {
+    'screen and (max-width: 700px)': {
+      padding: '10px 0px',
+      fontSize: '16px',
+    },
+  },
+});

src/components/Header/components/CategoryHeader/index.tsx → src/components/HeaderSection/components/CategoryHeader/index.tsx

@@ -24,7 +24,9 @@ function CategoryHeader({ data }: CategoryHeaderProps) {
           </Link>
         ))}
       </div>
-      <SearchBar />
+      <div className={S.searchBarWrapper}>
+        <SearchBar />
+      </div>
     </section>
   );
 }

src/components/Header/Header.css.ts → src/components/HeaderSection/components/Header/Header.css.ts

@@ -5,8 +5,15 @@ import colors from '@/styles/color';
 export const stickyHeader = style({
   position: 'sticky',
   top: 0,
-  zIndex: 1000,
-  backgroundColor: colors.white,
+  zIndex: 1,
+  backdropFilter: 'blur(2px)',
+  backgroundColor: 'rgba(255,255,255, 0.95)',
+  borderBottom: `1px solid ${colors.gray3}`,
+  '@media': {
+    'screen and (max-width: 700px)': {
+      display: 'none',
+    },
+  },
 });
 
 export const container = style({

src/components/Header/index.tsx → src/components/HeaderSection/components/Header/Header.tsx

@@ -9,12 +9,12 @@ import { useSearchParams } from 'next/navigation';
 
 import useGetCategory from '@/apis/queryHooks/category/useGetCategory';
 import { Category } from '@/apis/types/category';
+import MaxLayout from '@/components/MaxLayout';
 
-import MaxLayout from '../MaxLayout';
+import CategoryHeader from '../CategoryHeader';
+import UserHeader from '../UserHeader';
 
 import * as S from './Header.css';
-import CategoryHeader from './components/CategoryHeader';
-import UserHeader from './components/UserHeader';
 
 function Header() {
   // const { value, setTrue, setFalse } = useBooleanState(false);

src/components/HeaderSection/components/MobileHeader/MobileHeader.css.ts

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
+
+export const stickyHeader = style({
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+  backdropFilter: 'blur(2px)',
+  backgroundColor: 'rgba(255,255,255, 0.95)',
+  borderBottom: `1px solid ${colors.gray3}`,
+  '@media': {
+    'screen and (min-width: 700px)': {
+      display: 'none',
+    },
+  },
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 auto',
+});
+
+export const SideNavButton = style({
+  cursor: 'pointer',
+});

src/components/HeaderSection/components/MobileHeader/MobileHeader.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+// 현재 알림 기능 api 없음으로 주석처리
+// import Alarm from '@/components/Header/components/Alarm';
+// import SlideSideNav from '@/components/SlideSideNav';
+// import useBooleanState from '@/hooks/useBooleanState';
+
+import useGetCategory from '@/apis/queryHooks/category/useGetCategory';
+import { Category } from '@/apis/types/category';
+
+import MaxLayout from '../../../MaxLayout';
+import CategoryHeader from '../CategoryHeader';
+import MobileUserHeader from '../MobileUserHeader';
+
+import * as S from './MobileHeader.css';
+
+function MobileHeader() {
+  const searchParams = useSearchParams();
+  const pickCategory = Number(searchParams.get('categoryId'));
+
+  const { data } = useGetCategory({ targetCategoryId: pickCategory });
+
+  if (!data) return null;
+
+  return (
+    <header className={S.stickyHeader}>
+      <MaxLayout>
+        <div className={S.container}>
+          <MobileUserHeader />
+          <CategoryHeader data={data as Category[]} />
+        </div>
+      </MaxLayout>
+    </header>
+  );
+}
+
+export default MobileHeader;