diff --git a/src/components/common/layouts/SplitLayout/index.tsx b/src/components/common/layouts/SplitLayout/index.tsx index 95ea26dfc..62f042fa2 100644 --- a/src/components/common/layouts/SplitLayout/index.tsx +++ b/src/components/common/layouts/SplitLayout/index.tsx @@ -1,54 +1,44 @@ import styled from '@emotion/styled'; +import { ReactNode } from 'react'; -import { HEADER_HEIGHT } from '@/components/features/Layout/Header'; -import { breakpoints } from '@/styles/variants'; - -import { Container } from '../Container'; - -type Props = { - children: React.ReactNode; - sidebar: React.ReactNode; +type SplitLayoutProps = { + sidebar: ReactNode; + children: ReactNode; }; -export const SplitLayout = ({ children, sidebar }: Props) => { +export const SplitLayout = ({ sidebar, children }: SplitLayoutProps) => { return ( - - - -
{children}
- {sidebar} -
-
-
+ + {children} + {sidebar} + ); }; -const Wrapper = styled.div` - width: 100%; -`; - -const Inner = styled.div` - width: 100%; +const Container = styled.div` display: flex; - justify-content: flex-start; - align-items: flex-start; - position: relative; -`; -const Main = styled.main` - width: 100%; - max-width: 900px; + @media (max-width: 768px) { + flex-direction: column; + } `; -const Sidebar = styled.aside` - display: none; - position: sticky; - top: ${HEADER_HEIGHT}; - width: 100%; - max-width: 360px; - height: calc(100vh - ${HEADER_HEIGHT}); +const MainContent = styled.div` + flex: 2; + padding: 20px; - @media screen and (min-width: ${breakpoints.sm}) { - display: block; + @media (max-width: 768px) { + order: 1; + padding: 10px; } `; + +const Sidebar = styled.div` + flex: 1; + padding: 20px; + + @media (max-width: 768px) { + order: 2; + padding: 10px; + } +`; \ No newline at end of file diff --git a/src/components/features/Goods/Detail/OptionSection.tsx b/src/components/features/Goods/Detail/OptionSection.tsx index 2104f43ae..aa7f47786 100644 --- a/src/components/features/Goods/Detail/OptionSection.tsx +++ b/src/components/features/Goods/Detail/OptionSection.tsx @@ -74,8 +74,6 @@ export const OptionSection = ({ productId }: Props) => { quantity: null, }; - console.log('Sending request to add wish', requestBody); // 잘 받아오는지 확인 - 추후 삭제 예정 - const response = await fetch(`${getBaseUrl()}/api/wishes`, { method: 'POST', headers: { @@ -128,7 +126,7 @@ export const OptionSection = ({ productId }: Props) => { message: '', })); - console.log('선택된 옵션 및 수량:', selectedOptions); // 콘솔 로그 추가 + console.log('선택된 옵션 및 수량:', selectedOptions); orderHistorySessionStorage.set(selectedOptions); @@ -137,14 +135,16 @@ export const OptionSection = ({ productId }: Props) => { return ( - {options && options.map(option => ( - setCounts(prev => ({ ...prev, [option.id]: value }))} - /> - ))} + + {options && options.map(option => ( + setCounts(prev => ({ ...prev, [option.id]: value }))} + /> + ))} +