Skip to content

[Fix] sidebar 구현 #83

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.

Sign up for GitHub

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

Merged
psm1st merged 19 commits into from
May 29, 2025
Merged

[Fix] sidebar 구현 #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f9ba768
feat : review 잠시 주석처리
psm1st May 28, 2025
7ceb07f
fix : category 저장 로직 수정
psm1st May 29, 2025
f864f93
remove : 전체보기 버튼 삭제
psm1st May 29, 2025
20c62e3
feat : html, title 로직까지 완료
psm1st May 29, 2025
9522cc6
feat : allergy Select enum 추가
psm1st May 29, 2025
4223a13
feat : food component 완성
psm1st May 29, 2025
3cd4c53
feat : health component 완료
psm1st May 29, 2025
ee42d54
remove : category handler detect category로 합침
psm1st May 29, 2025
9d452d8
feat : cosmetic component 완성
psm1st May 29, 2025
03e50ff
design : component 디자인 수정
psm1st May 29, 2025
4400e21
Merge branch 'main' of https://github.com/TEAM-WEBEYE/EXTENSION into …
psm1st May 29, 2025
41cff32
design : food loading gif 추가
psm1st May 29, 2025
6365d65
design : cosmetic loading gif 추가
psm1st May 29, 2025
a85082f
design : health loading gif 추가
psm1st May 29, 2025
30d76c6
design : image componet 로딩중 및 형태 수정
psm1st May 29, 2025
f676473
fix : image 워딩 수정
psm1st May 29, 2025
7216bbd
feat : info tap category별로 변경되도록 구현
psm1st May 29, 2025
02f1929
design : cosmetic component 디자인 수정
psm1st May 29, 2025
17558be
feat : info component html 처리 로직 추가
psm1st May 29, 2025
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
145 changes: 100 additions & 45 deletions src/background/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
DEFAULT_FONT_WEIGHT,
} from "./constants";
import { initCommandListeners } from "./listeners/commandListeners";
import { handleModalToggle } from "./listeners/modalCommandHandler";

Check warning on line 11 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

'handleModalToggle' is defined but never used. Allowed unused vars must match /^_/u

