-
+
{children}
diff --git a/src/app/login/Login.css.ts b/src/app/login/Login.css.ts
index 42770855..64ccd524 100644
--- a/src/app/login/Login.css.ts
+++ b/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 - 288px)',
+ padding: '60px 0 0 0',
+ minHeight: layout.minHeight,
boxSizing: 'border-box',
alignItems: 'center',
backgroundColor: colors.backgroundGray1,
diff --git a/src/components/Footer/Footer.css.ts b/src/components/Footer/Footer.css.ts
index 253e00dc..68deb6e6 100644
--- a/src/components/Footer/Footer.css.ts
+++ b/src/components/Footer/Footer.css.ts
@@ -18,9 +18,10 @@ 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,
});
@@ -28,12 +29,22 @@ 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({
diff --git a/src/components/Header/components/CategoryHeader/CategoryHeader.css.ts b/src/components/Header/components/CategoryHeader/CategoryHeader.css.ts
deleted file mode 100644
index f80b3da9..00000000
--- a/src/components/Header/components/CategoryHeader/CategoryHeader.css.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import colors from '@/styles/color';
-import typography from '@/styles/typo';
-
-export const bottomHeaderWrapper = style({
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- marginBottom: '20px',
-});
-
-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,
- },
- },
-]);
diff --git a/src/components/Header/components/Alarm/Alarm.css.ts b/src/components/HeaderSection/components/Alarm/Alarm.css.ts
similarity index 100%
rename from src/components/Header/components/Alarm/Alarm.css.ts
rename to src/components/HeaderSection/components/Alarm/Alarm.css.ts
diff --git a/src/components/Header/components/Alarm/index.tsx b/src/components/HeaderSection/components/Alarm/index.tsx
similarity index 100%
rename from src/components/Header/components/Alarm/index.tsx
rename to src/components/HeaderSection/components/Alarm/index.tsx
diff --git a/src/components/HeaderSection/components/CategoryHeader/CategoryHeader.css.ts b/src/components/HeaderSection/components/CategoryHeader/CategoryHeader.css.ts
new file mode 100644
index 00000000..537804e9
--- /dev/null
+++ b/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',
+ },
+ },
+});
diff --git a/src/components/Header/components/CategoryHeader/index.tsx b/src/components/HeaderSection/components/CategoryHeader/index.tsx
similarity index 90%
rename from src/components/Header/components/CategoryHeader/index.tsx
rename to src/components/HeaderSection/components/CategoryHeader/index.tsx
index cb931b73..35ba6719 100644
--- a/src/components/Header/components/CategoryHeader/index.tsx
+++ b/src/components/HeaderSection/components/CategoryHeader/index.tsx
@@ -24,7 +24,9 @@ function CategoryHeader({ data }: CategoryHeaderProps) {
))}
-
+
+
+
);
}
diff --git a/src/components/Header/Header.css.ts b/src/components/HeaderSection/components/Header/Header.css.ts
similarity index 59%
rename from src/components/Header/Header.css.ts
rename to src/components/HeaderSection/components/Header/Header.css.ts
index 6c5c0c24..55b454d8 100644
--- a/src/components/Header/Header.css.ts
+++ b/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({
diff --git a/src/components/Header/index.tsx b/src/components/HeaderSection/components/Header/Header.tsx
similarity index 89%
rename from src/components/Header/index.tsx
rename to src/components/HeaderSection/components/Header/Header.tsx
index f58713a5..3b4d95a3 100644
--- a/src/components/Header/index.tsx
+++ b/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);
diff --git a/src/components/HeaderSection/components/MobileHeader/MobileHeader.css.ts b/src/components/HeaderSection/components/MobileHeader/MobileHeader.css.ts
new file mode 100644
index 00000000..89bd5097
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/HeaderSection/components/MobileHeader/MobileHeader.tsx b/src/components/HeaderSection/components/MobileHeader/MobileHeader.tsx
new file mode 100644
index 00000000..ee288ce7
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default MobileHeader;
diff --git a/src/components/HeaderSection/components/MobileUserHeader/MobileUserHeader.css.ts b/src/components/HeaderSection/components/MobileUserHeader/MobileUserHeader.css.ts
new file mode 100644
index 00000000..5de8a3a3
--- /dev/null
+++ b/src/components/HeaderSection/components/MobileUserHeader/MobileUserHeader.css.ts
@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
+
+export const topHeader = style({
+ position: 'relative',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ padding: '16px 0 16px 0',
+});
+
+export const IconWrapper = style({
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'space-between',
+});
+
+export const topHeaderLogo = style({
+ position: 'absolute',
+ left: '50%',
+ transform: 'translateX(-50%)',
+
+ display: 'flex',
+ alignItems: 'end',
+ justifyContent: 'center',
+ gap: '10px',
+});
+
+export const logo = style({
+ fontSize: '20px',
+ color: colors.primary9,
+});
+
+export const topCategory = style({
+ display: 'flex',
+ gap: '30px',
+ fontSize: '12px',
+});
+
+export const logoutButton = style({
+ cursor: 'pointer',
+ color: colors.gray11,
+ fontSize: '12px',
+});
+
+export const TopHeaderUnit = style({
+ color: colors.gray11,
+});
diff --git a/src/components/HeaderSection/components/MobileUserHeader/index.tsx b/src/components/HeaderSection/components/MobileUserHeader/index.tsx
new file mode 100644
index 00000000..2c1ea324
--- /dev/null
+++ b/src/components/HeaderSection/components/MobileUserHeader/index.tsx
@@ -0,0 +1,98 @@
+import { MenuIcon } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+// import { usePathname, useRouter } from 'next/navigation';
+
+// import usePostLogout from '@/apis/queryHooks/Auth/usePostLogout';
+import SearchBar from '@/app/basicauction/components/searchbar';
+import logoIcon from '@/assets/png/logo.png';
+// import { useAuth } from '@/provider/authProvider';
+// import { SUB_CATEGORY } from '@/static/category';
+import colors from '@/styles/color';
+
+import * as S from './MobileUserHeader.css';
+
+// 현재 알림 기능 없음으로 주석처리
+// interface UserHeaderProps {
+// setTrue: () => void;
+// }
+// { setTrue }: UserHeaderProps
+
+function MobileUserHeader() {
+ // const router = useRouter();
+ // const { isLoggedIn } = useAuth();
+ // const { mutate: logout } = usePostLogout();
+ // const pathname = usePathname();
+
+ return (
+
+
+
+
+
+
+
+ OMOCHA
+
+ {/*
+ {SUB_CATEGORY.map(category => {
+ if (category.name === '로그인' && isLoggedIn) {
+ return (
+
+ );
+ }
+ if (category.path) {
+ if (category.name === '로그인') {
+ return (
+
+ {category.name}
+
+ );
+ }
+ return (
+
+ {category.name}
+
+ );
+ }
+ return (
+
+ );
+ })}
+
*/}
+
+ );
+}
+
+export default MobileUserHeader;
diff --git a/src/components/Header/components/UserHeader/UserHeader.css.ts b/src/components/HeaderSection/components/UserHeader/UserHeader.css.ts
similarity index 95%
rename from src/components/Header/components/UserHeader/UserHeader.css.ts
rename to src/components/HeaderSection/components/UserHeader/UserHeader.css.ts
index 3734567b..95e2e0c1 100644
--- a/src/components/Header/components/UserHeader/UserHeader.css.ts
+++ b/src/components/HeaderSection/components/UserHeader/UserHeader.css.ts
@@ -6,7 +6,7 @@ export const topHeader = style({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- padding: '32px 0 16px 0',
+ padding: '16px 0 16px 0',
});
export const topHeaderLogo = style({
diff --git a/src/components/Header/components/UserHeader/index.tsx b/src/components/HeaderSection/components/UserHeader/index.tsx
similarity index 100%
rename from src/components/Header/components/UserHeader/index.tsx
rename to src/components/HeaderSection/components/UserHeader/index.tsx
diff --git a/src/components/HeaderSection/index.tsx b/src/components/HeaderSection/index.tsx
new file mode 100644
index 00000000..00b73d23
--- /dev/null
+++ b/src/components/HeaderSection/index.tsx
@@ -0,0 +1,13 @@
+import Header from './components/Header/Header';
+import MobileHeader from './components/MobileHeader/MobileHeader';
+
+function HeaderSection() {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default HeaderSection;
diff --git a/src/components/MainCarousel/MainCarousel.css.ts b/src/components/MainCarousel/MainCarousel.css.ts
index 3ba5f95f..7a31f25d 100644
--- a/src/components/MainCarousel/MainCarousel.css.ts
+++ b/src/components/MainCarousel/MainCarousel.css.ts
@@ -21,5 +21,6 @@ export const dots = style({
export const carouselImage = style({
width: '100%',
+ height: 'auto',
margin: '0 auto',
});
diff --git a/src/components/SpecialSection/SpecialSection.css.ts b/src/components/SpecialSection/SpecialSection.css.ts
index a60e9187..790da781 100644
--- a/src/components/SpecialSection/SpecialSection.css.ts
+++ b/src/components/SpecialSection/SpecialSection.css.ts
@@ -8,14 +8,31 @@ export const specialSection = style({
justifyContent: 'center',
alignItems: 'center',
gap: '80px',
- height: '400px',
+ padding: '50px 20px',
+ boxSizing: 'border-box',
width: '100%',
background: 'url(http://fiximage.10x10.co.kr/web2018/main/bg_pattern_slash.png) 0 0 repeat',
+ '@media': {
+ 'screen and (max-width: 1100px)': {
+ flexDirection: 'column',
+ gap: '40px',
+ marginTop: '30px',
+ },
+ },
});
export const specialSectionTitle = style({
display: 'flex',
flexDirection: 'column',
+ '@media': {
+ 'screen and (max-width: 1100px)': {
+ marginRight: 'auto',
+ flexDirection: 'row',
+ gap: '10px',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ },
+ },
});
export const flex = style({
@@ -27,6 +44,11 @@ export const flex = style({
export const only = style({
fontSize: '36px',
fontWeight: 'light',
+ '@media': {
+ 'screen and (max-width: 1100px)': {
+ fontSize: '24px',
+ },
+ },
});
export const bellIcon = style({});
@@ -35,6 +57,12 @@ export const oneDay = style({
marginTop: '4px',
fontSize: '40px',
fontWeight: 'bold',
+ '@media': {
+ 'screen and (max-width: 1100px)': {
+ marginTop: '0px',
+ fontSize: '30px',
+ },
+ },
});
export const popularItem = style({
@@ -42,15 +70,26 @@ export const popularItem = style({
fontSize: '36px',
fontWeight: 'bold',
color: colors.primary9,
+ '@media': {
+ 'screen and (max-width: 1100px)': {
+ marginTop: '0px',
+ fontSize: '24px',
+ },
+ },
});
export const specialAuction = style({
- display: 'flex',
- gap: '20px',
+ maxWidth: '960px',
+ width: '100%',
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill, minmax(190px, auto))',
+ gap: '16px',
+ alignItems: 'center',
});
export const specialAuctionItem = style({
display: 'flex',
+ position: 'relative',
alignItems: 'center',
flexDirection: 'column',
gap: '8px',
@@ -58,9 +97,8 @@ export const specialAuctionItem = style({
export const specialAuctionImage = style({
borderRadius: '100%',
- content: 'cover',
+ objectFit: 'cover',
border: '5px solid #fff',
- backgroundColor: '#fff',
});
export const specialAuctionTitle = style({
diff --git a/src/components/SpecialSection/index.tsx b/src/components/SpecialSection/index.tsx
index edba8cd9..f90532a3 100644
--- a/src/components/SpecialSection/index.tsx
+++ b/src/components/SpecialSection/index.tsx
@@ -1,5 +1,6 @@
import { CalendarClock } from 'lucide-react';
import Image from 'next/image';
+import Link from 'next/link';
import useGetBasicAuctionList from '@/apis/queryHooks/basicAuction/useGetBasicAuctionList';
import { AuctionData } from '@/apis/types/basicAuction';
@@ -31,7 +32,11 @@ function SpecialSection() {
{data.result_data.content.map((auction: AuctionData) => (
-
+
)}
-
+
))}