feat(ui): design-token추가 및 tailwindcss.config.js 파일 수정 (#26)

* fix(ui): button 컴포넌트 디자이너 요청에 맞게 수정 * fix(ui): input 컴포넌트 디자이너 요청에 맞게 수정 * fix(ui): spinner 컴포넌트 디자이너 요청에 맞게 수정 * fix(ui): text 컴포넌트 디자이너 요청에 맞게 수정 * fix(ui): 전체적인 스토리북 세팅 수정 * feat(ui): design-token 폴더 추가 * fix(client): 새로운 Text 컴포넌트에 맞게 페이지 수정 * fix: 패키지 순환참조 오류 수정 * fix: docs, web을 admin, client 로 수정 * feat(ci): 캐시 기능 추가 * fix(ci): 불필요한 ci 요소 제거
WOONGEYA · Sep 12, 2024 · 56715c4 · 56715c4
1 parent 72a09c3
commit 56715c4
Show file tree

Hide file tree

Showing 38 changed files with 3,734 additions and 682 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,31 +11,28 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Set up Node.js
+      - name: Set up Node.js and pnpm
         uses: actions/setup-node@v3
         with:
           node-version: 18
 
-      - name: Set up shell
-        run: |
-          sudo ln -sf /bin/bash /bin/sh
-
       - name: Check out code
         uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - name: Install dependencies
-        run: npm install -g pnpm
-
-      - name: Check npm version
-        run: npm --version
-
-      - name: Check pnpm version
-        run: pnpm --version
+      - name: Cache pnpm store
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - name: Install project dependencies
-        run: pnpm install
+      - name: Install pnpm and project dependencies
+        run: |
+          npm install -g pnpm
+          pnpm install
 
       - name: Build
         run: pnpm run build
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "web",
+  "name": "admin",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "docs",
+  "name": "client",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/apps/client/public/images/imagine-icon.svg b/apps/client/public/images/imagine-icon.svg
diff --git a/apps/client/public/images/imagine-icon.webp b/apps/client/public/images/imagine-icon.webp
diff --git a/apps/client/src/components/header/index.tsx b/apps/client/src/components/header/index.tsx
@@ -17,13 +17,13 @@ const Header = () => {
               alt="img"
             />
           </Link>
-          <Text size="md" className="cursor-p">
+          <Text type="body2" className="cursor-p">
             프로젝트 목록
           </Text>
-          <Text size="md" className="cursor-p">
+          <Text type="body2" className="cursor-p">
             새 프로젝트
           </Text>
-          <Text size="md" className="cursor-p">
+          <Text type="body2" className="cursor-p">
             게시판
           </Text>
         </div>

diff --git a/apps/client/src/components/landing/index.ts b/apps/client/src/components/landing/index.ts
@@ -1,3 +1,6 @@
 export { default as InterviewCard } from './interviewCard';
 export { default as InterviewJJoing } from './interviewJJoing';
 export { default as IntroduceJJoing } from './introduceJJoing';
+export { default as LandingPage } from './landing';
+export { default as PromotionDetails } from './promotionDetails';
+export { default as PromotionJJoing } from './promotionJJoing';
diff --git a/apps/client/src/components/landing/interviewCard.tsx b/apps/client/src/components/landing/interviewCard.tsx
@@ -31,26 +31,26 @@ const InterviewCard = ({
       <div className="flex border-b pb-3 border-gray-300 h-[185px]">
         <div className="w-3/5 flex flex-col justify-evenly gap-5 mb-4">
           <div className="flex flex-col gap-[2px]">
-            <Text size="md" weight="semibold">
+            <Text type="body2" className="text-gray-800">
               {name}
             </Text>
-            <Text size="sm" weight="medium">
+            <Text type="body3" className="text-gray-800">
               {developmentField}
             </Text>
           </div>
-          <Text weight="medium" size="lg" className="leading-6 whitespace-pre-line">
+          <Text type="body1" className="leading-6 whitespace-pre-line text-gray-800">
             "{inconvenience}"
           </Text>
         </div>
         <Image src={icon} width={94} height={140} alt="icon" />
       </div>
       <div className="h-[100px] pt-3 flex flex-col">
-        <Text size="md" className="mb-3">
+        <Text type="body2" className="mb-3 text-gray-800">
           NEEDS
         </Text>
         <ul className="md:list-disc">
           {needs.map((need, index) => (
-            <li className="ml-6 mt-1" key={index}>
+            <li className="ml-6 mt-1 text-gray-800" key={index}>
               {need}
             </li>
           ))}

diff --git a/apps/client/src/components/landing/interviewJJoing.tsx b/apps/client/src/components/landing/interviewJJoing.tsx
@@ -15,12 +15,12 @@ const InterviewJJoing = ({ mouseRef }: InterviewJJoingProps) => {
         className="h-full flex flex-col items-center justify-center gap-8"
         ref={mouseRef}
       >
-        <Text size="md" color="gray">
+        <Text type="body1" className="text-gray-500">
           Interview
         </Text>
-        <Text size="lg" className="text-center">
+        <Text type="title2" className="text-center text-gray-800 font-medium">
           프로젝트를 함께 할 팀원, 찾기 어렵고 먼저 연락하기 망설여진 적이 있나요? <br />
-          <Text weight="medium" color="primary">
+          <Text type="title2" className="text-primary">
             팀원을 구할 때 느꼈던 불편한 점
           </Text>
           에 대해 물어보았습니다.

diff --git a/apps/client/src/components/landing/introduceJJoing.tsx b/apps/client/src/components/landing/introduceJJoing.tsx
@@ -5,6 +5,7 @@ import { Button, Text } from '@jjoing/ui';
 import dynamic from 'next/dynamic';
 import { useRef } from 'react';
 import { BsMouse } from 'react-icons/bs';
+import { IoIosArrowForward } from 'react-icons/io';
 import { Container, Sticker, Wrapper } from '../layouts';
 
 const InterviewJJoing = dynamic(() => import('./interviewJJoing'), {
@@ -21,36 +22,36 @@ const IntroduceJJoing = () => {
         <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">
+              <Text type="title1" className="text-gray-800">
                 내가 원하는 <br />
                 최고의 팀원과 <br />
                 지금 바로
-                <Text size="xxl" weight="bold" color="primary" className="ml-3">
+                <Text type="heading" className="text-primary ml-3">
                   쪼잉
                 </Text>
                 <br />
               </Text>
-              <Text size="lg" color="gray">
+              <Text type="body1" className="text-gray-400">
                 당신의 아이디어를 현실로 만들 팀원을 구해보세요! <br />
                 쪼잉은 더 나은 프로젝트 경험을 위해 시작되었습니다.
               </Text>
-              <Button outline={true} round="3xl" size="md" className="text-gray-800">
-                시작하기 {'>'}
+              <Button bgColor="borderPrimary" width={140} height="h50" rounded="full">
+                <span className="flex items-center gap-[2px] text-xl font-medium">
+                  시작하기 <IoIosArrowForward />
+                </span>
               </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">
-                <BsMouse className="size-[25px] font-medium text-gray-400" />
+                <BsMouse className="size-[25px] text-gray-400" />
               </div>
-              <Text size="xs" color="gray400">
-                스크롤을 내려주세요.
-              </Text>
+              <Text className="text-xs text-gray-400">스크롤을 내려주세요.</Text>
             </div>
           </div>
           <div className="w-[400px] flex items-end justify-end">
-            <Sticker stickerUrl="/images/imagine-icon.svg" width={380} height={384} />
+            <Sticker stickerUrl="/images/imagine-icon.webp" width={380} height={384} />
           </div>
         </Wrapper>
       </Container>

diff --git a/apps/client/src/components/landing/landing.tsx b/apps/client/src/components/landing/landing.tsx
@@ -1,19 +1,10 @@
-import { IntroduceJJoing } from '@/components/landing';
-import PromotionSolutionJJoing from '@/components/landing/promotionJJoing';
-import { Text } from '@jjoing/ui';
+import { IntroduceJJoing, PromotionJJoing } from '@/components/landing';
 
 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>
+      <PromotionJJoing />
     </>
   );
 };

diff --git a/apps/client/src/components/landing/promotionDetails.tsx b/apps/client/src/components/landing/promotionDetails.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { Text } from '@jjoing/ui';
+import { m } from 'framer-motion';
+
+type PromotionDetailsTypes = {
+  id?: string;
+  title?: string;
+  explain?: string;
+};
+
+const PromotionDetails = ({ id, title, explain }: PromotionDetailsTypes) => {
+  return (
+    <m.div
+      key={id}
+      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 type="body1" className="text-primary">
+          {id}
+        </Text>
+        <span className="text-f24 font-semibold text-gray-800">{title}</span>
+        <Text type="body3" className="leading-5 whitespace-pre-line">
+          {explain}
+        </Text>
+      </div>
+    </m.div>
+  );
+};
+
+export default PromotionDetails;
diff --git a/apps/client/src/components/landing/promotionJJoing.tsx b/apps/client/src/components/landing/promotionJJoing.tsx
@@ -2,12 +2,12 @@
 
 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';
+import PromotionDetails from './promotionDetails';
 
-const PromotionSolutionJJoing = () => {
+const PromotionJJoing = () => {
   const [promotionClickId, setPromotionClickId] = useState('01'); // 아이디가 01 이런식이라 string 사용함
 
   const selectedPromotion = PromotionMeta.find(
@@ -19,38 +19,21 @@ const PromotionSolutionJJoing = () => {
       <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">
+            <Text type="body2" className="text-gray-500">
               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">
+              <span className="text-f34 font-semibold text-gray-800">서비스 소개</span>
+              <Text type="body1" className="leading-5 text-gray-800">
                 쪼잉에서{' '}
-                <Text size="md" color="primary" className="leading-5">
-                  최고의 팀원과 <br /> 함께
-                </Text>{' '}
+                <Text type="body1" className="leading-5 text-primary">
+                  최고의 팀원과 <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>
+          <PromotionDetails {...selectedPromotion} />
         </div>
         <div className="h-full w-[1080px] flex">
           <div className="w-[25%] flex flex-col mt-14 gap-5">
@@ -61,8 +44,8 @@ const PromotionSolutionJJoing = () => {
                 key={promotion.id}
               >
                 <div className="flex gap-6">
-                  <span className="font-semibold">{promotion.id}</span>
-                  <span className="font-semibold">{promotion.title}</span>
+                  <Text type="body2">{promotion.id}</Text>
+                  <Text type="body2">{promotion.title}</Text>
                 </div>
                 <IoIosArrowForward className="text-white size-[22px]" />
               </div>
@@ -82,4 +65,4 @@ const PromotionSolutionJJoing = () => {
   );
 };
 
-export default PromotionSolutionJJoing;
+export default PromotionJJoing;
diff --git a/apps/client/tailwind.config.js b/apps/client/tailwind.config.js
@@ -1,29 +1,9 @@
-const sharedConfig = require('@jjoing/ui/tailwind.config.js');
+import sharedConfig from '@jjoing/ui/tailwind.config.js';
 
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   ...sharedConfig,
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     './node_modules/@jjoing/ui/src/**/*.{js,jsx,ts,tsx}',
   ],
-  theme: {
-    extend: {
-      colors: {
-        ...sharedConfig.theme?.extend.colors,
-        lightPrimary: '#7DC7A4',
-      },
-      fontFamily: {
-        pretendard: ['var(--font-pretendard)'],
-      },
-      fontSize: {
-        ...sharedConfig.theme?.extend.fontSize,
-      },
-      backgroundImage: {
-        'main-gradient':
-          'linear-gradient(to right, #e1fff2 0%, #f7fffc 30%, white 70%, white 100%)',
-      },
-    },
-  },
-  plugins: [],
 };
diff --git a/package.json b/package.json
@@ -10,11 +10,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,jsx}": [
-      "prettier --write",
-      "eslint --fix"
-    ],
-    "*.{ts,tsx}": [
+    "*.{js,jsx,ts,tsx}": [
       "prettier --write"
     ]
   },