[Feat] 인수인계 노트 작성 뷰 퍼블리싱 (#300)

* init: 파일 생성 및 라우터 세팅

* feat: 뷰 퍼블리싱 중

* style: 선택된 tab 스타일 수정

* feat: 페이지 레이아웃 구현

* feat: 커스텀 노트 뷰 구현

* feat: 파일 컴포넌트 분리

* feat: 버튼 클릭시 파일 업로드 구현

* feat: 라디오버튼 생성

* feat: 라디오 그룹 스토리북 생성

* style: 공컴 스타일 수정사항 반영

* style: 커스텀 첫 번째 가이드 타이틀 삭제

* feat: 템플릿 뷰 구현

* chore: 라우터 컴포넌트명 수정

* style: 오른쪽 영역 flex grow 설정

* feat: 활동 태그 필드 추가

* feat: 스크롤바 스타일 적용

* chore: 주석 제거

* fix: function 키워드 제거

* chore: lint에러 해결

* chore: import 절대경로로 수정

* fix: render components using map

* chore: input 관련 내용 상수로 분리

* refactor: file upload Logic 훅으로 분리

* fix: modify radiobutton css

* chore: 주석 문구 수정

* feat: form submit 핸들러 추가, 각 탭에 전달

* fix: underline -> text button

* style: 파일들 flex wrap

* chore: 파일 경로 변경

* refactor: NoteDetail 컴포넌트 분리

* docs: 폴더명 대문자 변경

* chore: 줄바꿈 추가

* chore: 라이브러리 업데이트

* chore: 절대 경로로 변경

* fix: 핸들러 함수 useCallback 쓰지 않음

* fix: 파일 여러 개 한 번에 올릴 수 있도록 수정

* feat: wai-aria role 부여

* chore: 타입명 변경

* feat: placeholder 상수 분리

* fix: lint에러 해결

package.json

@@ -53,7 +53,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "chromatic": "^11.5.4",
     "concurrently": "^9.0.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

src/common/component/Button/Button.style.ts

@@ -63,10 +63,15 @@ export const variantStyle = (variant: Required<ButtonProps>['variant']) => {
         backgroundColor: theme.colors.gray_100,
       },
     }),
