🎨 Publish(#120): 로그인 상태에 따른 ScrollableContainer margin-top 조정

modern-agile-team · Jan 31, 2025 · e70f63c · e70f63c
1 parent 69a9cc1
commit e70f63c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/features/learn/ui/styles.ts b/src/features/learn/ui/styles.ts
@@ -8,7 +8,6 @@ export const SectionBoxWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin-top: 45px;
 
   ${media.mobile} {
     margin-top: 65px;

diff --git a/src/pages/learn/Learn.tsx b/src/pages/learn/Learn.tsx
@@ -77,7 +77,10 @@ export default function Learn() {
             />
           </S.ProgressBarWrapper>
         )}
-        <S.ScrollableContainer $show={showComponents}>
+        <S.ScrollableContainer
+          $show={showComponents}
+          $isLoggedIn={isLoggedIn(user)}
+        >
           <SelectSection />
         </S.ScrollableContainer>
         <SectionGroup>

diff --git a/src/pages/learn/styles.ts b/src/pages/learn/styles.ts
@@ -3,6 +3,7 @@ import { media } from '@style/media';
 
 interface ScrollableContainerProps {
   $show: boolean;
+  $isLoggedIn: boolean;
 }
 
 export const ScrollableContainer = styled.div<ScrollableContainerProps>`
@@ -14,6 +15,11 @@ export const ScrollableContainer = styled.div<ScrollableContainerProps>`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-top: ${({ $isLoggedIn }) => ($isLoggedIn ? '45px' : '25px')};
+
+  ${media.mobile} {
+    margin-top: ${({ $isLoggedIn }) => ($isLoggedIn ? '0' : '-20px')};
+  }
 `;
 
 export const SectionGroup = styled.div`