feat(client): 랜딩페이지(쪼잉 홍보 컴포넌트) 추가

apps/client/package.json

@@ -12,7 +12,8 @@
     "@jjoing/ui": "workspace:*",
     "next": "^14.0.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@jjoing/eslint-config": "workspace:*",

apps/client/src/app/page.tsx

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

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

@@ -1,8 +1,12 @@
 export { default as AlarmIcon } from './alarm-icon.svg';
+export { default as Cooperation } from './cooperation.webp';
 export { default as GithubIcon } from './github-icon.svg';
 export { default as ImagineProjectIcon } from './imagineProject-icon.svg';
+export { default as ImproveSkillIcon } from './improveSkill.webp';
 export { default as Interviewer1 } from './interviewer01.svg';
 export { default as Interviewer2 } from './interviewer02.svg';
 export { default as Interviewer3 } from './interviewer03.svg';
 export { default as MainLogo } from './logo.svg';
+export { default as MakeProjectIcon } from './makeProject.webp';
 export { default as MouseIcon } from './mouse-icon.svg';
+export { default as NetworkIcon } from './network.webp';

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

@@ -21,11 +21,9 @@ const InterviewCard = ({
   needs,
   icon,
 }: InterviewCardProps) => {
-  const inconvenienceText = inconvenience.split('\n');
-
   return (
     <m.div
-      className="border-2 border-lightPrimary w-[349px] h-[327px] rounded-3xl p-5"
+      className="border-2 border-lightPrimary w-[349px] h-[327px] rounded-3xl p-5 bg-white"
       initial={{ opacity: 0, y: 50 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, ease: 'easeInOut', delay: id * 0.1 }}
@@ -40,10 +38,8 @@ const InterviewCard = ({
               {developmentField}
             </Text>
           </div>
-          <Text weight="medium" size="lg" className="leading-6">
-            "{inconvenienceText[0]}
-            <br />
-            {inconvenienceText[1]}"
+          <Text weight="medium" size="lg" className="leading-6 whitespace-pre-line">
+            "{inconvenience}"
           </Text>
         </div>
         <Image src={icon} width={94} height={140} alt="icon" />

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

@@ -20,7 +20,7 @@ const InterviewJJoing = ({ mouseRef }: InterviewJJoingProps) => {
         </Text>
         <Text size="lg" className="text-center">
           프로젝트를 함께 할 팀원, 찾기 어렵고 먼저 연락하기 망설여진 적이 있나요? <br />
-          <Text size="x" weight="medium" color="primary">
+          <Text weight="medium" color="primary">
             팀원을 구할 때 느꼈던 불편한 점
           </Text>
           에 대해 물어보았습니다.

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

@@ -6,7 +6,6 @@ import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRef } from 'react';
 import { Container, Sticker, Wrapper } from '../layouts';
-import PromotionSolutionJJoing from './promotionSolutionJJoing';
 
 const InterviewJJoing = dynamic(() => import('./interviewJJoing'), {
   ssr: false,
@@ -66,7 +65,6 @@ const IntroduceJJoing = () => {
         </Wrapper>
       </Container>
       <InterviewJJoing mouseRef={mouseRef} />
-      <PromotionSolutionJJoing />
     </>
   );
 };

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

@@ -0,0 +1,21 @@
+import { IntroduceJJoing } from '@/components/landing';
+import PromotionSolutionJJoing from '@/components/landing/promotionJJoing';
+import { Text } from '@jjoing/ui';
+
+const LandingPage = () => {
+  return (
+    <>
+      <IntroduceJJoing />
+      <PromotionSolutionJJoing />
+      <div className="w-full h-[150px] flex items-center justify-center">
+        <div className="w-[150px] bg-primary h-[50px] rounded-full flex items-center justify-center cursor-p">
+          <Text color="white" size="md" weight="medium">
+            쪼잉 시작하기
+          </Text>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LandingPage;

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { PromotionMeta } from '@/constants/promotionMetadata';
+import { Text } from '@jjoing/ui';
+import { m } from 'framer-motion';
+import { useState } from 'react';
+import { IoIosArrowForward } from 'react-icons/io';
+import { Container, Sticker, Wrapper } from '../layouts';
+
+const PromotionSolutionJJoing = () => {
+  const [promotionClickId, setPromotionClickId] = useState('01'); // 아이디가 01 이런식이라 string 사용함
+
+  const selectedPromotion = PromotionMeta.find(
+    (promotion) => promotion.id === promotionClickId
+  );
+
+  return (
+    <Container className="content-container pt-6">
+      <Wrapper className="h-full flex flex-col items-center justify-center">
+        <div className="w-full flex justify-start">
+          <div className="flex flex-col gap-12">
+            <Text size="md" color="gray">
+              solutions
+            </Text>
+            <div className="flex flex-col gap-6">
+              <span className="text-f34 font-medium text-gray-800">서비스 소개</span>
+              <Text size="md" className="leading-5">
+                쪼잉에서{' '}
+                <Text size="md" color="primary" className="leading-5">
+                  최고의 팀원과 <br /> 함께
+                </Text>{' '}
+                팀을 꾸려보세요!
+              </Text>
+            </div>
+          </div>
+          <m.div
+            key={promotionClickId}
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 50 }}
+            transition={{ duration: 0.5 }}
+            className="w-5/6 flex items-center justify-center"
+          >
+            <div className="w-[68%] h-full flex flex-col gap-5">
+              <Text color="primary">{selectedPromotion?.id}</Text>
+              <span className="text-f24 font-semibold text-gray-800">
+                {selectedPromotion?.title}
+              </span>
+              <Text size="sm" weight="medium" className="leading-5 whitespace-pre-line">
+                {selectedPromotion?.explain}
+              </Text>
+            </div>
+          </m.div>
+        </div>
+        <div className="h-full w-[1080px] flex">
+          <div className="w-[25%] flex flex-col mt-14 gap-5">
+            {PromotionMeta.map((promotion) => (
+              <div
+                className={`w-full ${promotion.id === promotionClickId && 'bg-primary text-white'} h-[60px] rounded-full flex items-center justify-between px-7 transition duration-50 ease-in-out cursor-pointer hover:bg-primary hover:text-white`}
+                onClick={() => setPromotionClickId(promotion.id)}
+                key={promotion.id}
+              >
+                <div className="flex gap-6">
+                  <span className="font-semibold">{promotion.id}</span>
+                  <span className="font-semibold">{promotion.title}</span>
+                </div>
+                <IoIosArrowForward className="text-white size-[22px]" />
+              </div>
+            ))}
+          </div>
+          <div className="w-[70%] flex items-center justify-center">
+            <Sticker
+              key={promotionClickId}
+              stickerUrl={selectedPromotion?.icon as unknown as string}
+              width={400}
+              height={400}
+            />
+          </div>
+        </div>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default PromotionSolutionJJoing;

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

@@ -20,7 +20,7 @@ export const Sticker = ({ stickerUrl, width, height }: StickerProps) => {
         scale: { type: 'spring', damping: 8, stiffness: 100, restDelta: 0.001 },
       }}
     >
-      <Image alt="Target" src={stickerUrl} width={width} height={height} priority />
+      <Image alt="sticker" src={stickerUrl} width={width} height={height} priority />
     </m.div>
   );
 };

apps/client/src/constants/promotionMetadata.ts

@@ -0,0 +1,37 @@
+import {
+  Cooperation,
+  ImproveSkillIcon,
+  MakeProjectIcon,
+  NetworkIcon,
+} from '@/assets/images';
+
+export const PromotionMeta = [
+  {
+    id: '01',
+    title: '성장하면서 개발하기',
+    explain:
+      '팀원들과의 협업을 통해 실력을 향상시키고, 다양한 문제를 해결하면서 경험을 쌓을 수 있어요.\n실전 경험을 통해 개발자로서의 역량을 크게 키워보세요!',
+    icon: ImproveSkillIcon,
+  },
+  {
+    id: '02',
+    title: '프로젝트 찾기/만들기',
+    explain:
+      '관심 있는 주제의 프로젝트에 참여해 자신의 역량을 발휘할 수 있어요.\n만약 원하는 프로젝트가 없다면,직접 아이디어를 제안하고 팀을 꾸려 프로젝트를 만들어보세요!',
+    icon: MakeProjectIcon,
+  },
+  {
+    id: '03',
+    title: '체계적인 역할 분배',
+    explain:
+      '프로젝트 참여 전에 각 분야별로 어떤 역할의 개발자가 필요한지 미리 파악할 수 있어요.\n이를 통해 자신에게 적합한 역할을 찾고, 효율적으로 기여할 수 있어요.',
+    icon: Cooperation,
+  },
+  {
+    id: '04',
+    title: '네트워킹 기회',
+    explain:
+      '다양한 분야의 개발자들과 교류하며 네트워킹을 쌓을 수 있어요.\n같은 관심사를 가진 사람들과 교류하며 새로운 인사이트를 얻고, 협업의 기회를 넓혀보세요!',
+    icon: NetworkIcon,
+  },
+];

apps/client/tailwind.config.js

@@ -16,6 +16,9 @@ module.exports = {
       fontFamily: {
         pretendard: ['var(--font-pretendard)'],
       },
+      fontSize: {
+        ...sharedConfig.theme?.extend.fontSize,
+      },
     },
   },
   plugins: [],

packages/ui/src/Text/index.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { cn } from '../utils';
 
 type TextProps = {
-  size?: 'xxl' | 'xl' | 'x' | 'lg' | 'md' | 'sm' | 'xs';
+  size?: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
   color?: 'white' | 'black' | 'primary' | 'secondary' | 'gray400' | 'gray' | 'gray800';
   weight?: 'bold' | 'semibold' | 'medium' | 'light';
   onClick?: () => void;
@@ -17,7 +17,6 @@ const TextVariants = cva('', {
     size: {
       xxl: 'text-[57px] leading-[63px]',
       xl: 'text-5xl leading-[58px]',
-      x: 'text-1.5xl',
       lg: 'text-xl',
       md: 'text-lg',
       sm: 'text-base',

packages/ui/tailwind.config.js

@@ -10,12 +10,18 @@ module.exports = {
         secondaryHover: '#182A3E',
       },
       fontSize: {
-        '1.5xl': [
+        f24: [
           '24px',
           {
             lineHeight: '29px',
           },
         ],
+        f34: [
+          '34px',
+          {
+            lineHeight: '29px',
+          },
+        ],
       },
     },
   },