- (
+ selectedActivityCode
+ );
+
+ const handleConfirm = () => {
+ if (!localSelected) return;
+ onConfirm(localSelected);
+ };
+
+ return (
+
+
+ }
+ primaryButton={
+
-
diff --git a/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.css.ts b/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.css.ts
new file mode 100644
index 000000000..8daf8cb13
--- /dev/null
+++ b/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.css.ts
@@ -0,0 +1,96 @@
+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';
+
+export const contents = style({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: unitVars.unit.gapPadding['500'],
+ width: '100%',
+});
+
+export const radioList = style({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: unitVars.unit.gapPadding['100'],
+ width: '100%',
+});
+
+export const radioItem = recipe({
+ base: {
+ display: 'flex',
+ alignItems: 'center',
+ transition: 'transform 120ms ease, background-color 120ms ease',
+ border: 'none',
+ borderRadius: unitVars.unit.radius.full,
+ cursor: 'pointer',
+ padding: `${unitVars.unit.gapPadding['200']} ${unitVars.unit.gapPadding['400']}`,
+ width: '100%',
+ minWidth: '6.4rem',
+ height: '4.4rem',
+ font: 'inherit',
+ selectors: {
+ '&:active': {
+ transform: 'scale(0.95)',
+ },
+ },
+ },
+ variants: {
+ selected: {
+ false: {
+ backgroundColor: colorVars.color.fill.inverse,
+ },
+ true: {
+ backgroundColor: colorVars.color.fill.weak,
+ },
+ },
+ },
+});
+
+export const radioContents = style({
+ display: 'flex',
+ alignItems: 'center',
+ gap: unitVars.unit.gapPadding['100'],
+});
+
+export const radioLabel = style({
+ ...fontVars.font.body_r_14,
+ color: colorVars.color.text.primary,
+});
+
+export const divider = recipe({
+ base: {
+ borderRadius: '50%',
+ width: '0.3rem',
+ height: '0.3rem',
+ },
+ variants: {
+ selected: {
+ false: {
+ backgroundColor: colorVars.color.text.tertiary,
+ },
+ true: {
+ backgroundColor: colorVars.color.text.secondary,
+ },
+ },
+ },
+});
+
+export const requiredLabel = recipe({
+ base: {
+ ...fontVars.font.body_r_14,
+ },
+ variants: {
+ selected: {
+ false: {
+ color: colorVars.color.text.tertiary,
+ },
+ true: {
+ color: colorVars.color.text.secondary,
+ },
+ },
+ },
+});
diff --git a/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.tsx b/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.tsx
new file mode 100644
index 000000000..6811a1dd3
--- /dev/null
+++ b/src/pages/imageSetup/steps/activityInfo/ActivityTypeSheet.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react';
+
+import DragHandleBottomSheet from '@components/v2/bottomSheet/DragHandleBottomSheet';
+import ActionButton from '@components/v2/button/actionButton/ActionButton';
+import Icon from '@components/v2/icon/Icon';
+import TextHeading from '@components/v2/textHeading/TextHeading';
+
+import { getActivityIconName } from './activityIcons';
+import * as styles from './ActivityTypeSheet.css';
+
+import type { ActivityItem } from '../../types/apis/activityInfo';
+
+interface ActivityTypeSheetProps {
+ open: boolean;
+ activities: ActivityItem[];
+ selectedActivityCode?: string;
+ onConfirm: (activityCode: string) => void;
+ onClose: () => void;
+}
+
+const ActivityTypeSheet = ({
+ open,
+ activities,
+ selectedActivityCode,
+ onConfirm,
+ onClose,
+}: ActivityTypeSheetProps) => {
+ // 로컬 선택 상태 (확인 버튼 클릭 전까지 context에 미반영)
+ const [localSelected, setLocalSelected] = useState
-
+
-
- options={activityOptionsData.activities}
- selectedValues={activitySelection.selectedValues}
- onSelectionChange={activitySelection.handleActivityChange}
- keyExtractor={(option) => option.code}
- selectionMode="single"
- buttonSize="large"
- layout="grid-2"
- />
-
- {selectedActivityLabel && (
-
-
- )}
-
+
+
+ {selectedActivityLabel && (
+
+
-
-
+
- title={activityOptionsData.categories[0].nameKr}
- titleSize="small"
- hasBorder={true}
- options={activityOptionsData.categories[0].furnitures}
- selectedValues={categorySelections.bed.selectedValues}
- onSelectionChange={categorySelections.bed.handleChange}
- keyExtractor={(option) => option.id!}
- selectionMode="single"
- buttonSize="xsmall"
- layout="grid-4"
- buttonStatuses={categorySelections.bed.furnitureStatus}
- />
-
-
- title={activityOptionsData.categories[1].nameKr}
- titleSize="small"
- hasBorder={true}
- options={activityOptionsData.categories[1].furnitures}
- selectedValues={categorySelections.sofa.selectedValues}
- onSelectionChange={categorySelections.sofa.handleChange}
- keyExtractor={(option) => option.id!}
- selectionMode="single"
- buttonSize="medium"
- layout="grid-2"
- buttonStatuses={categorySelections.sofa.furnitureStatus}
- />
-
-
- title={activityOptionsData.categories[2].nameKr}
- titleSize="small"
- options={activityOptionsData.categories[2].furnitures}
- selectedValues={categorySelections.storage.selectedValues}
- onSelectionChange={categorySelections.storage.handleChange}
- keyExtractor={(option) => option.id!}
- selectionMode="multiple"
- buttonSize="large"
- layout="grid-2"
- buttonStatuses={categorySelections.storage.furnitureStatus}
+ caption="선택한 가구들로 이미지를 생성해드려요. (최대 6개)"
/>
-
-
- title={activityOptionsData.categories[3].nameKr}
- titleSize="small"
- options={activityOptionsData.categories[3].furnitures}
- selectedValues={categorySelections.table.selectedValues}
- onSelectionChange={categorySelections.table.handleChange}
- keyExtractor={(option) => option.id!}
- selectionMode="multiple"
- buttonSize="small"
- layout="grid-3"
- buttonStatuses={categorySelections.table.furnitureStatus}
- />
-
-
- title={activityOptionsData.categories[4].nameKr}
- titleSize="small"
- options={activityOptionsData.categories[4].furnitures}
- selectedValues={categorySelections.selective.selectedValues}
- onSelectionChange={categorySelections.selective.handleChange}
- keyExtractor={(option) => option.id!}
- selectionMode="multiple"
- buttonSize="large"
- layout="grid-2"
- buttonStatuses={categorySelections.selective.furnitureStatus}
- />
-
-
-
-
- 이미지 생성하기
-
+
+ )}
+
+ {/* TODO: 추후 Chip 최신화하기 (아이콘 포함 Chip 반영) */}
+ {categories.map((category) => {
+ const selection = selectionByNameEng[category.nameEng];
+ if (!selection) return null;
+
+ return (
+
+ {category.nameKr}
+
+ );
+ })}
+
+ {category.furnitures.map((furniture) => {
+ const isSelected = selection.selectedValues.includes(
+ furniture.id
+ );
+ const status = selection.furnitureStatus.find(
+ (s) => s.id === furniture.id
+ );
+ const isRequired =
+ globalConstraints.isRequiredFurniture(furniture.id);
+
+ return (
+
+
+
+ 이미지 생성하기
+
)}
+ {activities.map((activity) => {
+ const isSelected = localSelected === activity.code;
+ const iconName = getActivityIconName(
+ activity.code,
+ isSelected ? 'black' : 'gray'
+ );
+ const requiredFurnitureLabel = activity.furnitures[0]?.label;
+
+ return (
+
+ );
+ })}
+
+
- {
onImageSelect={handleImageSelect}
/>
, 'children' | 'type'> {
+ src: string;
+ alt: string;
+ selectOrder?: number;
+}
+
+const MoodboardCard = ({
+ src,
+ alt,
+ selectOrder = 0,
+ disabled = false,
+ className,
+ ...rest
+}: MoodboardCardProps) => {
+ const isSelected = selectOrder > 0;
+
+ // 카드 컨테이너 스타일 상태 (disabled가 우선)
+ const cardState = disabled ? 'disabled' : isSelected ? 'selected' : 'default';
+ // 체크박스(index 동그라미) 스타일 상태 (선택 여부만 반영)
+ const checkState = isSelected ? 'selected' : 'default';
+
+ return (
+
+ );
+};
+
+export default MoodboardCard;
diff --git a/src/pages/imageSetup/stores/useFunnelStore.ts b/src/pages/imageSetup/stores/useFunnelStore.ts
index 26695734b..e0fb70a5f 100644
--- a/src/pages/imageSetup/stores/useFunnelStore.ts
+++ b/src/pages/imageSetup/stores/useFunnelStore.ts
@@ -13,16 +13,16 @@ interface FunnelStore {
activityInfo: {
// ActivityInfo 스텝은 마지막 단계이므로 '다음' 버튼 X -> formData 값 바뀔 때마다 실시간으로 값 변경 반영 필요
// 따라서 undefined도 저장할 수 있도록 optional 프로퍼티로 선언
- activityType?: string;
- selectiveIds?: number[];
+ activity?: string;
+ furnitureIds?: number[];
} | null;
// 각 스텝의 데이터 저장
setFloorPlan: (data: { floorPlanId: number; isMirror: boolean }) => void;
setMoodBoardIds: (ids: number[]) => void;
setActivityInfo: (data: {
- activityType?: string;
- selectiveIds?: number[];
+ activity?: string;
+ furnitureIds?: number[];
}) => void;
// 초기화
diff --git a/src/pages/imageSetup/types/apis/activityInfo.ts b/src/pages/imageSetup/types/apis/activityInfo.ts
index f4c6129b9..87b43dd4f 100644
--- a/src/pages/imageSetup/types/apis/activityInfo.ts
+++ b/src/pages/imageSetup/types/apis/activityInfo.ts
@@ -1,15 +1,24 @@
-// Activity Options API 타입 정의
-export interface ActivityOptionItem {
- code: string;
- label: string;
-}
+// Activity 스텝 API 타입 정의
+// 가구 단일 항목
export interface FurnitureOptionItem {
- id: number;
- code: string;
- label: string;
+ id: number; // 7
+ code: string; // DESK
+ label: string; // 업무용 책상
+}
+
+// GET /api/v2/dashboard/activities — 주요활동 조회
+export interface ActivityItem {
+ code: string; // REMOTE_WORK
+ label: string; // 재택근무형
+ furnitures: FurnitureOptionItem[]; // 필수 가구
+}
+
+export interface ActivitiesResponse {
+ activities: ActivityItem[];
}
+// GET /api/v2/dashboard/categories — 가구 카테고리 조회
export interface FurnitureCategory {
categoryId: number;
nameKr: string;
@@ -17,7 +26,6 @@ export interface FurnitureCategory {
furnitures: FurnitureOptionItem[];
}
-export interface ActivityOptionsResponse {
- activities: ActivityOptionItem[];
+export interface FurnitureCategoriesResponse {
categories: FurnitureCategory[];
}
diff --git a/src/pages/imageSetup/types/funnel/activityInfo.ts b/src/pages/imageSetup/types/funnel/activityInfo.ts
index 25ea46fb3..007a87ee4 100644
--- a/src/pages/imageSetup/types/funnel/activityInfo.ts
+++ b/src/pages/imageSetup/types/funnel/activityInfo.ts
@@ -1,42 +1,18 @@
-// ActivityInfo 도메인 관련 모든 타입 통합 관리
-
-// 폼 데이터 타입 (사용자 입력값)
+// ActivityInfo 스텝 폼 데이터 타입 (사용자 입력값)
export type ActivityInfoFormData = {
- activityType?: string;
- selectiveIds?: number[];
-};
-
-// funnel 스텝 컨텍스트 타입
-export type ActivityInfoContext = {
- houseType: string;
- roomType: string;
- areaType: string;
- houseId: number;
- floorPlan: {
- floorPlanId: number;
- isMirror: boolean;
- };
- moodBoardIds: number[];
- activityType?: string;
- selectiveIds?: number[];
+ activity?: string;
+ furnitureIds?: number[];
};
-// 완성된 ActivityInfo 데이터 타입
-export type CompletedActivityInfo = Required;
-
-// 에러 타입
-export type ActivityInfoErrors = {
- activityType?: string;
- selectiveIds?: string;
-};
-
-// 카테고리별 선택 설정
+// 가구 카테고리별 선택 모드
+// - single: 하나만 선택 가능 (재선택 시 해제)
+// - multiple: 여러 개 선택 가능
export type CategorySelectionMode = 'single' | 'multiple';
-export const CATEGORY_SELECTION_CONFIG = {
- BED: 'single' as CategorySelectionMode, // 침대
- SOFA: 'single' as CategorySelectionMode, // 소파
- STORAGE: 'multiple' as CategorySelectionMode, // 수납
- TABLE: 'multiple' as CategorySelectionMode, // 테이블
- ETC: 'multiple' as CategorySelectionMode, // 그외
-} as const;
+// 가구 카테고리별 선택 모드 매핑 (API 응답의 nameEng를 키로 사용)
+export const CATEGORY_SELECTION_MODE: Record = {
+ BED: 'single',
+ SOFA: 'multiple',
+ TABLE: 'multiple',
+ SELECTIVE: 'multiple',
+};
diff --git a/src/pages/imageSetup/types/funnel/steps.ts b/src/pages/imageSetup/types/funnel/steps.ts
index fed8cf509..1b961c86b 100644
--- a/src/pages/imageSetup/types/funnel/steps.ts
+++ b/src/pages/imageSetup/types/funnel/steps.ts
@@ -14,12 +14,12 @@ export type ImageSetupSteps = {
floorPlan: FloorPlan;
moodBoardIds?: number[];
};
- // 이전 단계 입력값 누적 + activityType, selectiveIds
+ // 이전 단계 입력값 누적 + activity, furnitureIds
ActivityInfo: {
floorPlan: FloorPlan;
moodBoardIds: number[];
- activityType?: string;
- selectiveIds?: number[];
+ activity?: string;
+ furnitureIds?: number[];
};
};
diff --git a/src/pages/imageSetup/utils/staticDataPrefetch.ts b/src/pages/imageSetup/utils/staticDataPrefetch.ts
index 37918a74e..1fff69e43 100644
--- a/src/pages/imageSetup/utils/staticDataPrefetch.ts
+++ b/src/pages/imageSetup/utils/staticDataPrefetch.ts
@@ -1,6 +1,7 @@
import { queryKeys } from '@constants/queryKey';
-import { getActivityOptions } from '../apis/queries/useActivityOptionsQuery';
+import { getActivities } from '../apis/queries/useActivitiesQuery';
+import { getFurnitureCategories } from '../apis/queries/useFurnitureCategoriesQuery';
import { getHousingOptions } from '../apis/queries/useHousingOptionsQuery';
import { getMoodBoardImage } from '../apis/queries/useMoodBoardQuery';
import { MOOD_BOARD_CONSTANTS } from '../types/apis/interiorStyle';
@@ -19,10 +20,18 @@ export const prefetchStaticData = (queryClient: QueryClient) => {
gcTime: 1000 * 60 * 60 * 24, // 24시간 가비지 컬렉션
});
- // 활동 옵션 데이터 (주요 활동, 침대 타입, 가구 옵션)
+ // 주요활동 데이터 (활동 목록 + 활동별 필수 가구)
queryClient.prefetchQuery({
- queryKey: queryKeys.imageSetup.activityOptions(),
- queryFn: getActivityOptions,
+ queryKey: queryKeys.imageSetup.activities(),
+ queryFn: getActivities,
+ staleTime: Infinity,
+ gcTime: 1000 * 60 * 60 * 24,
+ });
+
+ // 가구 카테고리 데이터 (카테고리 + 카테고리별 가구)
+ queryClient.prefetchQuery({
+ queryKey: queryKeys.imageSetup.furnitureCategories(),
+ queryFn: getFurnitureCategories,
staleTime: Infinity,
gcTime: 1000 * 60 * 60 * 24,
});
diff --git a/src/shared/assets/v2/svg/BookBlack.svg b/src/shared/assets/v2/svg/BookBlack.svg
new file mode 100644
index 000000000..c756e0ba9
--- /dev/null
+++ b/src/shared/assets/v2/svg/BookBlack.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/BookGray.svg b/src/shared/assets/v2/svg/BookGray.svg
new file mode 100644
index 000000000..c1b5b63b9
--- /dev/null
+++ b/src/shared/assets/v2/svg/BookGray.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/ChevronDownFill.svg b/src/shared/assets/v2/svg/ChevronDownFill.svg
new file mode 100644
index 000000000..b29d6215e
--- /dev/null
+++ b/src/shared/assets/v2/svg/ChevronDownFill.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/CupBlack.svg b/src/shared/assets/v2/svg/CupBlack.svg
new file mode 100644
index 000000000..35ad246fd
--- /dev/null
+++ b/src/shared/assets/v2/svg/CupBlack.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/CupGray.svg b/src/shared/assets/v2/svg/CupGray.svg
new file mode 100644
index 000000000..a9c223a97
--- /dev/null
+++ b/src/shared/assets/v2/svg/CupGray.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/DeskBlack.svg b/src/shared/assets/v2/svg/DeskBlack.svg
new file mode 100644
index 000000000..a309eba2d
--- /dev/null
+++ b/src/shared/assets/v2/svg/DeskBlack.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/DeskGray.svg b/src/shared/assets/v2/svg/DeskGray.svg
new file mode 100644
index 000000000..5644a7722
--- /dev/null
+++ b/src/shared/assets/v2/svg/DeskGray.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/Lock.svg b/src/shared/assets/v2/svg/Lock.svg
new file mode 100644
index 000000000..305ddd591
--- /dev/null
+++ b/src/shared/assets/v2/svg/Lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/shared/assets/v2/svg/MouseBlack.svg b/src/shared/assets/v2/svg/MouseBlack.svg
new file mode 100644
index 000000000..c51e21d86
--- /dev/null
+++ b/src/shared/assets/v2/svg/MouseBlack.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/shared/assets/v2/svg/MouseGray.svg b/src/shared/assets/v2/svg/MouseGray.svg
new file mode 100644
index 000000000..2da41002b
--- /dev/null
+++ b/src/shared/assets/v2/svg/MouseGray.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/shared/components/card/cardImage/CardImage.css.ts b/src/shared/components/card/cardImage/CardImage.css.ts
deleted file mode 100644
index 2fb871923..000000000
--- a/src/shared/components/card/cardImage/CardImage.css.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-
-import { fontStyle } from '@styles/fontStyle';
-import { colorVars } from '@styles/tokens/color.css';
-const shimmer = keyframes({
- '0%': { transform: 'translateX(-100%)' },
- '100%': { transform: 'translateX(100%)' },
-});
-
-export const cardcontainer = recipe({
- base: {
- boxSizing: 'border-box',
- position: 'relative',
- outline: 'none',
- borderRadius: '1.6rem',
- cursor: 'pointer',
- width: '100%',
- minWidth: '16rem',
- maxWidth: '19.4rem',
- overflow: 'hidden',
- selectors: {
- '&::after': {
- position: 'absolute',
- top: 0,
- left: 0,
- transition: 'background-color 0.3s ease',
- borderRadius: '16px',
- backgroundColor: 'transparent',
- pointerEvents: 'none',
- width: '100%',
- height: '100%',
- content: '',
- },
- },
- },
- variants: {
- state: {
- default: { backgroundColor: colorVars.color.gray100 },
- pressed: {
- outline: 'none',
- selectors: {
- '&::after': {
- backgroundColor: 'rgba(0, 0, 0, 0.3)',
- },
- },
- },
- selected: {
- outline: `1.5px solid ${colorVars.color.primary}`,
- outlineOffset: '-1.5px',
- selectors: {
- '&::after': {
- backgroundColor: 'transparent',
- },
- },
- },
- disabled: {
- outline: 'none',
- cursor: 'not-allowed',
- selectors: {
- '&::after': {
- backgroundColor: 'transparent',
- },
- },
- },
- },
- },
- defaultVariants: {
- state: 'default',
- },
-});
-
-export const cardimg = style({
- boxSizing: 'border-box',
- display: 'block',
- objectFit: 'cover',
- objectPosition: 'center',
- width: '100%',
- height: '100%',
-});
-
-export const disabledcardimg = style([
- cardimg,
- {
- opacity: 0.15,
- },
-]);
-
-export const checkbox = recipe({
- base: {
- position: 'absolute',
- zIndex: 1,
- top: '1rem',
- right: '1rem',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- transition:
- 'width 0.2s ease, height 0.2s ease, background-color 0.2s ease, color 0.2s ease',
- borderRadius: '9999px',
- width: '2rem',
- ...fontStyle('body_m_14'),
- height: '2rem',
- },
- variants: {
- state: {
- default: {
- border: 'none',
- backgroundColor: colorVars.color.gray000,
- color: 'transparent',
- },
- pressed: {
- border: 'none',
- backgroundColor: colorVars.color.gray000,
- color: 'transparent',
- },
- selected: {
- border: 'none',
- backgroundColor: colorVars.color.primary,
- width: '2.4rem',
- height: '2.4rem',
- color: colorVars.color.gray000,
- },
- disabled: {
- display: 'none',
- },
- },
- },
-});
-
-export const skeletonCardImg = style({
- position: 'relative',
- borderRadius: '12px',
- backgroundColor: colorVars.color.gray100,
- width: '100%',
- height: '100%',
- overflow: 'hidden',
-
- selectors: {
- '&::after': {
- position: 'absolute',
- top: 0,
- left: 0,
- background:
- 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)',
- width: '60%',
- height: '100%',
- animation: `${shimmer} 1s infinite`,
- content: '""',
- },
- },
-});
diff --git a/src/shared/components/card/cardImage/CardImage.tsx b/src/shared/components/card/cardImage/CardImage.tsx
deleted file mode 100644
index 6e48eab96..000000000
--- a/src/shared/components/card/cardImage/CardImage.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useState } from 'react';
-
-import * as styles from './CardImage.css';
-
-interface CardImageProps extends React.ComponentProps<'div'> {
- src: string;
- alt: string;
- selectOrder?: number;
- disabled?: boolean;
- onClick?: () => void;
-}
-
-const CardImage = ({
- src,
- selectOrder = 0,
- disabled = false,
- onClick,
-}: CardImageProps) => {
- const [isPressed, setIsPressed] = useState(false);
-
- const isSelected = selectOrder > 0;
-
- // 상태 결정: disabled > pressed > selected > default
- const visualState = disabled
- ? 'disabled'
- : isPressed
- ? 'pressed'
- : isSelected
- ? 'selected'
- : 'default';
-
- const handleMouseDown = () => {
- if (disabled) return;
- setIsPressed(true);
- };
-
- const handleMouseUp = () => {
- if (disabled) return;
- setIsPressed(false);
- };
-
- const handleClick = () => {
- if (disabled) return;
- onClick?.(); // 클릭 시 이미지 선택 함수 호출
- };
-
- return (
- , 'children'> {
+export type ChipColor = 'strong' | 'weak';
+
+interface ChipProps
+ extends Omit, 'children' | 'color'> {
children: ReactNode;
selected?: boolean;
+ color?: ChipColor;
suffixIcon?: ReactNode;
suffixAriaLabel?: string;
onSuffixClick?: () => void;
@@ -13,26 +17,39 @@ interface ChipProps extends Omit, 'children'> {
const Chip = ({
children,
selected = false,
+ color = 'strong',
suffixIcon,
suffixAriaLabel,
onSuffixClick,
type = 'button',
className,
+ disabled,
onClick,
...props
}: ChipProps) => {
+ const isDisabled = disabled === true;
const hasSuffix = suffixIcon !== undefined;
- const chipClassName = `${styles.chip({ selected })}${className ? ` ${className}` : ''}`;
+ const chipClassName = `${styles.chip({ selected, color, disabled: isDisabled })}${className ? ` ${className}` : ''}`;
return (
+
{isError ? (
-
- 주요 활동 선택하기
-
+
+ 다음
+
)}
diff --git a/src/pages/imageSetup/steps/interiorStyle/MoodBoard.css.ts b/src/pages/imageSetup/steps/interiorStyle/MoodBoard.css.ts
index 21b6595f5..5ddb1a118 100644
--- a/src/pages/imageSetup/steps/interiorStyle/MoodBoard.css.ts
+++ b/src/pages/imageSetup/steps/interiorStyle/MoodBoard.css.ts
@@ -14,7 +14,6 @@ export const container = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- padding: '2rem',
width: '100%',
height: '100%',
});
diff --git a/src/pages/imageSetup/steps/interiorStyle/MoodBoard.tsx b/src/pages/imageSetup/steps/interiorStyle/MoodBoard.tsx
index e5256fcda..592b7da34 100644
--- a/src/pages/imageSetup/steps/interiorStyle/MoodBoard.tsx
+++ b/src/pages/imageSetup/steps/interiorStyle/MoodBoard.tsx
@@ -11,9 +11,8 @@ import {
type MoodBoardImageItem,
} from '@pages/imageSetup/types/apis/interiorStyle';
-import CardImage from '@components/card/cardImage/CardImage';
-
import * as styles from './MoodBoard.css';
+import MoodboardCard from './MoodboardCard';
interface MoodBoardProps {
images: MoodBoardImageItem[];
@@ -48,7 +47,7 @@ const MoodBoard = ({
!isSelected;
return (
-
- 
- {visualState !== 'disabled' && (
-
- )}
-
- );
-};
-
-export default CardImage;
diff --git a/src/shared/components/card/cardImage/SkeletonCardImage.tsx b/src/shared/components/card/cardImage/SkeletonCardImage.tsx
deleted file mode 100644
index 975400dd5..000000000
--- a/src/shared/components/card/cardImage/SkeletonCardImage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as styles from './CardImage.css';
-
-const SkeletonCard = () => {
- return (
-
-
-
- );
-};
-
-export default SkeletonCard;
diff --git a/src/shared/components/v2/bottomSheet/DragHandleBottomSheet.tsx b/src/shared/components/v2/bottomSheet/DragHandleBottomSheet.tsx
index 90fb11b74..300f84ff0 100644
--- a/src/shared/components/v2/bottomSheet/DragHandleBottomSheet.tsx
+++ b/src/shared/components/v2/bottomSheet/DragHandleBottomSheet.tsx
@@ -130,7 +130,9 @@ const DragHandleBottomSheet = ({
const panelStyle: React.CSSProperties =
isDragging && dragHeight != null
? { height: `${dragHeight}px` }
- : { height: expanded ? EXPANDED_HEIGHT : (collapsedHeight ?? '0') };
+ : isPersistent
+ ? { height: expanded ? EXPANDED_HEIGHT : collapsedHeight }
+ : {}; // Dismissible: content 높이(auto) + CSS maxHeight가 상한
const handleOverlayClick = () => {
if (isPersistent) {
diff --git a/src/shared/components/v2/chip/Chip.css.ts b/src/shared/components/v2/chip/Chip.css.ts
index 6f1d396eb..c43118a9a 100644
--- a/src/shared/components/v2/chip/Chip.css.ts
+++ b/src/shared/components/v2/chip/Chip.css.ts
@@ -12,8 +12,8 @@ export const chip = recipe({
justifyContent: 'center',
gap: unitVars.unit.gapPadding['050'],
transition:
- 'transform 100ms ease, background-color 100ms ease, color 100ms ease',
- borderWidth: '0.1rem',
+ 'transform 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease',
+ borderWidth: '1px',
borderStyle: 'solid',
borderRadius: unitVars.unit.gapPadding.full,
background: 'transparent',
@@ -37,7 +37,32 @@ export const chip = recipe({
color: colorVars.color.text.inverse,
},
},
+ color: {
+ strong: {},
+ weak: {},
+ },
+ disabled: {
+ true: {
+ borderColor: colorVars.color.border.tertiary,
+ cursor: 'default',
+ selectors: {
+ '&:active': {
+ transform: 'none',
+ },
+ },
+ },
+ },
},
+ compoundVariants: [
+ {
+ variants: { color: 'weak', selected: true },
+ style: {
+ borderColor: 'transparent',
+ backgroundColor: colorVars.color.fill.weak,
+ color: colorVars.color.text.primary,
+ },
+ },
+ ],
});
export const label = recipe({
@@ -59,6 +84,15 @@ export const label = recipe({
...fontVars.font.body_m_13,
},
},
+ disabled: {
+ true: {
+ color: colorVars.color.text.disabled,
+ },
+ },
+ color: {
+ strong: {},
+ weak: {},
+ },
hasSuffix: {
false: {
paddingRight: unitVars.unit.gapPadding['300'],
@@ -68,6 +102,14 @@ export const label = recipe({
},
},
},
+ compoundVariants: [
+ {
+ variants: { color: 'weak', selected: true },
+ style: {
+ color: colorVars.color.text.primary,
+ },
+ },
+ ],
});
export const suffix = style({
diff --git a/src/shared/components/v2/chip/Chip.tsx b/src/shared/components/v2/chip/Chip.tsx
index fe23b5d5f..5bfedec77 100644
--- a/src/shared/components/v2/chip/Chip.tsx
+++ b/src/shared/components/v2/chip/Chip.tsx
@@ -2,9 +2,13 @@ import type { ReactNode } from 'react';
import * as styles from './Chip.css';
-interface ChipProps extends Omit