feat: 모바일에서도 옵션이 잘 뜨도록 반응형 코드 추가

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;
+  }
+`;

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;
 `;

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;
 `;