@kukkim/react-native-ui 0.1.3 → 0.1.5

package/lib/typescript/src/components/slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B"}

package/lib/typescript/src/components/spinner/commonSpinner.d.ts

@@ -0,0 +1,4 @@
+import { type SpinnerProps } from './types.js';
+declare const CommonSpinner: ({ type, ...props }: SpinnerProps) => import("react").JSX.Element;
+export default CommonSpinner;
+//# sourceMappingURL=commonSpinner.d.ts.map

package/lib/typescript/src/components/spinner/commonSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonSpinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/commonSpinner.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAS,CAAC;AAG5C,QAAA,MAAM,aAAa,GAAI,oBAAgC,YAAY,gCAyBlE,CAAC;AASF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/components/spinner/index.d.ts

@@ -1 +1,3 @@
+import CommonSpinner from './commonSpinner.js';
+export { CommonSpinner };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/index.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,oBAAiB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/typescript/src/components/spinner/types.d.ts

@@ -1 +1,9 @@
+import { type ViewProps } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export interface SpinnerProps extends ViewProps {
+    type?: Variant;
+    size?: SizeVariant;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/spinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}

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

@@ -1,3 +1,3 @@
-export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, } from './components/index.js';
+export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, SocialLoginButton, CommonSpinner, CommonSlider, CommonSelect, SelectItem, } from './components/index.js';
 export { ThemeProvider } from './theme/themeProvider.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,GACX,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kukkim/react-native-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "ui library for react native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -83,6 +83,7 @@
     "react": "19.2.0",
     "react-native": "0.83.6",
     "react-native-builder-bob": "^0.42.1",
+    "react-native-gesture-handler": "^3.0.0",
     "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": "^5.8.0",
     "react-native-svg": "^15.15.5",
@@ -94,6 +95,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": ">=3.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": "*",

package/src/assets/icons/apple.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>

package/src/assets/icons/facebook.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>

package/src/assets/icons/google.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>

package/src/assets/icons/kakaotalk.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>KakaoTalk</title><path d="M22.125 0H1.875C.8394 0 0 .8394 0 1.875v20.25C0 23.1606.8394 24 1.875 24h20.25C23.1606 24 24 23.1606 24 22.125V1.875C24 .8394 23.1606 0 22.125 0zM12 18.75c-.591 0-1.1697-.0413-1.7317-.1209-.5626.3965-3.813 2.6797-4.1198 2.7225 0 0-.1258.0489-.2328-.0141s-.0876-.2282-.0876-.2282c.0322-.2198.8426-3.0183.992-3.5333-2.7452-1.36-4.5701-3.7686-4.5701-6.5135C2.25 6.8168 6.6152 3.375 12 3.375s9.75 3.4418 9.75 7.6875c0 4.2457-4.3652 7.6875-9.75 7.6875zM8.0496 9.8672h-.8777v3.3417c0 .2963-.2523.5372-.5625.5372s-.5625-.2409-.5625-.5372V9.8672h-.8777c-.3044 0-.552-.2471-.552-.5508s.2477-.5508.552-.5508h2.8804c.3044 0 .552.2471.552.5508s-.2477.5508-.552.5508zm10.9879 2.9566a.558.558 0 0 1 .108.4167.5588.5588 0 0 1-.2183.371.5572.5572 0 0 1-.3383.1135.558.558 0 0 1-.4493-.2236l-1.3192-1.7479-.1952.1952v1.2273a.5635.5635 0 0 1-.5627.5628.563.563 0 0 1-.5625-.5625V9.3281c0-.3102.2523-.5625.5625-.5625s.5625.2523.5625.5625v1.209l1.5694-1.5694c.0807-.0807.1916-.1252.312-.1252.1404 0 .2814.0606.3871.1661.0985.0984.1573.2251.1654.3566.0082.1327-.036.2542-.1241.3425l-1.2818 1.2817 1.3845 1.8344zm-8.3502-3.5023c-.095-.2699-.3829-.5475-.7503-.5557-.3663.0083-.6542.2858-.749.5551l-1.3455 3.5415c-.1708.5305-.0217.7272.1333.7988a.8568.8568 0 0 0 .3576.0776c.2346 0 .4139-.0952.4678-.2481l.2787-.7297 1.7152.0001.2785.7292c.0541.1532.2335.2484.4681.2484a.8601.8601 0 0 0 .3576-.0775c.1551-.0713.3041-.2681.1329-.7999l-1.3449-3.5398zm-1.3116 2.4433l.5618-1.5961.5618 1.5961H9.3757zm5.9056 1.3836c0 .2843-.2418.5156-.5391.5156h-1.8047c-.2973 0-.5391-.2314-.5391-.5156V9.3281c0-.3102.2576-.5625.5742-.5625s.5742.2523.5742.5625v3.3047h1.1953c.2974 0 .5392.2314.5392.5156z"/></svg>

