Merge remote-tracking branch 'upstream/main' into vercel

9oormthon-univ · Mar 22, 2024 · 05efee2 · 05efee2
2 parents 643a9cd + 4bfc6c1
commit 05efee2
Show file tree

Hide file tree

Showing 14 changed files with 141 additions and 76 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
         "classnames": "^2.5.1",
         "dayjs": "^1.11.10",
         "immer": "^10.0.4",
+        "js-cookie": "^3.0.5",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-date-range": "^2.0.0-alpha.4",

diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,9 @@ import store from './redux/store.js';
 import MobileWrapper from './MobileWrapper.jsx';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import routes from './routes.jsx';
+import { useEffect } from 'react';
+import Cookies from 'js-cookie';
+import { login } from './redux/userSlice.js';
 
 const Container = styled.div`
     height: 100%;
@@ -14,6 +17,17 @@ function App() {
         <Route key={index} path={item.path} element={item.element} />
     ));
 
+    useEffect(() => {
+        const accessToken = Cookies.get('accessToken');
+        const id = Cookies.get('id');
+
+        console.log(accessToken);
+
+        if (accessToken && id) {
+            store.dispatch(login({ accessToken, id }));
+        }
+    }, []);
+
     return (
         <Provider store={store}>
             <Container>

diff --git a/src/MobileWrapper.jsx b/src/MobileWrapper.jsx
@@ -177,11 +177,11 @@ const MobileWrapper = ({}) => {
                 <Outlet />
             </Content>
             <Footer className={classNames({ hidden: !showFooter })}>
-                <FooterButton to="/">이츠밥약</FooterButton>
+                <FooterButton to="/">이츠타임?</FooterButton>
                 <FooterRiceButton to="/">
                     <ButtonImage src={RiceBalloonButton} />
                 </FooterRiceButton>
-                <FooterButton to="/">마이페이지</FooterButton>
+                <FooterButton to="/logout">로그아웃</FooterButton>
             </Footer>
         </Container>
     );

diff --git a/src/api/event.js b/src/api/event.js
@@ -95,7 +95,7 @@ export async function getEvent(request) {
                 id: 10,
             },
         ],
-        userRole: 'member',
+        userRole: 'owner',
     };
 }
 

diff --git a/src/api/user.js b/src/api/user.js
@@ -5,12 +5,17 @@ export async function postLogin(request) {
     // const axios = getAxiosInstance();
 
     // const bodyData = {
-    //     id: request.id,
+    //     username: request.id,
     //     password: request.password,
     // };
 
     // const response = await axios.post('/login', bodyData);
-    // return response.data;
+
+    // const data = {
+    //     accessToken: response.headers.getAuthorization().split(' ')[1],
+    // };
+
+    // return data;
 
     if (request.id !== 'admin') {
         throw new Error('아이디 오류');
@@ -21,8 +26,7 @@ export async function postLogin(request) {
     }
 
     return {
-        access_token: '1111',
-        refresh_token: '1111',
+        accessToken: '1111',
     };
 }
 
@@ -31,14 +35,12 @@ export async function postRegister(request) {
     // const axios = getAxiosInstance();
 
     // const bodyData = {
-    //     name: request.name,
-    //     id: request.id,
+    //     nickname: request.name,
+    //     username: request.id,
     //     password: request.password,
-    //     email: request.email,
-    //     emailCode: request.emailCode,
     // };
 
-    // const response = await axios.post('/register', bodyData);
+    // const response = await axios.post('/api/v1/signup', bodyData);
     // return response.data;
 
     return {
@@ -51,31 +53,48 @@ export async function postEmailVerification(request) {
 
     // const bodyData = {
     //     email: request.email,
+    //     univName: request.organization,
     // };
 
-    // const response = await axios.post('/emailVerification', bodyData);
+    // const response = await axios.post('/api/v1/verification', bodyData);
     // return response.data;
 
     return {
-        status: 200,
+        success: true,
     };
 }
 export async function postEmailConfirmation(request) {
     // const axios = getAxiosInstance();
 
     // const bodyData = {
     //     email: request.email,
+    //     univName: request.organization,
     //     code: request.code,
     // };
 
-    // const response = await axios.post('/emailConfirmation', bodyData);
-    // return response.data;
+    // const response = await axios.post('/api/v1/verificationCode', bodyData);
+
+    // const data = {
+    //     success: response.data.success,
+    //     email: response.data.certified_email,
+    //     organization: response.data.univName,
+    //     date: response.data.certified_date,
+    // };
+
+    // return data;
 
     if (request.code !== '1111') {
-        throw new Error('코드가 다름');
+        throw new Error({
+            status: 400,
+            success: false,
+            message: '인증 코드 오류',
+        });
     }
 
     return {
-        status: 200,
+        success: true,
+        certified_email: request.email,
+        univName: '서울대학교',
+        certified_date: '2023-01-03T09:30:22',
     };
 }
diff --git a/src/components/PaymentAccordion.jsx b/src/components/PaymentAccordion.jsx
@@ -21,6 +21,10 @@ const Container = styled.div`
     &:hover {
         background-color: #0000000f;
     }
