[#103] feat: add and refactor icon and fix MultiSelect style (#105)

* feat: add script * feat: update design system * feat: add icon * feat: add renew design system and fix style * fix: delete useless * refactor: delete useles * style: fix icon color * fix: fix select style * fix: delete useless * refactor: delete dupl
dnd-side-project · Aug 26, 2024 · 9804da9 · 9804da9
1 parent a72cf94
commit 9804da9
Show file tree

Hide file tree

Showing 45 changed files with 165 additions and 322 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,10 @@
     "build:gongmuin-client": "nx run gongmuin-client:build",
     "dev-client": "nx run gongmuin-client:dev",
     "gen-icon-client": "nx run gongmuin-client:gen-icon",
-    "gen-design-system": "nx run gongmuin-client:gen-design-system"
+    "gen-design-system": "nx run gongmuin-client:gen-design-system",
+    "gen-api": "nx run gongmuin-client:gen-api",
+    "storybook": "nx run gmi-design-system:storybook",
+    "build-storybook": "nx run gmi-design-system:build-storybook",
+    "build-design-system": "nx run gmi-design-system:build"
   }
 }
diff --git a/packages/client/app/globals.css b/packages/client/app/globals.css
@@ -215,6 +215,8 @@ textarea,
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    background: transparent; /* 2 */
+   border: none;
+   text-decoration: none;
 }
 
 /*

diff --git a/packages/client/src/clientPages/home/ui/ClientHomePage.tsx b/packages/client/src/clientPages/home/ui/ClientHomePage.tsx
@@ -115,7 +115,7 @@ export function ClientHomePage() {
             size: 10,
          },
       })
-
+   console.log(recommendQuestions, questions)
    return (
       <>
          <MainLoader

diff --git a/packages/client/src/design-system/component/MultiSelect/index.tsx b/packages/client/src/design-system/component/MultiSelect/index.tsx
@@ -113,6 +113,7 @@ export function MultiSelect({
                   boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
                   backgroundColor: 'white',
                   overflow: 'hidden',
+                  gap: '6px',
                }}
             >
                {items.map((item) => (

diff --git a/packages/client/src/design-system/component/SNSButton/SNSButton.tsx b/packages/client/src/design-system/component/SNSButton/SNSButton.tsx
@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { color } from '@gds/token'
 import * as styles from './SNSButton.css'
 import { IconKakao } from '../../icon/default/IconKakao'
 import { IconNaver } from '../../icon/default/IconNaver'
@@ -23,7 +24,11 @@ export function SNSButton({
          {...props}
       >
          <div className={styles.LogoBox}>
-            {socialLoginType === 'kakao' ? <IconKakao /> : <IconNaver />}
+            {socialLoginType === 'kakao' ? (
+               <IconKakao />
+            ) : (
+               <IconNaver color={color.white} />
+            )}
          </div>
          <div
             className={styles.TxtBox({

diff --git a/packages/client/src/design-system/icon/default/IconCharacter.tsx b/packages/client/src/design-system/icon/default/IconCharacter.tsx
@@ -24,7 +24,10 @@ function IconCharacter(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g
+            clipPath={`
+               url(#${titleId})`}
+         >
             <path
                fill="#231815"
                stroke="#231815"
@@ -84,7 +87,7 @@ function IconCharacter(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M.09 0h143.824v150H.09z" />
             </clipPath>
          </defs>

diff --git a/packages/client/src/design-system/icon/default/IconChat.tsx b/packages/client/src/design-system/icon/default/IconChat.tsx
@@ -31,7 +31,7 @@ function IconChat(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 0h16v16H0z" />
             </clipPath>
          </defs>

diff --git a/packages/client/src/design-system/icon/default/IconCheckCircle.tsx b/packages/client/src/design-system/icon/default/IconCheckCircle.tsx
diff --git a/...em/icon/default/IconCheckCircleFilled.tsx → ...n-system/icon/default/IconCheckFilled.tsx b/...em/icon/default/IconCheckCircleFilled.tsx → ...n-system/icon/default/IconCheckFilled.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconCheckCircleFilled(
+function IconCheckFilled(
    {
-      title = 'IconCheckCircleFilled',
-      titleId = 'GDS-IconCheckCircleFilled',
+      title = 'IconCheckFilled',
+      titleId = 'GDS-IconCheckFilled',
       size = 20,
       color = '#2A2A2A',
       ...props
@@ -31,12 +31,12 @@ function IconCheckCircleFilled(
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 0h16v16H0z" />
             </clipPath>
          </defs>
       </svg>
    )
 }
-const ForwardRef = forwardRef(IconCheckCircleFilled)
-export { ForwardRef as IconCheckCircleFilled }
+const ForwardRef = forwardRef(IconCheckFilled)
+export { ForwardRef as IconCheckFilled }
diff --git a/packages/client/src/design-system/icon/default/IconLikesDefault.tsx b/packages/client/src/design-system/icon/default/IconLikesDefault.tsx
diff --git a/packages/client/src/design-system/icon/default/IconNaver.tsx b/packages/client/src/design-system/icon/default/IconNaver.tsx
@@ -24,15 +24,15 @@ function IconNaver(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M11.35 8.563 5.416 0H.5v16h5.15V7.436L11.584 16H16.5V0h-5.15z"
             />
          </g>
          <defs>
-            <clipPath id="a">
-               <path fill="#fff" d="M.5 0h16v16H.5z" />
+            <clipPath id={titleId}>
+               <path fill={color} d="M.5 0h16v16H.5z" />
             </clipPath>
          </defs>
       </svg>

diff --git a/packages/client/src/design-system/icon/default/IconPlus.tsx b/packages/client/src/design-system/icon/default/IconPlus.tsx
@@ -24,15 +24,15 @@ function IconPlus(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M19.25 13H13v6.25c0 .688-.562 1.25-1.25 1.25s-1.25-.562-1.25-1.25V13H4.25C3.563 13 3 12.438 3 11.75s.563-1.25 1.25-1.25h6.25V4.25c0-.687.563-1.25 1.25-1.25S13 3.563 13 4.25v6.25h6.25c.688 0 1.25.563 1.25 1.25S19.938 13 19.25 13"
             />
          </g>
          <defs>
-            <clipPath id="a">
-               <path fill="#fff" d="M0 0h24v24H0z" />
+            <clipPath id={titleId}>
+               <path fill={color} d="M0 0h24v24H0z" />
             </clipPath>
          </defs>
       </svg>

diff --git a/...ign-system/icon/default/IconWhiteLike.tsx → ...esign-system/icon/default/IconThumbUp.tsx b/...ign-system/icon/default/IconWhiteLike.tsx → ...esign-system/icon/default/IconThumbUp.tsx
@@ -2,10 +2,10 @@ import type { SVGProps } from 'react'
 import { Ref, forwardRef } from 'react'
 import type { IconProps } from '../shared/props'
 
-function IconWhiteLike(
+function IconThumbUp(
    {
-      title = 'IconWhiteLike',
-      titleId = 'GDS-IconWhiteLike',
+      title = 'IconThumbUp',
+      titleId = 'GDS-IconThumbUp',
       size = 20,
       color = '#2A2A2A',
       ...props
@@ -24,19 +24,19 @@ function IconWhiteLike(
          {...props}
       >
          {title ? <title id={titleId}>{title}</title> : null}
-         <g clipPath="url(#a)">
+         <g clipPath={`url(#${titleId})`}>
             <path
-               fill="#fff"
+               fill={color}
                d="M5.625 13.625h5.625c.519 0 .963-.312 1.15-.762l1.887-4.407q.087-.213.088-.456V6.75c0-.687-.562-1.25-1.25-1.25H9.181l.594-2.856.019-.2a.94.94 0 0 0-.275-.663l-.663-.656-4.118 4.119a1.24 1.24 0 0 0-.363.881v6.25c0 .688.563 1.25 1.25 1.25m0-7.5 2.713-2.712L7.5 6.75h5.625V8l-1.875 4.375H5.625zm-5 0h2.5v7.5h-2.5z"
             />
          </g>
          <defs>
-            <clipPath id="a">
+            <clipPath id={titleId}>
                <path fill="#fff" d="M0 .5h15v15H0z" />
             </clipPath>
          </defs>
       </svg>
    )
 }
-const ForwardRef = forwardRef(IconWhiteLike)
-export { ForwardRef as IconWhiteLike }
+const ForwardRef = forwardRef(IconThumbUp)
+export { ForwardRef as IconThumbUp }
diff --git a/packages/client/src/design-system/icon/default/PrimarySmile.tsx b/packages/client/src/design-system/icon/default/PrimarySmile.tsx
@@ -34,7 +34,10 @@ function PrimarySmile(
             strokeWidth={4}
             rx={91}
          />
-         <g clipPath={titleId}>
+         <g
+            clipPath={`
+               url(#${titleId})`}
+         >
             <path
                fill="#231815"
                stroke="#231815"

diff --git a/packages/client/src/design-system/icon/default/index.ts b/packages/client/src/design-system/icon/default/index.ts
@@ -9,8 +9,7 @@ export { IconBookmarkFilled } from './IconBookmarkFilled'
 export { IconCharacter } from './IconCharacter'
 export { IconChat } from './IconChat'
 export { IconCheck } from './IconCheck'
-export { IconCheckCircle } from './IconCheckCircle'
-export { IconCheckCircleFilled } from './IconCheckCircleFilled'
+export { IconCheckFilled } from './IconCheckFilled'
 export { IconClose } from './IconClose'
 export { IconCredit } from './IconCredit'
 export { IconCreditFill } from './IconCreditFill'
@@ -28,7 +27,6 @@ export { IconNaver } from './IconNaver'
 export { IconPlus } from './IconPlus'
 export { IconSearch } from './IconSearch'
 export { IconThumbUpFilled } from './IconThumbUpFilled'
-export { IconWhiteLike } from './IconWhiteLike'
+export { IconThumbUp } from './IconThumbUp'
 export { PrimarySmile } from './PrimarySmile'
 export { SplashLogo } from './SplashLogo'
-export { IconLikesDefault } from './IconLikesDefault'
diff --git a/packages/client/src/entities/@types/question.ts b/packages/client/src/entities/@types/question.ts
diff --git a/packages/client/src/entities/@types/signup.ts b/packages/client/src/entities/@types/signup.ts
diff --git a/packages/client/src/shared/ui/QuestionList/Question.tsx b/packages/client/src/shared/ui/QuestionList/Question.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { IconBookmark, IconCredit, IconLikesDefault } from '@gds/icon'
+import { IconBookmark, IconCredit, IconThumbUp } from '@gds/icon'
 import { Badge } from '@gds/component'
 import { color } from '@gds/token'
 import { QuestionPostSimpleResponse } from '@server-api/api'
@@ -78,7 +78,7 @@ function Question({ data }: Props) {
                   {data.savedCount}
                </div>
                <div className={styles.QuestionIconBox} />
-               <IconLikesDefault color={color['gray-300']} />
+               <IconThumbUp color={color['gray-300']} />
                <div className={styles.QuestionIconTxtBox}>
                   {data.recommendCount}
                </div>

diff --git a/packages/client/src/widgets/Home/ui/Recommend/index.tsx b/packages/client/src/widgets/Home/ui/Recommend/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { IconBookmark, IconCredit, IconWhiteLike } from '@gds/icon'
+import { IconBookmark, IconCredit, IconThumbUp } from '@gds/icon'
 import { Badge } from '@gds/component'
 import { color } from '@gds/token'
 import { QuestionPostSimpleResponse } from '@server-api/api'
@@ -53,7 +53,7 @@ function HomeRecommend({
                </div>
                <div className={styles.NumberBox}>{savedCount}</div>
                <div>
-                  <IconWhiteLike size={15} />
+                  <IconThumbUp color={color.white} size={15} />
                </div>
                <div className={styles.NumberBox}>{recommendCount}</div>
             </div>

diff --git a/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx b/packages/client/src/widgets/QuestionDetail/ui/AnswerCard.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '@gds/component'
-import { IconChat, IconCheckCircle, IconCheckCircleFilled } from '@gds/icon'
+import { IconChat, IconCheck, IconCheckFilled } from '@gds/icon'
 import { color, Typo } from '@gds/token'
 import { AnswerDetailResponse } from '@server-api/api'
 import {
@@ -79,9 +79,9 @@ export function AnswerCard({ answerSelectDone, answerData, userId }: Props) {
                   size="small"
                   rightIcon={
                      answerData?.isChosen ? (
-                        <IconCheckCircle size={16} />
+                        <IconCheck size={16} />
                      ) : (
-                        <IconCheckCircleFilled
+                        <IconCheckFilled
                            size={16}
                            color={color['primary-main']}
                         />