From 330e4303cfe4a4b2fbe4b490538f17b8c3910541 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 5 Sep 2024 11:26:48 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=EC=BD=94=EB=93=9C=20=ED=88=AC?=
 =?UTF-8?q?=EA=B2=8C=EB=8D=94=20=EC=96=B4=EB=96=BB=EA=B2=8C=20=ED=95=99?=
 =?UTF-8?q?=EC=8A=B5=ED=95=98=EB=82=98=EC=9A=94=20=EB=B0=B0=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-together/Feature/Feature.tsx         |  2 +-
 .../StudyFeature/StudyFeature.tsx             | 48 +++++++++++--------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/pageComponents/code-together/Feature/Feature.tsx b/src/pageComponents/code-together/Feature/Feature.tsx
index 3adda9d3d..6bd8fbc2a 100644
--- a/src/pageComponents/code-together/Feature/Feature.tsx
+++ b/src/pageComponents/code-together/Feature/Feature.tsx
@@ -31,7 +31,7 @@ const Feature: React.FC = ({}) => {
 
 const FeatureWrapper = styled.div`
   margin: 0 auto;
-  margin-top: 8rem;
+  margin-bottom: 18rem;
   @media ${({ theme }) => theme.device.mobile} {
     padding: 0 2.4rem;
   }
diff --git a/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx b/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx
index ab8c208e5..9e9f0aa02 100644
--- a/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx
+++ b/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx
@@ -19,37 +19,45 @@ const StudyFeature: React.FC = () => {
   const { isDesktop, isMobile } = useResponsive();
 
   return (
-    <StudyWrapper>
-      <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
-      <FeatureList>
-        {studyFeatures.map(({ title, descriptions, img }) => (
-          <FeatureItem key={title}>
-            <ImageCard
-              {...{ descriptions, title }}
-              img={features[img]}
-              medium={isDesktop}
-              vertical={isMobile}
-            />
-          </FeatureItem>
-        ))}
-      </FeatureList>
-    </StudyWrapper>
+    <StudyBackgroundWrapper>
+      <StudyWrapper>
+        <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
+        <FeatureList>
+          {studyFeatures.map(({ title, descriptions, img }) => (
+            <FeatureItem key={title}>
+              <ImageCard
+                {...{ descriptions, title }}
+                img={features[img]}
+                medium={isDesktop}
+                vertical={isMobile}
+              />
+            </FeatureItem>
+          ))}
+        </FeatureList>
+      </StudyWrapper>
+    </StudyBackgroundWrapper>
   );
 };
 
-const StudyWrapper = styled.div`
-  padding-top: 18rem;
+const StudyBackgroundWrapper = styled.div`
+  width: 100%;
+  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
+  @media ${({ theme }) => theme.device.mobile} {
+    background-color: ${({ theme: { color } }) => color.surface.white20};
+  }
+`;
+
+const StudyWrapper = styled.div<{ backgroundColor?: string }>`
   margin: 0 auto;
-  margin-top: 8rem;
   @media ${({ theme }) => theme.device.mobile} {
     padding: 0 2.4rem;
   }
   @media ${({ theme }) => theme.device.tablet} {
-    padding: 0 8rem;
+    padding: 8rem 8rem;
   }
   @media ${({ theme }) => theme.device.desktop} {
     width: 106.2rem;
-    padding: 0 18.9rem;
+    padding: 8rem 18.9rem;
   }
 `;