HOUME-CLIENT/src/pages/imageSetup/steps/interiorStyle/MoodboardCard.css.ts at 40f5505bcb6384eab674cce40930120ba62caaed · TEAM-HOUME/HOUME-CLIENT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';

import { colorVars } from '@styles/tokensV2/color.css';
import { fontVars } from '@styles/tokensV2/font.css';
import { unitVars } from '@styles/tokensV2/unit.css';

// 카드 컨테이너
// - default: 1px secondary 테두리, 둥근 사각형
// - selected: 1.5px strong 테두리
// - disabled: opacity 0.5
export const card = recipe({
  base: {
    aspectRatio: '164 / 240',
    position: 'relative',
    transition: 'transform 120ms ease',
    border: `1px solid ${colorVars.color.border.secondary}`,
    borderRadius: unitVars.unit.radius['600'],
    backgroundColor: 'transparent',
    cursor: 'pointer',
    padding: 0,
    width: '100%',
    overflow: 'hidden',
    font: 'inherit',
    selectors: {
      '&:active': {
        transform: 'scale(0.95)',
      },
    },
  },
  variants: {
    state: {
      default: {},
      selected: {
        border: `1.5px solid ${colorVars.color.border.strong}`,
      },
      disabled: {
        opacity: 0.5,
        cursor: 'not-allowed',
        selectors: {
          '&:active': {
            transform: 'none',
          },
        },
      },
    },
  },
  defaultVariants: {
    state: 'default',
  },
});

export const image = style({
  display: 'block',
  objectFit: 'cover',
  objectPosition: 'center',
  width: '100%',
  height: '100%',
  userSelect: 'none',
});

// 체크박스 — 우상단에 패딩 16px 영역 안에 위치
export const checkbox = recipe({
  base: {
    position: 'absolute',
    top: 0,
    right: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: 'none',
    background: 'transparent',
    pointerEvents: 'none',
    padding: unitVars.unit.gapPadding['400'],
  },
  variants: {
    state: {
      // default: 흰 stroke 빈 동그라미 20×20
      default: {},
      // selected: 다크 배경 24×24, 흰 숫자
      selected: {},
    },
  },
});

// 체크박스 안의 동그라미
export const circle = recipe({
  base: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition:
      'width 120ms ease, height 120ms ease, background-color 120ms ease',
    borderRadius: unitVars.unit.radius.full,
  },
  variants: {
    state: {
      default: {
        border: `1px solid ${colorVars.color.border.secondary}`,
        backgroundColor: `${colorVars.color.fill.inverseSecondary}`,
        width: '2.4rem',
        height: '2.4rem',
      },
      selected: {
        border: 'none',
        backgroundColor: colorVars.color.fill.strong,
        width: '2.4rem',
        height: '2.4rem',
        color: colorVars.color.text.inverse,
        ...fontVars.font.body_m_14,
      },
    },
  },
});