Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[박기범] Week20 #1087

Merged
Merged
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
766a0f8
feat : 리액트 쿼리 설치
gibeom0218 May 12, 2024
7a48590
feat : 로그인 로그아웃 api 변경 (BaseUrl 이름 추후 변경예정)
gibeom0218 May 12, 2024
e9664e9
feat : 이메일 중복 api 수정 및 shared, folder 페이지 접근 권한 설정
gibeom0218 May 12, 2024
02cd63a
feat : 네비게이션바 api 수정 및 코드 수정
gibeom0218 May 12, 2024
d417acc
feat : 폴더 페이지 폴더 버튼 api 수정
gibeom0218 May 12, 2024
8f8c1d6
feat : 전체 폴더링크 가져오기 api 수정 및 코드 수정
gibeom0218 May 12, 2024
2b21a2f
feat : 개별 폴더의 링크 데이터에 대한 api 및 코드 수정
gibeom0218 May 12, 2024
6f8eea8
feat : shard 페이지에서 폴더 id별로 렌더링 api수정 및 코드 수정
gibeom0218 May 12, 2024
aa31f01
refactor : '저장된 링크가 없습니다.' 뜨도록 수정
gibeom0218 May 12, 2024
afc170e
refactor : 주석 수정
gibeom0218 May 12, 2024
f03bf11
refactor : 불필요한 코드 제거 및 주석 수정
gibeom0218 May 13, 2024
812e73c
feat : 공유 모달창에서 shared페이지로 이동 (쿼리 키로 가져오기 위한 임시 기능)
gibeom0218 May 13, 2024
6fcd2b8
feat : 실시간 폴더이름과 소유자 변경
gibeom0218 May 13, 2024
e582d68
feat : 페이지 이동 코드 수정
gibeom0218 May 13, 2024
ed738b2
feat : [추가 구현사항] 링크 추가 기능을 위한 쿼리 저장 및 api 구현 및 코드 수정
gibeom0218 May 13, 2024
35a8485
feat : [추가 구현사항] 실시간 링크 데이터 추가 기능
gibeom0218 May 13, 2024
21c0711
feat : 불필요한 코드 제거
gibeom0218 May 14, 2024
2d52220
feat : 폴더 이름변경 구현
gibeom0218 May 15, 2024
85721b6
feat : 폴더 이름이 폴더 페이지 내부에서도 변경되도록
gibeom0218 May 15, 2024
f0f3991
feat : 폴더 추가 기능 구현
gibeom0218 May 15, 2024
0fbacff
feat : 폴더 삭제 기능 구현
gibeom0218 May 15, 2024
24445a3
feat : 링크 데이터 삭제하기 기능 구현
gibeom0218 May 15, 2024
747091f
feat : 기능 성공시 모달창 닫기
gibeom0218 May 15, 2024
abe6eee
feat : 전체 링크 데이터가 바뀌지 않는 문제 해결
gibeom0218 May 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat : [추가 구현사항] 링크 추가 기능을 위한 쿼리 저장 및 api 구현 및 코드 수정
gibeom0218 committed May 13, 2024
commit ed738b2248a4f359b5a932afeef201aaffb76d82
16 changes: 14 additions & 2 deletions components/FolderSection.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import React from "react";
import Image from "next/image";
import { useEffect, useState } from "react";
import { getFolderList, getAllLinks, getFolderLink } from "@/pages/api/api";
import { useQuery } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import CardList from "@/components/CardList";
import SearchBar from "@/components/SearchBar";
import addImg from "@/public/images/add.svg";
@@ -46,6 +46,8 @@ export default function FolderSection() {
const [selectedId, setSelectedId] = useState<number>();
const [searchInput, setSearchInput] = useState<string>("");

const queryClient = useQueryClient();

//전체 폴더 가져오기
const allList = useQuery({
queryKey: ["allList"],
@@ -56,6 +58,7 @@ export default function FolderSection() {
async function folderAllNameClick() {
setFolderName("전체");
setFolderId(null);
queryClient.setQueryData(["folderId"], null);
}

//개별 폴더 가져오기
@@ -75,8 +78,8 @@ export default function FolderSection() {
async function folderNameClick(name: string, id: number) {
setFolderName(name);
setFolderId(id);
queryClient.setQueryData(["folderId"], id);
}

//폴더이름을 클릭했을 때 즉각적으로 링크 데이터들이 바뀌도록
useEffect(() => {
if (individualList.data && folderName !== "전체") {
@@ -94,6 +97,15 @@ export default function FolderSection() {
queryFn: async () => await getFolderList(),
});

//링크 추가를 위해 현재 폴더 id를 쿼리에 저장
//처음 랜더링 될때 한번
useQuery({
queryKey: ["folderId"],
queryFn: async () => {
return folderId;
},
});
Comment on lines +110 to +115
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

의도적으로 캐싱을 하신 것으로 보입니다.

필요한 부분에서 folderId를 사용하면 되지 않을까요? useQuery를 사용하지 않아도 되보입니다 😊


//이름변경 아이콘 클릭시 뜨는 모달창 함수
const clickEditName = () => {
setIsEditNameModal(!isEditNameModal);
36 changes: 34 additions & 2 deletions components/LinkAdd.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,37 @@
import React from "react";
import React, { useState } from "react";
import Image from "next/image";
import { addLink } from "@/pages/api/api";
import styles from "@/styles/LinkAdd.module.css";
import linkIcon from "@/public/images/link.svg";
import { useMutation, useQuery } from "@tanstack/react-query";

interface LinkData {
url: string;
folderId: {} | undefined;
}

export default function LinkAdd() {
const [url, setUrl] = useState(""); // input 값에 대한 상태
const folderId = useQuery({ queryKey: ["folderId"] });

const addLinkMutation = useMutation<void, Error, LinkData>({
mutationFn: (linkData) => addLink(linkData.url, Number(linkData.folderId)),
});

// input 값이 변경될 때마다 상태 업데이트
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setUrl(event.target.value);
};

// 추가하기 버튼 클릭 시 실행되는 함수
const handleAddClick = (e: any) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이벤트의 any 타입을 다음과 같이 변경할 수 있습니다 😊

Suggested change
const handleAddClick = (e: any) => {
const handleAddClick = (e: React.MouseEvent<HTMLButtonElement>) => {

e.preventDefault();
//링크를 추가하는 API 호출 등의 작업 수행
if (folderId.data !== null) {
const linkData: LinkData = { url, folderId: folderId.data };
addLinkMutation.mutate(linkData);
}
};
return (
<div className={styles.LinkAdd}>
<div className={styles.LinkAddBar_Frame}>
@@ -14,9 +42,13 @@ export default function LinkAdd() {
type="text"
id={styles.inputText}
placeholder="링크를 추가해보세요."
value={url} // input 값과 상태를 연결
onChange={handleInputChange} // input 값 변경 시 호출되는 함수
/>
</div>
<button id={styles.addBtn}>추가하기</button>
<button id={styles.addBtn} onClick={handleAddClick}>
추가하기
</button>
</div>
</div>
</div>
26 changes: 26 additions & 0 deletions pages/api/api.tsx
Original file line number Diff line number Diff line change
@@ -101,6 +101,32 @@ export async function getFolderLink(id: number) {
return folderLink;
}

//링크 추가를 위한 api 함수
export async function addLink(url: string, folderId: number) {
const token = localStorage.getItem("accessToken");

try {
const response = await fetch(`${BASE_URL}/links`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "*/*",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
url: url,
folderId: folderId,
}),
});

if (!response.ok) {
throw new Error("링크를 추가할 수 없습니다.");
}
} catch (error) {
throw new Error("링크를 추가할 수 없습니다.");
}
}

//로그인 요청을 위한 api함수
export async function postSignIn(id: string, password: string) {
const response = await fetch(`${BASE_URL}/auth/sign-in`, {