From 2ec57ea56a93b62dbfb43bf264b8131fe8f89068 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 23:19:15 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/babel.config.js | 1 + packages/react-native/ios/Podfile.lock | 25 ++++++ packages/react-native/package.json | 2 + .../src/pages/Login/NicknameProfile.tsx | 86 ++++++++++++++++++- yarn.lock | 68 +++++++++++++-- 5 files changed, 175 insertions(+), 7 deletions(-) diff --git a/packages/react-native/babel.config.js b/packages/react-native/babel.config.js index b383161c..db1e1189 100644 --- a/packages/react-native/babel.config.js +++ b/packages/react-native/babel.config.js @@ -19,5 +19,6 @@ module.exports = { }, }, ], + 'react-native-reanimated/plugin', ], }; diff --git a/packages/react-native/ios/Podfile.lock b/packages/react-native/ios/Podfile.lock index 57fb9449..913dff6a 100644 --- a/packages/react-native/ios/Podfile.lock +++ b/packages/react-native/ios/Podfile.lock @@ -1235,6 +1235,27 @@ PODS: - Yoga - RNPermissions (4.1.5): - React-Core + - RNReanimated (3.14.0): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety + - React-Codegen + - React-Core + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga - RNScreens (3.32.0): - DoubleConversion - glog @@ -1331,6 +1352,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`) - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`) - RNPermissions (from `../../../node_modules/react-native-permissions`) + - RNReanimated (from `../../../node_modules/react-native-reanimated`) - RNScreens (from `../../../node_modules/react-native-screens`) - RNSVG (from `../../../node_modules/react-native-svg`) - VisionCamera (from `../../../node_modules/react-native-vision-camera`) @@ -1462,6 +1484,8 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native-gesture-handler" RNPermissions: :path: "../../../node_modules/react-native-permissions" + RNReanimated: + :path: "../../../node_modules/react-native-reanimated" RNScreens: :path: "../../../node_modules/react-native-screens" RNSVG: @@ -1532,6 +1556,7 @@ SPEC CHECKSUMS: ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4 RNGestureHandler: 8dbcccada4a7e702e7dec9338c251b1cf393c960 RNPermissions: 4da8c626e4ac9d71c1a199d500d52dd54da62e38 + RNReanimated: 7e6fc1e80f412285a16ac3879b9e4672ffa91cef RNScreens: 5aeecbb09aa7285379b6e9f3c8a3c859bb16401c RNSVG: cb24fb322de8c1ebf59904e7aca0447bb8dbed5a SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 681d6612..92c43494 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -26,11 +26,13 @@ "react-native-image-picker": "^7.1.2", "react-native-linear-gradient": "^2.8.3", "react-native-permissions": "^4.1.5", + "react-native-reanimated": "^3.14.0", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-svg": "^15.4.0", "react-native-view-shot": "^3.8.0", "react-native-vision-camera": "^4.5.0", + "reanimated-color-picker": "^3.0.4", "tailwind-config": "workspace:*" }, "devDependencies": { diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx index aa0d6ed8..c4f83f1f 100644 --- a/packages/react-native/src/pages/Login/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -2,13 +2,49 @@ import { Font } from 'design-system'; import { View } from 'react-native'; import Header from '@/components/signup/Header'; import Overlay from '@/components/signup/Overlay'; -import { SignupStackNavigation } from '@/types/navigation'; +import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; +import ColorPicker, { + OpacitySlider, + Panel1, + returnedResults, + SaturationSlider, +} from 'reanimated-color-picker'; +import { useState } from 'react'; +import { TouchableOpacity } from 'react-native-gesture-handler'; interface NicknameProfileProps { navigation: SignupStackNavigation<'Signup/NicknameProfile'>; + route: SignupRouteProps<'Signup/NicknameProfile'>; } -export default function NicknameProfile({ navigation }: NicknameProfileProps) { +const COLOR_SET = [ + '#F7AFAF', + '#F7D6AF', + '#F7F4AF', + '#AFF7B2', + '#AFE1F7', + '#BEAFF7', +]; + +type ColorPick = (typeof COLOR_SET)[number]; + +export default function NicknameProfile({ + navigation, + route, +}: NicknameProfileProps) { + const nickname = route.params.nickname; + const [selectColor, setSelectColor] = useState(''); + const [selectBarColor, setSelectBarColor] = useState(COLOR_SET[0]); + + const onSelectColor = ({ hex }: returnedResults) => { + setSelectColor(hex); + }; + + const onChangeSelectedBarColor = (color: ColorPick) => { + setSelectColor(color); + setSelectBarColor(color); + }; + return ( @@ -24,6 +60,52 @@ export default function NicknameProfile({ navigation }: NicknameProfileProps) { 선택하세요 + + + + {nickname} + + + + + {COLOR_SET.map((color) => ( + onChangeSelectedBarColor(color)} + > + + + ))} + + + + + + ); diff --git a/yarn.lock b/yarn.lock index 80175a34..53529728 100644 --- a/yarn.lock +++ b/yarn.lock @@ -357,6 +357,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-plugin-utils@npm:7.24.8" + checksum: 73b1a83ba8bcee21dc94de2eb7323207391715e4369fd55844bb15cf13e3df6f3d13a40786d990e6370bf0f571d94fc31f70dec96c1d1002058258c35ca3767a + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-remap-async-to-generator@npm:7.24.7" @@ -934,7 +941,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.24.7": +"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7" dependencies: @@ -1276,7 +1283,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7" dependencies: @@ -1338,6 +1345,19 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0": + version: 7.24.8 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.8" + dependencies: + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 + "@babel/plugin-syntax-optional-chaining": ^7.8.3 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 45e55e3a2fffb89002d3f89aef59c141610f23b60eee41e047380bffc40290b59f64fc649aa7ec5281f73d41b2065410d788acc6afaad2a9f44cad6e8af04442 + languageName: node + linkType: hard + "@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.7" @@ -1509,7 +1529,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7": +"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7" dependencies: @@ -1543,7 +1563,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.24.7": +"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-template-literals@npm:7.24.7" dependencies: @@ -1759,7 +1779,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.23.0": +"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.23.0": version: 7.24.7 resolution: "@babel/preset-typescript@npm:7.24.7" dependencies: @@ -14430,6 +14450,26 @@ __metadata: languageName: node linkType: hard +"react-native-reanimated@npm:^3.14.0": + version: 3.14.0 + resolution: "react-native-reanimated@npm:3.14.0" + dependencies: + "@babel/plugin-transform-arrow-functions": ^7.0.0-0 + "@babel/plugin-transform-nullish-coalescing-operator": ^7.0.0-0 + "@babel/plugin-transform-optional-chaining": ^7.0.0-0 + "@babel/plugin-transform-shorthand-properties": ^7.0.0-0 + "@babel/plugin-transform-template-literals": ^7.0.0-0 + "@babel/preset-typescript": ^7.16.7 + convert-source-map: ^2.0.0 + invariant: ^2.2.4 + peerDependencies: + "@babel/core": ^7.0.0-0 + react: "*" + react-native: "*" + checksum: 31eb58d1c7fbd233ce789de2f63779f485f07708e0a4168866ab9dfce555e970079a84ca34eef9cfb06ee48cfa9e1b0e452407a7938c066393034c046642a855 + languageName: node + linkType: hard + "react-native-safe-area-context@npm:^4.10.8": version: 4.10.8 resolution: "react-native-safe-area-context@npm:4.10.8" @@ -14615,12 +14655,14 @@ __metadata: react-native-image-picker: ^7.1.2 react-native-linear-gradient: ^2.8.3 react-native-permissions: ^4.1.5 + react-native-reanimated: ^3.14.0 react-native-safe-area-context: ^4.10.8 react-native-screens: ^3.32.0 react-native-svg: ^15.4.0 react-native-view-shot: ^3.8.0 react-native-vision-camera: ^4.5.0 react-test-renderer: 18.2.0 + reanimated-color-picker: ^3.0.4 tailwind-config: "workspace:*" tailwindcss: 3.2.2 typescript: 5.0.4 @@ -14810,6 +14852,22 @@ __metadata: languageName: node linkType: hard +"reanimated-color-picker@npm:^3.0.4": + version: 3.0.4 + resolution: "reanimated-color-picker@npm:3.0.4" + peerDependencies: + expo: ">=44.0.0" + react: "*" + react-native: "*" + react-native-gesture-handler: ">=2.0.0" + react-native-reanimated: ^2.0.0 || ^3.0.0 + peerDependenciesMeta: + expo: + optional: true + checksum: c402ac803311810f97b48418270cd0a1a912f44cf856b8d84836cdb9c653f5c47d9e711a4c0208eacf9d391a4947d8d0756311e779dbd5d28eac5efa7649ddba + languageName: node + linkType: hard + "recast@npm:^0.21.0": version: 0.21.5 resolution: "recast@npm:0.21.5" From f3415c647ddeaadffa8ef333e17cf2fa2d854f37 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 23:37:20 +0900 Subject: [PATCH 02/13] =?UTF-8?q?chore:=20tinycolor2=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/package.json | 4 +++- yarn.lock | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 92c43494..fa9e14b3 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -33,7 +33,8 @@ "react-native-view-shot": "^3.8.0", "react-native-vision-camera": "^4.5.0", "reanimated-color-picker": "^3.0.4", - "tailwind-config": "workspace:*" + "tailwind-config": "workspace:*", + "tinycolor2": "^1.6.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -47,6 +48,7 @@ "@react-native/typescript-config": "0.74.84", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", + "@types/tinycolor2": "^1.4.6", "@typescript-eslint/eslint-plugin": "^7.16.0", "@typescript-eslint/parser": "^7.16.0", "babel-jest": "^29.6.3", diff --git a/yarn.lock b/yarn.lock index 53529728..ff64f37a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5204,6 +5204,13 @@ __metadata: languageName: node linkType: hard +"@types/tinycolor2@npm:^1.4.6": + version: 1.4.6 + resolution: "@types/tinycolor2@npm:1.4.6" + checksum: 50179851b32dcf78e0b4b691350a61043d8a00c3a8176d8155a257b34bb937136ff5d7950c814dca3c832673c7b6dc835f89dd154e85ccec3a4d4eac3993ed84 + languageName: node + linkType: hard + "@types/unist@npm:*, @types/unist@npm:^3.0.0": version: 3.0.2 resolution: "@types/unist@npm:3.0.2" @@ -14630,6 +14637,7 @@ __metadata: "@react-navigation/stack": ^6.4.0 "@types/react": ^18.2.6 "@types/react-test-renderer": ^18.0.0 + "@types/tinycolor2": ^1.4.6 "@typescript-eslint/eslint-plugin": ^7.16.0 "@typescript-eslint/parser": ^7.16.0 babel-jest: ^29.6.3 @@ -14665,6 +14673,7 @@ __metadata: reanimated-color-picker: ^3.0.4 tailwind-config: "workspace:*" tailwindcss: 3.2.2 + tinycolor2: ^1.6.0 typescript: 5.0.4 languageName: unknown linkType: soft @@ -16423,6 +16432,13 @@ __metadata: languageName: node linkType: hard +"tinycolor2@npm:^1.6.0": + version: 1.6.0 + resolution: "tinycolor2@npm:1.6.0" + checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230 + languageName: node + linkType: hard + "tinyspy@npm:^2.2.0": version: 2.2.1 resolution: "tinyspy@npm:2.2.1" From 48e29d7dc25ecb79c2d42848bc151bbbc5dafef8 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 23:38:15 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=EB=8B=89=EB=84=A4=EC=9E=84=20?= =?UTF-8?q?=EA=B8=80=EC=9E=90=EC=83=89=20=EC=9E=90=EB=8F=99=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Login/NicknameProfile.tsx | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx index c4f83f1f..77f3b677 100644 --- a/packages/react-native/src/pages/Login/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -1,16 +1,15 @@ import { Font } from 'design-system'; -import { View } from 'react-native'; -import Header from '@/components/signup/Header'; -import Overlay from '@/components/signup/Overlay'; -import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; +import { Text, View } from 'react-native'; import ColorPicker, { - OpacitySlider, - Panel1, returnedResults, SaturationSlider, } from 'reanimated-color-picker'; import { useState } from 'react'; import { TouchableOpacity } from 'react-native-gesture-handler'; +import tinycolor from 'tinycolor2'; +import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; +import Overlay from '@/components/signup/Overlay'; +import Header from '@/components/signup/Header'; interface NicknameProfileProps { navigation: SignupStackNavigation<'Signup/NicknameProfile'>; @@ -32,7 +31,7 @@ export default function NicknameProfile({ navigation, route, }: NicknameProfileProps) { - const nickname = route.params.nickname; + const { nickname } = route.params; const [selectColor, setSelectColor] = useState(''); const [selectBarColor, setSelectBarColor] = useState(COLOR_SET[0]); @@ -45,6 +44,11 @@ export default function NicknameProfile({ setSelectBarColor(color); }; + const getFontColor = () => { + const textColor = tinycolor(selectColor); + return textColor.darken(25).toHexString(); + }; + return ( @@ -62,14 +66,19 @@ export default function NicknameProfile({ - + {nickname} - + From c0f43fc4df42cd41092044efdb873e81b0f1d53d Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 23:40:05 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20useRoute=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20type=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/pages/Login/NicknameProfile.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx index 77f3b677..785f6da0 100644 --- a/packages/react-native/src/pages/Login/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -10,10 +10,10 @@ import tinycolor from 'tinycolor2'; import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; import Overlay from '@/components/signup/Overlay'; import Header from '@/components/signup/Header'; +import { useRoute } from '@react-navigation/native'; interface NicknameProfileProps { navigation: SignupStackNavigation<'Signup/NicknameProfile'>; - route: SignupRouteProps<'Signup/NicknameProfile'>; } const COLOR_SET = [ @@ -27,10 +27,8 @@ const COLOR_SET = [ type ColorPick = (typeof COLOR_SET)[number]; -export default function NicknameProfile({ - navigation, - route, -}: NicknameProfileProps) { +export default function NicknameProfile({ navigation }: NicknameProfileProps) { + const route = useRoute>(); const { nickname } = route.params; const [selectColor, setSelectColor] = useState(''); const [selectBarColor, setSelectBarColor] = useState(COLOR_SET[0]); From df9685d2e9e21733c529074327a87ce9ca180832 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:00:30 +0900 Subject: [PATCH 05/13] =?UTF-8?q?refactor:=20NicknameProfile=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../signup/nicknameProfile/ColorSlider.tsx | 30 ++++++++ .../nicknameProfile/NicknameColorPalette.tsx | 29 +++++++ .../src/constants/NICKNAME_COLOR_SET.ts | 10 +++ .../src/pages/Login/NicknameProfile.tsx | 76 ++++++------------- 4 files changed, 92 insertions(+), 53 deletions(-) create mode 100644 packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx create mode 100644 packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx create mode 100644 packages/react-native/src/constants/NICKNAME_COLOR_SET.ts diff --git a/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx b/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx new file mode 100644 index 00000000..56b3d828 --- /dev/null +++ b/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx @@ -0,0 +1,30 @@ +import ColorPicker, { + returnedResults, + SaturationSlider, +} from 'reanimated-color-picker'; +import { NicknameColorSet } from '@/constants/NICKNAME_COLOR_SET'; + +interface ColorSliderProps { + baseColor: NicknameColorSet; + onChange: ({ hex }: returnedResults) => void; +} + +export default function ColorSlider({ baseColor, onChange }: ColorSliderProps) { + return ( + + + + ); +} diff --git a/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx b/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx new file mode 100644 index 00000000..582e99e4 --- /dev/null +++ b/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx @@ -0,0 +1,29 @@ +import { TouchableOpacity } from 'react-native-gesture-handler'; +import { View } from 'react-native'; +import { + NICKNAME_COLOR_SET, + NicknameColorSet, +} from '@/constants/NICKNAME_COLOR_SET'; + +interface NicknameColorPaletteProps { + selectedPalette: NicknameColorSet; + changeSelectedPalette: (color: NicknameColorSet) => void; +} + +export default function NicknameColorPalette({ + selectedPalette, + changeSelectedPalette, +}: NicknameColorPaletteProps) { + return NICKNAME_COLOR_SET.map((color) => ( + changeSelectedPalette(color)}> + + + )); +} diff --git a/packages/react-native/src/constants/NICKNAME_COLOR_SET.ts b/packages/react-native/src/constants/NICKNAME_COLOR_SET.ts new file mode 100644 index 00000000..c575cbde --- /dev/null +++ b/packages/react-native/src/constants/NICKNAME_COLOR_SET.ts @@ -0,0 +1,10 @@ +export const NICKNAME_COLOR_SET = [ + '#F7AFAF', + '#F7D6AF', + '#F7F4AF', + '#AFF7B2', + '#AFE1F7', + '#BEAFF7', +]; + +export type NicknameColorSet = (typeof NICKNAME_COLOR_SET)[number]; diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx index 785f6da0..1a968946 100644 --- a/packages/react-native/src/pages/Login/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -1,45 +1,38 @@ import { Font } from 'design-system'; import { Text, View } from 'react-native'; -import ColorPicker, { - returnedResults, - SaturationSlider, -} from 'reanimated-color-picker'; +import { returnedResults } from 'reanimated-color-picker'; import { useState } from 'react'; -import { TouchableOpacity } from 'react-native-gesture-handler'; import tinycolor from 'tinycolor2'; -import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; -import Overlay from '@/components/signup/Overlay'; -import Header from '@/components/signup/Header'; import { useRoute } from '@react-navigation/native'; +import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; +import Overlay from '@/components/signup/common/Overlay'; +import Header from '@/components/signup/common/Header'; +import { + NICKNAME_COLOR_SET, + NicknameColorSet, +} from '@/constants/NICKNAME_COLOR_SET'; +import NicknameColorPalette from '@/components/signup/nicknameProfile/NicknameColorPalette'; +import ColorSlider from '@/components/signup/nicknameProfile/ColorSlider'; interface NicknameProfileProps { navigation: SignupStackNavigation<'Signup/NicknameProfile'>; } -const COLOR_SET = [ - '#F7AFAF', - '#F7D6AF', - '#F7F4AF', - '#AFF7B2', - '#AFE1F7', - '#BEAFF7', -]; - -type ColorPick = (typeof COLOR_SET)[number]; - export default function NicknameProfile({ navigation }: NicknameProfileProps) { const route = useRoute>(); const { nickname } = route.params; - const [selectColor, setSelectColor] = useState(''); - const [selectBarColor, setSelectBarColor] = useState(COLOR_SET[0]); + const [selectColor, setSelectColor] = useState(NICKNAME_COLOR_SET[0]); + const [selectedPalette, setSelectedPalette] = useState( + NICKNAME_COLOR_SET[0], + ); const onSelectColor = ({ hex }: returnedResults) => { setSelectColor(hex); }; - const onChangeSelectedBarColor = (color: ColorPick) => { + const onChangeSelectedBarColor = (color: NicknameColorSet) => { setSelectColor(color); - setSelectBarColor(color); + setSelectedPalette(color); }; const getFontColor = () => { @@ -79,39 +72,16 @@ export default function NicknameProfile({ navigation }: NicknameProfileProps) { + - {COLOR_SET.map((color) => ( - onChangeSelectedBarColor(color)} - > - - - ))} + + - - - + From 2ddee08491283204ff14ffa4d1f04c3ad33d7066 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:01:05 +0900 Subject: [PATCH 06/13] =?UTF-8?q?chore:=20signup=EC=9A=A9=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20signup/common?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/signup/{ => common}/Header.tsx | 0 .../src/components/signup/{ => common}/Overlay.tsx | 0 packages/react-native/src/pages/Login/Nickname.tsx | 4 ++-- packages/react-native/src/pages/Login/Profile.tsx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename packages/react-native/src/components/signup/{ => common}/Header.tsx (100%) rename packages/react-native/src/components/signup/{ => common}/Overlay.tsx (100%) diff --git a/packages/react-native/src/components/signup/Header.tsx b/packages/react-native/src/components/signup/common/Header.tsx similarity index 100% rename from packages/react-native/src/components/signup/Header.tsx rename to packages/react-native/src/components/signup/common/Header.tsx diff --git a/packages/react-native/src/components/signup/Overlay.tsx b/packages/react-native/src/components/signup/common/Overlay.tsx similarity index 100% rename from packages/react-native/src/components/signup/Overlay.tsx rename to packages/react-native/src/components/signup/common/Overlay.tsx diff --git a/packages/react-native/src/pages/Login/Nickname.tsx b/packages/react-native/src/pages/Login/Nickname.tsx index 2f75b98c..4e049418 100644 --- a/packages/react-native/src/pages/Login/Nickname.tsx +++ b/packages/react-native/src/pages/Login/Nickname.tsx @@ -1,8 +1,8 @@ import { Font, TextField } from 'design-system'; import { useState } from 'react'; import { View } from 'react-native'; -import Header from '@/components/signup/Header'; -import Overlay from '@/components/signup/Overlay'; +import Header from '@/components/signup/common/Header'; +import Overlay from '@/components/signup/common/Overlay'; import { SignupStackNavigation } from '@/types/navigation'; interface NicknameProps { diff --git a/packages/react-native/src/pages/Login/Profile.tsx b/packages/react-native/src/pages/Login/Profile.tsx index 20553d5f..df2df392 100644 --- a/packages/react-native/src/pages/Login/Profile.tsx +++ b/packages/react-native/src/pages/Login/Profile.tsx @@ -4,8 +4,8 @@ import { TouchableOpacity } from 'react-native-gesture-handler'; import { useState } from 'react'; import { useRoute } from '@react-navigation/native'; import SelectProfile from '@/assets/SelectProfile'; -import Header from '@/components/signup/Header'; -import Overlay from '@/components/signup/Overlay'; +import Header from '@/components/signup/common/Header'; +import Overlay from '@/components/signup/common/Overlay'; import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; import useGallery from '@/hooks/useGallery'; From 222c78fd85af775c114d5eeb3dcb9096d7c9398f Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:02:18 +0900 Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20signup=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=8F=B4=EB=8D=94=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/pages/{Login => Signup}/Nickname.tsx | 0 .../src/pages/{Login => Signup}/NicknameProfile.tsx | 0 .../react-native/src/pages/{Login => Signup}/Profile.tsx | 0 packages/react-native/src/routes/SignupStackNavigator.tsx | 6 +++--- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/react-native/src/pages/{Login => Signup}/Nickname.tsx (100%) rename packages/react-native/src/pages/{Login => Signup}/NicknameProfile.tsx (100%) rename packages/react-native/src/pages/{Login => Signup}/Profile.tsx (100%) diff --git a/packages/react-native/src/pages/Login/Nickname.tsx b/packages/react-native/src/pages/Signup/Nickname.tsx similarity index 100% rename from packages/react-native/src/pages/Login/Nickname.tsx rename to packages/react-native/src/pages/Signup/Nickname.tsx diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Signup/NicknameProfile.tsx similarity index 100% rename from packages/react-native/src/pages/Login/NicknameProfile.tsx rename to packages/react-native/src/pages/Signup/NicknameProfile.tsx diff --git a/packages/react-native/src/pages/Login/Profile.tsx b/packages/react-native/src/pages/Signup/Profile.tsx similarity index 100% rename from packages/react-native/src/pages/Login/Profile.tsx rename to packages/react-native/src/pages/Signup/Profile.tsx diff --git a/packages/react-native/src/routes/SignupStackNavigator.tsx b/packages/react-native/src/routes/SignupStackNavigator.tsx index 55b54f80..df768f3d 100644 --- a/packages/react-native/src/routes/SignupStackNavigator.tsx +++ b/packages/react-native/src/routes/SignupStackNavigator.tsx @@ -1,7 +1,7 @@ import { createStackNavigator } from '@react-navigation/stack'; -import Niakname from '@/pages/Login/Nickname'; -import Profile from '@/pages/Login/Profile'; -import NicknameProfile from '@/pages/Login/NicknameProfile'; +import Niakname from '@/pages/Signup/Nickname'; +import Profile from '@/pages/Signup/Profile'; +import NicknameProfile from '@/pages/Signup/NicknameProfile'; const Stack = createStackNavigator(); From b1aceadce759346ae543e9ea2a3c50dcb7bda490 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:12:16 +0900 Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20NicknameColorPalette=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EB=82=B4=EB=B6=80?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../nicknameProfile/NicknameColorPalette.tsx | 31 +++++--- .../src/pages/Signup/NicknameProfile.tsx | 74 +++++++++++-------- 2 files changed, 63 insertions(+), 42 deletions(-) diff --git a/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx b/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx index 582e99e4..ad613c75 100644 --- a/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx +++ b/packages/react-native/src/components/signup/nicknameProfile/NicknameColorPalette.tsx @@ -14,16 +14,23 @@ export default function NicknameColorPalette({ selectedPalette, changeSelectedPalette, }: NicknameColorPaletteProps) { - return NICKNAME_COLOR_SET.map((color) => ( - changeSelectedPalette(color)}> - - - )); + return ( + + {NICKNAME_COLOR_SET.map((color) => ( + changeSelectedPalette(color)} + > + + + ))} + + ); } diff --git a/packages/react-native/src/pages/Signup/NicknameProfile.tsx b/packages/react-native/src/pages/Signup/NicknameProfile.tsx index 1a968946..c04918ad 100644 --- a/packages/react-native/src/pages/Signup/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Signup/NicknameProfile.tsx @@ -1,4 +1,4 @@ -import { Font } from 'design-system'; +import { Button, Font } from 'design-system'; import { Text, View } from 'react-native'; import { returnedResults } from 'reanimated-color-picker'; import { useState } from 'react'; @@ -40,48 +40,62 @@ export default function NicknameProfile({ navigation }: NicknameProfileProps) { return textColor.darken(25).toHexString(); }; + const handleNext = () => { + navigation.navigate('Main'); + }; + return ( - +
navigation.goBack()} onCancel={() => navigation.goBack()} /> - - - 배경 색상을 - - - 선택하세요 - - - - - + + + 배경 색상을 + + + 선택하세요 + + + + - {nickname} - + + {nickname} + + + + + + - - - + + + - - + + From 59aecd878d2aebbeabffed3d12b4fb6b2447452d Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:12:33 +0900 Subject: [PATCH 09/13] =?UTF-8?q?chore:=20ColorSlider=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/signup/nicknameProfile/ColorSlider.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx b/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx index 56b3d828..48da7b64 100644 --- a/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx +++ b/packages/react-native/src/components/signup/nicknameProfile/ColorSlider.tsx @@ -11,18 +11,11 @@ interface ColorSliderProps { export default function ColorSlider({ baseColor, onChange }: ColorSliderProps) { return ( - + From bfaa898eff196708d3cb6c12fbcbb06f8d055f47 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:22:16 +0900 Subject: [PATCH 10/13] =?UTF-8?q?chore:=20axios,=20react-query=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/package.json | 2 + packages/react-native/src/App.tsx | 10 ++-- yarn.lock | 84 +++++++++++++++++++++++++++++- 3 files changed, 92 insertions(+), 4 deletions(-) diff --git a/packages/react-native/package.json b/packages/react-native/package.json index fa9e14b3..a7cddedd 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -17,6 +17,8 @@ "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.4.0", + "@tanstack/react-query": "^5.51.9", + "axios": "^1.7.2", "babel-plugin-module-resolver": "^5.0.2", "design-system": "workspace:^", "nativewind": "^2.0.11", diff --git a/packages/react-native/src/App.tsx b/packages/react-native/src/App.tsx index 19ff52d6..c7fcaf0b 100644 --- a/packages/react-native/src/App.tsx +++ b/packages/react-native/src/App.tsx @@ -1,10 +1,14 @@ import { NavigationContainer } from '@react-navigation/native'; import StackNavigator from '@routes/StackNavigator'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +const queryClient = new QueryClient(); export default function App() { return ( - - - + + + + + ); } diff --git a/yarn.lock b/yarn.lock index ff64f37a..66cd0c93 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4734,6 +4734,24 @@ __metadata: languageName: node linkType: hard +"@tanstack/query-core@npm:5.51.9": + version: 5.51.9 + resolution: "@tanstack/query-core@npm:5.51.9" + checksum: f3192fe32a2ac67be6f16f14e24867cf42587d3e6c3bc1715c44c6f899136a83d785986db5602b5da6ee4cc894bfb1c926d9a4e4574af32cbd9db243806f6113 + languageName: node + linkType: hard + +"@tanstack/react-query@npm:^5.51.9": + version: 5.51.9 + resolution: "@tanstack/react-query@npm:5.51.9" + dependencies: + "@tanstack/query-core": 5.51.9 + peerDependencies: + react: ^18.0.0 + checksum: f0e1612227b9d7a13a666fff4099c57200a084d5ac7e03d1771972e4d332ec47553426f4fdd745177754e4327eb6e114f0844264cb1d98202d3219464b79d729 + languageName: node + linkType: hard + "@testing-library/dom@npm:10.1.0": version: 10.1.0 resolution: "@testing-library/dom@npm:10.1.0" @@ -6387,6 +6405,13 @@ __metadata: languageName: node linkType: hard +"asynckit@npm:^0.4.0": + version: 0.4.0 + resolution: "asynckit@npm:0.4.0" + checksum: 7b78c451df768adba04e2d02e63e2d0bf3b07adcd6e42b4cf665cb7ce899bedd344c69a1dcbce355b5f972d597b25aaa1c1742b52cffd9caccb22f348114f6be + languageName: node + linkType: hard + "autoprefixer@npm:^10.4.19": version: 10.4.19 resolution: "autoprefixer@npm:10.4.19" @@ -6421,6 +6446,17 @@ __metadata: languageName: node linkType: hard +"axios@npm:^1.7.2": + version: 1.7.2 + resolution: "axios@npm:1.7.2" + dependencies: + follow-redirects: ^1.15.6 + form-data: ^4.0.0 + proxy-from-env: ^1.1.0 + checksum: e457e2b0ab748504621f6fa6609074ac08c824bf0881592209dfa15098ece7e88495300e02cd22ba50b3468fd712fe687e629dcb03d6a3f6a51989727405aedf + languageName: node + linkType: hard + "axobject-query@npm:~3.1.1": version: 3.1.1 resolution: "axobject-query@npm:3.1.1" @@ -7276,6 +7312,15 @@ __metadata: languageName: node linkType: hard +"combined-stream@npm:^1.0.8": + version: 1.0.8 + resolution: "combined-stream@npm:1.0.8" + dependencies: + delayed-stream: ~1.0.0 + checksum: 49fa4aeb4916567e33ea81d088f6584749fc90c7abec76fd516bf1c5aa5c79f3584b5ba3de6b86d26ddd64bae5329c4c7479343250cfe71c75bb366eae53bb7c + languageName: node + linkType: hard + "command-exists@npm:^1.2.8": version: 1.2.9 resolution: "command-exists@npm:1.2.9" @@ -7905,6 +7950,13 @@ __metadata: languageName: node linkType: hard +"delayed-stream@npm:~1.0.0": + version: 1.0.0 + resolution: "delayed-stream@npm:1.0.0" + checksum: 46fe6e83e2cb1d85ba50bd52803c68be9bd953282fa7096f51fc29edd5d67ff84ff753c51966061e5ba7cb5e47ef6d36a91924eddb7f3f3483b1c560f77a0020 + languageName: node + linkType: hard + "denodeify@npm:^1.2.1": version: 1.2.1 resolution: "denodeify@npm:1.2.1" @@ -9652,6 +9704,16 @@ __metadata: languageName: node linkType: hard +"follow-redirects@npm:^1.15.6": + version: 1.15.6 + resolution: "follow-redirects@npm:1.15.6" + peerDependenciesMeta: + debug: + optional: true + checksum: a62c378dfc8c00f60b9c80cab158ba54e99ba0239a5dd7c81245e5a5b39d10f0c35e249c3379eae719ff0285fff88c365dd446fab19dee771f1d76252df1bbf5 + languageName: node + linkType: hard + "for-each@npm:^0.3.3": version: 0.3.3 resolution: "for-each@npm:0.3.3" @@ -9694,6 +9756,17 @@ __metadata: languageName: node linkType: hard +"form-data@npm:^4.0.0": + version: 4.0.0 + resolution: "form-data@npm:4.0.0" + dependencies: + asynckit: ^0.4.0 + combined-stream: ^1.0.8 + mime-types: ^2.1.12 + checksum: 01135bf8675f9d5c61ff18e2e2932f719ca4de964e3be90ef4c36aacfc7b9cb2fceb5eca0b7e0190e3383fe51c5b37f4cb80b62ca06a99aaabfcfd6ac7c9328c + languageName: node + linkType: hard + "forwarded@npm:0.2.0": version: 0.2.0 resolution: "forwarded@npm:0.2.0" @@ -12594,7 +12667,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -14140,6 +14213,13 @@ __metadata: languageName: node linkType: hard +"proxy-from-env@npm:^1.1.0": + version: 1.1.0 + resolution: "proxy-from-env@npm:1.1.0" + checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4 + languageName: node + linkType: hard + "pump@npm:^2.0.0": version: 2.0.1 resolution: "pump@npm:2.0.1" @@ -14635,11 +14715,13 @@ __metadata: "@react-navigation/bottom-tabs": ^6.6.0 "@react-navigation/native": ^6.1.17 "@react-navigation/stack": ^6.4.0 + "@tanstack/react-query": ^5.51.9 "@types/react": ^18.2.6 "@types/react-test-renderer": ^18.0.0 "@types/tinycolor2": ^1.4.6 "@typescript-eslint/eslint-plugin": ^7.16.0 "@typescript-eslint/parser": ^7.16.0 + axios: ^1.7.2 babel-jest: ^29.6.3 babel-plugin-module-resolver: ^5.0.2 design-system: "workspace:^" From 99457b72a10eb0ca8aa8a0da1b2daea2009de519 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:22:32 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20useSignup=20=ED=9B=85=20=EC=9E=84?= =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/mutations/useSignup.ts | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 packages/react-native/src/apis/mutations/useSignup.ts diff --git a/packages/react-native/src/apis/mutations/useSignup.ts b/packages/react-native/src/apis/mutations/useSignup.ts new file mode 100644 index 00000000..720615e7 --- /dev/null +++ b/packages/react-native/src/apis/mutations/useSignup.ts @@ -0,0 +1,26 @@ +import { useMutation, useQuery } from '@tanstack/react-query'; +import axios from 'axios'; + +interface UseSignupParams { + nickname: string; + profile?: string; + nicknameProfileColor?: string; +} + +export default function useSignup({ + nickname, + profile, + nicknameProfileColor, +}: UseSignupParams) { + return useMutation({ + // FIXME: 실제 연동 로직 필요 + mutationFn: () => + axios.post('SOME url...', { + nickname, + profile, + nicknameProfileColor, + }), + onSuccess: () => {}, + onError: () => {}, + }); +} From 0ba673bd6919854413688751da76facf6398c72b Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 00:28:47 +0900 Subject: [PATCH 12/13] =?UTF-8?q?chore:=20=EB=A6=B0=ED=8A=B8=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/apis/mutations/useSignup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/apis/mutations/useSignup.ts b/packages/react-native/src/apis/mutations/useSignup.ts index 720615e7..1591edd9 100644 --- a/packages/react-native/src/apis/mutations/useSignup.ts +++ b/packages/react-native/src/apis/mutations/useSignup.ts @@ -1,4 +1,4 @@ -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import axios from 'axios'; interface UseSignupParams { From 025ab9e0a5f3c2e6dd162a4e6b4b0fe7a418bae4 Mon Sep 17 00:00:00 2001 From: d0422 Date: Sat, 20 Jul 2024 10:41:54 +0900 Subject: [PATCH 13/13] =?UTF-8?q?chore:=20state=EC=9D=B4=EB=A6=84=20select?= =?UTF-8?q?edColor=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/pages/Signup/NicknameProfile.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-native/src/pages/Signup/NicknameProfile.tsx b/packages/react-native/src/pages/Signup/NicknameProfile.tsx index c04918ad..b3165340 100644 --- a/packages/react-native/src/pages/Signup/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Signup/NicknameProfile.tsx @@ -21,22 +21,22 @@ interface NicknameProfileProps { export default function NicknameProfile({ navigation }: NicknameProfileProps) { const route = useRoute>(); const { nickname } = route.params; - const [selectColor, setSelectColor] = useState(NICKNAME_COLOR_SET[0]); + const [selectedColor, setSelectedColor] = useState(NICKNAME_COLOR_SET[0]); const [selectedPalette, setSelectedPalette] = useState( NICKNAME_COLOR_SET[0], ); const onSelectColor = ({ hex }: returnedResults) => { - setSelectColor(hex); + setSelectedColor(hex); }; const onChangeSelectedBarColor = (color: NicknameColorSet) => { - setSelectColor(color); + setSelectedColor(color); setSelectedPalette(color); }; const getFontColor = () => { - const textColor = tinycolor(selectColor); + const textColor = tinycolor(selectedColor); return textColor.darken(25).toHexString(); };