@1d1s/design-system 0.2.24 → 0.2.26

package/dist/components/AvatarImagePicker/AvatarImagePicker.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AvatarImagePickerProps extends Omit<React.ComponentPropsWithoutRef<"input">, "size"> {
+    /** 원형 이미지 영역 지름(px) */
+    size?: number;
+    /** 초기 이미지 URL */
+    defaultImageUrl?: string;
+    /** 하단 변경 버튼 텍스트 */
+    changeLabel?: string;
+}
+/**
+ * AvatarImagePicker
+ * 이미지 업로드 및 미리보기를 위한 컴포넌트
+ *
+ * @param onChange 파일 선택 시 호출되는 콜백 함수(optional)
+ * @param size 원형 이미지 영역 지름(px), 기본값 300
+ * @param defaultImageUrl 초기 이미지 URL
+ * @param changeLabel 하단 변경 버튼 텍스트(기본값: Change)
+ *
+ * @example 기본 사용
+ * ```tsx
+ * <AvatarImagePicker onChange={(e) => console.log(e.target.files)} />
+ * ```
+ */
+export declare function AvatarImagePicker({ onChange, size, defaultImageUrl, changeLabel, ...props }: AvatarImagePickerProps): React.ReactElement;

package/dist/components/AvatarImagePicker/AvatarImagePicker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { AvatarImagePicker } from './AvatarImagePicker';
+declare const meta: Meta<typeof AvatarImagePicker>;
+export default meta;
+type Story = StoryObj<typeof AvatarImagePicker>;
+export declare const Default: Story;
+export declare const WithImage: Story;

package/dist/components/AvatarImagePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './AvatarImagePicker';

package/dist/components/GoalAddList/GoalAddList.d.ts

@@ -7,9 +7,10 @@ export interface GoalAddListProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     disabled?: boolean;
     addOnBlur?: boolean;
     inputAriaLabel?: string;
+    maxGoals?: number;
 }
 /**
  * GoalAddList
  * 목표 문자열 목록을 보여주고 하단 입력창에서 Enter로 새 목표를 추가하는 컴포넌트.
  */
-export declare function GoalAddList({ goals, defaultGoals, onGoalsChange, placeholder, disabled, addOnBlur, inputAriaLabel, className, ...props }: GoalAddListProps): React.ReactElement;
+export declare function GoalAddList({ goals, defaultGoals, onGoalsChange, placeholder, disabled, addOnBlur, inputAriaLabel, maxGoals, className, ...props }: GoalAddListProps): React.ReactElement;

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -1,24 +1,44 @@
 import { default as React } from 'react';
