feat(client): 랜딩페이지 퍼블리싱

apps/client/src/app/page.tsx

@@ -1,4 +1,4 @@
-import IntroduceJJoing from '@/components/landing/introduceJJoing';
+import { IntroduceJJoing } from '@/components/landing';
 
 export default function HomePage() {
   return <IntroduceJJoing />;

apps/client/src/assets/images/index.ts

@@ -0,0 +1,4 @@
+export { default as AlarmIcon } from './alarm-icon.svg';
+export { default as ImagineProjectIcon } from './imagineProject-icon.svg';
+export { default as MainLogo } from './logo.svg';
+export { default as MouseIcon } from './mouse-icon.svg';

apps/client/src/components/landing/index.ts

@@ -0,0 +1,2 @@
+export { default as InterviewJJoing } from './interviewJJoing';
+export { default as IntroduceJJoing } from './introduceJJoing';

apps/client/src/components/landing/interviewJJoing.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@jjoing/ui';
+import { RefObject } from 'react';
+import { Container, Wrapper } from '../layouts';
+
+type InterviewJJoingProps = {
+  mouseRef: RefObject<HTMLDivElement>;
+};
+
+const InterviewJJoing = ({ mouseRef }: InterviewJJoingProps) => {
+  return (
+    <Container className="content-container">
+      <Wrapper
+        className="h-full bg-orange-100 flex items-center justify-center"
+        ref={mouseRef}
+      >
+        <Text>Interview</Text>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default InterviewJJoing;

apps/client/src/components/landing/introduceJJoing.tsx

@@ -1,36 +1,58 @@
-import ImagineProject from '@/assets/images/ImagineProject-icon.svg';
+'use client';
+
+import { ImagineProjectIcon, MouseIcon } from '@/assets/images';
 import { Button, Text } from '@jjoing/ui';
+import Image from 'next/image';
+import { useRef } from 'react';
 import { Container, Sticker, Wrapper } from '../layouts';
+import InterviewJJoing from './interviewJJoing';
 
 const IntroduceJJoing = () => {
+  const mouseRef = useRef<HTMLDivElement>(null);
+
+  const handleScroll = () => {
+    if (mouseRef.current) mouseRef.current.scrollIntoView({ behavior: 'smooth' });
+  };
+
   return (
-    <Container className="content-container bg-main-gradient">
-      <Wrapper className="flex h-full justify-between">
-        <div className="w-[416px] flex items-center">
-          <div className="w-full h-[450px] flex flex-col gap-10">
-            <Text color="darkGray" size="xl" weight="semibold">
-              내가 원하는 <br />
-              최고의 팀원과 <br />
-              지금 바로
-              <Text size="xxl" weight="bold" color="primary" className="ml-3">
-                쪼잉
+    <>
+      <Container className="content-container bg-main-gradient">
+        <Wrapper className="flex h-full justify-between">
+          <div className="w-[416px] flex items-center">
+            <div className="w-full h-[450px] flex flex-col gap-10">
+              <Text color="gray800" size="xl" weight="semibold">
+                내가 원하는 <br />
+                최고의 팀원과 <br />
+                지금 바로
+                <Text size="xxl" weight="bold" color="primary" className="ml-3">
+                  쪼잉
+                </Text>
+                <br />
               </Text>
-              <br />
-            </Text>
-            <Text size="lg" color="gray">
-              당신의 아이디어를 현실로 만들 팀원을 구해보세요! <br />
-              쪼잉은 더 나은 프로젝트 경험을 위해 시작되었습니다.
-            </Text>
-            <Button outline={true} round="3xl" size="md">
-              <Text color="darkGray">시작하기 {'>'}</Text>
-            </Button>
+              <Text size="lg" color="gray">
+                당신의 아이디어를 현실로 만들 팀원을 구해보세요! <br />
+                쪼잉은 더 나은 프로젝트 경험을 위해 시작되었습니다.
+              </Text>
+              <Button outline={true} round="3xl" size="md">
+                <Text>시작하기 {'>'}</Text>
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-end mb-8">
+            <div className="flex flex-col items-center gap-3" onClick={handleScroll}>
+              <div className="flex items-center justify-center rounded-[50%] size-12 bg-gray-100 cursor-pointer bounce">
+                <Image src={MouseIcon} width={20} height={20} alt="mouse-icon" />
+              </div>
+              <Text size="xs">스크롤을 내려주세요.</Text>
+            </div>
+          </div>
+          <div className="w-[400px] flex items-end justify-end">
+            <Sticker stickerUrl={ImagineProjectIcon} width={395} height={382} />
           </div>
-        </div>
-        <div className="w-[400px] flex items-end justify-end">
-          <Sticker stickerUrl={ImagineProject} width={395} height={382} />
-        </div>
-      </Wrapper>
-    </Container>
+        </Wrapper>
+      </Container>
+      <InterviewJJoing mouseRef={mouseRef} />
+    </>
   );
 };
 

apps/client/src/components/layouts/header.tsx

@@ -1,5 +1,4 @@
-import alarm from '@/assets/images/alarm-icon.svg';
-import mainLogo from '@/assets/images/logo.svg';
+import { AlarmIcon, MainLogo } from '@/assets/images';
 import { Text } from '@jjoing/ui';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -12,14 +11,20 @@ const Header = () => {
       <Wrapper className="h-[64px] flex items-center justify-between">
         <div className="flex items-center gap-12">
           <Link href="/">
-            <Image className="cursor-p" src={mainLogo} width={80} height={25} alt="img" />
+            <Image className="cursor-p" src={MainLogo} width={80} height={25} alt="img" />
           </Link>
           <Text className="cursor-p">프로젝트 목록</Text>
           <Text className="cursor-p">새 프로젝트</Text>
           <Text className="cursor-p">게시판</Text>
         </div>
         <div className="flex items-center gap-6 ">
-          <Image className="cursor-p" src={alarm} width={22} height={22} alt="alarm" />
+          <Image
+            className="cursor-p"
+            src={AlarmIcon}
+            width={22}
+            height={22}
+            alt="alarm"
+          />
           <div className="rounded-[50%] bg-gray-500 size-9 cursor-p" />
         </div>
       </Wrapper>

apps/client/src/components/layouts/wrapper.tsx

@@ -1,16 +1,20 @@
 import { cn } from '@jjoing/ui';
+import { ForwardedRef, forwardRef } from 'react';
 
 type WrapperProps = {
   children: React.ReactNode;
   className?: string;
 };
 
-const Wrapper = ({ children, className }: WrapperProps) => {
+const Wrapper = forwardRef(function Wrapper(
+  { children, className }: WrapperProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
   return (
-    <section className={cn('w-full mx-auto max-w-[1032px]', className)}>
+    <section ref={ref} className={cn('w-full mx-auto max-w-[1032px]', className)}>
       {children}
     </section>
   );
-};
+});
 
 export default Wrapper;

apps/client/src/styles/globals.css

@@ -139,3 +139,19 @@ table {
     background: linear-gradient(to right, #e1fff2 0%, #f7fffc 30%, white 70%, white 100%);
   }
 }
+
+@keyframes floatMouse {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.bounce {
+  animation: floatMouse 1.3s ease-in-out infinite;
+}