From c3298ccb1e47f8993e2c509fc81135c9793fb112 Mon Sep 17 00:00:00 2001 From: Eujin Shin <88435970+eujin-shin@users.noreply.github.com> Date: Sat, 22 Jun 2024 14:39:25 +0900 Subject: [PATCH] #78 feat: set users login, signup api (#79) * #77 feat: add ComponentsTest page at Home * #78 feat: test users/signup * #78 feat: set domain url --- App.tsx | 3 + src/common/requests.js | 10 +- src/components/Auth/BasicForm.tsx | 5 +- .../Home/Market/WriteReviewPage.tsx | 695 ++++++++++++------ src/pages/ComponentsTest.tsx | 36 + src/pages/Home.tsx | 17 +- src/pages/MyPage.tsx | 5 + yarn.lock | 354 ++++----- 8 files changed, 661 insertions(+), 464 deletions(-) create mode 100644 src/pages/ComponentsTest.tsx diff --git a/App.tsx b/App.tsx index dafa1c0..e67feea 100644 --- a/App.tsx +++ b/App.tsx @@ -21,10 +21,12 @@ import SignIn from './src/components/Auth/SignIn'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { BottomBarProvider, useBottomBar } from './contexts/BottomBarContext'; import { LoginProvider } from './src/common/Context'; +import Reformer from './src/components/Auth/Reformer/Reformer'; export type StackProps = { Home: undefined; Signin: undefined; + ReformProfile: undefined; }; const Stack = createNativeStackNavigator(); @@ -49,6 +51,7 @@ function App(): React.JSX.Element { })}> + diff --git a/src/common/requests.js b/src/common/requests.js index 358e080..a91b1f2 100644 --- a/src/common/requests.js +++ b/src/common/requests.js @@ -13,7 +13,11 @@ export default function Request() { const accessToken = await getAccessToken(); const refreshToken = await getRefreshToken(); - const url = UPCY_API_URL + path; + // upcy temp api url: http://52.78.43.6:8000/ + // upcy domain: http://upcy.co.kr:8000/ + // https 요청 문제로 도메인 연결 보류 + + const url = 'http://52.78.43.6:8000/' + path; let headerValue; @@ -37,7 +41,7 @@ export default function Request() { // 백엔드와 통신 자체가 실패(ERR_CONNECTION_REFUSED) console.log(err); Alert.alert('ERR_CONNECTION_REFUSED' + UPCY_API_URL); - console.warn(UPCY_API_URL); + console.warn(url); throw err; } else if (err.response.status === 401) { // access 토큰이 만료된 경우 또는 로그인이 필요한 기능의 경우 @@ -47,7 +51,7 @@ export default function Request() { // refresh 토큰을 통해 access 토큰 재발급 try { const response = await axios.post( - UPCY_API_URL + '/users/token/refresh/', + UPCY_API_URL + 'users/token/refresh/', { refresh: refreshToken, }, diff --git a/src/components/Auth/BasicForm.tsx b/src/components/Auth/BasicForm.tsx index 9b66bae..208c3d1 100644 --- a/src/components/Auth/BasicForm.tsx +++ b/src/components/Auth/BasicForm.tsx @@ -110,12 +110,15 @@ export default function BasicForm({ navigation, route }: FormProps) { area: form.region, }; const response = await request.post(`users/signup/`, params, {}); - if (response?.status === 200) { + if (response?.status === 201) { console.log(params); setSplash(true); setTimeout(() => { navigation.getParent()?.navigate('Home'); }, 3000); + } else if (response?.status === 500) { + console.log(response); + Alert.alert('이미 가입된 이메일입니다.'); } else { console.log(response); Alert.alert('가입에 실패했습니다.'); diff --git a/src/components/Home/Market/WriteReviewPage.tsx b/src/components/Home/Market/WriteReviewPage.tsx index 0871468..99ec05d 100644 --- a/src/components/Home/Market/WriteReviewPage.tsx +++ b/src/components/Home/Market/WriteReviewPage.tsx @@ -1,7 +1,24 @@ import { useCallback, useEffect, useRef, useState } from 'react'; -import { Dimensions, SafeAreaView, ScrollView, ScrollViewBase, Text, TouchableOpacity, View } from 'react-native'; -import { RichEditor, RichToolbar, actions } from 'react-native-pell-rich-editor'; -import { Body14B, Body14M, Body16B, Subtitle16B } from '../../../styles/GlobalText'; +import { + Dimensions, + SafeAreaView, + ScrollView, + ScrollViewBase, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import { + RichEditor, + RichToolbar, + actions, +} from 'react-native-pell-rich-editor'; +import { + Body14B, + Body14M, + Body16B, + Subtitle16B, +} from '../../../styles/GlobalText'; import Arrow from '../../../assets/common/Arrow.svg'; import styled from 'styled-components/native'; import { getStatusBarHeight } from 'react-native-safearea-height'; @@ -18,250 +35,474 @@ import { useNavigation } from '@react-navigation/native'; import BouncyCheckbox from 'react-native-bouncy-checkbox'; const statusBarHeight = getStatusBarHeight(true); -const { width, height } = Dimensions.get("window"); +const { width, height } = Dimensions.get('window'); interface WriteReviewPageProps { - scrollViewRef: React.RefObject; + scrollViewRef: React.RefObject; } const ButtonSection = styled.View` display: flex; flex-direction: row; - justify-content:space-around; -` + justify-content: space-around; +`; const FooterButton = styled.TouchableOpacity` display: flex; flex-direction: row; align-items: center; - padding:12px; + padding: 12px; justify-content: center; border-radius: 12px; -` +`; const ReviewComponent = ({ feedBack }: any) => { - return ( - - {feedBack} - - ) -} + return ( + + {feedBack} + + ); +}; const WriteReviewPage: React.FC = ({ scrollViewRef }) => { - const navigation = useNavigation(); - const [detail, setDetail] = useState(""); - const [marketName] = useState("마켓명"); - const [serviceName] = useState("서비스 이름 어쩌구저쩌구") - const [message, setMessage] = useState(""); - const scrollRef = useRef(null); + const navigation = useNavigation(); + const [detail, setDetail] = useState(''); + const [marketName] = useState('마켓명'); + const [serviceName] = useState('서비스 이름 어쩌구저쩌구'); + const [message, setMessage] = useState(''); + const scrollRef = useRef(null); - const { hideBottomBar, showBottomBar } = useBottomBar(); + const { hideBottomBar, showBottomBar } = useBottomBar(); - useEffect(() => { - hideBottomBar(); - return () => showBottomBar(); - }, []); + useEffect(() => { + hideBottomBar(); + return () => showBottomBar(); + }, []); - interface Storage { - id: number; - feedBack: string; - isChecked?: boolean; // isChecked 속성은 선택적(optional)으로 정의합니다. - } - const handleCheckboxChange1 = (isChecked: boolean, id: number) => { - const newItems1 = tradeFeed.map((item) => { - if (item.id == id) { - // 체크가 되었다면, isChecked를 동기화. 처음 누르면 true, 한 번 더 누르면 false. - return { ...item, isChecked: isChecked }; - } - else { - return { ...item }; - } - }); - setTradeFeed(newItems1); - }; + interface Storage { + id: number; + feedBack: string; + isChecked?: boolean; // isChecked 속성은 선택적(optional)으로 정의합니다. + } + const handleCheckboxChange1 = (isChecked: boolean, id: number) => { + const newItems1 = tradeFeed.map(item => { + if (item.id == id) { + // 체크가 되었다면, isChecked를 동기화. 처음 누르면 true, 한 번 더 누르면 false. + return { ...item, isChecked: isChecked }; + } else { + return { ...item }; + } + }); + setTradeFeed(newItems1); + }; - const [tradeFeed, setTradeFeed] = useState([ - { - id: 1, - feedBack: '약속을 잘 지켜요', - isChecked: false - }, - { - id: 2, - feedBack: '상담이 친절해요', - isChecked: false - }, - { - id: 3, - feedBack: '답장이 빨랐어요', - isChecked: false - }, - { - id: 4, - feedBack: '잘 받았어요', - isChecked: false - } - ]) - const [designFeed, setDesignFeed] = useState([ - { - id: 1, - feedBack: '마무리가 꼼꼼해요', - isChecked: false - }, - { - id: 2, - feedBack: '요청사항과 같아요', - isChecked: false - }, - { - id: 3, - feedBack: '잘 맞아요', - isChecked: false - }, - { - id: 4, - feedBack: '트렌디해요', - isChecked: false - } - ]) - const WriteReviewBottomBar = - - - - - 등록하기 - - - - ; + const [tradeFeed, setTradeFeed] = useState([ + { + id: 1, + feedBack: '약속을 잘 지켜요', + isChecked: false, + }, + { + id: 2, + feedBack: '상담이 친절해요', + isChecked: false, + }, + { + id: 3, + feedBack: '답장이 빨랐어요', + isChecked: false, + }, + { + id: 4, + feedBack: '잘 받았어요', + isChecked: false, + }, + ]); + const [designFeed, setDesignFeed] = useState([ + { + id: 1, + feedBack: '마무리가 꼼꼼해요', + isChecked: false, + }, + { + id: 2, + feedBack: '요청사항과 같아요', + isChecked: false, + }, + { + id: 3, + feedBack: '잘 맞아요', + isChecked: false, + }, + { + id: 4, + feedBack: '트렌디해요', + isChecked: false, + }, + ]); + const WriteReviewBottomBar = ( + + + + + 등록하기 + + + + + ); - return ( - - { }} - rightButton='Exit' - onPressRight={() => handleBackPress(navigation, showBottomBar)} + return ( + + {}} + rightButton="Exit" + onPressRight={() => handleBackPress(navigation, showBottomBar)} + /> + + + {/* 그림이랑 마켓명, 서비스 이름 들어가는 곳 */} + + - - - {/* 그림이랑 마켓명, 서비스 이름 들어가는 곳 */} - - - - {marketName} - {serviceName} - - - {/* 상품은 어떠셨나요~ + 별점 */} - - - 상품은 어떠셨나요? - - - 별점을 매겨주세요 - - - - - - {/* 거래, 디자인 체크하는 부분 시작 */} - - {/* 연보라 상자 */} - - {/* 거래 부분 */} - - - 거래 - - {tradeFeed.map((item) => ( - - - iconStyle={{ borderColor: "#612FEF" }} - innerIconStyle={{ borderWidth: 2 }} - onPress={(isChecked) => - handleCheckboxChange1(isChecked, item.id) - } - /> - - ))} - - {/* 디자인 부분 */} - - - 디자인 - - {designFeed.map((item) => ( - - - iconStyle={{ borderColor: "#612FEF" }} - innerIconStyle={{ borderWidth: 2 }} - onPress={(isChecked) => - handleCheckboxChange1(isChecked, item.id) - } - /> - - ))} - - - - - - - 내용 - - - - - - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - ● 주의사항: 어쩌구 - - - - - - {WriteReviewBottomBar} - - ) - -} + + + {marketName} + + + {serviceName} + + + + {/* 상품은 어떠셨나요~ + 별점 */} + + + + 상품은 어떠셨나요? + + + + + 별점을 매겨주세요 + + + + + + + {/* 거래, 디자인 체크하는 부분 시작 */} + + {/* 연보라 상자 */} + + {/* 거래 부분 */} + + + 거래 + + {tradeFeed.map(item => ( + + + iconStyle={{ borderColor: '#612FEF' }} + innerIconStyle={{ borderWidth: 2 }} + onPress={isChecked => + handleCheckboxChange1(isChecked, item.id) + } + /> + + ))} + + {/* 디자인 부분 */} + + + + 디자인 + + + {designFeed.map(item => ( + + + iconStyle={{ borderColor: '#612FEF' }} + innerIconStyle={{ borderWidth: 2 }} + onPress={isChecked => + handleCheckboxChange1(isChecked, item.id) + } + /> + + ))} + + + + + + + 내용 + + + + + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + ● 주의사항: 어쩌구{' '} + + + + + + + {WriteReviewBottomBar} + + ); +}; -export default WriteReviewPage \ No newline at end of file +export default WriteReviewPage; diff --git a/src/pages/ComponentsTest.tsx b/src/pages/ComponentsTest.tsx new file mode 100644 index 0000000..0b41f0c --- /dev/null +++ b/src/pages/ComponentsTest.tsx @@ -0,0 +1,36 @@ +import { SafeAreaView, TouchableOpacity, View } from 'react-native'; +import Dropdown from '../common/Dropdown'; +import { useState } from 'react'; + +const TestDropdown = () => { + const [value, setValue] = useState(); + const [open, setOpen] = useState(false); + const items = ['a', 'b', 'c']; + + return ( + {}}> + setValue(t)} + open={open} + setOpen={setOpen} + style={{ + height: 40, + width: 500, + // backgroundColor: 'red', + }} + /> + + ); +}; + +export default function ComponentsTest() { + return ( + + + + + + ); +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index df0bd25..4087846 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -28,6 +28,7 @@ import AddPortfolio from '../components/Home/Portfolio/AddPortfolio'; import { getFocusedRouteNameFromRoute } from '@react-navigation/native'; import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'; import WriteReviewPage from '../components/Home/Market/WriteReviewPage'; +import ComponentsTest from './ComponentsTest'; export type HomeStackParams = { Home: undefined; @@ -46,6 +47,8 @@ export type HomeStackParams = { WriteDetailPage: undefined; AddPortfolio: undefined; WriteReviewPage: undefined; + + TestComponents: undefined; }; const HomeStack = createStackNavigator(); @@ -94,6 +97,7 @@ const HomeScreen = ({ + ); }; @@ -105,11 +109,15 @@ const HomeMainScreen = ({ const handleTabChange = (tab: 'Goods' | 'Market') => { setSelectedTab(tab); - } + }; return ( - { }} onTabChange={handleTabChange} /> - { }} selectedTab={selectedTab} onTabChange={handleTabChange} /> + {}} onTabChange={handleTabChange} /> + {}} + selectedTab={selectedTab} + onTabChange={handleTabChange} + /> + ); diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index 82c9d1a..1f02e92 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -62,10 +62,15 @@ const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => { navigation.getParent()?.navigate('홈'); }; + const goReformRegister = () => { + navigation.navigate('ReformProfile'); + }; + return ( 마이페이지 {userInfo.nickname}님 안녕하세요. +