Open
Conversation
# popover https://mui.com/material-ui/react-popover 해당 컴포넌트는 boolean 에 따라 하위 컨텐츠 숨김 혹은 노출시키는 기능이 있음 예) 버튼 클릭 -> 아래에 컴포넌트 생성 해당 컴포넌트를 templates...Notices.tsx 에 적용 - popover + button | iconButton => 이 둘을 조합하여 popoverButton 컴포넌트를 생성 isIconButton 의 boolean 값에 따라 조건부 렌더로 iconButton 혹은 일반 Button 이 될 수 있음
new : - popover 컴포넌트 추가 : 이는 특정 요소에 접근할 경우 요소를 참조하여 해당 위치에 Paper 컴포넌트를 랜더한다. 해당 paper 컴포넌트 내에 추가적인 이벤트 생성가능 issue : Input 딜레이, Input 을 활용하는 컴포넌트의 경우 성능이 크게 저하되는걸 확인 editor 나 이외 input을 활용하지 않는 컴포넌트는 문제가 없으나 유난히 Input 입력이벤트가 심각함 부모과 관리하는 상태가 많은건지 아니면 이벤트문제인지 체크중 etc : @template/notice 컴포넌트에 펼치는 제목바 좌측에 버튼을 클릭 시 popover를 활용해 에디터를 호출 가능 gql 연동테스트하기
ModalEditor 컴포넌트가 상태값을 관리하는 방식으로 수정 추후 해당 수정된 값들(제목, 내용) 은 리코일 상태로 저장 후 서버로 전송하도록 구현할 예정
- 수정사항 -- `Notices` 템플릿에서 에디터의 제목과 내용을 관리하는게 아닌 `ModalEditor` 가 관리 -- `ModalEditor` 에 리코일 상태값과 초기 마운트값 설정 -- `ModalEditor` 프로퍼티 `mode` 가 `post` 일 경우 빈 리코일로 에디터 작성 -- `TinyEditorBasic` 은 `React.memo` 를 사용하여 부모컴포넌트 입력이벤트(예 ModalEditor 의 `React.useState : title` 제목 상태 변경) 발생하더라도 리렌더링 되지 않음 -- 리렌더링이 되지 않는 이유 props 에서 `initialValue` 와 `onEditorChange` 는 바뀌지 않아서 -- 리렌더링은 props 의 value : 에디터 입력값이 바뀔경우만 리렌더링됨 - 작업중 -- 'ModalEditor` 에 `mode` 프로퍼티로 `edit` 를 받았다면 `currentUid` 를 통한 uid 를 쿼리하여 이전에 작성한 글을 불러와야함 -- gql 쿼리를 도입해야함
This reverts commit fbafaa5.
- GET_EVENT_TYPE 이벤트 타입 목록을 조회하는 쿼리 - GET_EVENT_LIST 이벤트 목록을 조회하는 쿼리 - GET_EVENT_INFO 이벤트 목록을 조회한 id 값을 통해 이벤트 상세 조회 쿼리
- 각 컴포넌트별 디렉토리에 "./styles\index.scss" 공통 스타일 리소스 설정 불러오도록 함 - CollapseCell, CollapseHeader, TitleRow, NoticeRevising 컴포넌트 스타일 추가 - 테이블 셀 내부 컨텐츠(텍스트)를 줄바꿈 현상이 없도록 하고, 최대 길이 이상일 경우 ... 로 생략하게 하여 컴포넌트의 크기 변화 방지 - ContextRow.module.scss 이벤트 상세 컨텐츠를 담고있는 컴포넌트 스타일 추가 - 테이블 셀의 --on, --off 에 따라 padding 값 inherit 또는 0으로 설정 - DateRange 컴포넌트 BEM 방식으로 개선 - date-range 의 날짜를 선택하는 영역의 가로 크기를 고정값이 아닌 felx-grow: 1 을 적용 - 반응형에 따른 패딩과 레이아웃 배치(예 flex-direction : row -> column) 변경 - 추후 반응형 스타일 대비하기 위해 미디어쿼리 적용 - SearchBar, AsideNav, NoticeRevising - SelectBox 셀렉트 박스 컴포넌트 스타일 추가 - 기존 MUI 의 셀렉트 박스 설정 중 min-width 값 수정 - label 영역이 색상이 없어 셀렉트 박스를 포커스 할 경우 레이블 글자가 어색해 보이던 부분을 뒷배경 추가로 수정 - UserLoginPlace 컴포넌트 스타일 수정 - Aside 네비게이션을 DrawNemu 방식으로 변경함으로써 스타일도 수정 - 아이콘 색상 수정 및 drawMenu 스타일을 margin-right : auto; 로 하여 우측 형제 요소들을 밀착시킴 - FilteredList 컴포넌트 스타일 추가 - 검색결과를 리스트 형식으로 보여주는 컴포넌트 - root : paper 패딩 값 설정 및 제목 폰트 크기 설정 - FilteredSearch 컴포넌트 스타일 수정 및 개선 - BEM 방식으로 개선 - 각 입력하는 Form 영역마다 gqp 값 추가 - daterange 날짜 선택 컴포넌트에 기본 display: flex 설정 - 반응형에 따른 flex-direction, margin, gap 수치 변경 추가 - CollpasibleTable 여닫이 테이블 컴포넌트 스타일 추가 - 각 레이어 별 BEM 으로 클래스명 설정 및 테이블 셀의 경우 세로값과 가로값이 컨텐츠로 인해 수치가 바뀌는걸 방지 - Admin 템플릿 컴포넌트 수정 - 기존에는 자식이 일일히 패딩을 설정해야 했으나 부모인 Admin.module 에서 패딩값을 관리함
- DatePicker 컴포넌트 클래스 props 병합 수정
- props.classes 를 통해 컴포넌트의 classes 값을 스프레드 방식으로 명시적 병합
- 컴포넌트 classes.root 값을 props.classes 을 통해 클래스명 적용
- DateRange 날짜 범위 선택 컴포넌트의 구조 수정
- props : { rootClsN, fromDate, endDate, onDateChange, onReset, defaultText, inputLabel, inputLabelId } 속성들 추가
- 난해한 단축 네이밍(예 fromD -> fromDateState) 상태값과 함수들을 수정
- useEffect 를 통해 시작일과 종료일 값이 존재하지 않을경우 deafultText prop를 사용하여 해당 기본 값을 보여줌
- 기존의 css 방식으로 작동되는 방식을 Popover 컴포넌트를 활용하도록 수정
- 기타 기능들의 경우 utiles 디렉토리로 저장 및 불러오도록 변경
- SelectBox 셀렉트 박스 컴포넌트 입력값 레이블 shrink 속성을 활성화
- 인풋이 포커스 혹은 값이 있을 경우 인풋 필드 위로 레이블이 이동함
- UserLoginPlace 관리자 페이지 템플릿 레이아웃 중 헤더 컴포넌트
- drawMenu 측면에 메뉴가 활성화 되도록 아이콘 버튼 이벤트 적용
- FilteredSearch 를 기반으로 FilterSearchRevising 컴포넌트 재설계
- 변수 상태 함수 등 네이밍을 단축하지 않게 카멜케이스로 적음
- 너무 긴 클래스 명은 배열로 저장후 전달함
- 검색 필터 리코일 내부 값의 상태를 useEffect 에 활용하여 리코일을 갱신함
- gql 쿼리를 사용하여 불러오기 성공... 추후 이벤트 타입 쿼리가 배포되면 수정할 예정
- MainNav 관리자 페이지에 사용되는 네비게이션 컴포넌트.. 변경사항 없음
- Admin 관리자 페이지 레이아웃 컴포넌트 수정
- 기존 {children} 방식에서 Mui 컴포넌트 Box 를 감싸서 렌더
- 이는 자식이 아닌 부모인 레이아웃 컴포넌트가 패딩값을 설정하기 위해 수정함
- Notices 공지사항 템플릿 페이지 변수 네이밍 수정
- tsx 모듈인 handline 을 Headline 으로 수정
- useDomSizeCheck DOM 사이즈 이벤트 훅 수정사항 없음
- Notices 페이지 컴포넌트 렌더 테스트
- 기존에 존재했던 NoticesTemplate 템플릿 컴포넌트를 렌더했으나 해당 컴포넌트는 템플릿이 관리하는 함수나 상태가 너무 많았음
- NoticeRevising 는 이전 NoticesTemplate 을 기반으로 재설계한 템플릿 컴포넌트
- noticesFilterAtom 이벤트 id 리코일 아톰(eventIdAtom) 선언
- notificationButtonGroup 유틸리티 데이터 title 속성 기입
- CollapseCell.tsx: 여닫기(collapse) 컴포넌트 에 사용되는 테이블 셀 컴포넌트
- props 구현:
- className: 커스텀 클래스명
- size: 테이블 셀의 크기
- item: 표시될 컨텐츠
- ContextRow.tsx: 열고 닫을 수 있고 컨텐츠를 가지고 있는 테이블 행 컴포넌트
- 여닫이 상태에 따라 동적으로 클래스명 변환
- props 구현:
- className: 테이블 행 커스텀 클래스명
- cellClsN: 테이블 셀 커스텀 클래스명
- isOpen: 여닫이(collapse) 상태 제어
- content: 표시될 컨텐츠
- colSpan: 병합할 열 개수
- TitleRow.tsx: 테이블 바디 영역 내부 여닫기 기능을 가진 테이블 제목 행 컴포넌트
- props 구현:
- className: 테이블 행 커스텀 클래스명
- cellClsN: 테이블 셀 커스텀 클래스명
- isOpen: 여닫이(collapse) 상태 제어
- data: 표시될 컨텐츠 배열
- align: 테이블 셀 내부 컨텐츠 좌우 정렬
- onClick: 여닫기(collapse)클릭 이벤트
- CollapseHeader.tsx: 여닫기 테이블의 헤더 열을 담당하는 컴포넌트
- props 구현:
- tableCells: 테이블 헤더에 표시할 "th" 컨텐츠
- FilteredList.tsx: 검색 이벤트를 통해 결과물 들을 여닫기(Collapse) 테이블 형태로 컨텐츠를 보여주는 컴포넌트
- props 구현:
- filteredTitle: 테이블 제목
- 상태 관리:
- tableData: 쿼리된 이벤트 정보 상태 관리
- selectedEventInfo: 선택된 이벤트의 상세 정보를 EventInfoResponse 타입으로 상태 관리
- page: 페이지네이션 상태 관리
- pageSize: 조회할 페이지 범위 상태 관리
- 전역 상태:
- filterState: 이벤트 필터링 조건(noticeFilterAtom)
- 테이블 구조:
- 헤더 항목 정의 [ '제목', '카테고리', '상태', '기간', '등록일', '수정일' ]
- 쿼리 구현:
- GET_EVENT_TYPE:
- 이벤트 타입(enum)목록 조회
- GET_EVENT_LIST:
- 이벤트타입(enum)에 맞는 이벤트 목록 조회
- refetch 함수를 통해 데이터 갱신
- GET_EVENT_INFO:
- eventId 를 통해 상세 컨텐츠 조회
- refetch 함수 미사용
- useEffect 의존성 처리:
- [refetchEventData]: 리패치 이벤트 발생할때 마다 eventType 갱신 (아직 설계중인 상태)
- [eventListData]: 이벤트 데이터가 존재할 때 마다 여닫기(Collapse) 컴포넌트에 활용되는 데이터 리턴
- 기능 구현
- 이벤트 필터링 조건에 따라 데이터 조회
- 조회된 데이터를 여닫기(collapse) 컴포넌트를 생성
- 여닫이(collapse) 컴포넌트의 토글 이벤트에 따라 상세 정보 불러오기
- CollapsibleTable.tsx: 여닫기(collapse) 기능을 감싸는 테이블 컴포넌트
- props 구현:
- tableLabel: 테이블 레이블 명
- tHeaders: 테이블 헤더 문자열 목록
- talbeData: 특정타입(TableDB)과 일치하는 테이블 데이터 목록
- 상태 관리:
- collList: 여닫이 목록 상태 관리
- 이벤트 핸들러:
- toggleCollapse: 특정 인덱스의 여닫기 상태 반전 처리
- setCollapseArray: toggleCollapse의 래퍼 함수
- 렌더 함수:
- tHeadRender: 문자열 배열을 테이블 헤더 셀로 변환
- tCollpaseRender: 테이블 열인 제목과 본문을 가진 여닫이 컴포넌트로 변환
- tableData를 매핑하여 여닫이 테이블 제목, 본문 컴포넌트로 변환하고 프래그먼트로 리턴 ⚙️해당 프래그먼트는 다른 방식으로 수정할 예정
- 기능 구현
- 받은 데이터를 통해 여닫이(collapse) 컴포넌트로 렌더
- 여닫이(collapse) 목록 상태를 관리
- NoticeRevising.tsx: 관리자 공지사항 컨텐츠를 보여주는 템플릿 컴포넌트
- 개선한 사항:
- 이전 Notice.tsx 는 template 영역에서 이벤트 처리를 하였으나 아토믹 디자인에 맞게 organisms 요소들이 이벤트를 처리하고 template 는 organisms 모듈을 구성하도록 수정
- useNoticeData.ts: 데이터를 불러올때 로딩 상태를 알리는 훅
- 상태 관리:
- data: EventInfo 양식에 맞게 배열로 상태 관리
- loading: 로딩 상태 관리
- 전역 상태:
- filterState: 이벤트 필터링 조건(noticeFIlterAtom)
- useEffect 의존성 처리:
- [filterState] : 현재는 "[]" 상태로 비어있으므로 추가할 예정
- 기능 구현
- 필터 상태 변경 시 데이터를 조회
- 데이터 조회 시 로딩 구현
- EventFilterType.ts: 이벤트 필터, 타입, 상세, 페이지네이션에 사용되는 인터페이스 정의
- EventFilterType 인터페이스: 이벤트 필터에 사용
- 필수 필드:
- keyword: 검색 키워드
- postStatus: 이벤트의 공개 여부
- 선택 필드:
- eventType: 이벤트의 타입(그래파이큐엘에서는 enum Values 로 구성)
- startedAt: 이벤트 시작일
- endedAt: 이벤트 종료일
- postedAt: 글 등록일
- fixedAt: 글 수정일
- EventPageRequest 인터페이스: 이벤트 페이지네이션에 사용
- 필수 필드
- eventId: 이벤트 ID
- page: 페이지 번호
- pageSize: 페이지당 크기
- EnumValue: enum 을 사용하는 EventType 인터페이스
- 필수 필드
- name: EventType 의 이름
- TypenameDataResponse: 그래파이큐엘의 enum 값을 가져오기 위한 인터페이스
- 필수 필드
- __typename: { enumValues: EnumValue[]} : `__typename` 필드를 쿼리하고 특정 타입인 enum 값을 조회하는데 사용
- EventLabelType.ts: 이벤트 레이블에 사용되는 인터페이스
- 필수 필드:
- eventValue: 이벤트 타입 EnumValue는 string으로 전송됨
- 선택 필드:
- eng: 영어 레이블
- kor: 한국어 레이블
- EventItemResponse.ts: 이벤트 아이템 관련 인터페이스
- EventItemResponse:
- 필수 필드:
- id: 이벤트 아이템 id 값
- startedAt: 이벤트 시작일
- endedAt: 이벤트 종료일
- title: 이벤트 제목
- 선택 필드:
- content: 이벤트 컨텐츠
- thumbnail: 이벤트 썸네일
- EventInfoResponse: 이벤트 상세 정보 인터페이스
- 선택 필드:
- items: 이벤트 아이템 목록
- images: 이벤트 이미지 목록
- link: 이벤트 링크
- drawerAdminNavAtom.ts: Mui 의 DrawMenu 컴포넌트의 펼침 전역 상태 아톰
- noticeFilterAtom.ts: 공지사항 필터에 사용될 전역 상태 아톰
- 기본값:
- keyword: 검색 키워드
- eventType: 선택된 이벤트 종류
- postStatus: 등록 상태
- compareDate: 두 매개변수를 통해 특정 값을 리턴
- 매개변수:
- date1, date2: Dayjs 타입인 매개변수
- 분기:
- (-1): date1이 date2 보다 과거일 경우
- (1): date1 이 date2 보다 미래일 경우
- (0): 두 매개변수 수치가 같을 경우 or 매개변수중 하나라도 null일 때
- 반환값: -1, 0, 1
- swapDateCheck: 매개변수 1,2 를 통해 날짜의 순서 정렬
- 매개변수:
- fromDate: 시작일
- endDate: 종료일
- 반환:
- 매개변수를 compareDate에 활용하여 결과를 저장
- 케이스별로 [시작일, 종료일] 을 반환
- formatDayjs: Dayjs 를 YYYY.MM.DD 형태로 포멧
- 매개 변수:
- date: Dayjs 타입 매개변수
- 반환:
- 매개변수가 존재할 경우 YYYY.MM.DD 를 문자열로 반환 혹은 '' 빈 문자열 반환
- required 속성을 통한 레이블 스타일 변경 - required 속성이 존재 할 경우 textField 레이블 필수값 입력 처리과 스타일 적용
- AdminRouter.tsx 관리자 페이지 ProductRegister 상품등록 페이지 추가
- ProductEventType: 상품의 "등록" | "불러오기" | "템플릿" 이벤트 분기 타입
- ProductRegisterButtonProps: 상품 등록, 불러오기... 를 가지는 컴포넌트의 인터페이스
- 필수필드
- item : 제너릭 아이템 타입 컨텐츠
- itemFactor : 제너릭 타입을 렌더
- event : ProductEventType 의 event 타입
- onClick : 버튼 클릭 이벤트
- 선택필드
- className : 클래스명
- ItemStatus : 해당 상품의 이용 상태
- RESERVED : 예약
- SUSPENDED : 중단
- DELETED : 삭제
- SOLDOUT : 마감
- AVAILABLE : 이용가능
- ProductRegiterItemResponse : gql 에 따른 상품 스키마 타입
- 필수필드
- publicId : 고유번호
- categoryPublicId : 카테고리 고유번호
- title : 제목
- content : 상세 내용
- summary : 상품 간략 설명 (소제목)
- price : 가격
- sellCnt : 판매 수
- wishCnt : 즐겨찾기 수
- stockCnt : 재고 수
- clickCnt : 조회 수
- avgReview : 평점
- reviewCnt : 리뷰 수
- qnaCnt : qna 문서 수
- status : 아이템 상태
- storeId : 상점 고유번호
- freeDelivery : 무료배송 여부
- imageUrls : 상품 이미지 url 목록
- option : 옵션 품목
- productNumber : 상품번호
- deadline : 종료일
- originalWork : 원작
- material : 재질
- size : 크기
- weight : 무게
- shippingCost : 배송비
- ProductRegisterItemResponse 에 따른 초기값
- ProductRegisterTemplate 템플릿 컴포넌트를 렌더
- ProductDetail : 상품 상세페이지 작성 영역
- 필수필드
- state: 상품 등록 상태
- onClick : 상품 클릭 이벤트
- 속성 state 에 따라 상세페이지 알림 메시지를 변경
- 속성 state 에 따라 상세페이지 버튼 메시지를 변경
- ProductRegisterAtom : 전역 리코일 상태
- ProductRegiterItemResponse 타입
- default : 기본 상품 초기화 값 사용
- ProductRegisterButtonGroup : 상품등록 및 불러오는 리모트 컴포넌트
- 인덱스에 따른 아이콘과 버튼 이벤트를 결정, 코드 간결화
- 리코일을 통한 상품 등록 모달의 전역 상태 관리
- ModalEditor : 모달 에디터
- 속성에 onSave : 저장 콜백함수 추가
- 버튼 속성중 name === 'save' 인 경우 저장 콜백함수 설정
- ProductCategory : 상품 카테고리 레이어 영역
- ProductContent : 상품 상세설명 레이어 영역
- 선택 타입
- className : 클래스명
- parentHeadlineCleN : 제목 클래스명
- sectionHeadlineClsN : 부제목 클래스명
- 기능
- 상품 상세페이지를 작성 및 수정하는 모달 에디터를 활성화함
- 상품 정보는 전역 상태를 통해 불러옴
- 초기 상품 정보인 전역상태를 현재 컴포넌트의 모달 에디터 컨텐츠 상태에 갱신
- 저장 혹은 취소에 따른 리코일 갱신 처리
- 버튼 분기에 따른 버튼 이벤트 설정
- ProductInfo : 상품 정보 작성 레이어 영역
- 선택필드
- className : 클래스명
- parentHeadlineCleN : 현재 컴포넌트 제목 클래스명
- sectionHeadlineClsN : 입력란 설명 제목 클래스명
- 기능
- 상품의 제목과 소제목, 규격, 크기, 원작명 등... 상품의 기초 정보를 입력하는 레이어
- Input 의 Event.target 속성 name, value 를 활용하여 이벤트 간소화
- ModalProductRegister : 모달을 활용하는 상품 등록 템플릿 영역
- 컴포넌트 구성요소
- ProductInfo : 상품정보
- ProductCategoryRegister : 상품 카테고리
- ProductContent : 상품 상세작성
- ProductRegisterTemplate : 상품 등록 분기 버튼 템플릿
- ProductRegisterButtonGroup : 상품의 등록, 불러오기, 템플릿 버튼으로 구성
- ModalProductRegister 를 활성화함
- index.scss : mixin, function 등 폰트크기, 반응형 등 전역 설정 불러옴 - ProductDetail : 상세페이지 관련 스타일 - .text : 컨텐츠 박스 패딩 조정 및 문자 정렬 중앙 - .button : 폰트 사이즈와 너비 조절 - ProductRegisterButtonGroup : 상품 등록 버튼 컴포넌트 스타일 - 버튼 호버, 아이콘 색상 적용 - ModalProductRegister : 모달 상품 등록 컴포넌트 스타일 - ProductRegisterTemplate : 상품 등록 템플릿 컴포넌트 스타일 - 제목과 부제목 속성 추가
"@dnd-kit/core": "^6.3.1" : A modular toolkit for building drag&drop interfaces. "@dnd-kit/sortable": "^10.0.0" : allows to render elements in a list or across multiple lists. "@dnd-kit/utilities": "^3.2.2" : provides a set of utility functions and types
SortableItem.tsx is an element that can be dragged and dropped to reorder it in a list or across lists. *the `useSortable` hook needs to be used within a descendant of a `SortableContext` provider higher up in the tree - support Drag and Drop functionality - provides a set of sensible default attributes for draggable items. - represents the displacement and transformation needed for position transition without DOM reordering - support conditional styling based on active drag state - can be used as the basis for implementing sortable lists and grids
- import global variables and mixins - set box-shadow when attributes are active
Use the `useDraggable` hook to turn DOM nodes into draggable sources that can be picked up, moved and dropped over __droppable__ containers. - accesses the underlying DOM node and keeps track of it to detect collisions and intersections with other droppable elements. - handles CSS transformations through inline styles and CSS variables... such as `transform`, 'translate', `scaleX`, `scaleY`
- import global variables and mixins
Sets up DOM nodes as droppable areas that draggable elements can be dropped over. - support style cusomization when drag operation begin and end
- import global variables and mixins - sts background and color values when droppable are end
SortableItem.tsx is a reusable component created using the dnd-kit/sortable library. - Provides necessary attributes and listeners for drag and drop functionality - Handles CSS transformations through inline styles CSS variables such as `transform`, `transition`, `opacity`, `zIndex`, `position`, `touchAction` - Supports conditional styling based on active drag state
- Imports global variables and mixins from index - Defines base box style with transform optimazations - Add will-change and transition properties for smooth animation
Provides container area for draggable items - Handles DraggableItem events when drag starts and ends - Manages item position swapping by tracking old and new indices - Supports Mapping and rendering of multiple SortableItems
- Imports global variables and mixins
provides image container with ImageListItemBar for additional controls - Handles image click events - support custom action icons through actionIcon prop
- Imports global variables and mixins - Sets svg button properties transparent effects - Sets imageBox ratio to 1:1 - Hides image-alt-text
- Manages product thumbnail and additional images - Handle image change and removal events - Update global state through Recoil atoms - Provides structured layout with section headings
- Imports global variables and mixins - Set imagebox's width to 116px
- Supports customization through parent CSS class injection - Provides basic pricing section layout with heading - Implements Paper container with Divider for visual separation
- Imports global variables and mixins
- Handles thumbnail image change and removal events - Supports image preview functionality with backdrop - Provides image guidence with recommended dimensions - Implements responsive layout using Stack containers
- Imports global variables and mixins - Adjusts `white-space` to pre-line for context description - Sets up `max-width` to 50% for backdrop preview images
- Manages sortable image arrangement with "drag and drop" functionality - Handles image reordering through swap events - Provides file upload capability via ActionIcon component - Updates product image data in global Recoil state - Implements drag mod toggle with visual feedback - Utilizes dnd-kit library with custom sensors and strategies
- Imports global variables and mixins - Sets up full width for DndPaper container - Configures flex layout for sortable items with proper spacing - Implements Jiggle animation effect for active drag states - Structures ImageBox component with customized bar display
- Defines imageBoxClasses interface for style customization - Creates ImageBoxPropsInterface with common image properties - Supports optional click handler and CSS class injection - Provides type safety for ImageBox component implementation
- Defines ModifierArgs interface for transform modifications - Imports essential tyoes frin `dnd-kit` utilities and core - Support optional drag overlay and event parameters - Enables type-safe custom modifiers for drag and drop operations
- Defines common styling properties for product layer component - Support className for container element customization - Provides seperate class options for parent and section headlines - Ensures consistent styling interface across productLayer components
- Defines two distinct jiggle animation patterns - Creates subtle rotation effects with timing function variations - Supports both clockwise and counterClockwise movements - Provides resuable animations for interactive UI element(remove, click, etc...)
- Removes redundant className and `iconClsN` default values - Cleans up component implementation by removing unneeded defaults
…erface" - Imports ProductLayerInterface from proper path - Removes redundant property definitions - Replaces vervose interface with direct extension
…rface" - Imports ProductLayerInterface from proper path - Removes redundant property definitions - Relaces vervos interface with direct extension
- Imports ProductLayerInterface from proper path - Remove redundant property definitons - Replaces verbose interface with direct extension
- Implements ProductPrice and ProductImage components - Implements both components within the modal structure - Sets up proper headline styling for component sections
- Customizes webkit-scrollbar with 8px witdth and `#8E8E8E` color - Styles scrollbar tumb with border-radius and box-shadow effects - Customizes content width from 100% to fixed 864px
- Changes imageUrls type from [string] to string[]
- Defines `$border-default-color` with rgba(0,0,0,0.12) value
- Imports "animations" keyframe file for global access - Creates alt-hidden mixin for accessibility-friendly element hiding
- Add `"@dnd-kit/accessibility@^3.1.1" dependency` - Add `"@dnd-kit/core@^6.3.1" dependency` - Add `"@dnd-kit/sortable@^10.0.0" dependency` - Add `"@dnd-kit/utilities@^3.2.2" dependency`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
기능
ImageBoxItemBar를 통해 이미지 등록 및 삭제를 할 수 있음미구현