@teamturing/react-native-kit 1.2.3 → 1.3.0

package/lib/typescript/module/src/component/ProfilePhoto/ProfilePhoto.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+type Props = {
+    style?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    showIcon?: boolean;
+    pressable?: boolean;
+    length?: number;
+    testID?: string;
+    profileImageUrl?: string;
+};
+declare const ProfilePhoto: ({ style, onPress, showIcon, pressable, length: _length, testID, profileImageUrl, }: Props) => ReactElement;
+export { ProfilePhoto };
+//# sourceMappingURL=ProfilePhoto.d.ts.map

package/lib/typescript/module/src/component/ProfilePhoto/ProfilePhoto.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePhoto.d.ts","sourceRoot":"","sources":["../../../../../../src/component/ProfilePhoto/ProfilePhoto.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAWpE,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AACF,QAAA,MAAM,YAAY,uFAQf,KAAK,KAAG,YAiDV,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/lib/typescript/module/src/component/ProfilePhoto/ProfilePhotoWithBorderGradient.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ColorValue } from 'react-native';
+declare const ProfilePhotoWithBorderGradient: import("react").MemoExoticComponent<({ profileImageUrl, size, borderGradientColor, optimize, }: {
+    profileImageUrl: string;
+    size: number;
+    borderGradientColor?: ColorValue | undefined;
+    optimize?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;
+export { ProfilePhotoWithBorderGradient };
+//# sourceMappingURL=ProfilePhotoWithBorderGradient.d.ts.map

package/lib/typescript/module/src/component/ProfilePhoto/ProfilePhotoWithBorderGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePhotoWithBorderGradient.d.ts","sourceRoot":"","sources":["../../../../../../src/component/ProfilePhoto/ProfilePhotoWithBorderGradient.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ/C,QAAA,MAAM,8BAA8B;qBAOf,MAAM;UACjB,MAAM;;;8CAmBf,CAAC;AAEF,OAAO,EAAE,8BAA8B,EAAE,CAAC"}

package/lib/typescript/module/src/component/ProfilePhoto/index.d.ts

@@ -0,0 +1,5 @@
+export * from './LightProfilePhoto';
+export * from './ProfileImageGroup';
+export * from './ProfilePhoto';
+export * from './ProfilePhotoWithBorderGradient';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/component/ProfilePhoto/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/component/ProfilePhoto/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kCAAkC,CAAC"}

package/lib/typescript/module/src/component/index.d.ts

@@ -55,4 +55,5 @@ export * from './Btn';
 export * from './Box';
 export * from './Banner';
 export * from './Animation';
+export * from './ProfilePhoto';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AAEpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,OAAO,CAAC;AACtB,cAAc,iBAAiB,CAAC;AAChC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/lib/typescript/module/src/util/WebImageUrlEnricher.d.ts

@@ -0,0 +1,12 @@
+export type ImageCrop = {
+    l: number;
+    r: number;
+    t: number;
+    b: number;
+};
+export declare function appendImageSizeQueryParams({ url, desiredWidth, crop, }: {
+    url: string;
+    desiredWidth: number;
+    crop?: ImageCrop;
+}): string;
+//# sourceMappingURL=WebImageUrlEnricher.d.ts.map

package/lib/typescript/module/src/util/WebImageUrlEnricher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebImageUrlEnricher.d.ts","sourceRoot":"","sources":["../../../../../src/util/WebImageUrlEnricher.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvE,wBAAgB,0BAA0B,CAAC,EACzC,GAAG,EACH,YAAY,EACZ,IAAI,GACL,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,MAAM,CAgBT"}

package/lib/typescript/module/src/util/WebImageUrlEnricher.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=WebImageUrlEnricher.test.d.ts.map

package/lib/typescript/module/src/util/WebImageUrlEnricher.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebImageUrlEnricher.test.d.ts","sourceRoot":"","sources":["../../../../../src/util/WebImageUrlEnricher.test.ts"],"names":[],"mappings":""}

package/lib/typescript/module/src/util/index.d.ts

@@ -5,4 +5,5 @@ export * from './Px';
 export * from './EnvironmentUtil';
 export * from './createCtx';
 export * from './runAfterFlushMacroQueue';
+export * from './WebImageUrlEnricher';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-native-kit",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "React Native Common Module for Team Turing",
   "scripts": {
     "example": "yarn workspace @teamturing/react-native-kit-example",
@@ -18,6 +18,7 @@
     "@mj-studio/react-native-spannable-string": "^1.1.4",
     "@react-native-community/hooks": "^3.0.0",
     "@teamturing/icons": "^1.37.2",
+    "@teamturing/utils": "^1.2.1",
     "polished": "^4.3.1"
   },
   "devDependencies": {
@@ -29,7 +30,8 @@
     "@testing-library/react-native": "^12.6.0",
     "@types/react": "^18.2.44",
     "eslint-config-expo": "^7.1.2",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.29.1",
     "lottie-react-native": "^6.7.2",
     "moti": "^0.29.0",
     "react": "18.2.0",
@@ -156,5 +158,5 @@
   "bugs": {
     "url": "https://github.com/weareteamturing/bombe/issues"
   },
-  "gitHead": "ec54fc2ef8379c91dc072e132fe937de69b8968d"
+  "gitHead": "024e45553815889f8ee7999ed6a62f6b4ec58694"
 }

package/src/component/Animation/implicit/OpacityAnimatedView.tsx

@@ -3,7 +3,7 @@ import { useRef, useEffect, useState } from 'react';
 import type { ViewProps } from 'react-native';
 import { Animated } from 'react-native';
 
-import { useTimeoutHandler } from '../../../hook';
+import { useTimeoutHandlers } from '../../../hook';
 
 type Props = { opacity: number; duration?: number; dropChildrenWhenInvisible?: boolean } & ViewProps;
 const OpacityAnimatedView = ({
@@ -15,22 +15,22 @@ const OpacityAnimatedView = ({
   ...rest
 }: PropsWithChildren<Props>) => {
   const opacityValue = useRef(new Animated.Value(opacity)).current;
-  const timeoutHandler = useTimeoutHandler();
+  const { clearAllTimers, setAutoClearTimeout } = useTimeoutHandlers();
   const [dropChildren, setDropChildren] = useState(!!(dropChildrenWhenInvisible && opacity === 0));
   useEffect(() => {
-    clearTimeout(timeoutHandler.current);
+    clearAllTimers();
     const anim = Animated.timing(opacityValue, { useNativeDriver: true, toValue: opacity, duration });
     anim.start();
     if (opacity <= 0 && dropChildrenWhenInvisible) {
-      timeoutHandler.current = setTimeout(() => setDropChildren(true), duration);
+      setAutoClearTimeout(() => setDropChildren(true), duration);
     } else {
       setDropChildren(false);
     }
     return () => {
-      clearTimeout(timeoutHandler.current);
+      clearAllTimers();
       anim.stop();
     };
-  }, [opacity, duration, opacityValue, dropChildrenWhenInvisible, timeoutHandler]);
+  }, [opacity, duration, opacityValue, dropChildrenWhenInvisible, clearAllTimers, setAutoClearTimeout]);
 
   return (
     <Animated.View style={[style, { opacity: opacityValue }]} {...rest}>

package/src/component/ProfilePhoto/LightProfilePhoto.tsx

@@ -0,0 +1,59 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import { is, appendImageSizeQueryParams } from '../../util';
+import { Img } from '../Img';
+
+import defaultImage from './profile_outline_gray_90.png';
+
+// this is used for just rendering character image in light component like list item(shouldn't be heavy)
+const LightProfilePhoto = ({
+  profileImageUrl,
+  style,
+  size: _size,
+  borderColor,
+  borderWidth = 0,
+  optimize = true,
+}: {
+  profileImageUrl: string;
+  style?: StyleProp<Omit<ViewStyle, 'borderWidth' | 'borderColor'>>;
+  size?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  optimize?: boolean;
+}) => {
+  const size = _size || 56;
+  return (
+    <View
+      key={profileImageUrl}
+      style={[
+        {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+        {
+          width: size,
+          height: size,
+          borderRadius: 9999,
+          borderWidth: 0,
+        },
+      ]}
+    >
+      {Img.render(
+        is.notEmptyString(profileImageUrl)
+          ? optimize
+            ? appendImageSizeQueryParams({ url: profileImageUrl, desiredWidth: size })
+            : profileImageUrl
+          : defaultImage,
+        {
+          width: size,
+          height: size,
+          style: { borderWidth, borderColor, borderRadius: 999 },
+        },
+      )}
+    </View>
+  );
+};
+
+export { LightProfilePhoto };

package/src/component/ProfilePhoto/ProfileImageGroup.tsx

@@ -0,0 +1,98 @@
+import { toKoreanNumberUnitString } from '@teamturing/utils';
+import type { ImageSourcePropType, ColorValue } from 'react-native';
+import { View } from 'react-native';
+
+import { palette, spacing } from '../../theme';
+import { is, appendImageSizeQueryParams, applyOpacity } from '../../util';
+import { Img } from '../Img';
+import { RowCenter } from '../Layout';
+import { Txt } from '../Txt';
+
+type Props = {
+  count?: number;
+  imageUrls: (ImageSourcePropType | string)[];
+  stackDirection?: 'left' | 'right';
+  size?: number;
+  backgroundColor?: string;
+  showBorder?: boolean;
+  maxCircleCount?: number;
+  showsMoreCount?: boolean;
+
+  borderWidth?: number;
+  borderPadding?: number;
+  borderColor?: ColorValue;
+  resizeNetworkImage?: boolean;
+  imageBorderWidth?: number;
+  imageBorderColor?: ColorValue;
+};
+const ProfileImageGroup = ({
+  count: countProp,
+  imageUrls: _imageUrls,
+  stackDirection = 'right',
+  size = 36,
+  backgroundColor = palette.gray100,
+  showBorder = true,
+  maxCircleCount = 3,
+  showsMoreCount = true,
+
+  borderWidth = 1,
+  borderPadding = spacing[0.5],
+  borderColor = palette.gray200,
+  resizeNetworkImage = true,
+  imageBorderWidth = 2,
+  imageBorderColor = backgroundColor,
+}: Props) => {
+  const isReverse = stackDirection === 'left';
+  const imageUrls = isReverse ? [..._imageUrls].reverse() : _imageUrls;
+
+  const totalCount = countProp ?? imageUrls.length;
+  const visibleProfileCount = Math.min(imageUrls.length, maxCircleCount);
+
+  return (
+    <RowCenter
+      reverse={isReverse}
+      style={showBorder ? { borderRadius: 999, borderWidth: borderWidth, padding: borderPadding, borderColor } : {}}
+    >
+      {imageUrls.slice(0, maxCircleCount).map((url, index) =>
+        Img.render(
+          resizeNetworkImage && is.string(url) ? appendImageSizeQueryParams({ url, desiredWidth: size }) : url,
+          {
+            key: index,
+            width: size,
+            height: size,
+            style: [
+              {
+                borderColor: imageBorderColor,
+                borderRadius: 999,
+                borderWidth: imageBorderWidth,
+              },
+              stackDirection === 'right'
+                ? { marginLeft: index !== 0 ? -size / 2 : 0 }
+                : { marginRight: index !== 0 ? -size / 2 : 0 },
+            ],
+          },
+        ),
+      )}
+      {showsMoreCount && totalCount > visibleProfileCount ? (
+        <View
+          style={[
+            {
+              width: size - 4,
+              height: size - 4,
+              position: 'absolute',
+              backgroundColor: applyOpacity(palette.black, 60),
+              borderRadius: 999,
+              alignItems: 'center',
+              justifyContent: 'center',
+            },
+            stackDirection === 'right' ? { right: spacing[showBorder ? 1 : 0] } : { left: spacing[showBorder ? 1 : 0] },
+          ]}
+        >
+          {Txt.XXS.Bold.White.render(`+${toKoreanNumberUnitString(totalCount - (maxCircleCount - 1))}`)}
+        </View>
+      ) : null}
+    </RowCenter>
+  );
+};
+
+export { ProfileImageGroup };

package/src/component/ProfilePhoto/ProfilePhoto.tsx

@@ -0,0 +1,81 @@
+import type { ReactElement } from 'react';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
+
+import { palette } from '../../theme';
+import { is } from '../../util';
+import { Icon } from '../Icon';
+import { Touch } from '../Pressable';
+
+import { LightProfilePhoto } from './LightProfilePhoto';
+
+const defaultLength = 90;
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  showIcon?: boolean;
+  pressable?: boolean;
+  length?: number;
+  testID?: string;
+  profileImageUrl?: string;
+};
+const ProfilePhoto = ({
+  style,
+  onPress,
+  showIcon,
+  pressable = false,
+  length: _length,
+  testID,
+  profileImageUrl,
+}: Props): ReactElement => {
+  const length = is.number(_length) ? _length : defaultLength;
+
+  return (
+    <View
+      style={[
+        style,
+        {
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: length,
+          height: length,
+        },
+      ]}
+    >
+      <Touch
+        testID={testID || 'profile_photo_button'}
+        style={{
+          borderRadius: 9999,
+          width: '100%',
+          height: '100%',
+        }}
+        onPress={onPress}
+        disabled={!pressable}
+      >
+        <LightProfilePhoto profileImageUrl={profileImageUrl || ''} size={length} />
+        {showIcon ? (
+          <View
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 16,
+              backgroundColor: palette.gray200,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderWidth: 2,
+              borderColor: palette.white,
+              position: 'absolute',
+              right: -6,
+              bottom: -6,
+            }}
+            pointerEvents={'none'}
+          >
+            <Icon name={'pen'} size={16} />
+          </View>
+        ) : null}
+      </Touch>
+    </View>
+  );
+};
+
+export { ProfilePhoto };

package/src/component/ProfilePhoto/ProfilePhotoWithBorderGradient.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+import type { ColorValue } from 'react-native';
+import { View } from 'react-native';
+import { Circle, Defs, RadialGradient, Stop, Svg } from 'react-native-svg';
+
+import { is } from '../../util';
+
+import { LightProfilePhoto } from './LightProfilePhoto';
+
+const ProfilePhotoWithBorderGradient = memo(
+  ({
+    profileImageUrl,
+    size,
+    borderGradientColor,
+    optimize,
+  }: {
+    profileImageUrl: string;
+    size: number;
+    borderGradientColor?: ColorValue;
+    optimize?: boolean;
+  }) => (
+    <View>
+      <LightProfilePhoto profileImageUrl={profileImageUrl} size={size} optimize={optimize} />
+      {is.string(borderGradientColor) ? (
+        <Svg height={size} width={size} style={{ position: 'absolute' }}>
+          <Defs>
+            <RadialGradient id={'grad'} cx={size / 2} cy={size / 2} gradientUnits={'userSpaceOnUse'}>
+              <Stop offset={'0.66'} stopColor={borderGradientColor} stopOpacity={0} />
+              <Stop offset={'1'} stopColor={borderGradientColor} stopOpacity={1} />
+            </RadialGradient>
+          </Defs>
+          <Circle r={size / 2 + 1} cx={size / 2} cy={size / 2} fill={'url(#grad)'} />
+        </Svg>
+      ) : null}
+    </View>
+  ),
+);
+
+export { ProfilePhotoWithBorderGradient };

package/src/component/ProfilePhoto/index.ts

@@ -0,0 +1,4 @@
+export * from './LightProfilePhoto';
+export * from './ProfileImageGroup';
+export * from './ProfilePhoto';
+export * from './ProfilePhotoWithBorderGradient';

package/src/component/index.ts

@@ -50,9 +50,9 @@ export * from './Img';
 export * from './Icon';
 export * from './Header';
 export * from './FloatingRoundChip';
-
 export * from './dialog';
 export * from './Btn';
 export * from './Box';
 export * from './Banner';
 export * from './Animation';
+export * from './ProfilePhoto';

package/src/util/WebImageUrlEnricher.test.ts

@@ -0,0 +1,14 @@
+import { appendImageSizeQueryParams } from './WebImageUrlEnricher';
+
+describe('appendImageSizeQueryParams', () => {
+  it('url이 올바른 경우', () => {
+    expect(appendImageSizeQueryParams({ url: 'http://test.jpg', desiredWidth: 100 })).toBe('http://test.jpg?w=256');
+    expect(appendImageSizeQueryParams({ url: 'http://test.jpg?x=1&t=5', desiredWidth: 100 })).toBe(
+      'http://test.jpg?x=1&t=5&w=256',
+    );
+  });
+
+  it('url이 올바르지 않은 경우', () => {
+    expect(appendImageSizeQueryParams({ url: 1 as any, desiredWidth: 100 })).toBe(1);
+  });
+});

package/src/util/WebImageUrlEnricher.ts

@@ -0,0 +1,31 @@
+import { Dimensions } from 'react-native';
+
+import { is } from './is';
+
+const scaleFactor = () => Math.min(2, Dimensions.get('window').scale);
+export type ImageCrop = { l: number; r: number; t: number; b: number };
+export function appendImageSizeQueryParams({
+  url,
+  desiredWidth,
+  crop,
+}: {
+  url: string;
+  desiredWidth: number;
+  crop?: ImageCrop;
+}): string {
+  if (!is.notEmptyString(url) || !url.startsWith('http')) {
+    return url;
+  }
+
+  const w = Math.max(128, Math.floor((desiredWidth * scaleFactor() + 128 - 1) / 128) * 128);
+
+  const cropQueryStrings = Object.entries(crop || {}).map(([key, value]) => `${key}=${Math.round(value)}`);
+
+  const queryString = [`w=${w}`, ...cropQueryStrings].join('&');
+
+  if (url.includes('?')) {
+    return `${url}&${queryString}`;
+  } else {
+    return `${url}?${queryString}`;
+  }
+}

package/src/util/index.ts

@@ -5,3 +5,4 @@ export * from './Px';
 export * from './EnvironmentUtil';
 export * from './createCtx';
 export * from './runAfterFlushMacroQueue';
+export * from './WebImageUrlEnricher';