[Feat] 서버와 연결

Skhuthon · Jun 29, 2024 · 00b43bb · 00b43bb
1 parent 4d5dfd1
commit 00b43bb
Show file tree

Hide file tree

Showing 30 changed files with 343 additions and 426 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="upgrade-insecure-requests"
-    />
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { styled } from "styled-components";
+
+interface Props {
+  title: string;
+  onClick: () => void;
+}
+const List = ({ title, onClick }: Props) => {
+  return (
+    <>
+      <ListDiv onClick={onClick}>
+        <StyledH3>{title}</StyledH3>
+      </ListDiv>
+    </>
+  );
+};
+
+export default List;
+
+export const ListDiv = styled.div`
+  width: 100%;
+  height: 100px;
+  border-bottom: ${({ theme }) => theme.boxBorder.bookBorder};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledH3 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30pt;
+`;
diff --git a/src/components/common/FriendBook/FriendBook.stories.tsx b/src/components/common/FriendBook/FriendBook.stories.tsx
@@ -19,7 +19,6 @@ export const Default = () => {
   return (
     <div style={{ width: "300px", height: "500px" }}>
       <FriendBook
-        friendId={0}
         title="지영과 수경의 교환일기"
         onClick={() => alert("눌렸습니다")}
       ></FriendBook>

diff --git a/src/components/common/FriendBook/FriendBook.styled.ts b/src/components/common/FriendBook/FriendBook.styled.ts
@@ -1,20 +1,21 @@
 import styled from "styled-components";
 
 export const FriendDiv = styled.div`
-  width: 60%;
+  width: 100%;
   height: 200px;
   background-color: white;
   border: 1px solid #eaeaea;
   box-shadow: ${({ theme }) => theme.boxShadow.bookShadow};
   border-radius: 4px;
   display: flex;
-  justify-content: center;
+  position: relative;
   align-items: center;
+  cursor: pointer;
 `;
 
 export const FriendLCoverDiv = styled.div`
   width: 30%;
-  height: 200px;
+  height: 100%;
   background-color: ${({ theme }) => theme.color.point};
   border-radius: 4px;
   display: flax;
@@ -27,9 +28,11 @@ export const FriendRCoverDiv = styled.div`
   height: 20px;
   background-color: ${({ theme }) => theme.color.point};
   border-radius: 4px;
-  display: flax;
+  display: flex;
   flex-direction: center;
   align-items: center;
+  position: absolute;
+  right: 0;
 `;
 
 export const FriendTextDiv = styled.div`

diff --git a/src/components/common/FriendBook/index.tsx b/src/components/common/FriendBook/index.tsx
@@ -1,12 +1,9 @@
-import React from "react";
-import styled from "styled-components";
 import * as S from "./FriendBook.styled";
 export interface Props {
-  friendId: number;
   title: string;
   onClick: () => void;
 }
-const FriendBook = ({ friendId, title, onClick }: Props) => {
+const FriendBook = ({ title, onClick }: Props) => {
   return (
     <S.FriendDiv onClick={onClick}>
       <S.FriendLCoverDiv></S.FriendLCoverDiv>

diff --git a/src/components/common/Input/Input/Input.styled.ts b/src/components/common/Input/Input/Input.styled.ts
@@ -30,6 +30,10 @@ export const InputArea = styled.input<{ inputWidth: string }>`
   border: none;
   outline: none;
   font-size: ${({ theme }) => theme.fontSize.large};
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.color.background};
+  }
 `;
 
 export const InputLabel = styled.span<{

diff --git a/src/components/common/Input/TextArea/TextArea.styled.ts b/src/components/common/Input/TextArea/TextArea.styled.ts
@@ -7,6 +7,10 @@ export const TextArea = styled.textarea<{ inputWidth: string }>`
   font-size: ${({ theme }) => theme.fontSize.large};
   resize: none;
   height: 100%;
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.color.background};
+  }
 `;
 
 export const InputLabel = styled.span<{

diff --git a/src/hooks/api/auth/usePostLogin.ts b/src/hooks/api/auth/usePostLogin.ts
@@ -1,5 +1,6 @@
 import { useToast } from "@/hooks/useToast";
 import { instance, post } from "@/libs/api";
+import { queryClient } from "@/libs/queryClient";
 import { UserState } from "@/store";
 
 import { LoginRequest, LoginResponse } from "@/types/user";
@@ -26,8 +27,8 @@ export const useLogin = () => {
     mutationFn: (params: LoginRequest) => postLogin(params),
 
     onSuccess: ({ res }) => {
-      console.log("res", res);
       toastOpen("환영합니다");
+      queryClient.clear();
       setTimeout(() => {
         setUser(res.data);
         // 토큰 저장

diff --git a/src/hooks/api/auth/usePostSignUp.ts b/src/hooks/api/auth/usePostSignUp.ts
@@ -19,7 +19,7 @@ export const useSignUp = () => {
 
     onSuccess: ({ res }) => {
       console.log("res", res);
-      toastOpen("생성되었습니다");
+      toastOpen("가입되었습니다.");
 
       setTimeout(() => {
         navigate("/auth/login", {

diff --git a/src/hooks/api/diary/useGetListByFriendId.ts b/src/hooks/api/diary/useGetListByFriendId.ts
@@ -0,0 +1,20 @@
+import { get } from "@/libs/api";
+import { DiaryContent } from "@/types/diary";
+import { queryKeys } from "@/utils/constants";
+import { useQuery } from "@tanstack/react-query";
+
+const getDiaryByFriendId = async (friendId: number) => {
+  const res = await get<{ data: DiaryContent[] }>(
+    `/apis/v1/diary/read/friend/${friendId}?page=100&size=100`
+  );
+
+  return { data: res.data };
+};
+export const useGetListByFriendId = (friendId: number) => {
+  const { data } = useQuery({
+    queryFn: () => getDiaryByFriendId(friendId),
+    queryKey: [queryKeys.diaryList, friendId],
+  });
+
+  return { data };
+};
diff --git a/src/hooks/api/diary/useSubmitDiary.ts b/src/hooks/api/diary/useSubmitDiary.ts
@@ -0,0 +1,42 @@
+import useCurrentUser from "@/hooks/useAuth";
+import { useToast } from "@/hooks/useToast";
+import { post } from "@/libs/api";
+import { queryClient } from "@/libs/queryClient";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+interface ISubmitDiary {
+  title: string;
+  content: string;
+  sing: "";
+  friendId: number;
+}
+const submitDiary = async (id: number, params: ISubmitDiary) => {
+  const res = await post(`/apis/v1/diary/create?id=${id}`, params);
+  console.log("res");
+  return { res }; // 성공적인 경우 데이터 반환
+};
+
+export const useSubmitDiary = () => {
+  const { toastOpen, toastClose, toastMessage } = useToast();
+  const navigate = useNavigate();
+  const { currentUser } = useCurrentUser();
+
+  const { mutate } = useMutation({
+    mutationFn: (params: ISubmitDiary) =>
+      submitDiary(currentUser.senderId, params),
+
+    onSuccess: ({ res }) => {
+      console.log("res", res);
+      toastOpen("일기 작성에 성공했습니다");
+      queryClient.clear();
+      setTimeout(() => {
+        navigate("/");
+      }, 1000);
+    },
+    onError: () => {
+      toastOpen("오류가 발생했습니다");
+    },
+  });
+  return { mutate, toastClose, toastMessage };
+};
diff --git a/src/hooks/api/main/useGetFriend.ts b/src/hooks/api/main/useGetFriend.ts
@@ -1,14 +1,14 @@
 import { get } from "@/libs/api";
-import { FriendList } from "@/types/friend";
+import { FriendInfo } from "@/types/friend";
 import { queryKeys } from "@/utils/constants";
 import { useQuery } from "@tanstack/react-query";
 
 const getFriendList = async (memberId: number) => {
-  const res = await get<{ data: FriendList }>(
+  const res = await get<{ data: FriendInfo[] }>(
     `/apis/v1/friends/list?memberId=${memberId}`
   );
 
-  return { res: res.data };
+  return { data: res.data };
 };
 
 export const useGetFriend = (memberId: number) => {

diff --git a/src/hooks/api/mypage/useGetFriendAccept.ts b/src/hooks/api/mypage/useGetFriendAccept.ts
diff --git a/src/hooks/api/request/useRequestFriend.ts b/src/hooks/api/request/useRequestFriend.ts
@@ -1,6 +1,7 @@
 import useCurrentUser from "@/hooks/useAuth";
 import { useToast } from "@/hooks/useToast";
 import { post } from "@/libs/api";
+import { queryClient } from "@/libs/queryClient";
 import { FriendRequest } from "@/types/request";
 import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
@@ -23,6 +24,7 @@ export const useRequestFriend = () => {
     onSuccess: ({ res }) => {
       console.log("res", res);
       toastOpen("친구 요청 성공했습니다");
+      queryClient.clear();
       setTimeout(() => {
         navigate("/");
       }, 1000);

diff --git a/src/libs/api.ts b/src/libs/api.ts
@@ -29,8 +29,7 @@ const interceptorRequestFulfilled = (config: AxiosRequestConfig) => {
       ...config,
       headers: {
         "Content-Type": "application/json",
-        // Authorization: `Bearer ${TOKEN}`,
-        // Cookie: `token=${TOKEN}`,
+        Authorization: `${TOKEN}`,
       } as AxiosRequestHeaders,
     };
   } else {

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -8,6 +8,7 @@ import PasswrodIcon from "@/assets/svg/icon-auth-password.svg";
 import PasswordShowIcon from "@/assets/svg/icon-auth-passwordShow.svg";
 import Button from "@/components/common/Button";
 import styled from "styled-components";
+import { StyledDiv, StyledH1 } from "@/styles/common";
 
 const Login = () => {
   const location = useLocation();
@@ -43,15 +44,14 @@ const Login = () => {
 
   return (
     <>
-      <LoginDiv>
+      <StyledDiv>
         <StyledH1>로그인</StyledH1>
         <StyledInput
           value={name}
           placeholder="name"
           onChangeValue={onChangeName}
           leftIcon={NameIcon}
         />
-        <br />
         <StyledInput
           type={password.type}
           value={password.value}
@@ -67,7 +67,6 @@ const Login = () => {
               })),
           }}
         />
-        <br />
         <StyledButton
           buttonColor="main"
           buttonStyle="gradient"
@@ -89,23 +88,13 @@ const Login = () => {
         <Toast isOpen={toastMessage.isOpen} onClose={toastClose}>
           {toastMessage.message}
         </Toast>
-      </LoginDiv>
+      </StyledDiv>
     </>
   );
 };
 
 export default Login;
 
-export const LoginDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100dvh;
-  gap: 10px;
-`;
-
 const StyledInput = styled(Input)`
   padding: 10px;
   margin: 10px;
@@ -115,11 +104,6 @@ const StyledButton = styled(Button)`
   margin: 20px;
 `;
 
-const StyledH1 = styled.div`
-  padding: 100px;
-  font-size: 60pt;
-`;
-
 const P = styled.p`
   cursor: pointer;
 `;