feat: ui-card 컴포넌트 추가

apps/trip-diary/package.json

@@ -34,7 +34,7 @@
         "eslint-plugin-react-refresh": "^0.4.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "typescript": "^5.0.2",
+        "typescript": "*",
         "vite": "^4.4.5",
         "vite-tsconfig-paths": "^4.2.1"
     }

my-blog.code-workspace

@@ -22,6 +22,6 @@
         }
     ],
     "settings": {
-        "typescript.tsdk": "node_modules/typescript/lib"
+        "typescript.tsdk": "🚀 @my-blog/trip-diary/node_modules/typescript/lib"
     }
 }

package.json

@@ -23,8 +23,12 @@
         "packages/*"
     ],
     "devDependencies": {
+        "prettier": "^3.0.3",
         "turbo": "^1.10.14",
-        "prettier": "^3.0.3"
+        "typescript": "^5.4.5"
     },
-    "packageManager": "pnpm@8.14.1"
+    "packageManager": "pnpm@8.14.1",
+    "resolutions": {
+        "typescript": "^5.4.5"
+    }
 }

packages/eslint-config-custom/index.cjs

@@ -88,7 +88,8 @@ module.exports = {
         'react/self-closing-comp': 'error',
         'react/no-unknown-property': ['error', { ignore: ['css'] }],
         'react/prop-types': 'off',
-        'quote-props': 'off'
+        'quote-props': 'off',
+        'react-refresh/only-export-components': 'off'
     },
     settings: {
         'import/resolver': {

packages/ui/package.json

@@ -36,7 +36,7 @@
         "@vitejs/plugin-react-swc": "^3.3.2",
         "eslint-plugin-storybook": "^0.6.14",
         "storybook": "^7.4.6",
-        "typescript": "^5.0.2",
+        "typescript": "*",
         "vite": "^4.4.5",
         "vite-plugin-dts": "^3.5.4",
         "vite-tsconfig-paths": "^4.2.1",

packages/ui/src/App.tsx

@@ -4,6 +4,7 @@ import { ButtonShape, ButtonSize } from '@components/button/types';
 
 import { ColorPalette } from '@components/color';
 import Button from '@components/button';
+import { CardContainer, CardFooter, CardHeader } from './components/card';
 
 function App() {
     return (
@@ -14,27 +15,47 @@ function App() {
                     column-gap: 10px;
                     padding-top: 12px;
                     padding-left: 10px;
+                    margin-bottom: 20px;
                 `}>
                 <Button.filled
+                    width='100px'
                     color={ColorPalette.ORANGE}
                     size={ButtonSize.SMALL}
                     shape={ButtonShape.RECTANGLE}>
                     button1
                 </Button.filled>
                 <Button.outlined
+                    width='120px'
+                    height='32px'
                     color={ColorPalette.PINK}
                     size={ButtonSize.MEDIUM}
                     shape={ButtonShape.ROUND}>
                     button2
                 </Button.outlined>
                 <Button.text
                     color={ColorPalette.BLUE}
-                    size={ButtonSize.LARGE}
-                    shape={ButtonShape.ROUND}>
+                    size={ButtonSize.LARGE}>
                     button3
                 </Button.text>
             </div>
-            {/* <Drawer /> */}
+            <CardContainer
+                width='320px'
+                height='180px'>
+                <CardHeader
+                    title='수빈카드'
+                    description='이건 수빈 카드에요'
+                />
+                <CardFooter>
+                    <Button.filled
+                        shape={ButtonShape.ROUND}
+                        size={ButtonSize.SMALL}
+                        width='100%'
+                        height='30px'
+                        color={ColorPalette.BALCK}>
+                        확인
+                    </Button.filled>
+                </CardFooter>
+            </CardContainer>
         </>
     );
 }

packages/ui/src/components/button/index.tsx

@@ -1,9 +1,19 @@
-import { TReactElementsWithChildren } from '@/types';
-import { ButtonVariant, IButtonProps } from './types';
+import { PropsWithChildren } from 'react';
+import { ButtonVariant, ButtonProps } from './types';
 
 import { FilledButton, OutlinedButton, TextButton } from './styles';
 
-const Button: TReactElementsWithChildren<ButtonVariant, IButtonProps> = {
+type ButtonPropsType = {
+    [key in ButtonVariant.FILLED | ButtonVariant.OUTLINED]: (
+        props: PropsWithChildren<ButtonProps>
+    ) => JSX.Element;
+} & {
+    [key in ButtonVariant.TEXT]: (
+        props: PropsWithChildren<Omit<ButtonProps, 'shape'>>
+    ) => JSX.Element;
+};
+
+const Button: ButtonPropsType = {
     [ButtonVariant.FILLED]: ({ children, ...props }) => (
         <FilledButton {...props}>{children}</FilledButton>
     ),

packages/ui/src/components/button/styles.ts

@@ -1,26 +1,20 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ColorPalette, ColorPaletteMapper } from '../color';
-import { ButtonShape, ButtonSize, IButtonProps } from './types';
+import { ButtonShape, ButtonSize, ButtonProps } from './types';
 
 const ButtonSizeMapper = {
     [ButtonSize.SMALL]: css({
         padding: '8px 6px',
-        height: '24px',
-        width: '60px',
-        fontSize: '12px'
+        fontSize: '14px'
     }),
     [ButtonSize.MEDIUM]: css({
         padding: '10px 12px',
-        height: '32px',
-        width: '80px',
-        fontSize: '14px'
+        fontSize: '16px'
     }),
     [ButtonSize.LARGE]: css({
         padding: '16px 12px',
-        height: '36px',
-        width: '160px',
-        fontSize: '16px'
+        fontSize: '18px'
     })
 };
 
@@ -37,7 +31,7 @@ const ButtonShapeMapper = {
     })
 };
 
-export const FilledButton = styled.button<IButtonProps>(
+export const FilledButton = styled.button<ButtonProps>(
     props => ({
         all: 'unset',
         fontWeight: 600,
@@ -46,7 +40,9 @@ export const FilledButton = styled.button<IButtonProps>(
         alignItems: 'center',
         color: ColorPaletteMapper[ColorPalette.WHITE][100],
         backgroundColor: ColorPaletteMapper[props.color][60],
-        cursor: 'pointer'
+        cursor: 'pointer',
+        width: props.width || '200px',
+        height: props.height || '46px'
     }),
     props => ({ ...ButtonSizeMapper[props.size] }),
     props => ({ ...ButtonShapeMapper[props.shape] }),
@@ -58,7 +54,7 @@ export const FilledButton = styled.button<IButtonProps>(
     })
 );
 
-export const OutlinedButton = styled.button<IButtonProps>(
+export const OutlinedButton = styled.button<ButtonProps>(
     props => ({
         all: 'unset',
         fontWeight: 600,
@@ -67,7 +63,9 @@ export const OutlinedButton = styled.button<IButtonProps>(
         alignItems: 'center',
         cursor: 'pointer',
         backgroundColor: ColorPaletteMapper[ColorPalette.WHITE][100],
-        color: ColorPaletteMapper[props.color][60]
+        color: ColorPaletteMapper[props.color][60],
+        width: props.width || '200px',
+        height: props.height || '46px'
     }),
     props => ({ ...ButtonSizeMapper[props.size] }),
     props => ({ ...ButtonShapeMapper[props.shape] }),
@@ -79,18 +77,13 @@ export const OutlinedButton = styled.button<IButtonProps>(
     }
 );
 
-export const TextButton = styled.button<IButtonProps>(
+export const TextButton = styled.button<Omit<ButtonProps, 'shape'>>(
     {
         all: 'unset',
         cursor: 'pointer',
         fontWeight: 600
     },
     props => ButtonSizeMapper[props.size],
-    props => ({
-        color: ColorPaletteMapper[props.color][60],
-        padding: 0,
-        width: 0
-        // height: 0
-    }),
+    props => ({ color: ColorPaletteMapper[props.color][60] }),
     { '&:hover': css({ textDecoration: 'underline' }) }
 );

packages/ui/src/components/button/types.ts

@@ -17,9 +17,11 @@ export enum ButtonShape {
     ROUND = 'round'
 }
 
-export interface IButtonProps {
+export interface ButtonProps {
     color: ColorPalette;
     size: ButtonSize;
     shape: ButtonShape;
+    width?: string;
+    height?: string;
     onClick?: () => void;
 }

packages/ui/src/components/card/container.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import { TPropsWithChildren } from '@/types';
+import { ColorPalette, ColorPaletteMapper } from '../color';
+import { CardContainerProps } from './types';
+
+const CardContainer: TPropsWithChildren<CardContainerProps> = ({
+    children,
+    ...args
+}) => {
+    return (
+        <div
+            css={css({
+                display: 'grid',
+                gridColumn: '1',
+                borderRadius: '10px',
+                padding: '16px 12px',
+                background: ColorPaletteMapper[ColorPalette.WHITE][100],
+                boxShadow:
+                    '0 2px 4px 0 rgba(0,0,0,0.2), 0 4px 16px 0 rgba(0,0,0,0.19)',
+                ...args
+            })}>
+            {children}
+        </div>
+    );
+};
+
+export default CardContainer;

packages/ui/src/components/card/content/index.tsx

@@ -0,0 +1 @@
+export { default as CardThumbnail } from './thumbnail';

packages/ui/src/components/card/content/thumbnail.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { CardThumbnailProps } from './types';
+
+const CardThumbnail: FC<CardThumbnailProps> = ({
+    title,
+    imageUrl,
+    description
+}) => {
+    // image + title + description
+    return (
+        <div>
+            <img
+                src={imageUrl}
+                alt={imageUrl}
+            />
+            <p>{title}</p>
+            {description && <span>{description}</span>}
+        </div>
+    );
+};
+
+export default CardThumbnail;

packages/ui/src/components/card/content/types.ts

@@ -0,0 +1,5 @@
+export interface CardThumbnailProps {
+    imageUrl: string;
+    title: string;
+    description?: string;
+}

packages/ui/src/components/card/footer.tsx

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { TPropsWithChildren } from '@/types';
+
+const CardFooter: TPropsWithChildren = ({ children }) => {
+    return (
+        <div
+            css={css`
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                padding: 8px;
+                column-gap: 6px;
+            `}>
+            {children}
+        </div>
+    );
+};
+
+export default CardFooter;

packages/ui/src/components/card/header.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { css } from '@emotion/react';
+import { CardHeaderDescription, CardHeaderTitle } from './styles';
+import { CardHeaderProps } from './types';
+
+const CardHeader: FC<CardHeaderProps> = ({ title, description }) => {
+    return (
+        <div
+            css={css`
+                display: flex;
+                flex-direction: column;
+                grid-row-gap: 4px;
+            `}>
+            {/* title */}
+            <CardHeaderTitle>{title}</CardHeaderTitle>
+            {/* description */}
+            {description && (
+                <CardHeaderDescription>{description}</CardHeaderDescription>
+            )}
+        </div>
+    );
+};
+
+export default CardHeader;

packages/ui/src/components/card/index.tsx

@@ -1,27 +1,5 @@
-import { TPropsWithChildren } from '@/types';
-import { ICardProps } from './types';
+export { default as CardHeader } from './header';
+export { default as CardFooter } from './footer';
+export { default as CardContainer } from './container';
 
-const Card: TPropsWithChildren<ICardProps> = ({
-    imageUrl, //
-    title,
-    explain
-}) => {
-    return (
-        <div>
-            {/*썸네일 자리 */}
-            <img
-                src={imageUrl}
-                alt='thumbnail'
-            />
-            {/* hover시 타이틀 + 설명 텍스트 */}
-            {title && explain && (
-                <div>
-                    <div>{title}</div>
-                    <div>{explain}</div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default Card;
+export * from './content';