From 81a876887652755c60e2b99d8724e3d623a52ae4 Mon Sep 17 00:00:00 2001 From: d0422 Date: Thu, 18 Jul 2024 23:35:17 +0900 Subject: [PATCH 01/10] =?UTF-8?q?chore:=20font,=20textField=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20props=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/src/Font.tsx | 28 +++++++++++++++++++----- packages/design-system/src/TextField.tsx | 4 ++-- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/design-system/src/Font.tsx b/packages/design-system/src/Font.tsx index c95d9064..b47f8a43 100644 --- a/packages/design-system/src/Font.tsx +++ b/packages/design-system/src/Font.tsx @@ -28,33 +28,49 @@ interface FontProps { children: ReactNode; type: FontType; color: Color; + underline?: boolean; } -const FontRegular = ({ type, color, children }: FontProps) => { +const FontRegular = ({ type, color, children, underline }: FontProps) => { const fontType = FONT_TYPE_PREFIX[type]; const colorStyle = COLOR_PREFIX[color]; + const underLineStyle = underline ? 'underline underline-offset-1' : ''; const fontStyle = FONT_PREFIX.MEDIUM; return ( - {children} + + {children} + ); }; -const FontBold = ({ type, color, children }: FontProps) => { +const FontBold = ({ type, color, children, underline }: FontProps) => { const fontType = FONT_TYPE_PREFIX[type]; const colorStyle = COLOR_PREFIX[color]; + const underLineStyle = underline ? 'underline underline-offset-1' : ''; const fontStyle = FONT_PREFIX.BOLD; return ( - {children} + + {children} + ); }; -const FontLight = ({ type, color, children }: FontProps) => { +const FontLight = ({ type, color, children, underline }: FontProps) => { const fontType = FONT_TYPE_PREFIX[type]; const colorStyle = COLOR_PREFIX[color]; + const underLineStyle = underline ? 'underline underline-offset-1' : ''; const fontStyle = FONT_PREFIX.LIGHT; return ( - {children} + + {children} + ); }; diff --git a/packages/design-system/src/TextField.tsx b/packages/design-system/src/TextField.tsx index 89903e76..1ef70dc0 100644 --- a/packages/design-system/src/TextField.tsx +++ b/packages/design-system/src/TextField.tsx @@ -17,12 +17,12 @@ export function TextField({ validate, }: TextField) { const defaultClassName = - 'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60'; + 'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60 border-[2px] border-bg-SPOT-white/60'; const incorrectClassName = 'border-SPOT-red border-[2px]'; const correctClassName = 'border-Permission-green border-[2px]'; const getBorderClassName = () => { - if (typeof validate === 'function') { + if (typeof validate === 'function' && value !== '') { return validate() ? correctClassName : incorrectClassName; } From bffaa2de50b144f120d902981ba8acfcfaad7f1b Mon Sep 17 00:00:00 2001 From: d0422 Date: Thu, 18 Jul 2024 23:35:36 +0900 Subject: [PATCH 02/10] =?UTF-8?q?chore:=20SelectProfile=20SVG=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/assets/SelectProfile.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/react-native/src/assets/SelectProfile.tsx diff --git a/packages/react-native/src/assets/SelectProfile.tsx b/packages/react-native/src/assets/SelectProfile.tsx new file mode 100644 index 00000000..d4d5766b --- /dev/null +++ b/packages/react-native/src/assets/SelectProfile.tsx @@ -0,0 +1,21 @@ +import { Circle, Path, Svg, SvgProps } from 'react-native-svg'; + +export default function SelectProfile({ width, height, color }: SvgProps) { + return ( + + + + + ); +} From 06c2062d16eafeb264d059c3057b956e950982a6 Mon Sep 17 00:00:00 2001 From: d0422 Date: Thu, 18 Jul 2024 23:35:55 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20Nickname=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EA=B2=80=EC=A6=9D=20=EB=A1=9C=EC=A7=81=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 --- .../react-native/src/pages/Login/Nickname.tsx | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/react-native/src/pages/Login/Nickname.tsx b/packages/react-native/src/pages/Login/Nickname.tsx index 6507abce..10a81bec 100644 --- a/packages/react-native/src/pages/Login/Nickname.tsx +++ b/packages/react-native/src/pages/Login/Nickname.tsx @@ -1,4 +1,4 @@ -import { Font } from 'design-system'; +import { Font, TextField } from 'design-system'; import { useState } from 'react'; import { TextInput, View } from 'react-native'; import Header from '@/components/signup/Header'; @@ -12,6 +12,22 @@ interface NicknameProps { export default function Niakname({ navigation }: NicknameProps) { const [nickname, setNickname] = useState(''); + const validateNickname = () => { + if (nickname.length < 0 || nickname.length > 7) { + return false; + } + + return true; + }; + + const handleSubmit = () => { + if (validateNickname()) { + navigation.navigate('Signup/Profile', { + nickname, + }); + } + }; + return (
닉네임 - setNickname(newNickname)} + onChange={(newNickname) => setNickname(newNickname)} + onSubmit={handleSubmit} placeholder="닉네임" - placeholderTextColor="#ffffff" - className="text-SPOT-white text-body2 rounded-md p-4 placeholder-SPOT-white bg-SPOT-white/60 mt-[8px]" - onSubmitEditing={() => { - navigation.navigate('Signup/Profile', { - nickname, - }); - }} + validate={validateNickname} /> From 72e4a1c6e133dec7ced110da5e0e7b22df3e807f Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 00:18:00 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20useGallery=20getPhoto=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=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/ios/Podfile.lock | 25 +++++++++++++++++++ packages/react-native/package.json | 1 + packages/react-native/src/hooks/useGallery.ts | 22 ++++++++++++++-- yarn.lock | 11 ++++++++ 4 files changed, 57 insertions(+), 2 deletions(-) diff --git a/packages/react-native/ios/Podfile.lock b/packages/react-native/ios/Podfile.lock index 4b2d5c7c..57fb9449 100644 --- a/packages/react-native/ios/Podfile.lock +++ b/packages/react-native/ios/Podfile.lock @@ -958,6 +958,27 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga + - react-native-image-picker (7.1.2): + - 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 - react-native-safe-area-context (4.10.8): - React-Core - react-native-view-shot (3.8.0): @@ -1282,6 +1303,7 @@ DEPENDENCIES: - React-logger (from `../../../node_modules/react-native/ReactCommon/logger`) - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`) - "react-native-cameraroll (from `../../../node_modules/@react-native-camera-roll/camera-roll`)" + - react-native-image-picker (from `../../../node_modules/react-native-image-picker`) - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`) - react-native-view-shot (from `../../../node_modules/react-native-view-shot`) - React-nativeconfig (from `../../../node_modules/react-native/ReactCommon`) @@ -1384,6 +1406,8 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native/ReactCommon" react-native-cameraroll: :path: "../../../node_modules/@react-native-camera-roll/camera-roll" + react-native-image-picker: + :path: "../../../node_modules/react-native-image-picker" react-native-safe-area-context: :path: "../../../node_modules/react-native-safe-area-context" react-native-view-shot: @@ -1480,6 +1504,7 @@ SPEC CHECKSUMS: React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304 React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a react-native-cameraroll: a9138c165c9975da773d26945591d313992c799b + react-native-image-picker: c3afe5472ef870d98a4b28415fc0b928161ee5f7 react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371 react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688 React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb diff --git a/packages/react-native/package.json b/packages/react-native/package.json index f5b3aaa0..900f0359 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -20,6 +20,7 @@ "react": "18.2.0", "react-native": "0.74.3", "react-native-gesture-handler": "^2.17.1", + "react-native-image-picker": "^7.1.2", "react-native-linear-gradient": "^2.8.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", diff --git a/packages/react-native/src/hooks/useGallery.ts b/packages/react-native/src/hooks/useGallery.ts index fda2d9c9..b1759ef6 100644 --- a/packages/react-native/src/hooks/useGallery.ts +++ b/packages/react-native/src/hooks/useGallery.ts @@ -1,5 +1,6 @@ import { CameraRoll } from '@react-native-camera-roll/camera-roll'; import { Alert, Linking, Platform } from 'react-native'; +import { launchImageLibrary } from 'react-native-image-picker'; import { check, PERMISSIONS, @@ -11,7 +12,8 @@ import { export default function useGallery() { const checkGalleryPermission = (result: PermissionStatus) => { switch (result) { - case (RESULTS.GRANTED, RESULTS.LIMITED): + case RESULTS.GRANTED: + case RESULTS.LIMITED: return 'granted'; default: @@ -55,5 +57,21 @@ export default function useGallery() { return CameraRoll.saveAsset(uri); }; - return { savePhoto }; + const getPhoto = async () => { + const hasPermission = await hasGalleryPermission(); + if (!hasPermission) return Promise.reject(); + + const response = await launchImageLibrary({ + mediaType: 'photo', + selectionLimit: 1, + }); + + if (response.didCancel) { + return null; + } + + return response.assets?.[0]?.uri; + }; + + return { savePhoto, getPhoto }; } diff --git a/yarn.lock b/yarn.lock index e2ae316d..4b8cea4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14254,6 +14254,16 @@ __metadata: languageName: node linkType: hard +"react-native-image-picker@npm:^7.1.2": + version: 7.1.2 + resolution: "react-native-image-picker@npm:7.1.2" + peerDependencies: + react: "*" + react-native: "*" + checksum: af52328b7cb06c28549442f0d923cfa92dde8d5a968a642336df4c882f81adbf0e5e606a14de27f96883a76fa1e03230061c4080011c9107942edebc8e09c478 + languageName: node + linkType: hard + "react-native-linear-gradient@npm:^2.8.3": version: 2.8.3 resolution: "react-native-linear-gradient@npm:2.8.3" @@ -14459,6 +14469,7 @@ __metadata: react: 18.2.0 react-native: 0.74.3 react-native-gesture-handler: ^2.17.1 + react-native-image-picker: ^7.1.2 react-native-linear-gradient: ^2.8.3 react-native-permissions: ^4.1.5 react-native-safe-area-context: ^4.10.8 From ac059d412815264c24c3b2aa770153e9852b4acd Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 00:18:30 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EC=84=A4=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/pages/Login/Profile.tsx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/react-native/src/pages/Login/Profile.tsx b/packages/react-native/src/pages/Login/Profile.tsx index fb41eba7..e4671f3d 100644 --- a/packages/react-native/src/pages/Login/Profile.tsx +++ b/packages/react-native/src/pages/Login/Profile.tsx @@ -1,14 +1,29 @@ +import SelectProfile from '@/assets/SelectProfile'; import { Font } from 'design-system'; -import { View } from 'react-native'; +import { Image, View } from 'react-native'; import Header from '@/components/signup/Header'; import Overlay from '@/components/signup/Overlay'; import { SignupStackNavigation } from '@/types/navigation'; +import { TouchableOpacity } from 'react-native-gesture-handler'; +import useGallery from '@/hooks/useGallery'; +import { useState } from 'react'; interface ProfileProps { navigation: SignupStackNavigation<'Signup/Profile'>; } export default function Profile({ navigation }: ProfileProps) { + const { getPhoto } = useGallery(); + const [photoUri, setPhotoUri] = useState(''); + + const handlePhotoGet = async () => { + const photo = await getPhoto(); + + if (photoUri && !photo) return; + + setPhotoUri(photo || ''); + }; + return (
+ + + {photoUri ? ( + + ) : ( + + )} + + + + 닉네임으로 프로필 사진 설정하기 + + + ); } From ef61ee19a4d2eb5d09c10004b398a51b3b280e8a Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 00:30:07 +0900 Subject: [PATCH 06/10] =?UTF-8?q?refactor:=20TextField=20validate=ED=95=A8?= =?UTF-8?q?=EC=88=98=20isCorrect=20boolean=20value=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/.storybook/global.css | 4 ++++ packages/design-system/src/TextField.tsx | 8 ++++---- .../design-system/stories/TextField.stories.tsx | 13 +++++-------- packages/react-native/src/pages/Login/Nickname.tsx | 14 ++++---------- 4 files changed, 17 insertions(+), 22 deletions(-) diff --git a/packages/design-system/.storybook/global.css b/packages/design-system/.storybook/global.css index cd18f5bc..61421d69 100644 --- a/packages/design-system/.storybook/global.css +++ b/packages/design-system/.storybook/global.css @@ -22,3 +22,7 @@ format('woff'); font-style: normal; } + +input { + outline: none; +} diff --git a/packages/design-system/src/TextField.tsx b/packages/design-system/src/TextField.tsx index 1ef70dc0..f3c1eb90 100644 --- a/packages/design-system/src/TextField.tsx +++ b/packages/design-system/src/TextField.tsx @@ -6,7 +6,7 @@ interface TextField { onChange: (value: string) => void; onSubmit: () => void; placeholder: string; - validate: () => boolean; + isCorrect: boolean; } export function TextField({ @@ -14,7 +14,7 @@ export function TextField({ onChange, placeholder, onSubmit, - validate, + isCorrect, }: TextField) { const defaultClassName = 'text-SPOT-black text-body2 rounded-md p-4 bg-SPOT-white/60 border-[2px] border-bg-SPOT-white/60'; @@ -22,8 +22,8 @@ export function TextField({ const correctClassName = 'border-Permission-green border-[2px]'; const getBorderClassName = () => { - if (typeof validate === 'function' && value !== '') { - return validate() ? correctClassName : incorrectClassName; + if (typeof isCorrect === 'boolean' && value !== '') { + return isCorrect ? correctClassName : incorrectClassName; } return 'border-none'; diff --git a/packages/design-system/stories/TextField.stories.tsx b/packages/design-system/stories/TextField.stories.tsx index fcf4c21c..1a5c1845 100644 --- a/packages/design-system/stories/TextField.stories.tsx +++ b/packages/design-system/stories/TextField.stories.tsx @@ -2,12 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react'; import { TextField } from '../src/TextField'; import { useState } from 'react'; -const correct = () => true; -const incorrect = () => false; - const meta = { title: 'Spots/TextField', - component: ({ placeholder, onSubmit, validate }) => { + component: ({ placeholder, onSubmit, isCorrect }) => { const [inputValue, setInputValue] = useState(''); return ( setInputValue(text)} placeholder={placeholder} onSubmit={onSubmit} - validate={validate} + isCorrect={isCorrect} /> ); }, @@ -25,8 +22,8 @@ const meta = { tags: ['autodocs'], argTypes: { - validate: { - options: [correct, incorrect], + isCorrect: { + options: [true, false], control: 'radio', }, }, @@ -42,6 +39,6 @@ export const defaultStory: Story = { onChange: () => {}, placeholder: 'SPOT-Placeholder', onSubmit: () => {}, - validate: () => true, + isCorrect: true, }, }; diff --git a/packages/react-native/src/pages/Login/Nickname.tsx b/packages/react-native/src/pages/Login/Nickname.tsx index 10a81bec..2f75b98c 100644 --- a/packages/react-native/src/pages/Login/Nickname.tsx +++ b/packages/react-native/src/pages/Login/Nickname.tsx @@ -1,6 +1,6 @@ import { Font, TextField } from 'design-system'; import { useState } from 'react'; -import { TextInput, View } from 'react-native'; +import { View } from 'react-native'; import Header from '@/components/signup/Header'; import Overlay from '@/components/signup/Overlay'; import { SignupStackNavigation } from '@/types/navigation'; @@ -12,16 +12,10 @@ interface NicknameProps { export default function Niakname({ navigation }: NicknameProps) { const [nickname, setNickname] = useState(''); - const validateNickname = () => { - if (nickname.length < 0 || nickname.length > 7) { - return false; - } - - return true; - }; + const isCorrect = nickname.length > 0 && nickname.length < 7; const handleSubmit = () => { - if (validateNickname()) { + if (isCorrect) { navigation.navigate('Signup/Profile', { nickname, }); @@ -52,7 +46,7 @@ export default function Niakname({ navigation }: NicknameProps) { onChange={(newNickname) => setNickname(newNickname)} onSubmit={handleSubmit} placeholder="닉네임" - validate={validateNickname} + isCorrect={isCorrect} /> From 0296f155e58faef6c02634f488244b67cd610397 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 00:58:05 +0900 Subject: [PATCH 07/10] =?UTF-8?q?type:=20SignupRouteProps=20=EC=9C=A0?= =?UTF-8?q?=ED=8B=B8=ED=83=80=EC=9E=85=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/src/types/navigation.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-native/src/types/navigation.ts b/packages/react-native/src/types/navigation.ts index 99c62eeb..ff81a541 100644 --- a/packages/react-native/src/types/navigation.ts +++ b/packages/react-native/src/types/navigation.ts @@ -1,9 +1,15 @@ import { StackNavigationProp } from '@react-navigation/stack'; import { RootStackParamList } from '@/routes/StackNavigator'; import { SignupStackParamList } from '@/routes/SignupStackNavigator'; +import { RouteProp } from '@react-navigation/native'; export type ScreenNavigationProp = StackNavigationProp; export type SignupStackNavigation = StackNavigationProp; + +export type SignupRouteProps = RouteProp< + SignupStackParamList, + T +>; From e06761b0641687c24880f35cadf4ad37ca2d2042 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 00:58:39 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20Button=20disabled,=20onPress=20op?= =?UTF-8?q?tional=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/src/Button.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/Button.tsx b/packages/design-system/src/Button.tsx index 1b57db4f..5a5bb01d 100644 --- a/packages/design-system/src/Button.tsx +++ b/packages/design-system/src/Button.tsx @@ -1,13 +1,17 @@ import React, { ReactNode } from 'react'; -import { Text, TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity } from 'react-native'; export type ButtonProps = { - onPress: () => void; - disabled: boolean; children: ReactNode; + disabled?: boolean; + onPress?: () => void; }; -export const Button = ({ onPress, disabled, children }: ButtonProps) => { +export const Button = ({ + onPress, + children, + disabled = false, +}: ButtonProps) => { return ( Date: Fri, 19 Jul 2024 01:02:21 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20NicknameProfile=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Login/NicknameProfile.tsx | 30 +++++++ .../react-native/src/pages/Login/Profile.tsx | 84 ++++++++++++------- .../src/routes/SignupStackNavigator.tsx | 5 ++ 3 files changed, 89 insertions(+), 30 deletions(-) create mode 100644 packages/react-native/src/pages/Login/NicknameProfile.tsx diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx new file mode 100644 index 00000000..6d107689 --- /dev/null +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -0,0 +1,30 @@ +import Header from '@/components/signup/Header'; +import Overlay from '@/components/signup/Overlay'; +import { SignupStackNavigation } from '@/types/navigation'; +import { Font } from 'design-system'; +import { View } from 'react-native'; + +interface NicknameProfileProps { + navigation: SignupStackNavigation<'Signup/NicknameProfile'>; +} + +export default function NicknameProfile({ navigation }: NicknameProfileProps) { + return ( + + +
navigation.goBack()} + onCancel={() => navigation.goBack()} + /> + + + 배경 색상을 + + + 선택하세요 + + + + + ); +} diff --git a/packages/react-native/src/pages/Login/Profile.tsx b/packages/react-native/src/pages/Login/Profile.tsx index e4671f3d..600d8454 100644 --- a/packages/react-native/src/pages/Login/Profile.tsx +++ b/packages/react-native/src/pages/Login/Profile.tsx @@ -1,12 +1,13 @@ import SelectProfile from '@/assets/SelectProfile'; -import { Font } from 'design-system'; +import { Button, Font } from 'design-system'; import { Image, 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 { TouchableOpacity } from 'react-native-gesture-handler'; import useGallery from '@/hooks/useGallery'; import { useState } from 'react'; +import { useRoute } from '@react-navigation/native'; interface ProfileProps { navigation: SignupStackNavigation<'Signup/Profile'>; @@ -15,6 +16,8 @@ interface ProfileProps { export default function Profile({ navigation }: ProfileProps) { const { getPhoto } = useGallery(); const [photoUri, setPhotoUri] = useState(''); + const route = useRoute>(); + const nickname = route.params.nickname; const handlePhotoGet = async () => { const photo = await getPhoto(); @@ -24,37 +27,58 @@ export default function Profile({ navigation }: ProfileProps) { setPhotoUri(photo || ''); }; + const handleNext = () => { + if (!photoUri) return; + + navigation.navigate('Main'); + }; + return ( -
navigation.goBack()} - onCancel={() => navigation.navigate('Main')} - /> - - - 사용할 프로필 사진을 - - - 설정하세요 - - - - - {photoUri ? ( - - ) : ( - - )} - - - - 닉네임으로 프로필 사진 설정하기 + + +
navigation.goBack()} + onCancel={() => navigation.navigate('Main')} + /> + + + + 사용할 프로필 사진을 + + + 설정하세요 + + + + + {photoUri ? ( + + ) : ( + + )} + + + navigation.navigate('Signup/NicknameProfile', { nickname }) + } + > + + 닉네임으로 프로필 사진 설정하기 + + + + + ); diff --git a/packages/react-native/src/routes/SignupStackNavigator.tsx b/packages/react-native/src/routes/SignupStackNavigator.tsx index cdaf4fde..55b54f80 100644 --- a/packages/react-native/src/routes/SignupStackNavigator.tsx +++ b/packages/react-native/src/routes/SignupStackNavigator.tsx @@ -1,6 +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'; const Stack = createStackNavigator(); @@ -9,6 +10,9 @@ export type SignupStackParamList = { 'Signup/Profile': { nickname: string; }; + 'Signup/NicknameProfile': { + nickname: string; + }; Main: undefined; }; @@ -21,6 +25,7 @@ export default function SignupStackNavigator() { > + ); } From c3b11bae82eb0853c307d588eec93a6f5cadcab5 Mon Sep 17 00:00:00 2001 From: d0422 Date: Fri, 19 Jul 2024 01:02:57 +0900 Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=EB=A6=B0=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/pages/Login/NicknameProfile.tsx | 4 ++-- packages/react-native/src/pages/Login/Profile.tsx | 10 +++++----- packages/react-native/src/types/navigation.ts | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-native/src/pages/Login/NicknameProfile.tsx b/packages/react-native/src/pages/Login/NicknameProfile.tsx index 6d107689..aa0d6ed8 100644 --- a/packages/react-native/src/pages/Login/NicknameProfile.tsx +++ b/packages/react-native/src/pages/Login/NicknameProfile.tsx @@ -1,8 +1,8 @@ +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 { Font } from 'design-system'; -import { View } from 'react-native'; interface NicknameProfileProps { navigation: SignupStackNavigation<'Signup/NicknameProfile'>; diff --git a/packages/react-native/src/pages/Login/Profile.tsx b/packages/react-native/src/pages/Login/Profile.tsx index 600d8454..20553d5f 100644 --- a/packages/react-native/src/pages/Login/Profile.tsx +++ b/packages/react-native/src/pages/Login/Profile.tsx @@ -1,13 +1,13 @@ -import SelectProfile from '@/assets/SelectProfile'; import { Button, Font } from 'design-system'; import { Image, View } from 'react-native'; +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 { SignupRouteProps, SignupStackNavigation } from '@/types/navigation'; -import { TouchableOpacity } from 'react-native-gesture-handler'; import useGallery from '@/hooks/useGallery'; -import { useState } from 'react'; -import { useRoute } from '@react-navigation/native'; interface ProfileProps { navigation: SignupStackNavigation<'Signup/Profile'>; @@ -17,7 +17,7 @@ export default function Profile({ navigation }: ProfileProps) { const { getPhoto } = useGallery(); const [photoUri, setPhotoUri] = useState(''); const route = useRoute>(); - const nickname = route.params.nickname; + const { nickname } = route.params; const handlePhotoGet = async () => { const photo = await getPhoto(); diff --git a/packages/react-native/src/types/navigation.ts b/packages/react-native/src/types/navigation.ts index ff81a541..604825ff 100644 --- a/packages/react-native/src/types/navigation.ts +++ b/packages/react-native/src/types/navigation.ts @@ -1,7 +1,7 @@ import { StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/native'; import { RootStackParamList } from '@/routes/StackNavigator'; import { SignupStackParamList } from '@/routes/SignupStackNavigator'; -import { RouteProp } from '@react-navigation/native'; export type ScreenNavigationProp = StackNavigationProp;