💄 코드 투게더 어떻게 학습하나요 배경 및 레이아웃 수정

code-squad · Sep 5, 2024 · 330e430 · 330e430
1 parent 370ddfe
commit 330e430
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git 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
@@ -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;
   }
 `;