alert("눌렸습니다")}
>
diff --git a/src/components/common/FriendBook/FriendBook.styled.ts b/src/components/common/FriendBook/FriendBook.styled.ts
index a619669..3c6e5f5 100644
--- 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
index 486ed96..f0aa3df 100644
--- 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 (
diff --git a/src/components/common/Input/Input/Input.styled.ts b/src/components/common/Input/Input/Input.styled.ts
index bdd24ba..2731ebb 100644
--- 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
index 7690d61..2a47d8c 100644
--- 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
index 97b37fd..1f74567 100644
--- 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
index e74ae5b..b645c08 100644
--- 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
new file mode 100644
index 0000000..2440feb
--- /dev/null
+++ 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
new file mode 100644
index 0000000..2a98b37
--- /dev/null
+++ 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
index 475c320..c907740 100644
--- 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
deleted file mode 100644
index dadabd6..0000000
--- a/src/hooks/api/mypage/useGetFriendAccept.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { get } from "@/libs/api";
-import { FriendList } from "@/types/friend";
-import { queryKeys } from "@/utils/constants";
-import { useQuery } from "@tanstack/react-query";
-
-const getFriendAccept = async (memberId: number) => {
- const res = await get<{ data: FriendList }>(
- `/apis/v1/friends/request?memberId=${memberId}`
- );
- console.log("res", res);
- return { data: res.data };
-};
-
-export const useGetFriendAccept = (memberId: number) => {
- const { data } = useQuery({
- queryFn: () => getFriendAccept(memberId),
- queryKey: [queryKeys.friendAccept, memberId],
- });
-
- return { data };
-};
diff --git a/src/hooks/api/request/useRequestFriend.ts b/src/hooks/api/request/useRequestFriend.ts
index 0214a6e..d62e793 100644
--- 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
index 0bac7d5..6a7aa61 100644
--- 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
index 834702c..14ddbd6 100644
--- 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,7 +44,7 @@ const Login = () => {
return (
<>
-
+
로그인
{
onChangeValue={onChangeName}
leftIcon={NameIcon}
/>
-
{
})),
}}
/>
-
{
{toastMessage.message}
-
+
);
};
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;
`;
diff --git a/src/pages/auth/Signup.tsx b/src/pages/auth/Signup.tsx
index b557d2b..12add29 100644
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@@ -7,7 +7,7 @@ import PasswordShowIcon from "@/assets/svg/icon-auth-passwordShow.svg";
import NameIcon from "@/assets/svg/icon-auth-name.svg";
import Button from "@/components/common/Button";
import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
+import { P, StyledDiv, StyledH1 } from "@/styles/common";
const Signup = () => {
const navigate = useNavigate();
@@ -52,16 +52,15 @@ const Signup = () => {
return (
<>
-
+
회원가입
-
-
- {
})),
}}
/>
-
- {
})),
}}
/>
-
- {
}
>
회원가입
-
+
{
navigate("/auth/login");
@@ -114,7 +111,7 @@ const Signup = () => {
>
이미 계정이 있으신가요?
-
+
{toastMessage.message}
@@ -123,29 +120,3 @@ const Signup = () => {
};
export default Signup;
-
-export const SignupDiv = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100dvh;
- gap: 10px;
-`;
-
-const StyledInput = styled(Input)`
- margin: 10px 0;
-`;
-
-const StyledButton = styled(Button)`
- margin: 20px 0;
-`;
-
-const StyledH1 = styled.div`
- padding: 100px;
- font-size: 60pt;
-`;
-const P = styled.p`
- cursor: pointer;
-`;
diff --git a/src/pages/diary/$id.tsx b/src/pages/diary/$id.tsx
index 9822095..9cd006e 100644
--- a/src/pages/diary/$id.tsx
+++ b/src/pages/diary/$id.tsx
@@ -1,7 +1,58 @@
-import React from "react";
+import List from "@/components/List";
+import Button from "@/components/common/Button";
+import { useGetListByFriendId } from "@/hooks/api/diary/useGetListByFriendId";
+import { DiaryDetailState, FriendInfoState } from "@/store";
+import { useNavigate } from "react-router-dom";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { styled } from "styled-components";
const Detail = () => {
- return Detail
;
+ const navigate = useNavigate();
+ const friendInfo = useRecoilValue(FriendInfoState);
+ const { data } = useGetListByFriendId(friendInfo.friendId || 0);
+ const setDiaryDetail = useSetRecoilState(DiaryDetailState);
+ return (
+
+ {data?.data?.map((el) => (
+ <>
+ {
+ setDiaryDetail(el);
+ navigate("/diary");
+ }}
+ />
+
+ ))}
+
+
+
+
+ );
};
export default Detail;
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ min-height: 100%;
+ position: relative;
+ /* justify-content: center; */
+ /* align-items: center; */
+`;
+
+const ButtonWrapper = styled.div`
+ position: absolute;
+ width: 100%;
+ bottom: 10px;
+`;
diff --git a/src/pages/diary/Update.tsx b/src/pages/diary/Update.tsx
deleted file mode 100644
index 6fe204a..0000000
--- a/src/pages/diary/Update.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { ChangeEvent, useState, useRef, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import styled from "styled-components";
-import Toast from "@/components/common/Toast";
-import Input from "@/components/common/Input/Input";
-import Button from "@/components/common/Button";
-import TextArea from "@/components/common/Input/TextArea";
-
-const Update = () => {
- const location = useLocation();
- const navigate = useNavigate();
-
- const [writeState, setWriteState] = useState<"create" | "update">("create");
- const [title, setTitle] = useState("");
- const [content, setContent] = useState("");
- const [sing, setSing] = useState("");
- const [date, setDate] = useState("");
-
- const handleEditButton = () => {
- mutate({
- title: "",
- content: "",
- sing: "",
- date: "",
- });
- };
-
- const handleCancelButton = () => {
- navigate(-1);
- };
-
- const onChangeTitle = (e: ChangeEvent) => {
- setTitle(e.target.value);
- };
- const onChangeContent = (e: ChangeEvent) => {
- setContent(e.target.value);
- };
-
- const onChangeSing = (e: ChangeEvent) => {
- setSing(e.target.value);
- };
- const onChangeDate = (e: ChangeEvent) => {
- setDate(e.target.value);
- };
-
- useEffect(() => {
- if (location && location.state?.update) {
- setWriteState("update");
- // todo : 다이어리 글 상태관리
- } else {
- setWriteState("create");
- }
- }, [location]);
-
- return (
- <>
-
- 일기 {writeState === "create" ? "작성" : "수정"}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Update;
-
-export const CreateDiv = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100%;
- width: 100%;
-`;
-
-function mutate(arg0: {
- title: string;
- content: string;
- sing: string;
- date: string;
-}) {
- throw new Error("Function not implemented.");
-}
-
-const StyledH1 = styled.div`
- padding: 50px;
- font-size: 60pt;
-`;
-
-const ButtonWrapper = styled.div`
- display: flex;
- gap: 10px;
- width: 100%;
-`;
diff --git a/src/pages/diary/Write.tsx b/src/pages/diary/Write.tsx
index 5f1fd39..b21e2e3 100644
--- a/src/pages/diary/Write.tsx
+++ b/src/pages/diary/Write.tsx
@@ -1,27 +1,30 @@
-import { ChangeEvent, useState, useRef, useEffect } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
-import styled from "styled-components";
import Toast from "@/components/common/Toast";
import Input from "@/components/common/Input/Input";
import Button from "@/components/common/Button";
import TextArea from "@/components/common/Input/TextArea";
+import { useSubmitDiary } from "@/hooks/api/diary/useSubmitDiary";
+import { useRecoilValue } from "recoil";
+import { FriendInfoState } from "@/store";
+import { StyledDiv, StyledH1, TwoButtonWrapper } from "@/styles/common";
const Write = () => {
const location = useLocation();
const navigate = useNavigate();
-
+ const friendInfo = useRecoilValue(FriendInfoState);
const [writeState, setWriteState] = useState<"create" | "update">("create");
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
- const [sing, setSing] = useState("");
- const [date, setDate] = useState("");
- const handleEditButton = () => {
+ const { mutate, toastClose, toastMessage } = useSubmitDiary();
+
+ const onClick = () => {
mutate({
- title: "",
- content: "",
+ title: title,
+ content: content,
sing: "",
- date: "",
+ friendId: friendInfo.friendId,
});
};
@@ -36,17 +39,9 @@ const Write = () => {
setContent(e.target.value);
};
- const onChangeSing = (e: ChangeEvent) => {
- setSing(e.target.value);
- };
- const onChangeDate = (e: ChangeEvent) => {
- setDate(e.target.value);
- };
-
useEffect(() => {
if (location && location.state?.update) {
setWriteState("update");
- // todo : 다이어리 글 상태관리
} else {
setWriteState("create");
}
@@ -54,38 +49,29 @@ const Write = () => {
return (
<>
-
+
일기 {writeState === "create" ? "작성" : "수정"}
-
-
-
-
-
-
-
+ /> */}
+
@@ -93,49 +79,22 @@ const Write = () => {
buttonColor="main"
buttonStyle="default"
onClick={() => {
- navigate("/");
+ onClick();
}}
disabled={
!title || // 제목이 없거나
- !content || // 내용이 없거나
- !date // 날짜가 없을 경우
+ !content // 내용이 없거나
}
>
{writeState === "create" ? "작성하기" : "수정하기"}
-
-
+
+
+
+ {toastMessage.message}
+
);
};
export default Write;
-
-export const CreateDiv = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100%;
- width: 100%;
-`;
-
-function mutate(arg0: {
- title: string;
- content: string;
- sing: string;
- date: string;
-}) {
- throw new Error("Function not implemented.");
-}
-
-const StyledH1 = styled.div`
- padding: 50px;
- font-size: 60pt;
-`;
-
-const ButtonWrapper = styled.div`
- display: flex;
- gap: 10px;
- width: 100%;
-`;
diff --git a/src/pages/diary/index.tsx b/src/pages/diary/index.tsx
index 63dddeb..3632886 100644
--- a/src/pages/diary/index.tsx
+++ b/src/pages/diary/index.tsx
@@ -1,7 +1,37 @@
+import Input from "@/components/common/Input/Input";
+import TextArea from "@/components/common/Input/TextArea";
+import { DiaryDetailState } from "@/store";
+import { StyledDiv } from "@/styles/common";
import React from "react";
+import { useRecoilValue } from "recoil";
+import Button from "@/components/common/Button";
+import { useNavigate } from "react-router-dom";
-const index = () => {
- return hi
;
+const Diary = () => {
+ const navigate = useNavigate();
+ const diaryDetail = useRecoilValue(DiaryDetailState);
+
+ return (
+
+ {}}
+ disabled={true}
+ />
+