+
+    &.hidden {
+        display: none;
+    }
 `;
 
 const Icon = styled.div`
@@ -90,6 +94,7 @@ const PaymentAccordion = ({
     children,
     value,
     onChange,
+    hidden,
     ...props
 }) => {
     const [isTransition, setIsTransition] = useState(false);
@@ -129,7 +134,11 @@ const PaymentAccordion = ({
 
     return (
         <>
-            <Container onClick={onClick} {...props}>
+            <Container
+                onClick={onClick}
+                {...props}
+                className={classNames({ hidden })}
+            >
                 <Icon>{icon}</Icon>
                 <Text>{text}</Text>
                 <Input>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -77,6 +77,7 @@ const RegisterText = styled.p`
 
 const Login = ({}) => {
     const navigate = useNavigate();
+    const dispatch = useDispatch();
     const [fieldHidden, setFieldHidden] = useState(true);
     const [errorText, setErrorText] = useState('');
 
@@ -99,22 +100,19 @@ const Login = ({}) => {
         try {
             response = await postLogin({ id, password });
         } catch (e) {
-            alert('비밀번호나 아이디가 틀립니다\nid: admin pw: 1111');
             setErrorText('비밀번호가 틀렸습니다');
             return;
         }
 
+        dispatch(
+            login({
+                accessToken: response.accessToken,
+                id,
+            })
+        );
+
         alert(`${id}님 환영합니다!`);
-        setErrorText('');
         navigate('/');
-
-        // dispatch(
-        //     login({
-        //         access_token: 'token111',
-        //         refresh_token: 'token222',
-        //         name: '이츠타임',
-        //     })
-        // );
     }
 
     return (
@@ -134,7 +132,10 @@ const Login = ({}) => {
                 />
                 <TextInput
                     value={password}
-                    onInput={(event) => setPassword(event.target.value)}
+                    onInput={(event) => {
+                        setPassword(event.target.value);
+                        setErrorText('');
+                    }}
                     placeholder="비밀번호를 입력해주세요"
                     additionalItem={
                         <PasswordEyeButton

diff --git a/src/pages/Logout.jsx b/src/pages/Logout.jsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../redux/userSlice.js';
+
+const Logout = ({}) => {
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        dispatch(logout());
+        navigate('/login');
+    });
+
+    return <></>;
+};
+
+export default Logout;
diff --git a/src/pages/ScheduledEvent.jsx b/src/pages/ScheduledEvent.jsx
@@ -17,6 +17,7 @@ import PaymentAccordion from '../components/PaymentAccordion.jsx';
 import { getEvent, postFinishEvent } from '../api/event.js';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
+import classNames from 'classnames';
 
 const Container = styled.div`
     padding: 0 24px;
@@ -128,6 +129,10 @@ const MemberContainer = styled.div`
 
 const Button = styled(BlockButton)`
     margin-top: 24px;
+
+    &.hidden {
+        display: none;
+    }
 `;
 
 const TextInput = styled(_TextInput)`
@@ -273,6 +278,7 @@ const ScheduledEvent = ({}) => {
                     icon={<BsQuestionCircleFill />}
                     text="송금 정보를 제공할까요?"
                     value={showPayment}
+                    hidden={userRole === 'member'}
                     onChange={(value) => setShowPayment(value)}
                 >
                     <ContentHeader icon={<BsTagsFill />} text="송금 메모" />
@@ -300,7 +306,11 @@ const ScheduledEvent = ({}) => {
                         onInput={onInput(setAccountNumber)}
                     />
                 </PaymentAccordion>
-                <Button text="밥약 종료" onClick={onSubmit} />
+                <Button
+                    text="밥약 종료"
+                    onClick={onSubmit}
+                    className={classNames({ hidden: userRole === 'member' })}
+                />
             </Wrapper>
         </Container>
     );

diff --git a/src/pages/Sitemap.jsx b/src/pages/Sitemap.jsx
@@ -17,6 +17,7 @@ const Sitemap = ({}) => {
         .filter((route) => route.name)
         .map((route) => (
             <BlockButton
+                key={route.path}
                 text={route.name}
                 onClick={() => {
                     navigate(route.path);