/**
* 백그라운드 스크립트 초기화
Expand Down Expand Up @@ -115,39 +115,57 @@

// FOOD API
if (message.type === "FETCH_FOOD_DATA") {
const payload = message.payload;
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const activeTab = tabs[0];
if (!activeTab?.url) {
sendResponse({
status: 400,
error: "상품 페이지를 찾을 수 없습니다.",
});
return;
}

fetch("https://voim.store/api/v1/products/foods", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
})
.then((res) => res.json())
.then((data) => {
logger.debug("FOOD API 응답 성공:", data);
if (sender.tab?.id) {
chrome.tabs.sendMessage(sender.tab.id, {
type: "FOOD_DATA_RESPONSE",
data,
});
}
sendResponse({ status: 200, data });
})
.catch((err) => {
console.error(
"[voim][background] FOOD API 요청 실패:",
err.message,
);
if (sender.tab?.id) {
chrome.tabs.sendMessage(sender.tab.id, {
type: "FOOD_DATA_ERROR",
error: err.message,
const productId = activeTab.url.match(/vp\/products\/(\d+)/)?.[1];
if (!productId) {
sendResponse({
status: 400,
error: "상품 ID를 찾을 수 없습니다.",
});
return;
}

const payload = {
...message.payload,
productId,
};

fetch("https://voim.store/api/v1/products/foods", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}).then(async (res) => {
const text = await res.text();
console.log("[voim] 응답 상태 코드:", res.status);
console.log("[voim] 응답 원문:", text);

Check warning on line 149 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

Unexpected console statement. Only these console methods are allowed: error, warn
try {

Check warning on line 150 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

Unexpected console statement. Only these console methods are allowed: error, warn
Comment on lines +148 to +150
Copy link

@coderabbitai coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

console.log 대신 logger를 사용하세요.

프로덕션 환경을 위해 기존 logger 유틸리티를 사용하는 것이 좋습니다.

다음과 같이 수정하세요:

-console.log("[voim] 응답 상태 코드:", res.status);
-console.log("[voim] 응답 원문:", text);
+logger.debug("[voim] 응답 상태 코드:", res.status);
+logger.debug("[voim] 응답 원문:", text);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.log("[voim] 응답 상태 코드:", res.status);
console.log("[voim] 응답 원문:", text);
try {
logger.debug("[voim] 응답 상태 코드:", res.status);
logger.debug("[voim] 응답 원문:", text);
try {
🧰 Tools
🪛 GitHub Check: lint-and-test

[warning] 150-150:
Unexpected console statement. Only these console methods are allowed: error, warn

[warning] 149-149:
Unexpected console statement. Only these console methods are allowed: error, warn

🤖 Prompt for AI Agents 
In src/background/index.ts around lines 148 to 150, replace the console.log
statements with calls to the existing logger utility to ensure consistent and
configurable logging in production. Identify the appropriate logger method
(e.g., logger.info or logger.debug) and use it to log the response status code
and response text instead of console.log.

const json = JSON.parse(text);
if (res.ok) {
sendResponse({ status: 200, data: json });
} else {
sendResponse({
status: res.status,
error: json?.message ?? "에러 발생",
});
}
} catch (err) {
console.error("[voim] JSON 파싱 실패", text);

Check warning on line 161 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

'err' is defined but never used
Copy link

@coderabbitai coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

catch 블록에서 err 변수를 사용하세요.

에러 정보를 로그에 포함시켜 디버깅을 용이하게 하세요.

다음과 같이 수정하세요:

-console.error("[voim] JSON 파싱 실패", text);
+console.error("[voim] JSON 파싱 실패", text, err);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.error("[voim] JSON 파싱 실패", text);
console.error("[voim] JSON 파싱 실패", text, err);
🧰 Tools
🪛 GitHub Check: lint-and-test

[warning] 161-161:
'err' is defined but never used

🤖 Prompt for AI Agents 
In src/background/index.ts at line 161, the catch block logs a generic error
message without including the caught error details. Modify the console.error
call to include the caught error variable (commonly named err) alongside the
message and text to provide detailed error information for easier debugging.

sendResponse({
status: res.status,
error: "JSON 파싱 실패",
});
}
sendResponse({ status: 500, error: err.message });
});
});

return true;
}
Expand Down Expand Up @@ -255,57 +273,63 @@
// COSMETIC API
if (message.type === "FETCH_COSMETIC_DATA") {
const { productId, html } = message.payload;

fetch("https://voim.store/api/v1/cosmetic", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ productId, html }),
})
.then((res) => {
return res.json();
.then(async (res) => {
const json = await res.json();
console.log("[voim][background] 응답 원문:", json);
return json;

Check warning on line 285 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

Unexpected console statement. Only these console methods are allowed: error, warn
Copy link

@coderabbitai coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

console.log 대신 logger를 사용하세요.

일관성을 위해 logger 유틸리티를 사용하세요.

다음과 같이 수정하세요:

-console.log("[voim][background] 응답 원문:", json);
+logger.debug("[voim][background] 응답 원문:", json);

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 GitHub Check: lint-and-test

[warning] 285-285:
Unexpected console statement. Only these console methods are allowed: error, warn

🤖 Prompt for AI Agents 
In src/background/index.ts at line 285, replace any console.log statements with
the logger utility to maintain consistency in logging. Identify where
console.log is used around this line and change it to use the logger's
appropriate logging method instead.

})
.then((data) => {
const raw = data?.data;

if (!raw || typeof raw !== "object") {
console.warn(
"[voim][background] data.data 형식 이상함:",
raw,
);
sendResponse({
type: "COSMETIC_DATA_ERROR",
error: "API 응답 형식 오류",
});
return;
}

const parsedList = Object.entries(raw || {})
.filter(([_, v]) => v === true)
.map(([k]) => k);
sendResponse({
type: "COSMETIC_DATA_RESPONSE",
data: raw,
});

if (sender.tab?.id) {
chrome.tabs.sendMessage(sender.tab.id, {
type: "COSMETIC_DATA_RESPONSE",
data: raw,
});
}

sendResponse({
type: "COSMETIC_DATA_RESPONSE",
data: raw,
});
})
.catch((err) => {
console.error("[voim][background] COSMETIC 요청 실패:", err);
console.error("[voim][background] COSMETIC 요청 실패:", err);
sendResponse({
type: "COSMETIC_DATA_ERROR",
error: err.message,
});

if (sender.tab?.id) {
chrome.tabs.sendMessage(sender.tab.id, {
type: "COSMETIC_DATA_ERROR",
error: err.message,
});
}
sendResponse({
type: "COSMETIC_DATA_ERROR",
error: err.message,
});
});

return true;
}

// REVIEW SUMMARY API
// // REVIEW SUMMARY API
if (message.type === "FETCH_REVIEW_SUMMARY") {
const { productId, reviewRating, reviews } = message.payload;

Expand Down Expand Up @@ -418,10 +442,41 @@
});

chrome.action.onClicked.addListener(async (tab) => {
try {

Check warning on line 445 in src/background/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-test 

'tab' is defined but never used. Allowed unused args must match /^_/u
logger.debug("툴바 아이콘 클릭됨");
await handleModalToggle();
} catch (error) {
logger.error("툴바 아이콘 클릭 처리 중 오류 발생:", error);
}
});
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "GET_PRODUCT_TITLE") {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tabId = tabs[0]?.id;
if (!tabId) {
sendResponse({ title: "" });
return;
}

chrome.tabs.sendMessage(
tabId,
{ type: "GET_PRODUCT_TITLE" },
(response) => {
if (chrome.runtime.lastError) {
console.error(
"[voim][background] title 요청 실패:",
chrome.runtime.lastError.message,
);
sendResponse({ title: "" });
} else {
sendResponse(response);
}
},
);
});

return true;
}

return false;
});
4 changes: 1 addition & 3 deletions src/components/imageCheck/controlImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,7 @@ export const ControlImage: React.FC<ControlImageProps> = ({ targetImg }) => {
setShowModal(true);
}}
>
이미지 분석 클릭
<br />
단축키: ALT + I
이미지 분석
</div>
)}
</div>
Expand Down
23 changes: 16 additions & 7 deletions src/components/imageCheck/imageModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { sendImageAnalysisRequest } from "../../content/apiSetting/sendImageAnalysisRequest";
import { Player } from "@lottiefiles/react-lottie-player";
import Loading from "../Loading/component";

interface ImageModalProps {
imageUrl: string;
Expand Down Expand Up @@ -86,13 +87,21 @@ export const ImageModal: React.FC<ImageModalProps> = ({
{analysis}
</p>
) : (
<div style={{ textAlign: "center" }}>
{/* <Player
autoplay
loop
src="https://lottie.host/aa702275-ad1e-4b56-9baa-b8226f5a2efc/0XpUpYljD5.json"
style={{ height: "150px", width: "150px" }}
/> */}
<div
style={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "320px",
}}
>
<div
style={{ width: "260px", height: "243px" }}
>
<Loading />
</div>
<p
style={{
marginTop: "8px",
Expand Down
Loading
Loading