diff --git a/src/app/basicauction/components/LeftSection.css.ts b/src/app/basicauction/components/LeftSection.css.ts index 916a9666..a90a0dbf 100644 --- a/src/app/basicauction/components/LeftSection.css.ts +++ b/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%', + }, + }, }); diff --git a/src/app/globals.css.ts b/src/app/globals.css.ts index fbbde30e..3e149ecd 100644 --- a/src/app/globals.css.ts +++ b/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({ diff --git a/src/app/join/Join.css.ts b/src/app/join/Join.css.ts index 9f162a78..8dd4ccb2 100644 --- a/src/app/join/Join.css.ts +++ b/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, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 207d4a3e..09000659 100644 --- a/src/app/layout.tsx +++ b/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({ -
+
{children} diff --git a/src/app/login/Login.css.ts b/src/app/login/Login.css.ts index 195db7aa..2187846c 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 - 272px)', + 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 9b2a2494..72c1b388 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 ( +
+
+ + +
+ + logo +
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 7bda42a9..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: '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) => ( -
+ )} -
+ ))}
diff --git a/src/static/category.ts b/src/static/category.ts index 76dd236b..518ef60e 100644 --- a/src/static/category.ts +++ b/src/static/category.ts @@ -15,8 +15,8 @@ export const SUB_CATEGORY = [ export const MAIN_CATEGORY = [ { id: 1, name: 'Home', path: '/' }, - { id: 2, name: 'Normal', path: '/basicauction' }, - { id: 3, name: 'How To', path: '/howto' }, + { id: 2, name: 'Auction', path: '/basicauction' }, + // { id: 3, name: 'How To', path: '/howto' }, ]; export const MYPAGE_CATEGORY = [ diff --git a/src/styles/layout.ts b/src/styles/layout.ts index 6b455fdc..0b3d722d 100644 --- a/src/styles/layout.ts +++ b/src/styles/layout.ts @@ -15,8 +15,14 @@ const spacing = { step9: '64px', }; +const minHeight = 'calc(100vh - 245px)'; + +const minMobileHeight = 'calc(100vh - 251px)'; + const layout = { maxLayoutWidth, + minHeight, + minMobileHeight, ...spacing, }; export default layout;