Merge branch 'develop' into feature/archiving/#311-manage-teamId

Team-Tiki · Nov 19, 2024 · 2d2cce0 · 2d2cce0
2 parents 117d042 + dc57735
commit 2d2cce0
Show file tree

Hide file tree

Showing 69 changed files with 1,046 additions and 897 deletions.
diff --git a/src/common/asset/svg/logo_tiki_md.svg b/src/common/asset/svg/logo_tiki_md.svg
diff --git a/src/common/component/CountedInput/CountedInput.tsx b/src/common/component/CountedInput/CountedInput.tsx
@@ -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>
       )}

diff --git a/src/common/component/DatePicker/Calendar/Calendar.style.ts b/src/common/component/DatePicker/Calendar/Calendar.style.ts
@@ -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}`,

diff --git a/src/common/component/DatePicker/Trigger/DatePickerTrigger.tsx b/src/common/component/DatePicker/Trigger/DatePickerTrigger.tsx
@@ -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 } }}
           />
         </>
       )}

diff --git a/src/common/component/DatePicker/index.style.ts b/src/common/component/DatePicker/index.style.ts
@@ -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,
+  });
diff --git a/src/common/component/DatePicker/index.tsx b/src/common/component/DatePicker/index.tsx
@@ -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()}

diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.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>
       )}

diff --git a/src/common/component/Modal/Modal.style.ts b/src/common/component/Modal/Modal.style.ts
@@ -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',

diff --git a/src/common/component/Select/Select.tsx b/src/common/component/Select/Select.tsx
@@ -27,23 +27,34 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelec
   isOpen?: boolean;
   label?: string;
   placeholder?: string;
+  defaultValue?: string;
   onTrigger?: () => void;
   onSelect?: (value: string) => void;
   options: OptionType[];
 }
 
 const Select = (
-  { variant = 'default', isOpen = false, placeholder, label, onTrigger, onSelect, options, ...props }: SelectProps,
+  {
+    variant = 'default',
+    isOpen = false,
+    defaultValue,
+    placeholder,
+    label,
+    onTrigger,
+    onSelect,
+    options,
+    ...props
+  }: SelectProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const [selectedText, setSelectedText] = useState(placeholder);
+  const [selectedText, setSelectedText] = useState(defaultValue || placeholder);
 
   const isSelected = selectedText !== placeholder;
 
   return (
     <Dropdown css={{ width: '100%' }} ref={ref} role="listbox" label={label} {...props}>
       <button onClick={onTrigger} css={triggerStyle(variant, isSelected)}>
-        <span>{selectedText || placeholder}</span>
+        <span>{selectedText}</span>
         {variant === 'option' ? (
           <IcArrowOption css={iconStyle(isOpen)} width={12} height={12} />
         ) : (

diff --git a/src/common/component/SupportingText/SupportingText.style.ts b/src/common/component/SupportingText/SupportingText.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',
+  });
 };
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
@@ -4,12 +4,12 @@ import { textStyle } from '@/common/component/SupportingText/SupportingText.styl
 
 interface SupportingTextProps extends ComponentPropsWithoutRef<'p'> {
   isError?: boolean;
-  isNotice?: boolean;
+  isSuccess?: boolean;
 }
 
-const SupportingText = ({ isError = false, isNotice = false, children, ...props }: SupportingTextProps) => {
+const SupportingText = ({ isError = false, isSuccess = false, children, ...props }: SupportingTextProps) => {
   return (
-    <p {...props} css={textStyle(isError, isNotice)}>
+    <p {...props} css={textStyle(isError, isSuccess)}>
       {children}
     </p>
   );

diff --git a/src/common/hook/useMultiSelect.ts b/src/common/hook/useMultiSelect.ts
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+type DataHasIdKey<T> = {
+  [key in keyof T]: T[key];
+};
+
+/**
+ * identifier: "fileId"와 같이 해당 아이템을 구분할 수 있는 식별자
+ * select할 시 특정 아이템의 identifier 값을 ids에 넣음
+ */
+export const useMultiSelect = <T extends object>(identifier: keyof T, data: DataHasIdKey<T>[]) => {
+  const [ids, setIds] = useState<number[]>([]);
+
+  const handleItemClick = (id: number) => {
+    if (ids.includes(id)) {
+      setIds((prev) => {
+        const origin = [...prev];
+
+        return origin.filter((i) => i !== id);
+      });
+    } else {
+      setIds((prev) => [...prev, id]);
+    }
+  };
+
+  const handleAllClick = () => {
+    if (ids.length !== data.length) {
+      const totalIds: number[] = [];
+
+      data.forEach((item) => totalIds.push(item[identifier] as number));
+
+      setIds(totalIds);
+    } else {
+      setIds([]);
+    }
+  };
+
+  const handleReset = () => {
+    setIds([]);
+  };
+
+  return { ids, handleItemClick, handleAllClick, handleReset };
+};
diff --git a/src/common/router/Router.tsx b/src/common/router/Router.tsx
@@ -7,6 +7,8 @@ import ErrorBoundary from '@/common/component/ErrorBoundary/ErrorBoundary';
 import {
   ArchivingPage,
   ComingsoonPage,
+  DashboardPage,
+  DeletedPage,
   DrivePage,
   ErrorPage,
   HandoverNotePage,
@@ -17,10 +19,9 @@ import {
   PasswordResetPage,
   ShowcasePage,
   TermPage,
+  UnivFormPage,
 } from '@/common/router/lazy';
 
-import DashboardPage from '@/page/dashboard/DashboardPage';
-
 import { PATH } from '@/shared/constant/path';
 
 const Public = () => {
@@ -70,15 +71,15 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: PATH.SIGNUP_INFO,
+        path: PATH.SIGNUP_UNIV,
         element: (
           <Suspense>
-            <InfoFormPage />
+            <UnivFormPage />
           </Suspense>
         ),
       },
       {
-        path: PATH.SIGNUP_PASSWORD,
+        path: PATH.SIGNUP_INFO,
         element: (
           <Suspense>
             <InfoFormPage />
@@ -160,6 +161,14 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: PATH.DELETED,
+        element: (
+          <Suspense>
+            <DeletedPage />
+          </Suspense>
+        ),
+      },
       {
         path: PATH.HANDOVER_NOTE,
         element: (

diff --git a/src/common/router/lazy.ts b/src/common/router/lazy.ts
@@ -11,4 +11,7 @@ export const ArchivingPage = lazy(() => import('@/page/archiving/index/Archiving
 export const ErrorPage = lazy(() => import('@/shared/page/errorPage/ErrorPage'));
 export const ComingsoonPage = lazy(() => import('@/shared/page/comingsoonPage/ComingsoonPage'));
 export const DrivePage = lazy(() => import('@/page/drive/index'));
+export const DeletedPage = lazy(() => import('@/page/deleted'));
 export const HandoverNotePage = lazy(() => import('@/page/handover/note/NotePage'));
+export const DashboardPage = lazy(() => import('@/page/dashboard/DashboardPage'));
+export const UnivFormPage = lazy(() => import('@/page/signUp/info/UnivFormPage'));
diff --git a/src/common/style/scroll.ts b/src/common/style/scroll.ts
@@ -5,6 +5,7 @@ import { theme } from '@/common/style/theme/theme';
 export const scrollStyle = css`
   ::-webkit-scrollbar {
     width: 0.8rem;
+    height: 0.8rem;
   }
   ::-webkit-scrollbar-thumb {
     background: ${theme.colors.gray_300};

diff --git a/src/page/dashboard/DashboardPage.tsx b/src/page/dashboard/DashboardPage.tsx
@@ -6,7 +6,7 @@ import Flex from '@/common/component/Flex/Flex';
 import { contentBoxStyle, handoverBoxStyle } from '@/page/dashboard/DashboardPage.style';
 import FileSection from '@/page/dashboard/component/File/FileSection';
 import HandoverSection from '@/page/dashboard/component/Handover/HandoverSection';
-import TimelineSection from '@/page/dashboard/component/Timeline/TimelineSection';
+import TimelineSection from '@/page/dashboard/component/Timeline';
 
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
 import { PATH } from '@/shared/constant/path';

diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts b/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts
@@ -2,6 +2,8 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+import { alignColor } from '@/page/dashboard/util/color';
+
 export const containerStyle = css({
   flexDirection: 'column',
   alignItems: 'center',
@@ -12,6 +14,8 @@ export const containerStyle = css({
   backgroundColor: theme.colors.gray_100,
   borderRadius: '8px',
 
+  cursor: 'pointer',
+
   ':hover': {
     backgroundColor: theme.colors.gray_200,
 
@@ -51,3 +55,15 @@ export const detailStyle = css({
 
   gap: '0.4rem',
 });
+
+export const tagStyle = (color: string) =>
+  css({
+    maxWidth: '18rem',
+
+    color: alignColor(color),
+
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+
+    textOverflow: 'ellipsis',
+  });