Merge pull request #52 from PortalCube/dev-portalcube

feat: API 명세에 맞추어 페이지를 수정한다.

.env

@@ -3,5 +3,8 @@
 
 # !!! 중요: ".env.local" 파일이 아닌 ".env" 파일에 비밀번호 같은 중요 정보를 적고 커밋하지 마세요 !!!
 
+# 프론트엔드 서비스의 URL을 입력합니다.
+VITE_SERVICE_URL=http://localhost:5173/
+
 # 백엔드 서비스의 URL을 입력합니다.
 VITE_API_URL=http://127.0.0.1/

src/App.jsx

@@ -19,10 +19,11 @@ function App() {
 
     useEffect(() => {
         const accessToken = Cookies.get('accessToken');
+        const email = Cookies.get('email');
         const id = Cookies.get('id');
 
         if (accessToken && id) {
-            store.dispatch(login({ accessToken, id }));
+            store.dispatch(login({ accessToken, id, email }));
         }
     }, []);
 

src/MobileWrapper.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import routes from './routes.jsx';
 import { IoIosArrowBack } from 'react-icons/io';
 
-import ServiceLogoImage from './assets/images/service_logo.svg';
+import ServiceLogoImage from './assets/images/service_logo.png';
 import ServiceLogoCompactImage from './assets/images/rice_balloon_no_tail.svg';
 import RiceBalloonButton from './assets/images/rice_balloon_button.svg';
 import { useState, useEffect } from 'react';
@@ -183,7 +183,7 @@ const MobileWrapper = ({}) => {
             </Content>
             <Footer className={classNames({ hidden: !showFooter })}>
                 <FooterButton to="/">이츠타임?</FooterButton>
-                <FooterRiceButton to="/">
+                <FooterRiceButton to="/event/create">
                     <ButtonImage src={RiceBalloonButton} />
                 </FooterRiceButton>
                 <FooterButton to="/logout">로그아웃</FooterButton>

src/api/event.js

@@ -1,3 +1,5 @@
+import { getAxiosInstance } from './axios.js';
+
 export async function createEvent(request) {
     // const axios = getAxiosInstance();
 
@@ -12,10 +14,29 @@ export async function createEvent(request) {
     // };
 
     // const response = await axios.post('/api/v1/promises', bodyData);
-    // return response.data;
+
+    // const data = {
+    //     eventId: response.data,
+    // };
+
+    // return data;
 
     return {
-        url: 'https://example.com',
+        eventId: 100,
+    };
+}
+
+export async function createEventUrl(request) {
+    // const axios = getAxiosInstance(request.token);
+
+    // const response = await axios.post(
+    //     `/api/v1/promises/${request.eventId}/link`
+    // );
+
+    // return { uuid: response.data.uuid };
+
+    return {
+        uuid: '85e61cd0-59e2-44e6-b89c-79ddc248ae9c',
     };
 }
 
@@ -40,11 +61,10 @@ export async function getEvent(request) {
     //         name: item.memberName,
     //         id: item.memberId,
     //     })),
+    //     memo: response.data.memo,
     //     userRole: response.data.userRole,
     // };
 
-    // 메모 누락
-
     // return data;
 
     return {
@@ -80,6 +100,49 @@ export async function getEvent(request) {
     };
 }
 
+export async function getPaymentInfo(request) {
+    // const axios = getAxiosInstance(request.token);
+
+    // const response = await axios.get(
+    //     `/api/v1/promises/${request.eventId}/payment`
+    // );
+
+    // const data = {
+    //     paymentMemo: response.data.payMemo,
+    //     paymentLink: response.data.kakaopayLink,
+    //     accountNumber: response.data.bankAccount,
+    // };
+
+    // 백엔드 미구현 상태
+
+    // return data;
+
+    return {
+        paymentMemo:
+            '테스트님 10000원 테스트2님 50000원 테스트3님 100000000원 테스트4님 0원 부탁드립니다',
+        paymentLink: 'https://example.com/kakaopay/1234567890',
+        accountNumber: '신한은행 110-000000-000000 김경재',
+    };
+}
+
+export async function postEnterEvent(request) {
+    // const axios = getAxiosInstance(request.token);
+
+    // const response = await axios.post(
+    //     `/api/v1/members/${request.userId}/promises/${request.uuid}`
+    // );
+
+    // const data = {
+    //     eventId: response.data,
+    // };
+
+    // return data;
+
+    return {
+        eventId: 100,
+    };
+}
+
 export async function postConfirmEvent(request) {
     // const axios = getAxiosInstance(request.token);
 

src/api/user.js

@@ -9,10 +9,13 @@ export async function postLogin(request) {
     //     password: request.password,
     // };
 
-    // const response = await axios.post('/login', bodyData);
+    // const response = await axios.post('/api/v1/login', bodyData);
 
     // const data = {
     //     accessToken: response.headers.getAuthorization().split(' ')[1],
+    //     userId: response.data.id,
+    //     email: response.data.username,
+    //     name: response.data.nickname,
     // };
 
     // return data;
@@ -27,6 +30,29 @@ export async function postLogin(request) {
 
     return {
         accessToken: '1111',
+        userId: 1,
+        email: 'test@example.com',
+        name: '테스트',
+    };
+}
+
+export async function getMember(request) {
+    // const axios = getAxiosInstance(request.token);
+
+    // const response = await axios.get('/api/v1/members/{member_id}');
+
+    // const data = {
+    //     userId: response.data.id,
+    //     email: response.data.username,
+    //     name: response.data.nickname,
+    // };
+
+    // return data;
+
+    return {
+        userId: 1,
+        email: 'test@example.com',
+        name: '테스트',
     };
 }
 
@@ -93,8 +119,8 @@ export async function postEmailConfirmation(request) {
 
     return {
         success: true,
-        certified_email: request.email,
-        univName: '서울대학교',
-        certified_date: '2023-01-03T09:30:22',
+        email: request.email,
+        organization: request.organization,
+        date: '2023-01-03T09:30:22',
     };
 }

src/components/TextButton.jsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+    width: 100%;
+    height: 50px;
+    border-radius: 8px;
+    padding: 17px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    color: #d64949;
+    background-color: #fff6f6;
+
+    /* &:hover {
+        background-color: #ffdede;
+    } */
+`;
+
+const Input = styled.input`
+    border: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+
+    background-color: #fff6f6;
+`;
+
+const Item = styled.div``;
+
+const TextButton = ({ value, onClick, additionalItem, ...props }) => {
+    return (
+        <Container {...props}>
+            <Input onClick={onClick} value={value} />
+            <Item>{additionalItem}</Item>
+        </Container>
+    );
+};
+
+export default TextButton;

src/pages/CreateEvent.jsx

@@ -9,7 +9,7 @@ import { IoMdCreate, IoMdPin } from 'react-icons/io';
 import TextInput from '../components/TextInput.jsx';
 import BlockButton from '../components/BlockButton.jsx';
 import dayjs from 'dayjs';
-import { createEvent } from '../api/event.js';
+import { createEvent, createEventUrl } from '../api/event.js';
 import { useNavigate } from 'react-router-dom';
 
 const Container = styled.div`
@@ -65,11 +65,21 @@ const CreateEvent = ({}) => {
                 memo,
             });
         } catch (e) {
-            alert('밥약 만들기에 실패했습니다');
+            alert('밥약 만들기에 실패했습니다.');
             return;
         }
 
-        navigate(`/sharebab?url=${response.url}`);
+        try {
+            response = await createEventUrl({
+                token: '',
+                eventId: response.eventId,
+            });
+        } catch (e) {
+            alert('밥약 링크 만들기에 실패했습니다.');
+            return;
+        }
+
+        navigate(`/event/create/result?uuid=${response.uuid}`);
     };
 
     return (