Merge branch 'develop' of https://github.com/Team-Tiki/TIKI_CLIENT into feature/dashboard/#324-timeline-date-issue

Author: Jeongbowoon

package.json

@@ -1,18 +1,18 @@
 {
   "name": "tiki-client",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "check": "concurrently \"pnpm lint\" \"pnpm typeCheck\"",
+    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",
+    "dev": "vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",
-    "typeCheck": "tsc --noEmit",
-    "check": "concurrently \"pnpm lint\" \"pnpm typeCheck\""
+    "typeCheck": "tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -22,7 +22,6 @@
     "axios": "^1.7.2",
     "framer-motion": "^11.11.11",
     "mime": "^4.0.4",
-    "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",

src/common/asset/svg/logo_tiki_md.svg

@@ -39,7 +39,7 @@ const CountedInput = (
         <span css={countTextStyle}>{`${count}/${maxLength}`}</span>
       </div>
       {supportingText && (
-        <SupportingText isError={isError} isNotice={isSuccess}>
+        <SupportingText isError={isError} isSuccess={isSuccess}>
           {supportingText}
         </SupportingText>
       )}

src/common/component/CountedInput/CountedInput.tsx

@@ -25,6 +25,8 @@ export const containerStyle = css({
 
   width: '25.6rem',
 
+  zIndex: theme.zIndex.overlayMiddle,
+
   padding: '1.6rem',
 
   border: `1px solid ${theme.colors.gray_300}`,

src/common/component/DatePicker/Calendar/Calendar.style.ts

@@ -10,19 +10,18 @@ interface DatePickerTriggerProps {
   selectedDate: Date | null;
   endDate?: Date | null;
   onClick: () => void;
-  width?: string;
   variant: 'single' | 'range';
 }
 
-const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: DatePickerTriggerProps) => {
+const DatePickerTrigger = ({ selectedDate, endDate, onClick, variant }: DatePickerTriggerProps) => {
   return (
     <Flex styles={{ direction: 'row', align: 'center', gap: '0.4rem' }}>
       <Input
         value={selectedDate ? format(selectedDate, 'yyyy.MM.dd') : ''}
         placeholder="YYYY.MM.DD"
         readOnly
         onClick={onClick}
-        css={{ cursor: 'pointer', width, ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
+        css={{ cursor: 'pointer', width: '100%', ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
       />
       {variant === 'range' && (
         <>
@@ -34,7 +33,7 @@ const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: D
             placeholder="YYYY.MM.DD"
             readOnly
             onClick={onClick}
-            css={{ cursor: 'pointer', width, ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
+            css={{ cursor: 'pointer', width: '100%', ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
           />
         </>
       )}

src/common/component/DatePicker/Trigger/DatePickerTrigger.tsx

@@ -1,7 +1,11 @@
 import { css } from '@emotion/react';
 
-export const containerStyle = css({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-});
+export const containerStyle = (width: string) =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.2rem',
+    position: 'relative',
+
+    width,
+  });

src/common/component/DatePicker/index.style.ts

@@ -1,16 +1,18 @@
 import DatePickerCalendar from '@/common/component/DatePicker/Calendar/DatePickerCalendar';
 import DatePickerTrigger from '@/common/component/DatePicker/Trigger/DatePickerTrigger';
 import { containerStyle } from '@/common/component/DatePicker/index.style';
+import Label from '@/common/component/Label/Label';
 import { useDatePicker } from '@/common/hook/useDatePicker';
 import { useOutsideClick } from '@/common/hook/useOutsideClick';
 import { useOverlay } from '@/common/hook/useOverlay';
 
 interface DatePickerProps {
+  label?: string;
   variant: 'single' | 'range';
   triggerWidth?: string;
 }
 
-const DatePicker = ({ variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
+const DatePicker = ({ label, variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
   const { isOpen, close, toggle } = useOverlay();
   const ref = useOutsideClick<HTMLDivElement>(close);
   const { selectedDate, endDate, handleSelectDate, clearDates } = useDatePicker(variant);
@@ -24,14 +26,9 @@ const DatePicker = ({ variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
   };
 
   return (
-    <div ref={ref} css={containerStyle}>
-      <DatePickerTrigger
-        selectedDate={selectedDate}
-        endDate={endDate}
-        onClick={handleInputClick}
-        variant={variant}
-        width={triggerWidth}
-      />
+    <div ref={ref} css={containerStyle(triggerWidth)}>
+      {label && <Label id={label}>{label}</Label>}
+      <DatePickerTrigger selectedDate={selectedDate} endDate={endDate} onClick={handleInputClick} variant={variant} />
       {isOpen && (
         <DatePickerCalendar
           selectedDate={selectedDate || new Date()}

src/common/component/DatePicker/index.tsx

@@ -25,7 +25,7 @@ const Input = (
         <input ref={ref} css={inputStyle} {...props} />
       </div>
       {supportingText && (
-        <SupportingText isError={isError} isNotice={isSuccess}>
+        <SupportingText isError={isError} isSuccess={isSuccess}>
           {supportingText}
         </SupportingText>
       )}

src/common/component/Input/Input.tsx

@@ -22,11 +22,11 @@ export const dialogStyle = css({
   position: 'fixed',
   top: '50%',
   left: '50%',
-  width: '51.1rem',
 
   zIndex: theme.zIndex.overlayTop,
-  paddingTop: '4.8rem',
-  paddingBottom: '4.8rem',
+
+  padding: '3.2rem 2rem',
+
   borderRadius: '16px',
   border: 'none',
   outline: 'none',

src/common/component/Modal/Modal.style.ts

@@ -2,12 +2,18 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const textStyle = (isError: boolean, isNotice: boolean) => {
+export const textStyle = (isError: boolean, isSuccess: boolean) => {
   const textColor = isError
     ? theme.colors.sementic_red
-    : isNotice
+    : isSuccess
       ? theme.colors.sementic_success
-      : theme.colors.gray_400;
+      : theme.colors.gray_500;
 
-  return css({ color: textColor, paddingLeft: '0.8rem', wordBreak: 'break-word', ...theme.text.body09 });
+  return css({
+    color: textColor,
+    paddingLeft: '0.8rem',
+    wordBreak: 'break-word',
+    ...theme.text.body09,
+    whiteSpace: 'pre-line',
+  });
 };