-export interface ImagePickerProps extends Omit<React.ComponentPropsWithoutRef<"input">, "size"> {
-    /** 원형 이미지 영역 지름(px) */
-    size?: number;
-    /** 초기 이미지 URL */
-    defaultImageUrl?: string;
-    /** 하단 변경 버튼 텍스트 */
-    changeLabel?: string;
+export interface ImagePickerProps {
+    /** 현재 미리보기 이미지 URL (blob: / data: / https: 모두 가능) */
+    previewUrl?: string;
+    /** 파일 선택 시 호출되는 콜백 */
+    onSelectFile: (file: File) => void;
+    /** 선택 해제 버튼 클릭 시 호출되는 콜백 */
+    onClear?: () => void;
+    /** 이미지 미선택 시 안내 텍스트 (기본값: "썸네일 영역을 클릭해 이미지를 선택하세요.") */
+    placeholderTitle?: string;
+    /** 이미지 미선택 시 보조 안내 텍스트 (기본값: "또는 이미지를 드래그해서 놓아주세요.") */
+    placeholderSubtitle?: string;
+    /** 하단 도움말 텍스트 (기본값: "JPG, PNG, GIF 파일을 업로드할 수 있습니다.") */
+    helperText?: string;
+    /** 선택 해제 버튼 텍스트 (기본값: "선택 해제") */
+    clearLabel?: string;
+    /** 추가 className */
+    className?: string;
 }
 /**
  * ImagePicker
- * 이미지 업로드 및 미리보기를 위한 컴포넌트
+ * 일지 썸네일 이미지 선택 컴포넌트
  *
- * @param onChange 파일 선택 시 호출되는 콜백 함수(optional)
- * @param size 원형 이미지 영역 지름(px), 기본값 300
- * @param defaultImageUrl 초기 이미지 URL
- * @param changeLabel 하단 변경 버튼 텍스트(기본값: Change)
+ * 클릭 또는 드래그 앤 드롭으로 이미지를 선택할 수 있습니다.
  *
- * @example 기본 사용
+ * @param previewUrl 현재 미리보기 이미지 URL
+ * @param onSelectFile 파일 선택 시 호출되는 콜백
+ * @param onClear 선택 해제 버튼 클릭 시 호출되는 콜백
+ * @param placeholderTitle 이미지 미선택 시 안내 텍스트
+ * @param placeholderSubtitle 이미지 미선택 시 보조 안내 텍스트
+ * @param helperText 하단 도움말 텍스트
+ * @param clearLabel 선택 해제 버튼 텍스트
+ * @param className 추가 className
+ *
+ * @example
  * ```tsx
- * <ImagePicker onChange={(e) => console.log(e.target.files)} />
+ * <ImagePicker
+ *   previewUrl={previewUrl}
+ *   onSelectFile={(file) => setFile(file)}
+ *   onClear={() => setFile(null)}
+ * />
  * ```
  */
-export declare function ImagePicker({ onChange, size, defaultImageUrl, changeLabel, ...props }: ImagePickerProps): React.ReactElement;
+export declare function ImagePicker({ previewUrl, onSelectFile, onClear, placeholderTitle, placeholderSubtitle, helperText, clearLabel, className, }: ImagePickerProps): React.ReactElement;

package/dist/components/ImagePicker/ImagePicker.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof ImagePicker>;
 export declare const Default: Story;
 export declare const WithImage: Story;
+export declare const WithoutClear: Story;

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+export interface AppLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * AppLayout
+ * 전체 페이지의 최상위 래퍼 컴포넌트.
+ * `AppLayoutHeader`, `AppLayoutBody`와 함께 사용합니다.
+ *
+ * @example
+ * ```tsx
+ * <AppLayout>
+ *   <AppLayoutHeader>
+ *     <AppHeader ... />
+ *   </AppLayoutHeader>
+ *   <AppLayoutBody sidebar={<AppLayoutSidebar>...</AppLayoutSidebar>}>
+ *     {children}
+ *   </AppLayoutBody>
+ * </AppLayout>
+ * ```
+ */
+export declare function AppLayout({ children, className, }: AppLayoutProps): React.ReactElement;
+export interface AppLayoutHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * AppLayoutHeader
+ * 화면 상단에 sticky하게 고정되는 헤더 슬롯.
+ */
+export declare function AppLayoutHeader({ children, className, }: AppLayoutHeaderProps): React.ReactElement;
+export interface AppLayoutBodyProps {
+    children: React.ReactNode;
+    /** 전달 시 오른쪽에 사이드바 열 추가 (lg 이상에서만 표시) */
+    sidebar?: React.ReactNode;
+    className?: string;
+}
+/**
+ * AppLayoutBody
+ * 메인 콘텐츠 영역. `sidebar` prop을 전달하면 lg 이상에서 오른쪽 사이드바 열이 추가됩니다.
+ */
+export declare function AppLayoutBody({ children, sidebar, className, }: AppLayoutBodyProps): React.ReactElement;
+export interface AppLayoutSidebarProps {
+    children: React.ReactNode;
+    /** sticky top 위치 — 헤더가 있으면 "top-28", 없으면 "top-6" */
+    stickyTop?: string;
+    className?: string;
+}
+/**
+ * AppLayoutSidebar
+ * 데스크톱(lg 이상)에서 오른쪽에 sticky하게 고정되는 사이드바 슬롯.
+ * `AppLayoutBody`의 `sidebar` prop으로 전달합니다.
+ */
+export declare function AppLayoutSidebar({ children, stickyTop, className, }: AppLayoutSidebarProps): React.ReactElement;
+export interface AppLayoutOverlayProps {
+    children: React.ReactNode;
+    /** 오버레이 표시 여부 (opacity 트랜지션 적용) */
+    open: boolean;
+    className?: string;
+}
+/**
+ * AppLayoutOverlay
+ * 화면 우측 상단에 fixed로 표시되는 오버레이 패널.
+ * 주로 모바일에서 프로필 클릭 시 나타나는 사이드바에 사용합니다.
+ *
+ * 마운트/언마운트는 부모에서 관리하고, `open` prop으로 fade를 제어합니다.
+ */
+export declare function AppLayoutOverlay({ children, open, className, }: AppLayoutOverlayProps): React.ReactElement;

package/dist/components/Layout/Layout.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithSidebar: Story;
+export declare const WithoutSidebar: Story;
+export declare const WithOverlay: Story;

package/dist/components/Layout/LayoutContext.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface AppLayoutContextValue {
+    /** 오른쪽 사이드바가 렌더링되어 있는지 여부 */
+    hasRightSidebar: boolean;
+    /** 오른쪽 사이드바가 접혀있는지 여부 */
+    isRightSidebarCollapsed: boolean;
+}
+export declare function AppLayoutProvider({ value, children, }: {
+    value: AppLayoutContextValue;
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function useAppLayoutContext(): AppLayoutContextValue;

package/dist/components/Layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './LayoutContext';

package/dist/components/Profile/Profile.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+type ProfileSize = "sm" | "md" | "lg";
+type ProfileLayout = "horizontal" | "vertical";
+export interface ProfileProps {
+    /** 닉네임 */
+    nickname: string;
+    /** 프로필 이미지 URL */
+    imageUrl?: string;
+    /** 크기 (기본값: md) */
+    size?: ProfileSize;
+    /** 레이아웃 방향 (기본값: horizontal) */
+    layout?: ProfileLayout;
+    /** 닉네임 아래(vertical) 또는 옆(horizontal)에 표시되는 상태 텍스트 */
+    statusText?: string;
+    /** 클릭 핸들러 — 전달 시 버튼으로 렌더링됩니다 */
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Profile
+ * 프로필 사진과 닉네임을 함께 보여주는 컴포넌트.
+ *
+ * @param nickname 닉네임
+ * @param imageUrl 프로필 이미지 URL
+ * @param size 크기: sm | md | lg (기본값: md)
+ * @param layout 방향: horizontal | vertical (기본값: horizontal)
+ * @param statusText 닉네임 옆/아래에 표시되는 상태 텍스트
+ * @param onClick 전달 시 버튼으로 렌더링
+ *
+ * @example
+ * ```tsx
+ * <Profile nickname="홍길동" imageUrl="/profile.jpg" size="md" />
+ * <Profile nickname="홍길동" statusText="온라인" layout="vertical" size="lg" onClick={() => router.push('/profile')} />
+ * ```
+ */
+export declare function Profile({ nickname, imageUrl, size, layout, statusText, onClick, className, }: ProfileProps): React.ReactElement;
+export {};

package/dist/components/Profile/Profile.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Profile } from './Profile';
+declare const meta: Meta<typeof Profile>;
+export default meta;
+type Story = StoryObj<typeof Profile>;
+export declare const Default: Story;
+export declare const WithStatus: Story;
+export declare const WithImage: Story;
+export declare const Sizes: Story;
+export declare const Vertical: Story;
+export declare const VerticalWithStatus: Story;
+export declare const Clickable: Story;

package/dist/components/Profile/index.d.ts

@@ -0,0 +1 @@
+export * from './Profile';

package/dist/components/index.d.ts

@@ -3,8 +3,6 @@ export * from './AppHeader';
 export * from './BannerCarousel';
 export * from './Button';
 export * from './Calendar';
-export * from './ChallengeCard';
-export * from './ChallengeListItem';
 export * from './CheckContainer';
 export * from './CheckList';
 export * from './Checkbox';
@@ -12,18 +10,19 @@ export * from './CircleAvatar';
 export * from './CircularProgress';
 export * from './DatePicker';
 export * from './Dialog';
-export * from './DiaryCard';
-export * from './DiaryListItem';
 export * from './Dropdown';
 export * from './GoalAddList';
 export { Icon } from './Icons/Icon';
 export type { IconName, IconProps } from './Icons/Icon';
+export * from './AvatarImagePicker';
 export * from './ImagePlaceholder';
 export * from './ImagePicker';
 export * from './InfoButton';
+export * from './Layout';
 export * from './Text';
 export * from './PageWatermark';
 export * from './Pagination';
+export * from './Profile';
 export * from './ProgressBar';
 export * from './RightSidebar';
 export * from './ScheduleCalendar';
@@ -35,4 +34,3 @@ export * from './TextField';
 export * from './Toggle';
 export * from './ToggleGroup';
 export * from './Tooltip';
-export * from './UserListItem';