-    underline: css({
+    text: css({
+      padding: 0,
+
       color: theme.colors.gray_800,
       backgroundColor: 'transparent',
 
+      fontWeight: 400,
+      ...theme.text.body06,
+
       '&:hover': {
         textDecoration: 'underline',
       },

src/common/component/Button/Button.tsx

@@ -5,7 +5,7 @@ import { Size } from '@/common/type/design';
 import { buttonStyle, sizeStyle, variantStyle } from './Button.style';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'underline';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'text';
   size?: Extract<Size, 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall'>;
 }
 

src/common/component/CommandButton/CommandButton.style.ts

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 
 import { ButtonProps } from '@/common/component/Button/Button';
+import { CommandButtonProps } from '@/common/component/CommandButton/CommandButton';
 import { theme } from '@/common/style/theme/theme';
 
 export const buttonStyle = (isFrontIcon: boolean) =>
@@ -76,3 +77,21 @@ export const childrenStyle = css({
 
   gap: '0.4rem',
 });
+
+export const sizeStyle = (size: Required<CommandButtonProps>['size']) => {
+  const style = {
+    /** Button_40 */
+    large: css({
+      padding: '1.1rem 1.0rem 1.1rem 1.4rem',
+
+      ...theme.text.body08,
+    }),
+    /** Button_32 */
+    small: css({
+      padding: '0.6rem 1.4rem',
+
+      ...theme.text.body08,
+    }),
+  };
+  return style[size];
+};

src/common/component/CommandButton/CommandButton.tsx

@@ -2,15 +2,16 @@ import { SyntheticEvent } from 'react';
 
 import CommandKey from '@/common/asset/svg/ic_command_key.svg?react';
 import { ButtonProps } from '@/common/component/Button/Button';
-import { sizeStyle, variantStyle } from '@/common/component/Button/Button.style';
+import { variantStyle } from '@/common/component/Button/Button.style';
 import {
   buttonStyle,
   childrenStyle,
   commonStyle,
   keyStyle,
+  sizeStyle,
 } from '@/common/component/CommandButton/CommandButton.style';
 
-interface CommandButtonProps extends ButtonProps {
+export interface CommandButtonProps extends ButtonProps {
   variant?: Extract<ButtonProps['variant'], 'primary' | 'tertiary' | 'outline'>;
   size?: Extract<ButtonProps['size'], 'large' | 'small'>;
   commandKey: string;
@@ -21,7 +22,7 @@ interface CommandButtonProps extends ButtonProps {
 
 const CommandButton = ({
   variant = 'primary',
-  size = 'large',
+  size = 'small',
   commandKey,
   isCommand = true,
   isFrontIcon = false,

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

@@ -4,6 +4,7 @@ import { textStyle } from '@/common/component/DatePicker/Trigger/DatePickerTrigg
 import Flex from '@/common/component/Flex/Flex';
 import Input from '@/common/component/Input/Input';
 import Text from '@/common/component/Text/Text';
+import { theme } from '@/common/style/theme/theme';
 
 interface DatePickerTriggerProps {
   selectedDate: Date | null;
@@ -21,7 +22,7 @@ const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: D
         placeholder="YYYY.MM.DD"
         readOnly
         onClick={onClick}
-        css={{ cursor: 'pointer', width }}
+        css={{ cursor: 'pointer', width, ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
       />
       {variant === 'range' && (
         <>
@@ -33,7 +34,7 @@ const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: D
             placeholder="YYYY.MM.DD"
             readOnly
             onClick={onClick}
-            css={{ cursor: 'pointer', width }}
+            css={{ cursor: 'pointer', width, ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
           />
         </>
       )}

src/common/component/Flex/Flex.style.ts

@@ -49,6 +49,8 @@ export interface FlexStyle {
 
   width?: string;
   height?: string;
+  maxWidth?: string;
+  maxHeight?: string;
 
   margin?: string;
   marginRight?: string;
@@ -78,6 +80,8 @@ export const getFlexStyle = ({
   shrink = 0,
   width = '',
   height = '',
+  maxWidth = '',
+  maxHeight = '',
   margin = '0',
   marginRight = '',
   marginTop = '',
@@ -106,6 +110,8 @@ export const getFlexStyle = ({
     gap,
     width,
     height,
+    maxWidth,
+    maxHeight,
     margin,
     marginRight,
     marginLeft,

src/common/component/RadioButton/RadioButton.style.ts

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const radioButtonLayoutStyle = css({
+  display: 'flex',
+
+  gap: '0.4rem',
+
+  cursor: 'pointer',
+});
+
+export const inputStyle = css({
+  '& + label': {
+    cursor: 'pointer',
+    transition: '0.2s ease-in-out',
+
+    ...theme.text.body06,
+  },
+
+  accentColor: theme.colors.key_500,
+
+  cursor: 'pointer',
+});
+
+export const labelStyle = css({
+  color: theme.colors.black,
+
+  whiteSpace: 'nowrap',
+});
+
+export const radioGroupStyle = css({
+  display: 'flex',
+
+  gap: '0.8rem',
+});

src/common/component/RadioButton/RadioButton.tsx

@@ -0,0 +1,22 @@
+import { InputHTMLAttributes } from 'react';
+
+import { inputStyle, labelStyle, radioButtonLayoutStyle } from './RadioButton.style';
+
+export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  name: string;
+  checked: boolean;
+}
+
+const RadioButton = ({ label, value, id, checked, ...props }: RadioButtonProps) => {
+  return (
+    <div role="radio" aria-label="radio-button" aria-checked={checked} tabIndex={0} css={radioButtonLayoutStyle}>
+      <input id={id} type="radio" value={value} css={inputStyle} {...props} />
+      <label htmlFor={id} css={labelStyle}>
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export default RadioButton;

src/common/component/RadioButton/RadioGroup.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent } from 'react';
+
+import RadioButton from '@/common/component/RadioButton/RadioButton';
+import { radioGroupStyle } from '@/common/component/RadioButton/RadioButton.style';
+
+export interface RadioProps {
+  label: string;
+  name: string;
+  value: string;
+}
+
+interface RadioButtonGroupProps {
+  options: RadioProps[];
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+}
+
+const RadioGroup = ({ options, onChange, value }: RadioButtonGroupProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const selectedValue = e.target.value;
+    onChange({ target: { value: selectedValue } } as ChangeEvent<HTMLInputElement>);
+  };
+
+  const renderRadioButton = () => {
+    return options.map(({ label, value: optionValue, name }, index) => {
+      const id = `${name}-${index}`;
+
+      return (
+        <RadioButton
+          key={id}
+          id={id}
+          label={label}
+          name={name}
+          value={optionValue}
+          onChange={handleChange}
+          checked={value === optionValue}
+        />
+      );
+    });
+  };
+
+  return (
+    <div role="radiogroup" css={radioGroupStyle}>
+      {renderRadioButton()}
+    </div>
+  );
+};
+
+export default RadioGroup;

src/common/component/Tab/style.ts

@@ -27,7 +27,7 @@ export const tabVariantStyle = (variant: Required<TabProps>['variant']) => {
 
       padding: '1.6rem 2rem',
 
-      ...theme.text.body04,
+      ...theme.text.body06,
       fontWeight: 500,
 
       border: 'none',
@@ -41,15 +41,15 @@ export const tabActiveStyle = (isSelected: boolean, variant: Required<TabProps>[
   const style = {
     round: isSelected
       ? css({
-          backgroundColor: theme.colors.white,
+          backgroundColor: theme.colors.gray_100,
 
-          color: theme.colors.key_500,
+          color: theme.colors.black,
           fontWeight: '600',
 
           pointerEvents: 'none',
         })
       : css({
-          backgroundColor: theme.colors.blue_100,
+          backgroundColor: theme.colors.white,
 
           color: theme.colors.gray_800,
           fontWeight: '500',

src/common/component/Tag/Tag.style.ts

@@ -7,19 +7,22 @@ export const commonStyle = () =>
   css({
     color: theme.colors.white,
 
-    padding: '0.4rem 0.8rem',
     ...theme.text.body08,
   });
 
 export const tagStyle = ({ variant, color, bgColor }: Required<Pick<TagProps, 'variant' | 'color' | 'bgColor'>>) => {
   const style = {
     round: css({
+      padding: '0.4rem 0.8rem',
+
       borderRadius: '1rem',
 
       color: color,
       backgroundColor: bgColor,
     }),
     square: css({
+      padding: '0.8rem',
+
       borderRadius: '0.4rem',
 
       color: color,

src/common/router/Router.tsx

@@ -9,6 +9,7 @@ import {
   ComingsoonPage,
   DrivePage,
   ErrorPage,
+  HandoverNotePage,
   InfoFormPage,
   LandingPage,
   LoginPage,
@@ -157,6 +158,14 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: PATH.HANDOVER_NOTE,
+        element: (
+          <Suspense>
+            <HandoverNotePage />
+          </Suspense>
+        ),
+      },
     ],
   },
 ]);

src/common/router/lazy.ts

@@ -11,3 +11,4 @@ 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 HandoverNotePage = lazy(() => import('@/page/handover/note/NotePage'));

src/main.tsx

@@ -21,7 +21,7 @@ const main = async () => {
     await worker.start({
       onUnhandledRequest: 'bypass',
       serviceWorker: {
-        url: 'mockServiceWorker.js',
+        url: '/mockServiceWorker.js',
       },
     });
   }

src/page/archiving/index/component/DocumentBar/Selected/Selected.tsx

@@ -45,7 +45,7 @@ const Selected = ({ selectedBlock }: SelectedProps) => {
         <Heading tag="H6" css={blockNameStyle}>
           {selectedBlock.name}
         </Heading>
-        <Button variant="underline" size="small" css={deleteBtnStyle} onClick={handleDeleteClick}>
+        <Button variant="text" size="small" css={deleteBtnStyle} onClick={handleDeleteClick}>
           블록삭제
         </Button>
       </Flex>