쇼핑몰 및 채팅 서비스에서 별점 주기 컴포넌트 구현

가만있어 보자..  쇼핑몰이나 채팅 서비스에서 상담사에게 별점을 주는 시스템이 있는데,별점 줄때 쓰는 거 머시기 있는데.. 자주 쓰이는건 아니지만 아주 간혹 이런 형태의 작업이 들어옴..어쩌것어... 그럼 만들어야지.... 뭐 방식이야 여러가지 형태로 있겠지만 .. 그런 방식 따위는 그냥 개무시하고 내가 생각한대로 만들어서 기능 구현이 되면 되는거다. import React, { useState } from 'react';import Style from './EvaluateStyle';import { IconStart } from '../../assets/images/common/IconSet';const Evaluate = Style(APP_SKIN);function EvaluateWrap(props)..

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2024. 9. 9.
• textsms

React 트랜지션을 이용한 모달팝업 컴포넌트

웹 접근성 이슈로 인한 display와 transition 문제작업을 진행할 때, 웹 접근성 이슈로 display와 transition을 사용해야 하는 경우가 생긴다.(다른 방법 있나? 있음 알려주쇼)그런데 다들 알고 있겠지만, display: none 상태에서 transition이 작동하지 않는다. display 속성 자체가 애니메이션화(transition)할 수 없기 때문이고, display 속성은 요소가 화면에 표시될지 여부를 결정하는 속성인데, 이는 이진 상태(보이거나 보이지 않음)로 처리되기 때문이다. 따라서 display: none에서 display: block 등으로 변경할 때 중간 상태가 없으므로 transition 애니메이션이 작동하지 않는다.  뭐 암튼 그렇다고 나도 잘 몰라 🥲  t..

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2024. 9. 4.
• textsms

[RN] - react-native-image-crop-picker

파일 첨부 관련 https://github.com/ivpusic/react-native-image-crop-picker

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2020. 9. 11.
• textsms

[RN] - Device top height

안드로이드 상단의 높이값 ios - 44android - 54

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2020. 9. 2.
• textsms

[RN] hitSlop

클릭에 대한 영역을 강제로 늘려주는 속성 hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} 영역, 클릭, 버튼

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2020. 8. 27.
• textsms

RN ios, android 디바이스별 폰트 설정 관련

안드로이드에서 fontweight가 있으면 설정이 ios만 되고 fontFamily 가 적용이 안된다. 그래서 그런경우엔 보통import { Platform, StyleSheet } from 'react-native'; fontWeight: Platform.OS === 'android' ? 'normal' : 'bold' 이렇게 처리한다. 다른 예로 import { Platform, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ height: Platform.OS === 'ios' ? 200 : 100 });

• format_list_bulleted 개발연습막쓰기/React 개발연습 막쓰기
• · 2020. 8. 26.
• textsms