package/src/assets/icons/loader-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle-icon lucide-loader-circle"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/assets/icons/naver.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Naver</title><path d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845Z"/></svg>

package/src/components/badge/commonBadge.tsx

@@ -3,47 +3,44 @@ import { CommonText } from '../text';
 import { type CommonBadgeProps, fontSizeType, sizeType } from './types';
 import { useTheme } from '../../hooks/useTheme';
 
-// TODO: 부모컴포넌트의 정렬기준에 따라 컴포넌트의 형태가 변함.
 const CommonBadge = ({
   type = 'primary',
   size = 'm',
   typeText,
+  style,
   ...props
 }: CommonBadgeProps) => {
   const { theme } = useTheme();
   return (
-    <View
-      style={[
-        styles.container,
-        sizeType[size],
-        { backgroundColor: theme.colors[type] },
-      ]}
-      {...props}
-    >
-      {typeText && (
-        <CommonText
-          style={[
-            styles.innerText,
-            fontSizeType[size],
-            { color: theme.colors.white },
-          ]}
-        >
-          {typeText}
-        </CommonText>
-      )}
+    <View style={[styles.wrapper, style]} {...props}>
+      <View
+        style={[
+          styles.badge,
+          sizeType[size],
+          { backgroundColor: theme.colors[type] },
+        ]}
+        {...props}
+      >
+        {typeText && (
+          <CommonText
+            style={[fontSizeType[size], { color: theme.colors.white }]}
+          >
+            {typeText}
+          </CommonText>
+        )}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    alignSelf: 'auto',
+  wrapper: {
+    flexDirection: 'row',
+  },
+  badge: {
     alignItems: 'center',
     justifyContent: 'center',
-  },
-  innerText: {
-    fontSize: 20,
+    borderRadius: 999,
   },
 });
 

package/src/components/badge/numberBadge.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, View } from 'react-native';
+import { CommonText } from '../text';
+import {
+  type NumberBadgeProps,
+  expandedSizeType,
+  fontSizeType,
+  sizeType,
+} from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const NumberBadge = ({
+  type = 'primary',
+  number,
+  maxNumber,
+  size = 'm',
+  style,
+  ...props
+}: NumberBadgeProps) => {
+  const { theme } = useTheme();
+  const isExpanded = maxNumber !== undefined && number > maxNumber;
+  return (
+    <View style={[styles.wrapper, style]} {...props}>
+      <View
+        style={[
+          styles.badge,
+          isExpanded ? expandedSizeType[size] : sizeType[size],
+          { backgroundColor: theme.colors[type] },
+        ]}
+      >
+        <CommonText style={[fontSizeType[size], { color: theme.colors.white }]}>
+          {isExpanded ? `${maxNumber}+` : number}
+        </CommonText>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+  },
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 999,
+  },
+});
+
+export default NumberBadge;

package/src/components/button/index.ts

@@ -1,3 +1,4 @@
 import CommonButton from './commonButton';
+import SocialLoginButton from './socialLoginButton';
 
-export { CommonButton };
+export { CommonButton, SocialLoginButton };

package/src/components/button/socialLoginButton.tsx

