Api(extension): 익스텐션 북마크 아티클 저장 API 연결 #107
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import apiRequest from './axiosInstance'; | ||
|
|
||
| export const getCategoriesDash = async () => { | ||
| const { data } = await apiRequest.get('/api/v1/categories/dashboard', {}); | ||
| return data; | ||
| }; | ||
|
|
||
| export const postArticles = async (payload: { | ||
| url: string; | ||
| categoryId: number | null; | ||
| memo: string; | ||
| remindTime: string | null; | ||
| }) => { | ||
| const response = await apiRequest.post('/api/v1/articles', payload); | ||
| return response.data; | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as apiRequest } from './axiosInstance'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,9 @@ | ||||||
| import apiRequest from './axiosInstance'; | ||||||
|
|
||||||
| export const getRemindTime = async (time: String) => { | ||||||
|
There was a problem hiding this comment. 원시 타입 'string' 사용을 권장합니다. 타입 일관성을 위해 대문자 -export const getRemindTime = async (time: String) => {
+export const getRemindTime = async (time: string) => {📝 Committable suggestion
Suggested change
🧰 Tools🪛 Biome (1.9.4)[error] 3-3: Don't use 'String' as a type. Use lowercase primitives for consistency. (lint/complexity/noBannedTypes) 🤖 Prompt for AI Agents |
||||||
| const { data } = await apiRequest.get( | ||||||
| `/api/v1/users/remind-time?now=${time}`, | ||||||
| {} | ||||||
| ); | ||||||
| return data; | ||||||
| }; | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,9 @@ | ||||||||||||||||||||
| import { useQuery } from '@tanstack/react-query'; | ||||||||||||||||||||
| import { getRemindTime } from './modalAxios'; | ||||||||||||||||||||
|
|
||||||||||||||||||||
| export const useGetRemindTime = (time: string) => { | ||||||||||||||||||||
| return useQuery({ | ||||||||||||||||||||
| queryKey: ['remindTime'], | ||||||||||||||||||||
| queryFn: () => getRemindTime(time), | ||||||||||||||||||||
| }); | ||||||||||||||||||||
|
Comment on lines
+5
to
+8
There was a problem hiding this comment. 🛠️ Refactor suggestion 쿼리 키에 시간 매개변수를 포함하세요. 현재 쿼리 키가 return useQuery({
- queryKey: ['remindTime'],
+ queryKey: ['remindTime', time],
queryFn: () => getRemindTime(time),
});📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||
| }; | ||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { getCategoriesDash, postArticles } from './axios'; | ||
| import { useQuery, useMutation } from '@tanstack/react-query'; | ||
| export const useGetCategoriesDash = () => { | ||
| return useQuery({ | ||
| queryKey: ['categoriesDash'], | ||
| queryFn: getCategoriesDash, | ||
| }); | ||
| }; | ||
|
|
||
| export const usePostArticles = () => { | ||
| return useMutation({ | ||
| mutationFn: postArticles, | ||
| }); | ||
| }; | ||
|
Comment on lines
+1
to
+14
There was a problem hiding this comment. 🛠️ Refactor suggestion TypeScript 타입 정의 추가를 권장합니다. API 응답과 요청에 대한 TypeScript 타입을 정의하면 타입 안정성을 높일 수 있습니다. 다음과 같이 타입을 정의하는 것을 제안합니다: interface Category {
id: string;
name: string;
// 기타 카테고리 속성들
}
interface PostArticleRequest {
url: string;
categoryId: string;
memo?: string;
remindTime?: string;
}
export const useGetCategoriesDash = (): UseQueryResult<Category[]> => {
return useQuery({
queryKey: ['categoriesDash'],
queryFn: getCategoriesDash,
});
};
export const usePostArticles = (): UseMutationResult<any, Error, PostArticleRequest> => {
return useMutation({
mutationFn: postArticles,
});
};🤖 Prompt for AI Agents |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -9,7 +9,6 @@ chrome.runtime.onInstalled.addListener((details) => { | |||||
| if (details.reason === 'install') { | ||||||
| chrome.identity.getProfileUserInfo(function (info) { | ||||||
| console.log('google email:', info.email); | ||||||
| setTimeout(() => { | ||||||
| chrome.tabs.create({ | ||||||
| url: `http://localhost:5180/onboarding?email=${info.email}`, | ||||||
|
|
@@ -18,6 +17,7 @@ chrome.runtime.onInstalled.addListener((details) => { | |||||
| }); | ||||||
| } | ||||||
| }); | ||||||
|
|
||||||
| chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => { | ||||||
| if (message.type === 'SAVE_BOOKMARK') { | ||||||
| const { url, title } = message.payload; | ||||||
|
|
@@ -28,7 +28,7 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => { | |||||
|
|
||||||
| chrome.bookmarks.create( | ||||||
| { | ||||||
| title: '핀백 저장소', | ||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion 하드코딩된 북마크 제목 사용을 재검토해주세요. 북마크 제목이 고정된 문자열 '핀백 저장소'로 하드코딩되어 있습니다. 이는 사용자 경험을 해칠 수 있으며, 실제 페이지 제목이나 사용자가 설정한 제목을 사용하는 것이 더 적절할 것 같습니다. 메시지 페이로드에서 제목을 받아서 사용하는 것을 제안합니다: - title: '핀백 저장소',
+ title: title || '핀백 저장소',또는 Chrome 저장소에서 저장된 제목을 가져와서 사용하는 방법도 고려해볼 수 있습니다. 📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| url: url, | ||||||
| parentId: '1', | ||||||
| }, | ||||||
|
|
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,4 +1,4 @@ | ||||||
| import { useState, useEffect } from 'react'; | ||||||
| import { | ||||||
| CategoryDropDown, | ||||||
| CommonBtn, | ||||||
|
|
@@ -8,31 +8,72 @@ import { | |||||
| TimePicker, | ||||||
| ToggleButton, | ||||||
| } from '@pinback/design-system/ui'; | ||||||
| import ModalHeader from './ModalHeader'; | ||||||
| import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index'; | ||||||
| import { useGetCategoriesDash, usePostArticles } from '@api/queries'; | ||||||
| import { useGetRemindTime } from '../../api/modalQueries'; | ||||||
| import { fomatToday } from '@pinback/design-system/utils'; | ||||||
|
|
||||||
| interface ModalPopProps { | ||||||
| urlInfo: string; | ||||||
| imgInfo?: string; | ||||||
| titleInfo?: string; | ||||||
| desInfo?: string; | ||||||
| } | ||||||
| interface Category { | ||||||
| categoryId: number; | ||||||
| categoryName: string; | ||||||
| unreadCount: number; | ||||||
| } | ||||||
| const ModalPop = ({ urlInfo, imgInfo, titleInfo, desInfo }: ModalPopProps) => { | ||||||
| const [formState, setFormState] = useState({ | ||||||
| date: '', | ||||||
| dateError: '', | ||||||
| time: '', | ||||||
| timeError: '', | ||||||
| }); | ||||||
| const [categories, setCategories] = useState(['']); | ||||||
|
There was a problem hiding this comment. categories 상태 초기값 수정 필요 빈 문자열이 포함된 배열 - const [categories, setCategories] = useState(['']);
+ const [categories, setCategories] = useState<string[]>([]);📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| const [memo, setMemo] = useState(''); | ||||||
| const { mutate: postArticle } = usePostArticles(); | ||||||
|
|
||||||
| const { | ||||||
| data: remindTime, | ||||||
| isLoading, | ||||||
| error, | ||||||
| } = useGetRemindTime(fomatToday(new Date())); | ||||||
|
|
||||||
| if (error) { | ||||||
| console.error('Error fetching remind time:', error); | ||||||
| return <div>Error loading remind time</div>; | ||||||
| } | ||||||
| const { data: categoriesData } = useGetCategoriesDash(); | ||||||
| useEffect(() => { | ||||||
| if (categoriesData) { | ||||||
| const categoryNames: string[] = categoriesData.data.categories.map( | ||||||
| (item: Category) => item.categoryName | ||||||
| ); | ||||||
| setCategories(categoryNames); | ||||||
| } | ||||||
| }, [categoriesData]); | ||||||
| const [categoryPopupMode, setCategoryPopupMode] = useState< | ||||||
| 'edit' | 'add' | '' | ||||||
| >(''); | ||||||
| const [selectedCategory, setSelectedCategory] = useState(''); | ||||||
| const [matchId, setMatchedId] = useState<number | null>(null); | ||||||
|
|
||||||
| useEffect(() => { | ||||||
| if (categoriesData?.data?.categories && selectedCategory) { | ||||||
| const matched = categoriesData.data.categories.find( | ||||||
| (item: Category) => item.categoryName === selectedCategory | ||||||
| ); | ||||||
| setMatchedId(matched?.categoryId ?? null); | ||||||
| } | ||||||
| }, [selectedCategory, categoriesData]); | ||||||
|
|
||||||
| const handleSave = () => { | ||||||
| chrome.storage.local.set({ savedTitle: titleInfo }, () => { | ||||||
| console.log('📦 storage 저장 완료:', titleInfo); | ||||||
| }); | ||||||
| chrome.runtime.sendMessage( | ||||||
| { | ||||||
| type: 'SAVE_BOOKMARK', | ||||||
|
|
@@ -45,7 +86,24 @@ const ModalPop = ({ urlInfo, imgInfo, titleInfo, desInfo }: ModalPopProps) => { | |||||
| console.log('✅ 응답 받음:', response); | ||||||
| } | ||||||
| ); | ||||||
| postArticle( | ||||||
| { | ||||||
| url: urlInfo, | ||||||
| categoryId: matchId, | ||||||
| memo: memo, | ||||||
| remindTime: fomatToday(new Date()), | ||||||
| }, | ||||||
| { | ||||||
| onSuccess: (data) => { | ||||||
| console.log('✅ 저장 성공:', data); | ||||||
| // TODO : 저장 시. 창 원래 닫아야하나 우선 개발 중이라 열어두었습니당 | ||||||
| // window.close(); | ||||||
| }, | ||||||
| onError: (error) => { | ||||||
| console.error('❌ 저장 실패:', error); | ||||||
| }, | ||||||
| } | ||||||
| ); | ||||||
| }; | ||||||
|
|
||||||
| const handleFieldChange = ( | ||||||
|
|
@@ -67,6 +125,7 @@ const ModalPop = ({ urlInfo, imgInfo, titleInfo, desInfo }: ModalPopProps) => { | |||||
| setCategoryPopupMode('add'); | ||||||
| } else { | ||||||
| setSelectedCategory(value); | ||||||
| console.log(value); | ||||||
| setCategoryPopupMode(''); | ||||||
| } | ||||||
| }; | ||||||
|
|
@@ -93,7 +152,7 @@ const ModalPop = ({ urlInfo, imgInfo, titleInfo, desInfo }: ModalPopProps) => { | |||||
| text.length > maxLength ? `${text.slice(0, maxLength)}...` : text; | ||||||
|
|
||||||
| return ( | ||||||
| <div className="relative flex h-[54.7rem] w-[32rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[2rem] py-[2rem]"> | ||||||
| <div> | ||||||
| <ModalHeader onClick={() => window.close()} /> | ||||||
| <div className="px-[1rem] pt-[1.9rem]"> | ||||||
|
|
@@ -118,6 +177,8 @@ const ModalPop = ({ urlInfo, imgInfo, titleInfo, desInfo }: ModalPopProps) => { | |||||
| size="medium" | ||||||
| maxLength={POP_TEXTAREA_MAX_LENGTH} | ||||||
| placeholder="메모를 입력하고 도토리를 받아보세요!" | ||||||
| value={memo} | ||||||
| onChange={(e) => setMemo(e.target.value)} | ||||||
| /> | ||||||
| </section> | ||||||
| <section> | ||||||
|
|
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -3,10 +3,21 @@ import * as React from 'react'; | |||||||||||||||||||||
| import { createRoot } from 'react-dom/client'; | ||||||||||||||||||||||
| import App from './App'; | ||||||||||||||||||||||
| import './App.css'; | ||||||||||||||||||||||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| const queryClient = new QueryClient(); | ||||||||||||||||||||||
| const rootEl = document.getElementById('root'); | ||||||||||||||||||||||
| if (rootEl) { | ||||||||||||||||||||||
| createRoot(rootEl).render( | ||||||||||||||||||||||
| <QueryClientProvider client={queryClient}> | ||||||||||||||||||||||
| <App /> | ||||||||||||||||||||||
| </QueryClientProvider> | ||||||||||||||||||||||
| ); | ||||||||||||||||||||||
| createRoot(rootEl).render( | ||||||||||||||||||||||
| <QueryClientProvider client={queryClient}> | ||||||||||||||||||||||
| <App /> | ||||||||||||||||||||||
| </QueryClientProvider> | ||||||||||||||||||||||
| ); | ||||||||||||||||||||||
|
Comment on lines
+16
to
+20
There was a problem hiding this comment. 중복된 렌더링 호출을 제거하세요. 동일한 루트 엘리먼트에 대해 다음과 같이 중복된 렌더링 호출을 제거하세요: createRoot(rootEl).render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
);
- createRoot(rootEl).render(
- <QueryClientProvider client={queryClient}>
- <App />
- </QueryClientProvider>
- );📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||
| } else { | ||||||||||||||||||||||
| console.error('❌ root element not found!'); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { queryClient } from '@utils/queryClient'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { QueryClient } from '@tanstack/react-query'; | ||
|
|
||
| export const queryClient = new QueryClient({ | ||
| defaultOptions: { | ||
| queries: { | ||
| retry: false, | ||
| refetchOnWindowFocus: false, | ||
| throwOnError: true, | ||
| }, | ||
| }, | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,7 +41,7 @@ export default defineConfig({ | |
| resolve: { | ||
| alias: { | ||
| '@': resolve(__dirname, './src'), | ||
| '@api': resolve(__dirname, './src/api'), | ||
| '@utils': resolve(__dirname, './src/utils'), | ||
| '@constants': resolve(__dirname, './src/constants'), | ||
| '@shared-types': resolve(__dirname, './src/types'), | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { Icon } from '@pinback/design-system/icons'; | ||
| import { cva } from 'class-variance-authority'; | ||
|
|
||
|
|
@@ -42,14 +42,18 @@ const CategoryDropDown = ({ | |
| onSelect, | ||
| }: CategoryDropDownProps) => { | ||
| const [isDropDownOpen, setIsDropDownOpen] = useState(false); | ||
| const [selectedCategory, setSelectedCategory] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| if (categories.length > 0) { | ||
| setSelectedCategory(categories[0]); | ||
| } | ||
| }, [categories]); | ||
|
|
||
| const handleCategoryClick = (category: string) => { | ||
| setSelectedCategory(category); | ||
| setIsDropDownOpen(false); | ||
| onSelect?.(category); | ||
| }; | ||
|
|
||
| return ( | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| function formatToday(date: Date): string { | ||
| const year = date.getFullYear(); | ||
| const month = `${date.getMonth() + 1}`.padStart(2, '0'); | ||
| const day = `${date.getDate()}`.padStart(2, '0'); | ||
| const hours = `${date.getHours()}`.padStart(2, '0'); | ||
| const minutes = `${date.getMinutes()}`.padStart(2, '0'); | ||
| const seconds = `${date.getSeconds()}`.padStart(2, '0'); | ||
|
|
||
| return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`; | ||
| } | ||
|
|
||
| export default formatToday; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1 +1,2 @@ | ||||||
| export { default as fomatToday } from './fomatToday'; | ||||||
|
There was a problem hiding this comment. 함수명 오타를 수정하세요.
다음과 같이 수정하세요: -export { default as fomatToday } from './fomatToday';
+export { default as formatToday } from './fomatToday';또는 모듈 파일명도 함께 수정하는 것을 고려하세요: -export { default as fomatToday } from './fomatToday';
+export { default as formatToday } from './formatToday';📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| export * from './utils'; | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
title 상태 업데이트 타이밍 문제를 확인해주세요.
chrome.storage.local.set에서title상태 변수를 저장하고 있지만, 이 시점에서title상태가 아직 업데이트되지 않았을 수 있습니다.setTitle이 38번째 줄에서 호출되고 바로 41번째 줄에서title상태를 사용하고 있는데, React 상태 업데이트는 비동기적으로 처리됩니다.다음과 같이 수정하는 것을 제안합니다:
setTitle(imageUrl?.title ?? ''); setDescription(imageUrl?.description ?? ''); setImgUrl(imageUrl?.image ?? ''); - chrome.storage.local.set({ titleSave: title }, () => { + chrome.storage.local.set({ titleSave: imageUrl?.title ?? '' }, () => { console.log('Title saved to chrome storage'); });또는 별도의 useEffect를 사용하여 title이 변경될 때 저장하는 방법도 고려해볼 수 있습니다.
📝 Committable suggestion
🤖 Prompt for AI Agents