From 5833133bd758ffab8e92e40d6362c1b26b18b22a Mon Sep 17 00:00:00 2001 From: causyj Date: Thu, 17 Oct 2024 22:27:41 +0900 Subject: [PATCH 1/8] Update email/page.tsx : post api for img request --- src/app/api/email/route.ts | 23 ++++++++++++++ src/app/email/page.tsx | 63 +++++++++++++++++++++++++++++++++++--- 2 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 src/app/api/email/route.ts diff --git a/src/app/api/email/route.ts b/src/app/api/email/route.ts new file mode 100644 index 0000000..48f429b --- /dev/null +++ b/src/app/api/email/route.ts @@ -0,0 +1,23 @@ +import { NextRequest, NextResponse } from 'next/server'; + +export const POST = async (request: NextRequest) => { + const { searchParams } = new URL(request.url); + const searchCode = searchParams.get('code') || ''; + const body = await request.json(); + + const response = await fetch( + `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}:${process.env.NEXT_PUBLIC_SERVER_PORT}/api/photo-request`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${searchCode}`, + }, + body: JSON.stringify(body), + }, + ); + const jsonData = await response.json(); + return NextResponse.json(jsonData, { + status: jsonData.code, + }); +}; diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index 0072674..8746cc1 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -1,5 +1,7 @@ 'use client'; +import { useAtom, useSetAtom } from 'jotai'; +import dynamic from 'next/dynamic'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; @@ -7,13 +9,30 @@ import { CompoundModal } from '@/components/Modal/ModalMain'; import PreviousPage from '@/components/PreviousPage'; import { ENTER_EMAIL_TITLE } from '@/constants'; import { ROUTE_TYPES } from '@/interfaces'; +import { imageUrlsAtom } from '@/store/atoms/imageUrlAtom'; +import { selectedBoxAtom } from '@/store/atoms/selectedBoxAtom'; import useModal from '../hooks/useModal'; -export default function EmailEnterView() { +export function EmailEnterView() { const router = useRouter(); const [email, setEmail] = useState(''); const [isEmailValid, setIsEmailValid] = useState(false); + // const gender = useAtom(selectedBoxAtom); + const gender = 1; + // const photoOriginUrls = useAtom(imageUrlsAtom); + const photoOriginUrls = [ + '/example1.png', + '/example2.png', + '/example1.png', + '/example2.png', + '/example1.png', + '/example2.png', + '/example1.png', + '/example2.png', + ]; + // alert(`gender : ${gender} photourl : ${photoOriginUrls}`); const { isOpen, handleOpenModal, handleCloseModal } = useModal(); + const storedToken = window.sessionStorage.getItem('accessToken') || ''; const handleEmailEntered = (e: React.ChangeEvent) => { const emailValue = e.target.value; setEmail(emailValue); @@ -22,10 +41,43 @@ export default function EmailEnterView() { setIsEmailValid(emailPattern.test(emailValue)); }; - const handleEmailSubmit = (event: React.FormEvent) => { + const handleEmailSubmit = async (event: React.FormEvent) => { event.preventDefault(); - if (isEmailValid) { - router.push(ROUTE_TYPES.WAITING); + + const postData = { + email, + gender, + photoOriginUrls, + }; + + if (storedToken !== '') { + fetch(`/api/email?code=${storedToken}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${storedToken}`, + }, + body: JSON.stringify(postData), + }) + .then((response) => { + console.log('Response Status:', response.status); + return response + .json() + .then((data) => ({ status: response.status, data })); + }) + .then(({ status, data }) => { + console.log('Response Data:', data); + if (status === 200) { + console.log('yeaf'); + router.push(ROUTE_TYPES.WAITING); + } else { + console.log('else'); + } + }) + .catch((error) => { + console.error('Error in fetch:', error); + }) + .finally(() => console.log('finally')); } }; @@ -105,3 +157,6 @@ export default function EmailEnterView() { ); } +export default dynamic(() => Promise.resolve(EmailEnterView), { + ssr: false, +}); From a19f9629c51aea06663c8bc7da90d035c2c341c8 Mon Sep 17 00:00:00 2001 From: causyj Date: Thu, 17 Oct 2024 22:35:01 +0900 Subject: [PATCH 2/8] Update email/page.tsx: edit atom state --- src/app/email/page.tsx | 23 +++-------------------- src/constants/errorMessages.ts | 1 - 2 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index 8746cc1..2fbfe42 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -17,20 +17,8 @@ export function EmailEnterView() { const router = useRouter(); const [email, setEmail] = useState(''); const [isEmailValid, setIsEmailValid] = useState(false); - // const gender = useAtom(selectedBoxAtom); - const gender = 1; - // const photoOriginUrls = useAtom(imageUrlsAtom); - const photoOriginUrls = [ - '/example1.png', - '/example2.png', - '/example1.png', - '/example2.png', - '/example1.png', - '/example2.png', - '/example1.png', - '/example2.png', - ]; - // alert(`gender : ${gender} photourl : ${photoOriginUrls}`); + const [gender] = useAtom(selectedBoxAtom); + const [photoOriginUrls] = useAtom(imageUrlsAtom); const { isOpen, handleOpenModal, handleCloseModal } = useModal(); const storedToken = window.sessionStorage.getItem('accessToken') || ''; const handleEmailEntered = (e: React.ChangeEvent) => { @@ -66,18 +54,13 @@ export function EmailEnterView() { .then((data) => ({ status: response.status, data })); }) .then(({ status, data }) => { - console.log('Response Data:', data); if (status === 200) { - console.log('yeaf'); router.push(ROUTE_TYPES.WAITING); } else { console.log('else'); } }) - .catch((error) => { - console.error('Error in fetch:', error); - }) - .finally(() => console.log('finally')); + .catch((error) => {}); } }; diff --git a/src/constants/errorMessages.ts b/src/constants/errorMessages.ts index b6143e6..4414d18 100644 --- a/src/constants/errorMessages.ts +++ b/src/constants/errorMessages.ts @@ -10,4 +10,3 @@ export const GENERATION_ERROR_MSG: string = '프로필을 생성하는 실패했 export const GENERATION_ERROR_CHECK_MSG: string = '이미지를 다시 확인해주세요'; export const UPLOAD_ERROR_MSG: string = '이미지 업로드에 실패했습니다.'; export const UPLOAD_ERROR_CHECK_MSG: string = '이미지를 다시 확인해주세요'; - From 0a0edb6afd6ef0e3b7fe97c2d1d935a5ae837aa7 Mon Sep 17 00:00:00 2001 From: causyj Date: Thu, 17 Oct 2024 23:01:39 +0900 Subject: [PATCH 3/8] Update email/page.tsx : add error msg --- src/app/email/page.tsx | 24 ++++++++++++++++++------ src/constants/errorMessages.ts | 4 ++++ 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index 2fbfe42..e9d420f 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -7,8 +7,16 @@ import { useRouter } from 'next/navigation'; import { useState } from 'react'; import { CompoundModal } from '@/components/Modal/ModalMain'; import PreviousPage from '@/components/PreviousPage'; -import { ENTER_EMAIL_TITLE } from '@/constants'; +import { + ENTER_EMAIL_TITLE, + IMG_GENERATED_ERROR_CHECK_MSG, + IMG_GENERATED_ERROR_MSG, +} from '@/constants'; import { ROUTE_TYPES } from '@/interfaces'; +import { + errorCheckMessageAtom, + errorMessageAtom, +} from '@/store/atoms/errorMessageAtom'; import { imageUrlsAtom } from '@/store/atoms/imageUrlAtom'; import { selectedBoxAtom } from '@/store/atoms/selectedBoxAtom'; import useModal from '../hooks/useModal'; @@ -20,6 +28,8 @@ export function EmailEnterView() { const [gender] = useAtom(selectedBoxAtom); const [photoOriginUrls] = useAtom(imageUrlsAtom); const { isOpen, handleOpenModal, handleCloseModal } = useModal(); + const setErrorMessage = useSetAtom(errorMessageAtom); + const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom); const storedToken = window.sessionStorage.getItem('accessToken') || ''; const handleEmailEntered = (e: React.ChangeEvent) => { const emailValue = e.target.value; @@ -31,7 +41,6 @@ export function EmailEnterView() { const handleEmailSubmit = async (event: React.FormEvent) => { event.preventDefault(); - const postData = { email, gender, @@ -48,19 +57,22 @@ export function EmailEnterView() { body: JSON.stringify(postData), }) .then((response) => { - console.log('Response Status:', response.status); return response .json() .then((data) => ({ status: response.status, data })); }) - .then(({ status, data }) => { + .then(({ status }) => { if (status === 200) { router.push(ROUTE_TYPES.WAITING); } else { - console.log('else'); + setErrorMessage(IMG_GENERATED_ERROR_MSG); + setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); } }) - .catch((error) => {}); + .catch(() => { + setErrorMessage(IMG_GENERATED_ERROR_MSG); + setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); + }); } }; diff --git a/src/constants/errorMessages.ts b/src/constants/errorMessages.ts index 4414d18..ea3e150 100644 --- a/src/constants/errorMessages.ts +++ b/src/constants/errorMessages.ts @@ -10,3 +10,7 @@ export const GENERATION_ERROR_MSG: string = '프로필을 생성하는 실패했 export const GENERATION_ERROR_CHECK_MSG: string = '이미지를 다시 확인해주세요'; export const UPLOAD_ERROR_MSG: string = '이미지 업로드에 실패했습니다.'; export const UPLOAD_ERROR_CHECK_MSG: string = '이미지를 다시 확인해주세요'; +export const IMG_GENERATED_ERROR_CHECK_MSG: string = + '이미지 데이터를 처리하는 중 오류가 발생했습니다'; +export const IMG_GENERATED_ERROR_MSG: string = + '정보를 올바르게 입력하셨는지 확인해주세요'; From 743f46ede7d2d9e4c32a5b5a96347d2cf8d693ca Mon Sep 17 00:00:00 2001 From: causyj Date: Thu, 17 Oct 2024 23:16:45 +0900 Subject: [PATCH 4/8] Update email/page.tsx: change gender value from string to int --- src/app/email/page.tsx | 67 +++++++++++++++++++----------------------- 1 file changed, 31 insertions(+), 36 deletions(-) diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index e9d420f..1e847ed 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -23,14 +23,15 @@ import useModal from '../hooks/useModal'; export function EmailEnterView() { const router = useRouter(); - const [email, setEmail] = useState(''); + const [email, setEmail] = useState(''); const [isEmailValid, setIsEmailValid] = useState(false); - const [gender] = useAtom(selectedBoxAtom); + const [genderString] = useAtom(selectedBoxAtom); const [photoOriginUrls] = useAtom(imageUrlsAtom); const { isOpen, handleOpenModal, handleCloseModal } = useModal(); const setErrorMessage = useSetAtom(errorMessageAtom); const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom); const storedToken = window.sessionStorage.getItem('accessToken') || ''; + const gender = genderString === 'female' ? 1 : 0; const handleEmailEntered = (e: React.ChangeEvent) => { const emailValue = e.target.value; setEmail(emailValue); @@ -38,46 +39,40 @@ export function EmailEnterView() { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; setIsEmailValid(emailPattern.test(emailValue)); }; - - const handleEmailSubmit = async (event: React.FormEvent) => { - event.preventDefault(); - const postData = { - email, - gender, - photoOriginUrls, - }; - + const submitPhotoData = async () => { if (storedToken !== '') { - fetch(`/api/email?code=${storedToken}`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${storedToken}`, - }, - body: JSON.stringify(postData), - }) - .then((response) => { - return response - .json() - .then((data) => ({ status: response.status, data })); - }) - .then(({ status }) => { - if (status === 200) { - router.push(ROUTE_TYPES.WAITING); - } else { - setErrorMessage(IMG_GENERATED_ERROR_MSG); - setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); - } - }) - .catch(() => { + try { + const response = await fetch(`/api/email?code=${storedToken}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${storedToken}`, + }, + body: JSON.stringify({ email, gender, photoOriginUrls }), + }); + + if (response.status === 200) { + router.push(ROUTE_TYPES.WAITING); + } else { setErrorMessage(IMG_GENERATED_ERROR_MSG); setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); - }); + } + } catch (error) { + setErrorMessage(IMG_GENERATED_ERROR_MSG); + setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); + } } }; - const handleMovePage = () => { + const handleEmailSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + await submitPhotoData(); + }; + + const handleMovePage = async () => { router.push(ROUTE_TYPES.WAITING); + setEmail(null); + await submitPhotoData(); }; return ( @@ -104,7 +99,7 @@ export function EmailEnterView() { className="mb-12 h-12 w-full rounded-full border-2 border-primary-darkblue bg-background text-center font-sfpro text-xs font-bold placeholder-primary-darkblue placeholder-opacity-20" type="email" required - value={email} + value={email ?? ''} onChange={handleEmailEntered} /> From ab521976b3a0b2dc0a30d4eba8c458e6e3b0c15e Mon Sep 17 00:00:00 2001 From: causyj Date: Fri, 18 Oct 2024 10:02:30 +0900 Subject: [PATCH 5/8] Update page.tsx : edit email null --- src/app/email/page.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index 1e847ed..1326749 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -23,7 +23,7 @@ import useModal from '../hooks/useModal'; export function EmailEnterView() { const router = useRouter(); - const [email, setEmail] = useState(''); + const [email, setEmail] = useState(''); const [isEmailValid, setIsEmailValid] = useState(false); const [genderString] = useAtom(selectedBoxAtom); const [photoOriginUrls] = useAtom(imageUrlsAtom); @@ -48,7 +48,11 @@ export function EmailEnterView() { 'Content-Type': 'application/json', Authorization: `Bearer ${storedToken}`, }, - body: JSON.stringify({ email, gender, photoOriginUrls }), + body: JSON.stringify({ + email: email || null, + gender, + photoOriginUrls, + }), }); if (response.status === 200) { @@ -71,7 +75,6 @@ export function EmailEnterView() { const handleMovePage = async () => { router.push(ROUTE_TYPES.WAITING); - setEmail(null); await submitPhotoData(); }; @@ -99,7 +102,7 @@ export function EmailEnterView() { className="mb-12 h-12 w-full rounded-full border-2 border-primary-darkblue bg-background text-center font-sfpro text-xs font-bold placeholder-primary-darkblue placeholder-opacity-20" type="email" required - value={email ?? ''} + value={email} onChange={handleEmailEntered} /> From 9455ea9e83f1c90fd6161280783f5dba188c3631 Mon Sep 17 00:00:00 2001 From: causyj Date: Fri, 18 Oct 2024 10:19:25 +0900 Subject: [PATCH 6/8] page.tsx: edit header --- src/app/api/email/route.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/api/email/route.ts b/src/app/api/email/route.ts index 48f429b..e4ff61a 100644 --- a/src/app/api/email/route.ts +++ b/src/app/api/email/route.ts @@ -1,18 +1,15 @@ import { NextRequest, NextResponse } from 'next/server'; export const POST = async (request: NextRequest) => { - const { searchParams } = new URL(request.url); - const searchCode = searchParams.get('code') || ''; + const { headers } = request; + const body = await request.json(); const response = await fetch( `${process.env.NEXT_PUBLIC_SERVER_ADDRESS}:${process.env.NEXT_PUBLIC_SERVER_PORT}/api/photo-request`, { method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${searchCode}`, - }, + headers, body: JSON.stringify(body), }, ); From 1a541449278df2ba1a08ae4246ba986fa943300a Mon Sep 17 00:00:00 2001 From: causyj Date: Fri, 18 Oct 2024 10:56:13 +0900 Subject: [PATCH 7/8] Update page.tsx : add error routing --- src/app/email/page.tsx | 2 ++ src/app/list/page.tsx | 5 +++++ src/app/waiting/page.tsx | 2 ++ 3 files changed, 9 insertions(+) diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index 1326749..e2fb9f0 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -60,10 +60,12 @@ export function EmailEnterView() { } else { setErrorMessage(IMG_GENERATED_ERROR_MSG); setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); } } catch (error) { setErrorMessage(IMG_GENERATED_ERROR_MSG); setErrorCheckMessage(IMG_GENERATED_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); } } }; diff --git a/src/app/list/page.tsx b/src/app/list/page.tsx index 9dfca99..6347b2a 100644 --- a/src/app/list/page.tsx +++ b/src/app/list/page.tsx @@ -2,6 +2,7 @@ import { useSetAtom } from 'jotai/index'; import dynamic from 'next/dynamic'; +import { useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; import PreviousPage from '@/components/PreviousPage'; import { @@ -16,6 +17,7 @@ import { } from '@/store/atoms/errorMessageAtom'; import EmptyList from './_components/EmptyList'; import ImageList from './_components/ImageList'; +import { ROUTE_TYPES } from '@/interfaces'; export function ListView() { const [list, setList] = useState([]); @@ -24,6 +26,7 @@ export function ListView() { const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom); const setCreatedPhoto = useSetAtom(createdPhotoAtomWithStorage); const storedToken = window.sessionStorage.getItem('accessToken') || ''; + const router = useRouter(); useEffect(() => { if (storedToken !== '') { @@ -40,11 +43,13 @@ export function ListView() { } else { setErrorMessage(NO_GENERATED_IMAGE_MSG); setErrorCheckMessage(GENERATION_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); } }) .catch(() => { setErrorMessage(IMG_LIST_ERROR_MSG); setErrorCheckMessage(GENERATION_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); }) .finally(() => setLoading(false)); } diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx index 8542ba3..d21dc2e 100644 --- a/src/app/waiting/page.tsx +++ b/src/app/waiting/page.tsx @@ -48,11 +48,13 @@ export function WaitingView() { } else { setErrorMessage(IMG_NOT_READY_MSG); setErrorCheckMessage(GENERATION_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); } }) .catch(() => { setErrorMessage(GENERATION_STATUS_ERROR_MSG); setErrorCheckMessage(GENERATION_ERROR_CHECK_MSG); + router.push(ROUTE_TYPES.ERROR); }); } }, [setErrorCheckMessage, setErrorMessage, storedToken]); From 7d45c62f770a9bc9f8cbd81db5ef25cfff541a2d Mon Sep 17 00:00:00 2001 From: causyj Date: Fri, 18 Oct 2024 11:00:43 +0900 Subject: [PATCH 8/8] Add gendervalue.ts : add gender value constants --- src/app/email/page.tsx | 4 +++- src/constants/genderValue.ts | 2 ++ src/constants/index.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 src/constants/genderValue.ts diff --git a/src/app/email/page.tsx b/src/app/email/page.tsx index e2fb9f0..3758d4f 100644 --- a/src/app/email/page.tsx +++ b/src/app/email/page.tsx @@ -9,6 +9,8 @@ import { CompoundModal } from '@/components/Modal/ModalMain'; import PreviousPage from '@/components/PreviousPage'; import { ENTER_EMAIL_TITLE, + GENDER_FEMALE, + GENDER_MALE, IMG_GENERATED_ERROR_CHECK_MSG, IMG_GENERATED_ERROR_MSG, } from '@/constants'; @@ -31,7 +33,7 @@ export function EmailEnterView() { const setErrorMessage = useSetAtom(errorMessageAtom); const setErrorCheckMessage = useSetAtom(errorCheckMessageAtom); const storedToken = window.sessionStorage.getItem('accessToken') || ''; - const gender = genderString === 'female' ? 1 : 0; + const gender = genderString === 'female' ? GENDER_FEMALE : GENDER_MALE; const handleEmailEntered = (e: React.ChangeEvent) => { const emailValue = e.target.value; setEmail(emailValue); diff --git a/src/constants/genderValue.ts b/src/constants/genderValue.ts new file mode 100644 index 0000000..d1cd4ec --- /dev/null +++ b/src/constants/genderValue.ts @@ -0,0 +1,2 @@ +export const GENDER_MALE = 0; +export const GENDER_FEMALE = 1; diff --git a/src/constants/index.ts b/src/constants/index.ts index fb62d7b..d92d52d 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -5,3 +5,4 @@ export * from './modalText'; export * from './guideImage'; export * from './privatePolicyContent'; export * from './image'; +export * from './genderValue';