Merge pull request #56 from DEPthes/dev

Dev
DEPthes · Aug 19, 2023 · e3c8b3d · e3c8b3d
2 parents 29bf7cc + 03c4871
commit e3c8b3d
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 118 deletions.
diff --git a/apis/getLetters.ts b/apis/getLetters.ts
@@ -14,7 +14,7 @@ export type LettersResponse = {
 export type LetterType = 'read' | 'unread';
 export async function getLetters(type: LetterType) {
   const accessToken = authToken.getToken();
-  const url = type === 'read' ? '/api/mail/read' : '/api/mailbox';
+  const url = type === 'read' ? '/api/mailbox/read' : '/api/mailbox';
   return await ieumAxios.get<LettersResponse>(url, {
     headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}` },
   });

diff --git a/components/authEmail.tsx b/components/authEmail.tsx
@@ -136,8 +136,8 @@ export default function AuthEmail({ title, moveNextPage, setEmail }: Props) {
   const submitHandler = () => {};
 
   return (
-    <main className='flex justify-center'>
-      <form className='w-342 mt-133 mx-24' onSubmit={submitHandler}>
+    <main className='flex justify-center pt-133'>
+      <form className='w-342 mx-24' onSubmit={submitHandler}>
         {title}
         <input
           className={`w-full px-12 py-15 rounded-10 border-2 focus:border-[#707070] outline-none placeholder-text_secondary placeholder:font-paragraph--sm gap-127 font-paragraph--sm ${

diff --git a/components/layouts/layout.tsx b/components/layouts/layout.tsx
@@ -19,8 +19,8 @@ const Layout: React.FC<LayoutProps & HeadMetaProps> = ({
     <>
       <HeadMeta {...{ metaTitle, metaDescription }} />
       <Header />
-      <div className='pt-78 h-screen'>
-        <div className='h-full px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
+      <div className='pt-78'>
+        <div className='h-full'>
           {onlyAccess === 'user' && <OnlyUser>{children}</OnlyUser>}
           {onlyAccess === 'notUser' && <OnlyNotUser>{children}</OnlyNotUser>}
           {onlyAccess === 'all' && children}

diff --git a/components/pages/join/join-Password.tsx b/components/pages/join/join-Password.tsx
@@ -23,10 +23,29 @@ type JoinPasswordType = {
   email: string;
 };
 
+//초기 닉네임 설정
+const initNicknames = [
+  '혁명적인설탕',
+  '고요한오리',
+  '긍정적인다람쥐',
+  '꾸준한호랑이',
+  '센스있는팬더',
+  '빛나는별',
+  '신비로운달',
+  '환상적인바람',
+  '푸른바다',
+  '자유로운새',
+];
+
+const getRandomNickname = () => {
+  const randomIndex = Math.floor(Math.random() * initNicknames.length);
+  return initNicknames[randomIndex];
+};
+
 const JoinPassword: React.FC<JoinPasswordType> = ({ email }) => {
   const router = useRouter();
   const newSignUpMutation = useMutation(postSignUp);
-  const [nickname, setNickname] = useState<string>('');
+  const [nickname, setNickname] = useState<string>(getRandomNickname());
   //API로부터 받아온 닉네임들 저장하는 배열
   const [nicknames, setNicknames] = useState<string[]>([]);
 
@@ -51,31 +70,6 @@ const JoinPassword: React.FC<JoinPasswordType> = ({ email }) => {
 
   const [isDuplicatedCheckAble, setIsDuplicatedCheckAble] = useState(false);
 
-  //초기 닉네임 설정
-  const initNicknames = [
-    '혁명적인설탕',
-    '고요한오리',
-    '긍정적인다람쥐',
-    '꾸준한호랑이',
-    '센스있는팬더',
-    '빛나는별',
-    '신비로운달',
-    '환상적인바람',
-    '푸른바다',
-    '자유로운새',
-  ];
-
-  // 초기 닉네임 중 랜덤 닉네임 1개 선택 로직
-  useEffect(() => {
-    const getRandomNickname = () => {
-      const randomIndex = Math.floor(Math.random() * initNicknames.length);
-      return initNicknames[randomIndex];
-    };
-    setNickname(getRandomNickname());
-
-    // changeNicknameHandler();
-  }, []); // 빈 배열을 의존성 배열로 사용
-
   const setNicknameHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNickname(event.target.value);
     setIsDuplicatedCheckAble(true);
@@ -221,8 +215,8 @@ const JoinPassword: React.FC<JoinPasswordType> = ({ email }) => {
   };
 
   return (
-    <main className='flex flex-col justify-center items-center'>
-      <form className='w-342 mt-133 mx-24' onSubmit={submitHandler}>
+    <main className='flex flex-col justify-center items-center pt-133'>
+      <form className='w-342 mx-24' onSubmit={submitHandler}>
         <h1 className='text-primary text-center font-heading--lg mb-16'>간편가입</h1>
         {/* Header */}
 

diff --git a/components/pages/password/password-Password.tsx b/components/pages/password/password-Password.tsx
@@ -113,8 +113,8 @@ const PasswordPassword: React.FC<PasswordPasswordProps> = ({ email }) => {
   //   event.preventDefault();
 
   return (
-    <main className='flex justify-center'>
-      <form className='w-342 mt-133 mx-24'>
+    <main className='flex justify-center pt-133'>
+      <form className='w-342 mx-24'>
         <p className='text-primary text-center font-heading--lg'>비밀번호 재설정</p>
         <div className='relative mt-24'>
           <input

diff --git a/components/pages/response/response-Complete.tsx b/components/pages/response/response-Complete.tsx
@@ -8,7 +8,7 @@ const ResponseComplete: React.FC = () => {
 
   return (
     <Layout onlyAccess='user'>
-      <main>
+      <main className='px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         <div className='mt-115 text-center'>
           <div className='flex justify-center'>
             <CompleteImg />

diff --git a/components/pages/response/response-Select.tsx b/components/pages/response/response-Select.tsx
@@ -112,7 +112,7 @@ const ResponseSelect: React.FC<SendProps> = ({ componentChangeHandler, title, co
 
   return (
     <Layout onlyAccess='user'>
-      <main className='flex justify-center'>
+      <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         <div>
           <p className='text-primary text-center font-heading--md tablet:font-heading--lg desktop:font-heading--xl'>
             편지 봉투를 선택하세요
@@ -207,7 +207,7 @@ const ResponseSelect: React.FC<SendProps> = ({ componentChangeHandler, title, co
             <button
               className='w-130 py-8 justify-center items-center border-primary rounded-10 text-tertiary bg-primary gap-4 font-label--md hover:bg-hover'
               type='button'
-              onClick={router.query.name === null ? newSendHandler : newSendGptHandler}
+              onClick={router.query.name ? newSendHandler : newSendGptHandler}
             >
               발송하기
             </button>

diff --git a/components/pages/response/response-Writing.tsx b/components/pages/response/response-Writing.tsx
@@ -32,14 +32,13 @@ type LoadType = {
   read: boolean;
 };
 
+const MAX_LENGTH_TITLE = 28; //편지 제목 글자수 제한
+const MAX_LENGTH = 3500; //편지 내용 글자수 제한
 const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, newcontents, newload, selectId }) => {
-  const MAX_LENGTH_TITLE = 28; //편지 제목 글자수 제한
-  const MAX_LENGTH = 3500; //편지 내용 글자수 제한
   const { showAlert } = useAlert();
   const router = useRouter();
   const [title, setTitle] = useState('');
   const [contents, setContents] = useState('');
-  const [inputCount, setInputCount] = useState(0);
   const [show, setShow] = useState(false);
   const [load, setLoad] = useState<LoadType>();
   const newTempMutation = useMutation(postTemp);
@@ -85,17 +84,18 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
   const handleSendButtonClick = () => {
     newtitle(title);
     newcontents(contents);
-
-    newCheckMutation.mutate(
-      { title, contents },
-      {
-        onSuccess: () => {
-          newload(load);
-          componentChangeHandler('Select');
-        },
-        onError: (err) => handlerCheckError(err as AxiosError),
-      },
-    );
+    newload(load);
+    componentChangeHandler('Select');
+    // newCheckMutation.mutate(
+    //   { title, contents },
+    //   {
+    //     onSuccess: () => {
+    //       newload(load);
+    //       componentChangeHandler('Select');
+    //     },
+    //     onError: (err) => handlerCheckError(err as AxiosError),
+    //   },
+    // );
   };
 
   //답장 임시저장 버튼
@@ -131,7 +131,6 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
     if (event.target.value.length > MAX_LENGTH) {
       event.target.value = event.target.value.slice(0, MAX_LENGTH);
     }
-    setInputCount(event.target.value.length);
     const target = event.target.value;
     setContents(target);
   };
@@ -160,7 +159,7 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
 
   return (
     <Layout onlyAccess='user'>
-      <main className='flex justify-center'>
+      <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         {newCheckMutation.isLoading ? (
           <div className='mt-160'>
             <div className='font-heading--lg text-primary'>AI가 편지 내용을 검사하고 있어요!</div>
@@ -180,7 +179,7 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
               onChange={onInputHandler}
             />
             <AutoResizableTextarea
-              className='flex items-start self-stretch w-full h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
+              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
               placeholder='편지 내용을 입력하세요.'
               minLength={1}
               maxLength={MAX_LENGTH}
@@ -190,7 +189,7 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
               style={{ minHeight: '456px' }}
             />
             <span className='float-right font-heading--sm mt-4 text-primary tablet:font-heading--md'>
-              {inputCount}자/3500자
+              {contents.length}자/3500자
             </span>
             <div className='flex justify-center items-center mt-40 w-full tablet:mt-56'>
               <button

diff --git a/components/pages/send/send-Complete.tsx b/components/pages/send/send-Complete.tsx
@@ -8,7 +8,7 @@ const SendComplete: React.FC = () => {
 
   return (
     <Layout onlyAccess='user'>
-      <main>
+      <main className='px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         <div className='mt-115 text-center'>
           <div className='flex justify-center'>
             <CompleteImg />

diff --git a/components/pages/send/send-Select.tsx b/components/pages/send/send-Select.tsx
@@ -2,12 +2,13 @@ import React, { useState } from 'react';
 import Layout from '../../layouts/layout';
 import { ComponentType } from '../../../pages/letter/new';
 import BigCheckIcon from '../../../public/icons/bigcheck.svg';
-import { useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { postSend } from '@/apis/postSend';
 import { postSendGpt } from '@/apis/postSendGpt';
 import useApiError from '@/hooks/custom/useApiError';
 import useAlert from '../../../recoil/alert/useAlert';
 import { AxiosError } from 'axios';
+import { LETTERS_QUERY_KEY } from '@/hooks/queries/useLettersQuery';
 
 type SendProps = {
   componentChangeHandler: (ComponentType: ComponentType, load?: LoadType) => void;
@@ -109,7 +110,7 @@ const SendSelect: React.FC<SendProps> = ({ componentChangeHandler, title, conten
 
   return (
     <Layout onlyAccess='user'>
-      <main className='flex justify-center'>
+      <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         <div>
           <p className='text-primary text-center font-heading--md tablet:font-heading--lg desktop:font-heading--xl'>
             편지 봉투를 선택하세요

diff --git a/components/pages/send/send-Writing.tsx b/components/pages/send/send-Writing.tsx
@@ -31,14 +31,14 @@ type LoadType = {
   read: boolean;
 };
 
+const MAX_LENGTH_TITLE = 28; //편지 제목 글자수 제한
+const MAX_LENGTH = 3500; //편지 내용 글자수 제한
+
 const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, newcontents, newload }) => {
-  const MAX_LENGTH_TITLE = 28; //편지 제목 글자수 제한
-  const MAX_LENGTH = 3500; //편지 내용 글자수 제한
   const { showAlert } = useAlert();
   const router = useRouter();
   const [title, setTitle] = useState('');
   const [contents, setContents] = useState('');
-  const [inputCount, setInputCount] = useState(0);
   const [show, setShow] = useState(false);
   const [load, setLoad] = useState<LoadType>();
   const newTempMutation = useMutation(postTemp);
@@ -84,17 +84,18 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
   const handleSendButtonClick = () => {
     newtitle(title);
     newcontents(contents);
-
-    newCheckMutation.mutate(
-      { title, contents },
-      {
-        onSuccess: () => {
-          newload(load);
-          componentChangeHandler('Select');
-        },
-        onError: (err) => handlerCheckError(err as AxiosError),
-      },
-    );
+    newload(load);
+    componentChangeHandler('Select');
+    // newCheckMutation.mutate(
+    //   { title, contents },
+    //   {
+    //     onSuccess: () => {
+    //       newload(load);
+    //       componentChangeHandler('Select');
+    //     },
+    //     onError: (err) => handlerCheckError(err as AxiosError),
+    //   },
+    // );
   };
 
   //임시저장 버튼
@@ -130,7 +131,6 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
     if (event.target.value.length > MAX_LENGTH) {
       event.target.value = event.target.value.slice(0, MAX_LENGTH);
     }
-    setInputCount(event.target.value.length);
     const target = event.target.value;
     setContents(target);
   };
@@ -159,7 +159,7 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
 
   return (
     <Layout onlyAccess='user'>
-      <main className='flex justify-center'>
+      <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         {newCheckMutation.isLoading ? (
           <div className='mt-160'>
             <div className='font-heading--lg text-primary'>AI가 편지 내용을 검사하고 있어요!</div>
@@ -179,7 +179,7 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
               onChange={onInputHandler}
             />
             <AutoResizableTextarea
-              className='flex items-start self-stretch w-full h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
+              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
               placeholder='편지 내용을 입력하세요.'
               minLength={1}
               maxLength={MAX_LENGTH}
@@ -189,7 +189,7 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
               style={{ minHeight: '456px' }}
             />
             <span className='float-right font-heading--sm mt-4 text-primary tablet:font-heading--md'>
-              {inputCount}자/3500자
+              {contents.length}자/3500자
             </span>
             <div className='flex justify-center items-center mt-40 w-full tablet:mt-56'>
               <button

diff --git a/hooks/queries/useLetterQuery.ts b/hooks/queries/useLetterQuery.ts
@@ -14,6 +14,7 @@ export default function useLetterQuery(id: number) {
     queryFn: () => withVerify(() => getLetterContent(id)),
     select: (res) => res.data.information,
     refetchOnMount: 'always',
+    staleTime: 1000 * 20,
   });
   return { letter, isLoading, isError };
 }
diff --git a/hooks/queries/useLettersQuery.ts b/hooks/queries/useLettersQuery.ts
@@ -2,6 +2,7 @@ import { LetterType, LettersResponse, getLetters } from '@/apis/getLetters';
 import { useQuery } from 'react-query';
 import { withVerify } from '@/apis/withVerify';
 
+// 우체통
 export const LETTERS_QUERY_KEY = 'lettersQuery';
 export default function useLettersQuery(type: LetterType) {
   const {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -34,7 +34,7 @@ export default function Home() {
   return (
     // <ProtectedLayout>
     <Layout>
-      <main className='flex flex-col items-center'>
+      <main className='flex flex-col items-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
         <section ref={section1} className=' bg-letter_bg w-full h-full py-8 px-4 mb-24'>
           <div className='flex flex-col items-center border-dashed border-1 border-black px-26 pt-65 pb-34'>
             <Image className='mb-64' src={'/imgs/logo2.png'} alt='logo' width={166} height={124} priority />

diff --git a/pages/letter/[id]/index.tsx b/pages/letter/[id]/index.tsx
@@ -12,12 +12,12 @@ export default function Letters() {
       {isLoading ? (
         <div></div>
       ) : (
-        <main className='flex justify-center'>
+        <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
           <div className='w-334 tablet:w-900 desktop:w-[1280px]'>
             <div className='flex items-center self-stretch w-full p-12 rounded-10 outline-none bg-letter_bg text-hover font-letter--title'>
               {letter?.title}
             </div>
-            <div className='flex items-start self-stretch w-full h-440 mt-16 py-8 px-12 rounded-10 outline-none bg-letter_bg text-hover resize-none font-letter--content'>
+            <div className='flex items-start self-stretch w-full min-h-440 mt-16 py-8 px-12 rounded-10 outline-none bg-letter_bg text-hover resize-none font-letter--content'>
               {letter?.contents}
             </div>
             <div className='float-right font-label--sm mt-8 text-primary'>