feat: journeyentrance 컴포넌트 스타일 오버라이딩 가능하도록 수정, about 링크 버튼 노출 props 추가

src/components/Main/JourneyEntrance.tsx

@@ -1,23 +1,28 @@
-import { css } from '@emotion/react';
+import { css, SerializedStyles, Theme } from '@emotion/react';
 
 import { LinkButton } from './LinkButton';
 import { Journey } from '../Journey';
 
-export function JourneyEntrance() {
+interface JorneyEntranceProps {
+  hasLinkButton: boolean;
+  style?: SerializedStyles;
+}
+
+export function JourneyEntrance({ hasLinkButton, style }: JorneyEntranceProps) {
   return (
-    <section css={layoutCss}>
+    <section css={[layoutCss, style]}>
       <Journey />
-      <LinkButton color="black" text="ABOUT" href="/about" />
+      {hasLinkButton && <LinkButton color="black" text="ABOUT" href="/about" />}
     </section>
   );
 }
 
-const layoutCss = css`
-  padding: 80px 0;
+const layoutCss = (theme: Theme) => css`
+  padding: 120px 0;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 80px;
   align-items: center;
-  background-color: white;
+  background-color: ${theme.colors.lightGray};
 `;

src/pages/index.tsx

@@ -16,7 +16,7 @@ export default function Root() {
             height={780}
             color={'blue'}
           />
-          <JourneyEntrance />
+          <JourneyEntrance hasLinkButton />
           <RecruitEntrance />
           <ProjectCarousel />
           <Ending />