@@ -0,0 +1,49 @@
+import { Pressable, StyleSheet } from 'react-native';
+import { CommonIcon } from '../icon';
+import { CommonText } from '../text';
+import { type SocialLoginButtonProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const SocialLoginButton = ({
+  type = 'primary',
+  provider,
+  disabled,
+  ...props
+}: SocialLoginButtonProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        disabled
+          ? {
+              backgroundColor: theme.colors.disabled,
+            }
+          : {
+              backgroundColor: theme.colors[type],
+            },
+      ]}
+      {...props}
+    >
+      <CommonIcon iconType={provider} size={'m'} color={'black'} />
+      <CommonText style={{ color: theme.colors.white }}>
+        {'Login with ' + provider}
+      </CommonText>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    margin: 5,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+    gap: 10,
+    alignItems: 'center',
+  },
+});
+
+export default SocialLoginButton;

package/src/components/button/types.ts

@@ -27,3 +27,7 @@ export interface ButtonProps extends PressableProps {
 export interface CommonButtonProps extends ButtonProps {
   title?: string;
 }
+
+export interface SocialLoginButtonProps extends ButtonProps {
+  provider: 'apple' | 'facebook' | 'google' | 'kakaotalk' | 'naver';
+}

package/src/components/card/foldableCard.tsx

@@ -2,14 +2,14 @@ import { StyleSheet, View, Pressable } from 'react-native';
 import { CommonText } from '../text';
 import { type FoldableCardProps } from './types';
 import { useTheme } from '../../hooks/useTheme';
-// import Animated, {
-//   FadeIn,
-//   FadeOut,
-//   LinearTransition,
-// } from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from 'react-native-reanimated';
 
-//TODO: React-native-reanimated 적용시키기
-// const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+//TODO: Animation이 여전히 부자연스러우니 수정필요.
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const FoldableCard = ({
   children,
   type = 'primary',
@@ -20,8 +20,7 @@ const FoldableCard = ({
   const { theme } = useTheme();
   return (
     <View style={styles.container}>
-      <Pressable
-        // <AnimatedPressable
+      <AnimatedPressable
         style={[
           styles.titleContainer,
           {
@@ -29,7 +28,7 @@ const FoldableCard = ({
           },
         ]}
         onPress={onPress}
-        // layout={LinearTransition.duration(200)}
+        layout={LinearTransition.duration(200)}
       >
         <CommonText
           style={[
@@ -41,13 +40,11 @@ const FoldableCard = ({
         >
           {title}
         </CommonText>
-        {/* </AnimatedPressable> */}
-      </Pressable>
+      </AnimatedPressable>
       {value && (
-        <View
-          // <Animated.View
-          // entering={FadeIn}
-          // exiting={FadeOut}
+        <Animated.View
+          entering={FadeIn}
+          exiting={FadeOut}
           style={[
             styles.contentContainer,
             {
@@ -56,8 +53,7 @@ const FoldableCard = ({
           ]}
         >
           {children}
-          {/* </Animated.View> */}
-        </View>
+        </Animated.View>
       )}
     </View>
   );

package/src/components/icon/Apple.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgApple = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+  </Svg>
+);
+export default SvgApple;

package/src/components/icon/Facebook.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgFacebook = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a9 9 0 0 1 1.141.195v3.325a9 9 0 0 0-.653-.036 27 27 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.7 1.7 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647" />
+  </Svg>
+);
+export default SvgFacebook;

package/src/components/icon/Google.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgGoogle = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053z" />
+  </Svg>
+);
+export default SvgGoogle;

package/src/components/icon/Kakaotalk.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgKakaotalk = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M22.125 0H1.875C.839 0 0 .84 0 1.875v20.25C0 23.161.84 24 1.875 24h20.25C23.161 24 24 23.16 24 22.125V1.875C24 .839 23.16 0 22.125 0M12 18.75q-.888 0-1.732-.12c-.562.396-3.813 2.679-4.12 2.722 0 0-.125.049-.232-.014s-.088-.229-.088-.229c.032-.22.843-3.018.992-3.533-2.745-1.36-4.57-3.769-4.57-6.513 0-4.246 4.365-7.688 9.75-7.688s9.75 3.442 9.75 7.688S17.385 18.75 12 18.75M8.05 9.867h-.878v3.342c0 .296-.252.537-.563.537s-.562-.24-.562-.537V9.867h-.878a.552.552 0 0 1 0-1.101h2.88a.552.552 0 0 1 0 1.101m10.987 2.957a.56.56 0 0 1 .109.417.56.56 0 0 1-.219.37.56.56 0 0 1-.338.114.56.56 0 0 1-.45-.224l-1.319-1.747-.195.195v1.227a.564.564 0 0 1-.562.563.563.563 0 0 1-.563-.563V9.328a.563.563 0 0 1 1.125 0v1.21l1.57-1.57a.44.44 0 0 1 .311-.126c.14 0 .282.061.388.167a.56.56 0 0 1 .165.356.44.44 0 0 1-.124.343l-1.282 1.281zm-8.35-3.502c-.095-.27-.383-.548-.75-.556-.366.008-.654.286-.749.555l-1.345 3.541c-.171.53-.022.728.133.8a.9.9 0 0 0 .357.077c.235 0 .414-.095.468-.248l.279-.73h1.715l.279.73c.054.153.233.248.468.248a.9.9 0 0 0 .357-.078c.155-.071.304-.268.133-.8zm-1.311 2.443.562-1.596.561 1.596zm5.905 1.383a.53.53 0 0 1-.539.516h-1.804a.53.53 0 0 1-.54-.516v-3.82c0-.31.258-.562.575-.562s.574.252.574.562v3.305h1.195c.297 0 .54.231.54.515" />
+  </Svg>
+);
+export default SvgKakaotalk;

package/src/components/icon/LoaderCircle.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgLoaderCircle = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="loader-circle_svg__lucide loader-circle_svg__lucide-loader-circle-icon loader-circle_svg__lucide-loader-circle"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </Svg>
+);
+export default SvgLoaderCircle;

package/src/components/icon/Naver.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgNaver = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727z" />
+  </Svg>
+);
+export default SvgNaver;

package/src/components/icon/index.tsx

@@ -7,9 +7,15 @@ import StarHalf from './StarHalf';
 import StarFull from './StarFull';
 import Check from './Check';
 import X from './X';
+import LoaderCircle from './LoaderCircle';
+import Apple from './Apple';
+import Facebook from './Facebook';
+import Google from './Google';
+import Kakaotalk from './Kakaotalk';
+import Naver from './Naver';
 // import { ArrowDownToLine } from './ArrowDownToLine';
 // import { ArrowDownWideNarrow } from './ArrowDownWideNarrow';
-// import { ChevronDown } from './ChevronDown';
+import ChevronDown from './ChevronDown';
 // import { RotateCw } from './RotateCw';
 // export { SquareArrowOutUpRight } from './SquareArrowOutUpRight';
 
@@ -20,6 +26,13 @@ const iconMap = {
   star_full: StarFull,
   check: Check,
   close: X,
+  loaderCircle: LoaderCircle,
+  apple: Apple,
+  facebook: Facebook,
+  google: Google,
+  kakaotalk: Kakaotalk,
+  naver: Naver,
+  down: ChevronDown,
 } as const;
 
 export const CommonIcon = ({

package/src/components/icon/types.ts

@@ -15,10 +15,14 @@ export interface IconProps extends ViewProps {
     // | 'spinner'
     | 'check'
     | 'back'
+    | 'down'
     | 'close'
-    // | 'apple'
-    // | 'facebook'
-    // | 'google'
+    | 'apple'
+    | 'facebook'
+    | 'google'
+    | 'kakaotalk'
+    | 'naver'
+    | 'loaderCircle'
     // | 'close'
     // | 'tune'
     | 'star_empty'

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export { CommonText } from './text';
-export { CommonButton } from './button';
+export { CommonButton, SocialLoginButton } from './button';
 export { CommonBadge } from './badge';
 export { SafeAreaContainer, ScrollViewContainer } from './screenContainer';
 export { CommonIcon } from './icon';
@@ -13,3 +13,6 @@ export { LinearProgressBar, CircularProgressBar } from './progressBar';
 export { CommonInput } from './input';
 export { CommonPopOver } from './popOver';
 export { CommonSwitch } from './switch';
+export { CommonSpinner } from './spinner';
+export { CommonSlider } from './slider';
+export { CommonSelect, SelectItem } from './select';