Feat: 알파용 작업 완료

Author: lsy1307

src/App.jsx

@@ -10,8 +10,24 @@ import RegistProject from './pages/Request/RegistProject';
 import RequestHome from './pages/Request/RequestHome';
 import RequestDetail from './pages/Request/RequestDetail';
 import Callback from './auth/Callback';
+import useStore from './zustand/Store';
 
 function App() {
+  const { setIsLogin } = useStore();
+
+  useEffect(() => {
+    const checkLoginStatus = () => {
+      const token = localStorage.getItem('accessToken');
+      setIsLogin(!!token);
+    };
+
+    checkLoginStatus();
+    window.addEventListener('storage', checkLoginStatus);
+
+    return () => {
+      window.removeEventListener('storage', checkLoginStatus);
+    };
+  }, []);
   return (
     <BrowserRouter>
       <Routes>

src/api/file.js

@@ -0,0 +1,17 @@
+import { PostAxiosInstance } from '../axios/AxiosMethod';
+
+export const uploadFiles = async (file, filepath) => {
+  const formData = new FormData();
+  formData.append('multipartFiles', file);
+  formData.append('filePath', filepath);
+  try {
+    const res = await PostAxiosInstance(
+      '/api/files',
+      { 'Content-Type': 'multipart/formdata' },
+      formData,
+    );
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/api/oauth.js

@@ -42,7 +42,6 @@ export const getToken = async () => {
     });
     localStorage.setItem('accessToken', res.data.access_token);
     localStorage.setItem('refreshToken', res.data.refresh_token);
-    console.log(res);
   } catch (error) {
     console.error(error);
   }
@@ -99,31 +98,21 @@ export const checkIsRegisted = async () => {
   }
 };
 
-export const registClientGroup = async ({
-  clientType,
-  groupName,
+export const registClient = async ({
+  nickName,
+  businessName,
+  businessLogo,
   managerName,
   managerPhone,
 }) => {
   try {
-    const res = await PostAxiosInstance('/api/user/group', {
-      clientType,
-      groupName,
-      managerName,
-      managerPhone,
-    });
-    return res;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-export const registClientIndividual = async ({ name, phone }) => {
-  try {
-    const res = await PostAxiosInstance('/api/user/individual', {
-      name: name,
-      phone: phone,
-    });
+    const formData = new FormData();
+    formData.append('nickName', nickName);
+    formData.append('businessName', businessName);
+    formData.append('businessLogo', businessLogo);
+    formData.append('managerName', managerName);
+    formData.append('managerPhone', managerPhone);
+    const res = await PostAxiosInstance('/api/epic/businesses', formData);
     return res;
   } catch (e) {
     console.error(e);

src/assets/svgs/filter_icon.svg

@@ -8,9 +8,9 @@ export const CustomButton = styled.button`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: ${(props) => props.bgcolor || '#1B75D0'};
+  background-color: ${(props) => props.bgcolor || '#393939'};
   color: ${(props) => props.fontcolor || '#fff'};
-  border-color: ${(props) => props.bordercolor || '#1B75D0'};
+  border-color: ${(props) => props.bordercolor || '#393939'};
   text-align: center;
   font-size: 0.8125rem;
   font-style: normal;

src/components/common/Button/style.js

@@ -60,8 +60,8 @@ export const FilterButton = styled.button`
   align-items: flex-end;
   text-align: center;
   border-radius: 0.375rem;
-  border: 1px solid #1b75d0;
-  color: #1b75d0;
+  border: 1px solid #393939;
+  color: #393939;
   text-align: center;
   font-family: 'Segoe UI';
   font-size: 0.75rem;

src/components/common/Filter/Buttons/style.js

@@ -9,10 +9,17 @@ const InputText = (props) => {
     let value = e.target.value;
 
     if (props.type === 'number') {
-      if (value === '') {
-        setProjectInfo({ [props.keyName]: '' });
-      } else if (/^\d*$/.test(value)) {
-        setProjectInfo({ [props.keyName]: parseInt(value) });
+      const unformattedValue = value.replace(/,/g, '');
+      if (/^\d*$/.test(unformattedValue)) {
+        setProjectInfo({
+          [props.keyName]: unformattedValue ? parseInt(unformattedValue) : '',
+        });
+
+        const formattedValue = unformattedValue.replace(
+          /\B(?=(\d{3})+(?!\d))/g,
+          ',',
+        );
+        e.target.value = formattedValue;
       }
     } else if (props.type === 'date') {
       value = value.replace(/-/g, '');
@@ -50,7 +57,13 @@ const InputText = (props) => {
       ) : (
         <InputContainer
           type="text"
-          value={projectInfo[props.keyName]}
+          value={
+            props.type === 'number'
+              ? projectInfo[props.keyName]
+                  ?.toString()
+                  .replace(/\B(?=(\d{3})+(?!\d))/g, ',') || ''
+              : projectInfo[props.keyName]
+          }
           onChange={handleChange}
           placeholder={props.placeHolder}
           height={props.height}

src/components/common/InputText/InputText.jsx

@@ -4,33 +4,38 @@ import styled from 'styled-components';
 export const InputContainer = styled.input`
   width: ${(props) => (props.width ? props.width : 100)}%;
   height: ${(props) => (props.height ? props.height : 1.875)}rem;
-  border-radius: 0.125rem;
-  border: 1px solid #1b75d0;
+  border-radius: 0.3125rem;
+  border: 3px solid #393939;
   padding-left: 0.5rem;
-  color: #000;
-  font-family: 'Noto Sans KR';
-  font-size: 0.813rem;
+  color: #393939;
+  font-family: Pretendard;
+  font-size: 0.8125rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 0.9375rem;
-  line-height: 3rem;
+  &::placeholder {
+    color: #cecece;
+  }
 `;
 
 export const TextArea = styled.textarea`
   width: 100%;
   height: 15rem;
   resize: none;
-  border-radius: 0.125rem;
-  border: 1px solid #1b75d0;
+  border-radius: 0.3125rem;
+  border: 3px solid #393939;
   padding-top: 0.3rem;
   padding-left: 0.5rem;
-  color: #000;
-  font-family: 'Noto Sans KR';
-  font-size: 0.813rem;
+  color: #393939;
+  font-family: Pretendard;
+  font-size: 0.8125rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 0.9375rem;
   &:focus {
     outline: none;
   }
+  &::placeholder {
+    color: #cecece;
+  }
 `;

src/components/common/InputText/style.js

@@ -10,9 +10,9 @@ export const LabelStyle = styled.div`
   background: #f1f2f3;
   color: #000;
   text-align: center;
-  font-family: 'Noto Sans KR';
+  font-family: Pretendard;
   font-size: 0.75rem;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 800;
   line-height: 1.38438rem; /* 184.583% */
 `;

src/components/common/Label/style.js

@@ -17,7 +17,7 @@ export const Container = styled.div`
   line-height: 0.9375rem;
   text-align: ${(props) => (props.isTextBox ? 'left' : 'right')};
   border-radius: 0.125rem;
-  border: 1px solid #1b75d0;
+  border: 1px solid #393939;
   overflow-wrap: break-word;
   word-break: break-word;
   white-space: normal;