Merge pull request #67 from TUK-MoreView/feat/project-management

Feat/project management

src/App.jsx

@@ -13,6 +13,8 @@ import LoadingModal from './components/Modal/LoadingModal';
 import CreateObjectModal from './components/Modal/CreateObjectModal';
 import SearchObjectModal from './components/Modal/SearchObjectModal';
 import ControllerObjectModal from './components/Modal/ControllerObjectModal';
+import CreateProjectModal from './components/Modal/CreateProjectModal';
+import LoginModal from './components/Modal/LoginModal';
 
 function App() {
   return (
@@ -25,15 +27,17 @@ function App() {
         <BrowserRouter>
           <SideMenu />
           <LoadingModal />
+          <CreateProjectModal />
           <CreateObjectModal />
           <SearchObjectModal />
           <ControllerObjectModal />
+          <LoginModal />
           <Routes>
-            <Route path="/" element={<MyPage />} />
+            <Route path="/" element={<LoginPage />} />
+            <Route path="/list" element={<MyPage />} />
             <Route path="/About" element={<MyPage />} />
             <Route path="/Edit/:EditId" element={<EditPage />} />
             <Route path="/Projects" element={<ItemPage />} />
-            <Route path="/login" element={<LoginPage />} />
           </Routes>
         </BrowserRouter>
       </RecoilRoot>

src/apis/Project/ProjectController.js

@@ -0,0 +1,46 @@
+import basicApi from '..';
+
+export const getProjectList = async (memberId) => {
+  try {
+    const response = await basicApi.get(`api/project/${memberId}`);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const postFile = async (file) => {
+  const formData = FormData();
+  formData.append('file', file);
+  try {
+    const response = await basicApi.post(`file`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const postProject = async (title, file) => {
+  try {
+    const data = {
+      name: title,
+      thumbnailUrl: file,
+      memberId: 8,
+    };
+    const response = await basicApi.post('api/project', data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

src/apis/User/LoginController.js

@@ -1,15 +1,36 @@
 import basicApi from '../index';
 
-export const loginController = async () => {
+export const loginController = async (email, password) => {
   try {
-    const response = await basicApi.post('/posts');
+    const response = await basicApi.post(
+      'api/login',
+      {
+        email,
+        password,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
     return response.data;
   } catch (error) {
     console.error('Error fetching posts:', error);
     throw error;
   }
 };
 
+export const signUp = async () => {
+  try {
+    const response = await basicApi.get(`/api/sign-in`);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
 export const userData = async () => {
   try {
     const response = await basicApi.get('/get');

src/components/LoginPage/LoginFormContainer.jsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import SubmitBtn from './atom/SubmitBtn';
+
+function LoginFormContainer({
+  email,
+  password,
+  setEmail,
+  setPassword,
+  LoginHandle,
+}) {
+  return (
+    <Container>
+      <InputBox
+        placeholder="이메일"
+        type="id"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+      />
+      <InputBox
+        placeholder="비밀번호"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+      />
+      <SubmitBtn type="submit" onClick={LoginHandle} />
+    </Container>
+  );
+}
+
+export default LoginFormContainer;
+
+const Container = styled.form`
+  width: 308px;
+  height: 221px;
+  margin-top: 52px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const InputBox = styled.input`
+  width: 308px;
+  height: 48px;
+  padding: 0 18px;
+  border: 1px solid #6b7684;
+  border-radius: 8px;
+`;

src/components/LoginPage/atom/SubmitBtn.jsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+function SubmitBtn({ type, onClick }) {
+  return (
+    <SubmitButton type={type} onClick={onClick}>
+      로그인
+    </SubmitButton>
+  );
+}
+
+export default SubmitBtn;
+
+const SubmitButton = styled.button`
+  width: 308px;
+  height: 48px;
+  background-color: #3182f6;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  &:hover {
+    background-color: #1b64da;
+  }
+`;

src/components/Modal/CreateProjectModal.jsx

@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+import { useRecoilState } from 'recoil';
+import { useState } from 'react';
+import CancelBtn from './atom/CancelBtn';
+import { CreateProjectModalState } from '../../store/modalState';
+import { postFile, postProject } from '../../apis/Project/ProjectController';
+
+function CreateProjectModal() {
+  const [modalValue, setModalValue] = useRecoilState(CreateProjectModalState);
+  const [title, setTitle] = useState('');
+  const [file, setFile] = useState(null);
+
+  if (!modalValue) {
+    return null;
+  }
+
+  const CancelHandler = () => {
+    setModalValue(false);
+  };
+
+  const handleSummit = async () => {
+    if (file) {
+      try {
+        const fileUrl = await postFile(file);
+        await postProject(title, fileUrl);
+        setTitle('');
+        setFile(null);
+        setModalValue(false);
+      } catch (error) {
+        console.error(error);
+      }
+    } else {
+      console.warn('No file selected');
+    }
+  };
+
+  return (
+    <ModalBackdrop>
+      <ModalBox>
+        <CancelPostion>
+          <CancelBtn CancelHandler={CancelHandler} />
+        </CancelPostion>
+        <MainTitle>프로젝트 만들기</MainTitle>
+        <input
+          placeholder="이름을 지어주세요"
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <input
+          id="thumbnail"
+          type="file"
+          onChange={(e) => setFile(e.target.files[0])} // 파일 선택 처리
+        />
+        <button type="button" onClick={handleSummit}>
+          생성
+        </button>
+      </ModalBox>
+    </ModalBackdrop>
+  );
+}
+
+export default CreateProjectModal;
+
+const ModalBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+`;
+
+const ModalBox = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 22.5vw;
+  height: 56.388888888888886vh;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 1.04vw;
+`;
+
+const CancelPostion = styled.div`
+  position: absolute;
+  top: 1vw;
+  right: 1vw;
+`;
+
+const MainTitle = styled.p`
+  font-size: 1.2vw;
+`;