[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에러 해결

Author: namdaeun

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",

pnpm-lock.yaml

@@ -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/asset/svg/ic_delete_file.svg

@@ -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/asset/svg/ic_file_round.svg

@@ -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/Button/Button.style.ts

@@ -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/Button/Button.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/CommandButton/CommandButton.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,