Merge pull request #151 from Make-A-Wish-Sopt/release1.0.0

Release1.0.0
Make-A-Wish-Sopt · Nov 9, 2023 · 68249b1 · 68249b1
2 parents 0075b64 + 061db20
commit 68249b1
Show file tree

Hide file tree

Showing 101 changed files with 1,441 additions and 997 deletions.
diff --git a/api/cakes/cakesAPI.ts b/api/cakes/cakesAPI.ts
@@ -2,7 +2,10 @@ import PATH from '../../constant/path';
 import { client } from '../common/axios';
 import { CakesDataType } from '@/types/cakes/cakesDataType';
 
-export const getWishesData = async (wishesNumber: number) => {
+export const getWishesData = async () => {
+  const pathname = window.location.pathname.replace('/cakes/', '');
+  const wishesNumber = pathname.replace('/wishes/', '');
+
   const data = await client.get(
     `${PATH.API}/${PATH.V1}/${PATH.PUBLIC}/${PATH.WISHES}/${wishesNumber}`,
   );
@@ -30,7 +33,7 @@ export const requestPayApprove = async (cakesData: CakesDataType | undefined) =>
   return data.data.data;
 };
 
-export const requestPayReady = async (userId: string, cakeNumber: number) => {
+export const requestPayReady = async (wishId: number, cakeNumber: number) => {
   return await client.post(
     `${PATH.API}/${PATH.V1}/${PATH.PUBLIC}/${PATH.PAY}/${PATH.READY}`,
     {
@@ -39,10 +42,9 @@ export const requestPayReady = async (userId: string, cakeNumber: number) => {
       cake: cakeNumber,
       taxFreeAmount: '200',
       vatAmount: '1',
-      approvalUrl: 'http://localhost:8080/cakes/approve',
-      // approvalUrl: 'https://sunmulzu.store/cakes/approve',
-      cancelUrl: 'https://sunmulzu.store/cakes',
-      failUrl: 'https://sunmulzu.store/cakes',
+      approvalUrl: `${process.env.NEXT_PUBLIC_KAKAOPAY_REDIRECT_URI}`,
+      cancelUrl: `https://sunmulzu.store/cakes/${wishId}`,
+      failUrl: `https://sunmulzu.store/cakes/${wishId}`,
     },
     {
       headers: {},

diff --git a/api/common/axios.ts b/api/common/axios.ts
@@ -1,6 +1,45 @@
+import PATH from '@/constant/path';
 import axios from 'axios';
 
 //서버통신 함수
 export const client = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
+
+client.interceptors.request.use(function (config: any) {
+  const token = localStorage.getItem('accessToken');
+
+  if (!token) {
+    config.headers['accessToken'] = null;
+    return config;
+  }
+
+  if (config.headers && token) {
+    config.headers['Authorization'] = `Bearer ${token}`;
+    return config;
+  }
+  return config;
+});
+
+client.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  async function (error) {
+    if (error.response) {
+      if (error.response.data.message === '유효하지 않은 토큰입니다.') {
+        alert('로그인 상태를 확인해주세요!');
+        window.location.replace('/');
+      } else if (error.response.data.message === '유효하지 않은 소원 링크입니다.') {
+        alert(error.response.data.message);
+        window.location.replace('/');
+      } else if (
+        error.response?.data?.message === '이미 진행 중인 소원 링크가 있습니다.' ||
+        error.response?.data?.message === '주간이 끝난 소원 링크입니다.'
+      ) {
+        alert(error.response?.data?.message);
+        window.location.replace('/main');
+      }
+    }
+  },
+);
diff --git a/api/mypage/mypageAPI.ts b/api/mypage/mypageAPI.ts
@@ -20,10 +20,9 @@ export const editWishesInfo = async (editWishesInfoData: EditWishesInfoDataType)
 
   const data = await client.put(
     `${PATH.API}/${PATH.V1}/${PATH.WISHES}/${PATH.PROGRESS}`,
-    { editWishesInfoData },
+    editWishesInfoData,
     {
       headers: {
-        'Content-Type': 'application/json',
         Authorization: `Bearer ${accessToken}`,
       },
     },

diff --git a/api/wishes/wishesAPI.ts b/api/wishes/wishesAPI.ts
@@ -1,9 +1,8 @@
-import { AccountInfoType } from '@/types/wishes/accountInfotype';
 import PATH from '../../constant/path';
 import { client } from '../common/axios';
-import { WishesDataType } from '@/types/wishes/wishesDataType';
 import axios from 'axios';
 import { SiteDataType } from '@/types/siteDataType';
+import { AccountInfoType, WishesDataType } from '@/types/common/input';
 
 export const createWishesLink = async (wishesData: WishesDataType) => {
   const accessToken = localStorage.getItem('accessToken');
@@ -18,7 +17,6 @@ export const createWishesLink = async (wishesData: WishesDataType) => {
       initial: wishesData.initial,
       startDate: wishesData.startDate,
       endDate: wishesData.endDate,
-      phone: wishesData.phone,
     },
     {
       headers: {
@@ -79,7 +77,6 @@ export const getItemInfo = async (link: string, siteData: SiteDataType | undefin
         },
       },
     ));
-
   return { imageTag, priceTag };
 };
 

diff --git a/components/cakes/SelectCakes.tsx b/components/cakes/SelectCakes.tsx
@@ -26,14 +26,14 @@ export default function SelectCakes(props: SelectCakesProps) {
             selectedIndex={selectedIndex}
             key={cake.name}
           >
-            <Image src={cake.cakeImage} alt={`${cake.name}이미지`} />
+            <Image src={cake.cakeImage} alt={`${cake.name}이미지`}  width={44}/>
           </Styled.CakeBox>
         ))}
       </Styled.CakeContainer>
 
       <LargeBox bgColor={theme.colors.pastel_blue}>
         <Styled.CakesImageWrapper>
-          <Image src={selectedCake.detailImage} alt="케이크 상세 이미지" />
+          <Image src={selectedCake.detailImage} alt="케이크 상세 이미지" height={150} />
         </Styled.CakesImageWrapper>
       </LargeBox>
 
@@ -64,7 +64,6 @@ const Styled = {
     align-items: center;
 
     padding: 0.8rem 1.4rem;
-    border: 0.1rem solid ${theme.colors.main_blue};
     background-color: ${(props) =>
       props.index === props.selectedIndex ? theme.colors.main_blue : theme.colors.pastel_blue};
     border-radius: 0.6rem;

diff --git a/components/cakes/index.tsx b/components/cakes/index.tsx
@@ -26,7 +26,7 @@ export default function CakesContainer() {
   const [cakesData, setCakesData] = useRecoilState<CakesDataType>(CakesData);
   const router = useRouter();
 
-  const { data, mutate, isSuccess } = useRequestPayReady(giverName, selectedCake.cakeNumber);
+  const { data, mutate, isSuccess } = useRequestPayReady(cakesData.wishId, selectedCake.cakeNumber);
 
   useEffect(() => {
     if (!router.isReady) return;
@@ -45,7 +45,6 @@ export default function CakesContainer() {
         ...prevData,
         tid: tid,
       }));
-
       router.replace(nextLink);
     }
   }, [isSuccess]);
@@ -54,74 +53,89 @@ export default function CakesContainer() {
     resetCakesData();
   }, []);
 
-  const { data: wishesData } = useQuery('wished', async () => getWishesData(cakesData.wishId), {
-    enabled: cakesData.wishId !== 0,
-  });
+  const { data: wishesData } = useQuery('wished', getWishesData);
 
-  const saveReocilData = () => {
+  const saveRecoilData = () => {
     setCakesData((prevData) => ({
       ...prevData,
       giverName: giverName,
       wishesName: wishesData?.name,
       cake: selectedIndex,
       message: letter,
       selectedCake: selectedCake,
+      wishId: Number(router.query.id),
     }));
   };
 
   const sendCake = () => {
-    saveReocilData();
+    saveRecoilData();
     selectedCake.cakeNumber === 1 ? router.push('/cakes/approve') : mutate();
   };
 
   return (
-    <>
-      <CakesHeader dayCount={wishesData?.dayCount} />
-
-      <Styled.Title>{wishesData?.title}</Styled.Title>
-
-      {/* API 데이터 */}
-      <InputContainer title={`${wishesData?.name}님이 남긴 선물에 대한 힌트`}>
-        <TextareaBox value={wishesData?.hint} readOnly={true} />
-      </InputContainer>
-
-      <InputContainer title={'본인의 실명 작성하기'}>
-        <InputBox
-          handleChangeValue={changeGiverName}
-          value={giverName}
-          placeholder="성과 이름 모두 정확하게 작성해주세요. ex. 홍길동"
+    <Styled.Container>
+      <div>
+        <CakesHeader dayCount={wishesData?.dayCount} />
+
+        <Styled.Title>{wishesData?.title}</Styled.Title>
+
+        {/* API 데이터 */}
+        <InputContainer title={`${wishesData?.name}님이 남긴 선물에 대한 힌트`}>
+          <TextareaBox value={wishesData?.hint} borderColor="transparent" readOnly={true} />
+        </InputContainer>
+
+        <InputContainer title={'본인의 실명 작성하기'}>
+          <InputBox
+            handleChangeValue={changeGiverName}
+            value={giverName}
+            placeholder="이름을 정확하게 작성해주세요. ex. 홍길동"
+          />
+        </InputContainer>
+
+        <SelectCakes
+          selectedCake={selectedCake}
+          selectedIndex={selectedIndex}
+          selectCake={selectCake}
         />
-      </InputContainer>
-
-      <SelectCakes
-        selectedCake={selectedCake}
-        selectedIndex={selectedIndex}
-        selectCake={selectCake}
-      />
-
-      <InputContainer title={'친구에게 편지 남기기'}>
-        <TextareaBox
-          handleChangeValue={changeLetter}
-          value={letter}
-          placeholder={`ex. 너 도대체 원하는 게 모야?\n나 넘 궁금해. 일단 몸보신 한우 케이크 보태겠어`}
-        ></TextareaBox>
-      </InputContainer>
-
-      <ButtonBox
-        backgroundColor={theme.colors.main_blue}
-        fontColor={theme.colors.white}
-        handleClick={sendCake}
-      >
-        케이크 보내기
-      </ButtonBox>
-    </>
+
+        <InputContainer title={'친구에게 편지 남기기'}>
+          <TextareaBox
+            handleChangeValue={changeLetter}
+            value={letter}
+            placeholder={`ex. 너 도대체 원하는 게 모야?\n나 넘 궁금해. 일단 몸보신 한우 케이크 보태겠어`}
+          ></TextareaBox>
+        </InputContainer>
+      </div>
+
+      <Styled.ButtonWrapper>
+        <ButtonBox
+          backgroundColor={theme.colors.main_blue}
+          fontColor={theme.colors.white}
+          handleClick={sendCake}
+        >
+          케이크 보내기
+        </ButtonBox>
+      </Styled.ButtonWrapper>
+    </Styled.Container>
   );
 }
 
 const Styled = {
+  Container: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    height: 100svh;
+  `,
+
   Title: styled.h1`
     ${theme.fonts.headline24_100};
     color: ${theme.colors.main_blue};
     margin: 2.4rem 0 3rem;
   `,
+
+  ButtonWrapper: styled.div`
+    padding-bottom: 4.6rem;
+  `,
 };
diff --git a/components/common/box/BasicBox.tsx b/components/common/box/BasicBox.tsx
@@ -29,10 +29,10 @@ const Styled = {
     display: flex;
     align-items: center;
 
-    width: 33.1rem;
+    width: 100%;
     height: 5rem;
 
-    padding: 1.2rem 1rem 1.2rem 1.2rem;
+    padding: 1rem 1rem 1rem 1.2rem;
 
     border: 0.1rem solid
       ${(props) => (props.borderColor ? props.borderColor : theme.colors.main_blue)};