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 }))}
+ />
+ ))}
+