From bba4c088305bd28fa9c788bb14fbe431a71b2e81 Mon Sep 17 00:00:00 2001
From: userjmmm <a@as-MacBook-Pro.local>
Date: Sun, 4 Aug 2024 18:38:52 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=EB=8F=84=20=EC=98=B5=EC=85=98=EC=9D=B4=20=EC=9E=98=20?=
 =?UTF-8?q?=EB=9C=A8=EB=8F=84=EB=A1=9D=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/layouts/SplitLayout/index.tsx      | 68 ++++++++-----------
 .../features/Goods/Detail/OptionSection.tsx   | 28 +++++---
 src/pages/MyAccount/index.tsx                 |  8 ++-
 3 files changed, 53 insertions(+), 51 deletions(-)

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 (
-    <Wrapper>
-      <Container maxWidth={breakpoints.lg}>
-        <Inner>
-          <Main>{children}</Main>
-          <Sidebar>{sidebar}</Sidebar>
-        </Inner>
-      </Container>
-    </Wrapper>
+    <Container>
+      <MainContent>{children}</MainContent>
+      <Sidebar>{sidebar}</Sidebar>
+    </Container>
   );
 };
 
-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 (
     <Wrapper>
-      {options && options.map(option => (
-        <CountOptionItem
-          key={option.id}
-          name={option.name}
-          value={counts[option.id]}
-          onChange={value => setCounts(prev => ({ ...prev, [option.id]: value }))}
-        />
-      ))}
+      <OptionsContainer>
+        {options && options.map(option => (
+          <CountOptionItem
+            key={option.id}
+            name={option.name}
+            value={counts[option.id]}
+            onChange={value => setCounts(prev => ({ ...prev, [option.id]: value }))}
+          />
+        ))}
+      </OptionsContainer>
       <BottomWrapper>
         <Button theme="kakao" size="large" onClick={handleInterestClick}>
           관심 등록
@@ -169,6 +169,12 @@ const Wrapper = styled.div`
   justify-content: space-between;
 `;
 
+const OptionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
 const BottomWrapper = styled.div`
   padding: 270px 0 0;
 `;
diff --git a/src/pages/MyAccount/index.tsx b/src/pages/MyAccount/index.tsx
index 0186d26dc..774b7e23d 100644
--- a/src/pages/MyAccount/index.tsx
+++ b/src/pages/MyAccount/index.tsx
@@ -165,7 +165,7 @@ export const MyAccountPage = () => {
             </Box>
           ))
         ) : (
-          <Text>위시리스트에 상품이 없습니다.</Text>
+          <CenteredText>위시리스트에 상품이 없습니다.</CenteredText>
         )}
       </VStack>
       <HStack spacing={4} mt={4}>
@@ -201,4 +201,10 @@ const Wrapper = styled.div`
   justify-content: center;
   font-weight: 700;
   font-size: 36px;
+`;
+
+const CenteredText = styled(Text)`
+  text-align: center;
+  font-size: 14px;
+  color: gray;
 `;
\ No newline at end of file