+
+
+ {isPathInPaths &&
+
+
+
-
-
-
- );
-};
-
-export default Layout;
diff --git a/src/api/accountsAPI.ts b/src/api/accountsAPI.ts
new file mode 100644
index 0000000..84206ba
--- /dev/null
+++ b/src/api/accountsAPI.ts
@@ -0,0 +1,38 @@
+import { apiPost, authApiPost, authApiGet } from "./apiUtils";
+import {
+ PostSendEmailConfirmData,
+ PostSendPasswordChangeEmailData,
+ PostSignInData,
+ PostSignUpData,
+ PostVerifyCodeData,
+} from "./types/accounts";
+
+export const postSendEmailConfirm = async (data: PostSendEmailConfirmData) => {
+ return apiPost("/accounts/sendEmailConfirm", data);
+};
+
+export const postVerifyCode = async (data: PostVerifyCodeData) => {
+ return apiPost("/accounts/verifyCode", data);
+};
+
+export const postSignUp = async (data: PostSignUpData) => {
+ return apiPost("/accounts/signUp", data);
+};
+
+export const postSignIn = async (data: PostSignInData) => {
+ return authApiPost("/accounts/signIn", data);
+};
+
+export const postSendPasswordChangeEmail = async (
+ data: PostSendPasswordChangeEmailData,
+) => {
+ return apiPost("/accounts/sendPasswordChangeEmail", data);
+};
+
+export const postSetClient = async (clientId: number) => {
+ return authApiPost("accounts/set-client", undefined, { clientId });
+};
+
+export const checkToken = async () => {
+ return authApiGet("/accounts/tokenValidity");
+};
diff --git a/src/api/apiUtils.ts b/src/api/apiUtils.ts
new file mode 100644
index 0000000..60f9457
--- /dev/null
+++ b/src/api/apiUtils.ts
@@ -0,0 +1,68 @@
+import axiosInstance from "./axiosInstance";
+import tokenInstance from "./tokenInstance";
+import { ApiResponse } from "./types/response";
+
+export const apiGet = async
+
+ );
+};
+
+export default CancelModal;
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
new file mode 100644
index 0000000..13febf4
--- /dev/null
+++ b/src/components/Dropdown/index.tsx
@@ -0,0 +1,54 @@
+import { ArrowDownIcon } from "@assets/svgs";
+import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+
+interface DropdownProps {
+ width: number;
+ options: string[];
+ selectedOption: string;
+ onSelectOption: (option: string) => void;
+}
+
+const Dropdown: React.FC
+
+ + {headingText} +
++ {bodyText} +
+
+
+
+
+
+
+
+
+ )}
+ {!isPathInPaths && (
+
+
+ )}
+ name
+
+
+
+ {type === "password" &&
+ !disabled &&
+ (showPassword ? (
+ setShowPassword((prev) => !prev)}
+ className="absolute right-6 top-1/2 -translate-y-1/2 transform cursor-pointer"
+ />
+ ) : (
+ setShowPassword((prev) => !prev)}
+ className="absolute right-6 top-1/2 -translate-y-1/2 transform cursor-pointer"
+ />
+ ))}
+ {isInvalid && (
+
+ );
+ },
+);
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/src/components/KeywordInput/index.tsx b/src/components/KeywordInput/index.tsx
new file mode 100644
index 0000000..6bc4d99
--- /dev/null
+++ b/src/components/KeywordInput/index.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { CloseIcon } from "@assets/svgs";
+
+interface KeywordInputProps {
+ placeholder: string;
+ keywords: string[];
+ onAddKeyword?: (keyword: string) => void;
+ onDeleteKeyword?: (keyword: string) => void;
+ validateKeyword?: (keyword: string) => boolean;
+ errorMessage?: string;
+ duplicateErrorMessage?: string;
+ type?: "default" | "modal";
+ resetInput?: boolean;
+}
+
+const KeywordInput: React.FC
+
+
+ {errorType && (
+
+ );
+};
+
+export default KeywordInput;
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
new file mode 100644
index 0000000..915b8ba
--- /dev/null
+++ b/src/components/SearchBar/index.tsx
@@ -0,0 +1,66 @@
+import { CloseIcon, SearchIcon } from "@assets/svgs";
+import cn from "@utils/cn";
+import React, { ChangeEvent, KeyboardEvent } from "react";
+
+interface SearchBarProps {
+ placeholder: string;
+ bgColor: string;
+ value: string;
+ onChange: (value: string) => void;
+ onSearch: () => void;
+}
+
+const SearchBar: React.FC+ {errorType === "invalid" ? errorMessage : duplicateErrorMessage} +
+ )} +
+ {keywords.map((keyword, index) => (
+
+
+
+ {keyword}
+
+ {onDeleteKeyword && (
+ onDeleteKeyword(keyword)}
+ />
+ )}
+
+ ))}
+
+
+ {value.trim() && (
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/components/SideMenu/index.tsx b/src/components/SideMenu/index.tsx
new file mode 100644
index 0000000..3c9c794
--- /dev/null
+++ b/src/components/SideMenu/index.tsx
@@ -0,0 +1,78 @@
+import { DefaultImage } from "@assets/images";
+import { AnalyzeIcon, HamburgerIcon, NewsIcon } from "@assets/svgs";
+import { Link, useLocation } from "react-router-dom";
+import routes from "@constants/routes";
+import useGetClientInfo from "@api/hooks/clients/useGetClientInfo";
+import { clientId } from "@constants/clientId";
+
+const SideMenu: React.FC = () => {
+ const location = useLocation();
+
+ const { data: clientData } = useGetClientInfo(clientId);
+
+ const isActive = (paths: string[]) =>
+ paths.some((path) => location.pathname.startsWith(`/${path}`))
+ ? "bg-surface-primary text-neutral-700"
+ : "text-body3";
+
+ return (
+
+
+ );
+};
+
+export default SideMenu;
diff --git a/src/components/test/index.tsx b/src/components/test/index.tsx
deleted file mode 100644
index 48e7dc4..0000000
--- a/src/components/test/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Test() {
- return
+
+
+
+
+
+
+
+ 
+
+ {clientData?.name}
+
+
+
+
+
+
+ ๋ฐ์ผ๋ฆฌ ๋ชจ๋ํฐ๋ง
+
+
+ ๋ณด๊ณ ์ ๊ด๋ฆฌ
+
+
+ ๋ชจ๋ํฐ๋ง ์ค์
+
+
+
+
+ ํ๊ธ
;
-}
-
-export default Test;
diff --git a/src/constants/category.ts b/src/constants/category.ts
new file mode 100644
index 0000000..0ef3d45
--- /dev/null
+++ b/src/constants/category.ts
@@ -0,0 +1,11 @@
+export const enToKrCategoryMap: { [key: string]: string } = {
+ SELF: "์์ฌ",
+ COMPETITOR: "๊ฒฝ์์ฌ",
+ INDUSTRY: "์
๊ณ",
+};
+
+export const krToEnCategoryMap: { [key: string]: string } = {
+ ์์ฌ: "SELF",
+ ๊ฒฝ์์ฌ: "COMPETITOR",
+ ์
๊ณ: "INDUSTRY",
+};
diff --git a/src/constants/clientId.ts b/src/constants/clientId.ts
new file mode 100644
index 0000000..270a494
--- /dev/null
+++ b/src/constants/clientId.ts
@@ -0,0 +1 @@
+export const clientId = 1;
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
new file mode 100644
index 0000000..9a398be
--- /dev/null
+++ b/src/constants/routes.ts
@@ -0,0 +1,15 @@
+const routes = {
+ main: "/",
+ signIn: "/sign-in",
+ signUp: "/sign-up",
+ password: "/password",
+ dashboard: "/dashboard",
+ monitoring: "/monitoring",
+ report: "/report",
+ reportNew: "/report/new",
+ reportEdit: "/report/edit",
+ settingKeyword: "/setting/keyword",
+ settingEmail: "/setting/email",
+} as const;
+
+export default routes;
diff --git a/src/features/report/ArticleTable/CategoryAddModal.tsx b/src/features/report/ArticleTable/CategoryAddModal.tsx
new file mode 100644
index 0000000..417166e
--- /dev/null
+++ b/src/features/report/ArticleTable/CategoryAddModal.tsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState } from "react";
+import { useOutsideClick } from "@chakra-ui/react";
+import Button from "@components/Button";
+
+interface CategoryAddModalProps {
+ onClose: () => void;
+ onAddCategory: (category: string) => void;
+}
+
+const CategoryAddModal: React.FC
+
+ );
+};
+
+export default CategoryAddModal;
diff --git a/src/features/report/ArticleTable/CategorySelectModal.tsx b/src/features/report/ArticleTable/CategorySelectModal.tsx
new file mode 100644
index 0000000..e834d84
--- /dev/null
+++ b/src/features/report/ArticleTable/CategorySelectModal.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Button from "@components/Button";
+import useGetReportCategories from "@api/hooks/reports/useGetReportCategories";
+import { CategoryTypeEn } from "types/category";
+import usePatchReportArticleCategory from "@api/hooks/reports/usePatchReportArticleCategory";
+
+interface CategorySelectModalProps {
+ reportId: number;
+ reportArticleId: number;
+ categoryType: CategoryTypeEn;
+ articleCategoryId: number;
+ onClose: () => void;
+}
+
+const CategorySelectModal: React.FC
+ ๊ธฐ์ฌ ์นดํ
๊ณ ๋ฆฌ
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default CategorySelectModal;
diff --git a/src/features/report/ReportHeader/ExitModal/index.tsx b/src/features/report/ReportHeader/ExitModal/index.tsx
new file mode 100644
index 0000000..fff554a
--- /dev/null
+++ b/src/features/report/ReportHeader/ExitModal/index.tsx
@@ -0,0 +1,54 @@
+import { CloseIcon, ErrorIcon } from "@assets/svgs";
+
+interface ExitModalProps {
+ onClose: () => void;
+ handleSaveExit: () => void;
+ handleDeleteExit: () => void;
+}
+
+const ExitModal: React.FC
+
+
+ ์นดํ
๊ณ ๋ฆฌ ์ ํํ๊ธฐ
+
+
+ {filteredCategories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+export default ExitModal;
diff --git a/src/features/report/ReportHeader/index.tsx b/src/features/report/ReportHeader/index.tsx
new file mode 100644
index 0000000..a8d04e5
--- /dev/null
+++ b/src/features/report/ReportHeader/index.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import Button from "@components/Button";
+import { UndoIcon, ReportIcon, MailIcon } from "@assets/svgs";
+import { useLocation, useNavigate } from "react-router-dom";
+import routes from "@constants/routes";
+import SendEmailModal from "../SendEmailModal";
+import useGetExcel from "@api/hooks/excel/useGetExcel";
+import usePatchUnScrap from "@api/hooks/scrap/usePatchUnScrap";
+import ExitModal from "./ExitModal";
+
+interface ReportHeaderProps {
+ reportId?: number;
+ onSave?: () => void;
+ hasArticles?: boolean;
+}
+
+const ReportHeader: React.FC
+
+ + ์์์ ์ฅ ํ์๊ฒ ์ด์? +
+
+ ์ ์ฅ์ ํ์ง ์์ผ์ค ๊ฒฝ์ฐ
+
+ ์์ฑ ์ค์ด๋ ๋ชจ๋ ๊ธฐ๋ก์ ์ง์์ง๋ฉฐ
+
+ ์ดํ ๋ณต๊ตฌ๊ฐ ๋ถ๊ฐ๋ฅํด์.
+
+
+
+
+
+
+
+ );
+};
+
+export default ReportHeader;
diff --git a/src/features/report/SendEmailModal/index.tsx b/src/features/report/SendEmailModal/index.tsx
new file mode 100644
index 0000000..89d1217
--- /dev/null
+++ b/src/features/report/SendEmailModal/index.tsx
@@ -0,0 +1,116 @@
+import usePostSendEmail from "@api/hooks/emails/usePostSendEmail";
+import { CloseIcon, LoadingIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import Input from "@components/Input";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+interface SendEmailModalProps {
+ reportId: number;
+ onClose: () => void;
+}
+
+type SendEmailFormData = {
+ subject: string;
+ content: string;
+};
+
+const SendEmailModal: React.FC
+ {reportId && (
+ <>
+
+
+
+ )}
+ {isSendEmailModalOpen && reportId && (
+
+ {isExitModalOpen && (
+
+
+
+ );
+};
+
+export default SendEmailModal;
diff --git a/src/features/report/SummarizeModal/index.tsx b/src/features/report/SummarizeModal/index.tsx
new file mode 100644
index 0000000..a10086d
--- /dev/null
+++ b/src/features/report/SummarizeModal/index.tsx
@@ -0,0 +1,65 @@
+import usePatchReportArticleSummary from "@api/hooks/reports/usePatchReportArticleSummary";
+import Button from "@components/Button";
+import { ChangeEvent, useState } from "react";
+
+interface SummarizeModalProps {
+ reportId: number;
+ reportArticleId: number;
+ onClose: () => void;
+}
+
+const SummarizeModal: React.FC
+
+ );
+};
+
+export default SummarizeModal;
diff --git a/src/features/setting/KeywordList/index.tsx b/src/features/setting/KeywordList/index.tsx
new file mode 100644
index 0000000..11217af
--- /dev/null
+++ b/src/features/setting/KeywordList/index.tsx
@@ -0,0 +1,114 @@
+import React, { useRef, useState } from "react";
+import useValidateEmail from "@hooks/useValidateEmail";
+import KeywordInput from "@components/KeywordInput";
+import { AddCircleFillIcon, AttentionIcon } from "@assets/svgs";
+
+interface KeywordListProps {
+ title: string;
+ keywords?: string[];
+ onAddKeyword?: (keyword: string) => void;
+ onDeleteKeyword?: (keyword: string) => void;
+ type: string;
+ showBorder?: boolean;
+ signatureImageUrl?: string | null;
+ onImageChange?: (image: File | null) => void;
+}
+
+const KeywordList = ({
+ title,
+ keywords = [],
+ onAddKeyword,
+ onDeleteKeyword,
+ type,
+ showBorder = true,
+ onImageChange,
+ signatureImageUrl,
+}: KeywordListProps) => {
+ const validateEmail = useValidateEmail(type);
+ const [uploadingImg, setUploadingImg] = useState
+
+
+ ๊ธฐ์ฌ ํ ์ค ์์ฝ
+
+
+
+
+ {text.length}/100
+
+
+
+
+
+
+ );
+};
+
+export default KeywordList;
diff --git a/src/features/setting/TabNavigation/index.tsx b/src/features/setting/TabNavigation/index.tsx
new file mode 100644
index 0000000..bf020c4
--- /dev/null
+++ b/src/features/setting/TabNavigation/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import Button from "@components/Button";
+import routes from "@constants/routes";
+import { LoadingIcon } from "@assets/svgs";
+
+interface TabNavigationProps {
+ onSave: () => void;
+ isPending?: boolean;
+}
+
+const TabNavigation: React.FC
+ {title}
+
+
+
+ {type === "sign" ? (
+ <>
+ 
+ ) : uploadingImg ? (
+ 
+ ) : (
+
+ )}
+
+
+
+ ) : (
+
+
+
+
+ {signatureImageUrl ? (
+ + ํ์ผ ํ์: PNG, JPG +
++ | ์ต์ ํฌ๊ธฐ: 300 X 100(px) +
+
+
+ );
+};
+
+export default TabNavigation;
diff --git a/src/hooks/useCheckPasswordValidation.ts b/src/hooks/useCheckPasswordValidation.ts
new file mode 100644
index 0000000..2e6a60d
--- /dev/null
+++ b/src/hooks/useCheckPasswordValidation.ts
@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+const usePasswordValidation = () => {
+ const [passwordChecks, setPasswordChecks] = useState({
+ length: false,
+ hasNumberAndLetter: false,
+ hasSpecialChar: false,
+ });
+
+ const validatePassword = (password: string) => {
+ setPasswordChecks({
+ length: password.length >= 8,
+ hasNumberAndLetter: /[A-Za-z]/.test(password) && /\d/.test(password),
+ hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(password),
+ });
+ };
+
+ return { passwordChecks, validatePassword };
+};
+
+export default usePasswordValidation;
diff --git a/src/hooks/useEmailConfirmation.ts b/src/hooks/useEmailConfirmation.ts
new file mode 100644
index 0000000..2f53795
--- /dev/null
+++ b/src/hooks/useEmailConfirmation.ts
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useToast } from "@chakra-ui/react";
+import usePostSendEmailConfirm from "@api/hooks/accounts/usePostSendEmailConfirm";
+
+const useEmailConfirmation = (email: string) => {
+ const [isEmailSent, setIsEmailSent] = useState(false);
+ const [isEmailConfirmButtonDisabled, setIsEmailConfirmButtonDisabled] =
+ useState(false);
+ const [remainedSeconds, setRemainedSeconds] = useState(0);
+ const toast = useToast();
+ const { mutate: sendEmailConfirm, isPending } = usePostSendEmailConfirm();
+
+ const handleSendEmailConfirm = () => {
+ if (isEmailConfirmButtonDisabled) {
+ toast({
+ title: `${remainedSeconds}์ด ํ์ ๋ค์ ์๋ํด ์ฃผ์ธ์.`,
+ status: "warning",
+ });
+ return;
+ }
+ setIsEmailSent(false);
+
+ sendEmailConfirm(
+ { email },
+ {
+ onSuccess: () => {
+ setIsEmailSent(true);
+ setIsEmailConfirmButtonDisabled(true);
+ setRemainedSeconds(10);
+ const countdown = setInterval(() => {
+ setRemainedSeconds((prev) => {
+ if (prev === 1) {
+ clearInterval(countdown);
+ setIsEmailConfirmButtonDisabled(false);
+ }
+ return prev - 1;
+ });
+ }, 1000);
+ },
+ },
+ );
+ };
+
+ return {
+ isPending,
+ isEmailSent,
+ isEmailConfirmButtonDisabled,
+ handleSendEmailConfirm,
+ };
+};
+
+export default useEmailConfirmation;
diff --git a/src/hooks/useValidateEmail.ts b/src/hooks/useValidateEmail.ts
new file mode 100644
index 0000000..bc4576a
--- /dev/null
+++ b/src/hooks/useValidateEmail.ts
@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+
+const useValidateEmail = (type: string) => {
+ const validateEmail = useCallback(
+ (keyword: string) => {
+ if (type === "email") {
+ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(keyword.trim());
+ }
+ return true;
+ },
+ [type],
+ );
+
+ return validateEmail;
+};
+
+export default useValidateEmail;
diff --git a/src/main.tsx b/src/main.tsx
index 8adaa9f..3d0335e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,11 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
import "./index.css";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
+import router from "./router.tsx";
createRoot(document.getElementById("root")!).render(
+
+ ๊ฒ์ ํค์๋
+
+
+ ๋ฉ์ผ
+
+
+
+
+
+ );
+};
+
+export default Step1;
diff --git a/src/pages/Dashboard/components/AddModal/components/Step2/index.tsx b/src/pages/Dashboard/components/AddModal/components/Step2/index.tsx
new file mode 100644
index 0000000..1dfc7dc
--- /dev/null
+++ b/src/pages/Dashboard/components/AddModal/components/Step2/index.tsx
@@ -0,0 +1,117 @@
+import { AttentionIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import KeywordInput from "@components/KeywordInput";
+
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { enToKrCategoryMap } from "@constants/category";
+import KeywordLabel from "@pages/Dashboard/components/KeywordLabel";
+
+interface Step2Props {
+ handleNext: () => void;
+}
+
+const Step2: React.FC
+
+ + ๊ณ ๊ฐ์ฌ ์ ๋ณด ์ถ๊ฐํ๊ธฐ +
+
+
+
+
+
+ + ์๋ก์ด ๊ณ ๊ฐ์ฌ์ ์ ๋ณด๋ฅผ ์ ๋ ฅํด์ฃผ์ธ์. +
+
+
+
+
+
+
+
+
+
+
+
+ {uploadingImg ? (
+ + ํ์ผ ํ์: PNG, JPG | ์ต์ ํฌ๊ธฐ: 96 X 72(px) +
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
+
+export default Step2;
diff --git a/src/pages/Dashboard/components/AddModal/components/Step3/index.tsx b/src/pages/Dashboard/components/AddModal/components/Step3/index.tsx
new file mode 100644
index 0000000..103b1a6
--- /dev/null
+++ b/src/pages/Dashboard/components/AddModal/components/Step3/index.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { AttentionIcon, LoadingIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import KeywordInput from "@components/KeywordInput";
+import { useFormContext } from "react-hook-form";
+import useValidateEmail from "@hooks/useValidateEmail";
+import KeywordLabel from "@pages/Dashboard/components/KeywordLabel";
+
+interface Step3Props {
+ isPending: boolean;
+}
+
+const Step3: React.FC
+
+ + ํค์๋ ์ค์ ํ๊ธฐ +
+
+
+
+
+
+ + ๋ฐ์ผ๋ฆฌ๋ชจ๋ํฐ๋ง์ ์ํ ํค์๋๋ฅผ ์ค์ ํด์ฃผ์ธ์ +
+
+
+
+
+ {Object.keys(keywordsByCategory).map((buttonName) => (
+
+ ))}
+
+
+
+ + ํค์๋ ์ ๋ ฅ ํ ์ํฐ(Enter)๋ฅผ ๋๋ฅด๋ฉด ํค์๋ ํ๊ทธ๊ฐ ์๋ ์์ฑ๋ฉ๋๋ค. +
+
+ updateKeywords("add", keyword)}
+ onDeleteKeyword={(keyword) => updateKeywords("delete", keyword)}
+ duplicateErrorMessage="*์ด๋ฏธ ์ถ๊ฐ๋ ํค์๋์
๋๋ค."
+ resetInput={resetInput}
+ />
+
+
+
+ );
+};
+
+export default Step3;
diff --git a/src/pages/Dashboard/components/AddModal/index.tsx b/src/pages/Dashboard/components/AddModal/index.tsx
new file mode 100644
index 0000000..7047186
--- /dev/null
+++ b/src/pages/Dashboard/components/AddModal/index.tsx
@@ -0,0 +1,148 @@
+import { ArrowBeforeThick, CloseIcon } from "@assets/svgs";
+import { useState } from "react";
+import Step1 from "./components/Step1";
+import { useForm, FormProvider, SubmitHandler } from "react-hook-form";
+import usePostClient from "@api/hooks/clients/usePostClient";
+import CancelModal from "@components/CancelModal";
+import Step2 from "./components/Step2";
+import Step3 from "./components/Step3";
+
+type AddModalFormData = {
+ companyName: string;
+ personInCharge: string;
+ logoFile: File | null;
+ keywordsByCategory: {
+ SELF: string[];
+ COMPETITOR: string[];
+ INDUSTRY: string[];
+ };
+ recipientEmails: string[];
+ referenceEmails: string[];
+};
+
+interface AddModalProps {
+ onClose: () => void;
+ onSubmit: () => void;
+}
+
+const AddModal: React.FC
+
+ + ๋ฉ์ผ ์ค์ ํ๊ธฐ +
+
+
+
+
+
+ + ๋ชจ๋ํฐ๋ง ๋ณด๊ณ ์๋ฅผ ๋ฐ๋์ฌ๋์ ๋ฉ์ผ์ ์ ์ฅํด๋ณด์ธ์. +
+
+
+
+
+
+ + ๋ฉ์ผ ์ฃผ์ ์ ๋ ฅ ํ ์ํฐ(Enter)๋ฅผ ๋๋ฅด๋ฉด ๋ฉ์ผ์ด ์๋ ์ถ๊ฐ๋ฉ๋๋ค. +
+
+
+ handleKeywordChange("recipientEmails", email, "add")
+ }
+ onDeleteKeyword={(email) =>
+ handleKeywordChange("recipientEmails", email, "delete")
+ }
+ validateKeyword={validateEmail}
+ errorMessage="*์๋ชป๋ ์ด๋ฉ์ผ ํ์์
๋๋ค."
+ duplicateErrorMessage="*์ด๋ฏธ ์ถ๊ฐ๋ ์ด๋ฉ์ผ์
๋๋ค."
+ />
+
+
+
+ handleKeywordChange("referenceEmails", email, "add")
+ }
+ onDeleteKeyword={(email) =>
+ handleKeywordChange("referenceEmails", email, "delete")
+ }
+ validateKeyword={validateEmail}
+ errorMessage="*์๋ชป๋ ์ด๋ฉ์ผ ํ์์
๋๋ค."
+ duplicateErrorMessage="*์ด๋ฏธ ์ถ๊ฐ๋ ์ด๋ฉ์ผ์
๋๋ค."
+ />
+
+
+
+ );
+};
+
+export default AddModal;
diff --git a/src/pages/Dashboard/components/ClientNotFound/index.tsx b/src/pages/Dashboard/components/ClientNotFound/index.tsx
new file mode 100644
index 0000000..1e426c5
--- /dev/null
+++ b/src/pages/Dashboard/components/ClientNotFound/index.tsx
@@ -0,0 +1,37 @@
+import { DashboardImage } from "@assets/images";
+import { AddCircleFillIcon } from "@assets/svgs";
+
+interface ClientNotFoundProps {
+ handleAddModalOpen: () => void;
+}
+
+const ClientNotFound: React.FC
+
+
+
+ {isCancelModalOpen && (
+
+
+ 
+
+ );
+};
+
+export default ClientNotFound;
diff --git a/src/pages/Dashboard/components/DeleteModal/index.tsx b/src/pages/Dashboard/components/DeleteModal/index.tsx
new file mode 100644
index 0000000..fff40aa
--- /dev/null
+++ b/src/pages/Dashboard/components/DeleteModal/index.tsx
@@ -0,0 +1,106 @@
+import useDeleteClient from "@api/hooks/clients/useDeleteClient";
+import { CloseIcon, ErrorIcon } from "@assets/svgs";
+import { useToast } from "@chakra-ui/react";
+import Input from "@components/Input";
+import { useState } from "react";
+
+interface DeleteModalProps {
+ onClose: () => void;
+ clientId: number;
+ name: string;
+}
+
+const DeleteModal: React.FC
+
+ ๋ ์ค๋งํธํ๊ฒ.
+
+
+ ๋ ์ค๋งํธํ๊ฒ.
๋ ๋ชจ๋ํฐ์ ํจ๊ป.
+
+ + ๊ณ ๊ฐ์ฌ๋ฅผ ์ถ๊ฐํด ๋์ฑ ์ฌ์ด ๋ชจ๋ํฐ๋ง ์ ๋ฌด๋ฅผ ๊ฒฝํํด๋ณด์ธ์. +
++ ํ๋์ ๋์๋ณด๋ ํ๋ฉด์์ ์ฌ๋ฌ ๊ณ ๊ฐ์ฌ๋ฅผ ํตํฉ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. +
+ +
+
+ );
+};
+
+export default DeleteModal;
diff --git a/src/pages/Dashboard/components/EditModal/index.tsx b/src/pages/Dashboard/components/EditModal/index.tsx
new file mode 100644
index 0000000..764f0b1
--- /dev/null
+++ b/src/pages/Dashboard/components/EditModal/index.tsx
@@ -0,0 +1,154 @@
+import usePutClient from "@api/hooks/clients/usePutClient";
+import { AddCircleThinIcon, AttentionIcon, CloseIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import Input from "@components/Input";
+import { useState } from "react";
+
+interface EditModalProps {
+ onClose: () => void;
+ clientId: number;
+ manager: string;
+ name: string;
+ logoUrl: string;
+}
+
+const EditModal: React.FC
+
+
+
+ + ๊ณ ๊ฐ์ฌ ์ ๋ณด๋ฅผ ์ ๋ง ์ญ์ ํ์๊ฒ ์ด์? +
++ ๋ชจ๋ ์ ๋ณด๋ ์ญ์ ๋๋ฉฐ ์ดํ ๋ณต๊ตฌ๊ฐ ๋ถ๊ฐ๋ฅํฉ๋๋ค +
++ ์ญ์ ํ๋ ค๋ ๊ณ ๊ฐ์ฌ๋ช ์ ๋ค์ ์ ๋ ฅํด์ฃผ์ธ์. +
+ + {clientName !== name && ( ++ {error} +
+ )} +
+
+
+
+
+
+ );
+};
+
+export default EditModal;
diff --git a/src/pages/Dashboard/components/KeywordLabel/index.tsx b/src/pages/Dashboard/components/KeywordLabel/index.tsx
new file mode 100644
index 0000000..213dab8
--- /dev/null
+++ b/src/pages/Dashboard/components/KeywordLabel/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface KeywordLabelProps {
+ label: string;
+ isRequired?: boolean;
+}
+
+const KeywordLabel: React.FC
+
+ + ๊ณ ๊ฐ์ฌ ์ ๋ณด ์์ ํ๊ธฐ +
++ ์๋ก์ด ๊ณ ๊ฐ์ฌ์ ์ ๋ณด๋ฅผ ์ ๋ ฅํด์ฃผ์ธ์. +
+
+
+ setClientName(e.target.value)}
+ />
+
+ setClientManager(e.target.value)}
+ />
+
+
+
+
+
+
+ {uploadingImg ? (
+ + ํ์ผ ํ์: PNG, JPG | ์ต์ ํฌ๊ธฐ: 96 X 72(px) +
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+ setIsDeleteModalOpen(false)}
+ />
+ )}
+ {isEditModalOpen && (
+ setIsEditModalOpen(false)}
+ />
+ )}
+
+ );
+};
+
+export default MonitoringCard;
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
new file mode 100644
index 0000000..34a2d85
--- /dev/null
+++ b/src/pages/Dashboard/index.tsx
@@ -0,0 +1,98 @@
+import { AddCircleFillIcon } from "@assets/svgs";
+import { useState } from "react";
+import AddModal from "./components/AddModal";
+import MonitoringCard from "./components/MonitoringCard";
+import SearchBar from "@components/SearchBar";
+import ClientNotFound from "./components/ClientNotFound";
+import { useGetClients } from "@api/hooks/clients/useGetClients";
+import Button from "@components/Button";
+import usePostSearchClient from "@api/hooks/clients/usePostSearchClient";
+
+const DashboardPage: React.FC = () => {
+ const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+ const [searchText, setSearchText] = useState("");
+ const [searchQuery, setSearchQuery] = useState("");
+
+ const { data: clientsData, isLoading } = useGetClients();
+ const { data: searchData, isLoading: isSearching } =
+ usePostSearchClient(searchText);
+
+ if (isLoading || isSearching) {
+ return null;
+ }
+
+ const handleAddModalOpen = () => {
+ setIsAddModalOpen(true);
+ };
+
+ const handleClose = () => {
+ setIsAddModalOpen(false);
+ };
+
+ const handleSubmit = () => {
+ setIsAddModalOpen(false);
+ };
+
+ const handleChangeSearchText = (value: string) => {
+ setSearchText(value);
+ if (!value.trim()) {
+ setSearchQuery("");
+ }
+ };
+
+ const handleSearch = () => {
+ if (!searchText.trim()) {
+ setSearchQuery("");
+ } else {
+ setSearchQuery(searchText);
+ }
+ };
+
+ const displayClientData = searchQuery ? searchData : clientsData;
+
+ return (
+
+
+ {isDeleteModalOpen && (
+
+
+ {isMenuOpen && (
+
+
+
+
+
+
+
+ )}
+
+ {clientsData?.length === 0 ? (
+
+ );
+};
+
+export default DashboardPage;
diff --git a/src/pages/FindPassword/PasswordSentModal/index.tsx b/src/pages/FindPassword/PasswordSentModal/index.tsx
new file mode 100644
index 0000000..aec4f0e
--- /dev/null
+++ b/src/pages/FindPassword/PasswordSentModal/index.tsx
@@ -0,0 +1,42 @@
+import { CheckboxFillIcon, CloseIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import routes from "@constants/routes";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+interface PasswordSentModalProps {
+ onClose: () => void;
+}
+
+const PasswordSentModal: React.FC
+
+
+
+
+ )}
+ {isAddModalOpen && (
+
+ {displayClientData?.map((client) => (
+
+
+
+ );
+};
+
+export default PasswordSentModal;
diff --git a/src/pages/FindPassword/index.tsx b/src/pages/FindPassword/index.tsx
new file mode 100644
index 0000000..f6d2c47
--- /dev/null
+++ b/src/pages/FindPassword/index.tsx
@@ -0,0 +1,105 @@
+import usePostSendPasswordChangeEmail from "@api/hooks/accounts/usePostSendPasswordChangeEmail";
+import { LoadingIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import Input from "@components/Input";
+import React, { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import PasswordSentModal from "./PasswordSentModal";
+
+type FindPasswordFormData = {
+ email: string;
+};
+
+const FindPasswordPage: React.FC = () => {
+ const {
+ register,
+ watch,
+ handleSubmit,
+ formState: { errors },
+ } = useForm
+
+
+ ํ์ธ ๋ฒํผ์ ๋๋ฅด์๋ฉด
+
+ ๋ก๊ทธ์ธ ํ์ด์ง๋ก ๋ฐ๋ก ์ด๋๋ฉ๋๋ค.
+
+
+ {isModalOpen &&
+
+ ๋น๋ฐ๋ฒํธ ๋ณ๊ฒฝ
+
+ ๊ฐ์
์ ์ฌ์ฉํ๋ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.
+
+ ํด๋น ์ด๋ฉ์ผ๋ก ์์ ๋น๋ฐ๋ฒํธ๋ฅผ ๋ณด๋ด๋๋ฆฝ๋๋ค.
+
+
+ ๋ฌธ์ํ๊ธฐ
+
+
+
+ {icon}
+ {label}
+
+ );
+};
+
+export default Badge;
diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx
new file mode 100644
index 0000000..f906366
--- /dev/null
+++ b/src/pages/Landing/index.tsx
@@ -0,0 +1,203 @@
+import {
+ ClientManagementImage,
+ Function1Image,
+ Function2Image,
+ Function3Image,
+ InsightsImage,
+ OutputImage,
+ PerformanceImage,
+ TestimonialsImage,
+} from "@assets/images";
+import {
+ ArrowNextFillIcon,
+ BarChartIcon,
+ ClockIcon,
+ LightBulbIcon,
+ UnlimitedIcon,
+} from "@assets/svgs";
+import Button from "@components/Button";
+import Badge from "./Badge";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import routes from "@constants/routes";
+import Footer from "@components/Footer";
+
+const LandingPage = () => {
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ AOS.init({
+ duration: 1000,
+ once: false,
+ });
+
+ const handleScroll = () => {
+ AOS.refresh();
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ const handleClick = () => {
+ navigate(routes.signUp);
+ };
+
+ return (
+
+
+ );
+};
+
+export default LandingPage;
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
deleted file mode 100644
index cb5cea5..0000000
--- a/src/pages/Main/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const MainPage = () => {
- return
+
+
+
+ ๋ ์ค๋งํธํ๊ฒ.
+
+
+ ๋ ์ค๋งํธํ๊ฒ.
๋๋ชจ๋ํฐ์ ํจ๊ป.
+
+ + ๋ด์ค ๋ชจ๋ํฐ๋ง์ ๋ชจ๋ ๊ฒ +
+ +
+
+
+
+ 
+
+
+
+ ๋ฒ๊ฑฐ๋ก์ด ๊ณ ๊ฐ์ฌ ๋ชจ๋ํฐ๋ง ๊ด๋ฆฌ,
+
+
+ ๋ฒ๊ฑฐ๋ก์ด ๊ณ ๊ฐ์ฌ ๋ชจ๋ํฐ๋ง ๊ด๋ฆฌ,
+ ํ๋์ ์ํฌ์คํ์ด์ค์์.
+
+
+ ๋ชจ๋ ํด๋ผ์ด์ธํธ์ ๋ชจ๋ํฐ๋ง ์
๋ฌด๋ฅผ
ํ ๊ณณ์์ ๊ด๋ฆฌํด๋ณด์ธ์.
+
+ 
+
+
+
+ ๊ฒ์๋ถํฐ ๋ณด๊ณ ์๊น์ง
+
+
+
+ ๊ฒ์๋ถํฐ ๋ณด๊ณ ์๊น์ง
+
๋จ 20๋ถ๋ง์!
+
+
+ ํจ์จ์ ์ธ ๋ชจ๋ํฐ๋ง ์
๋ฌด ํ๋ก์ธ์ค๋ฅผ
์ง์ ๊ฒฝํํด๋ณด์ธ์.
+
+ 
+
+
+
+ ๋ฐ์ผ๋ฆฌ ๋ณด๊ณ ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก
+
+
+
+ ๋ฐ์ผ๋ฆฌ ๋ณด๊ณ ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก
+
+ ์๋์ผ๋ก ์ฑ๊ณผ๋ฅผ ์ธก์ ํด์
+
+
+ ๋งค์ผ ์ฐ์ถ๋๋ ๋ฐ์ผ๋ฆฌ ๋ณด๊ณ ์, ์ด์ ๋
+ ์ฑ๊ณผ๋ฐ์ดํฐ๊น์ง ํธ๋ฆฌํ๊ฒ ์ฐ์ถํด๋ณด์ธ์.
+
+ 
+
+
+
+ ์ด์, ํธ๋ ๋ ๋ถ์๊น์ง
+
+
+
+ ์ด์, ํธ๋ ๋ ๋ถ์๊น์ง
+
ํ ๋ฒ์ ํ์
ํด์
+
+
+ ํค์๋ ๊ธฐ๋ฐ ๊ธฐ์ฌ๋ค์ PR ํ ํฝ๊ณผ
๊ด๋ จ ํต์ฌ ์ด์๋ฅผ ๊ด๊ณ๋๋ก ๋ณผ
+ ์ ์์ด์.
+
+
+
+
+ + ๋ ๋ชจ๋ํฐ์ ๊ธฐ๋ฅ์ ๋ง๋๋ณด์ธ์ +
++ ๋ ์ค๋งํธํ๊ฒ, ๋ ๋ชจ๋ํฐ๋ต๊ฒ +
+
+
+
+ 
+
+
+ 1
+
+
+ 
+
+
+ 2
+
+
+ 
+
+
+ 3
+
+ MainPage
;
-};
-
-export default MainPage;
diff --git a/src/pages/Monitoring/components/ArticleBox/index.tsx b/src/pages/Monitoring/components/ArticleBox/index.tsx
new file mode 100644
index 0000000..5e1a1e3
--- /dev/null
+++ b/src/pages/Monitoring/components/ArticleBox/index.tsx
@@ -0,0 +1,104 @@
+import { usePatchReportRead } from "@api/hooks/articles/usePatchArticleRead";
+import usePostScrap from "@api/hooks/scrap/usePostScrap";
+import { DefaultImage } from "@assets/images";
+import {
+ AddedIcon,
+ BookmarkBlankIcon,
+ BookmarkFillIcon,
+ ClockIcon,
+ PersonCheckIcon,
+ PersonIcon,
+} from "@assets/svgs";
+
+interface ArticleBoxProps {
+ articleId: number;
+ title: string;
+ body: string;
+ publisherName: string;
+ reporterName: string;
+ publishDate: string;
+ imageUrl: string;
+ url: string;
+ isScrapped: boolean;
+ isAdded: boolean;
+ isRead: boolean;
+}
+
+const ArticleBox: React.FC
+
+
+ );
+};
+
+export default Category;
diff --git a/src/pages/Monitoring/components/DateSelector/index.tsx b/src/pages/Monitoring/components/DateSelector/index.tsx
new file mode 100644
index 0000000..44dfc18
--- /dev/null
+++ b/src/pages/Monitoring/components/DateSelector/index.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { DateRangePicker } from "react-date-range";
+import { subDays } from "date-fns";
+import "react-date-range/dist/styles.css";
+import "react-date-range/dist/theme/default.css";
+import { ArrowDownIcon, CloseIcon } from "@assets/svgs";
+
+interface DateSelectorProps {
+ dateRange: any;
+ setDateRange: (range: any) => void;
+ showDatePicker: boolean;
+ toggleDatePicker: () => void;
+}
+
+const DateSelector: React.FC-
+ {keywords.map((keyword) => (
+
- + + + ))} +
+
+ )}
+
+);
+
+export default DateSelector;
diff --git a/src/pages/Monitoring/components/Pagination/index.tsx b/src/pages/Monitoring/components/Pagination/index.tsx
new file mode 100644
index 0000000..bd4a2f6
--- /dev/null
+++ b/src/pages/Monitoring/components/Pagination/index.tsx
@@ -0,0 +1,110 @@
+import {
+ ArrowLeftIcon,
+ ArrowRightIcon,
+ DoubleArrowLeftIcon,
+ DoubleArrowRightIcon,
+} from "@assets/svgs";
+import React from "react";
+
+interface PaginationProps {
+ totalCount: number;
+ currentPage: number;
+ onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC
+
+ setDateRange([
+ {
+ startDate: item.selection.startDate || new Date(),
+ endDate: item.selection.endDate || new Date(),
+ key: "selection",
+ },
+ ])
+ }
+ moveRangeOnFirstSelection={false}
+ ranges={dateRange}
+ minDate={subDays(new Date(), 180)}
+ maxDate={new Date()}
+ months={2}
+ direction="horizontal"
+ className="overflow-hidden rounded"
+ />
+
+
+
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/pages/Monitoring/components/PortalDropdown/index.tsx b/src/pages/Monitoring/components/PortalDropdown/index.tsx
new file mode 100644
index 0000000..a37aadf
--- /dev/null
+++ b/src/pages/Monitoring/components/PortalDropdown/index.tsx
@@ -0,0 +1,87 @@
+import { forwardRef } from "react";
+import { Checkbox } from "@chakra-ui/react";
+import { InternetIcon, ArrowDownIcon } from "@assets/svgs";
+
+interface PortalDropdownProps {
+ showDropdown: boolean;
+ setShowDropdown: (show: boolean) => void;
+ selectedPortals: { [key: string]: boolean };
+ handleCheckboxChange: (key: "๋ค์ด๋ฒ" | "๊ตฌ๊ธ" | "๋ค์" | "์ค") => void;
+ applySelection: () => void;
+ portalDisplay: string;
+}
+
+const PortalDropdown = forwardRef
+ {pages.map((page) => (
+
+ ))}
+
+
+
+
+
+ {showDropdown && (
+
+ ),
+);
+
+PortalDropdown.displayName = "PortalDropdown";
+
+export default PortalDropdown;
diff --git a/src/pages/Monitoring/index.tsx b/src/pages/Monitoring/index.tsx
new file mode 100644
index 0000000..a19c420
--- /dev/null
+++ b/src/pages/Monitoring/index.tsx
@@ -0,0 +1,218 @@
+import { NotFoundIcon, ReportCheckIcon } from "@assets/svgs";
+import { subDays } from "date-fns";
+import React, { useRef, useState } from "react";
+import "react-date-range/dist/styles.css";
+import "react-date-range/dist/theme/default.css";
+import DateSelector from "./components/DateSelector";
+import PortalDropdown from "./components/PortalDropdown";
+import Button from "@components/Button";
+import { useOutsideClick } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+import routes from "@constants/routes";
+import useGetKeywords from "@api/hooks/keywords/useGetKeywords";
+import Category from "./components/Category";
+import useGetArticlesByKeyword from "@api/hooks/articles/useGetArticlesByKeyword";
+import ArticleBox from "./components/ArticleBox";
+import Pagination from "./components/Pagination";
+import useGetArticles from "@api/hooks/articles/useGetArticles";
+import { CategoryTypeEn, CategoryTypeKr } from "types/category";
+import { enToKrCategoryMap } from "@constants/category";
+import { Keyword } from "@api/types/keywords";
+
+const MonitoringPage: React.FC = () => {
+ const navigate = useNavigate();
+ const [selectedCategory, setSelectedCategory] = useState<
+ CategoryTypeEn | undefined
+ >("SELF");
+
+ const handleSelectCategory = (category: CategoryTypeEn | undefined) => {
+ setSelectedCategory(category);
+ };
+ const { data: keywordsData } = useGetKeywords();
+
+ const [selectedKeyword, setSelectedKeyword] = useState
+
+ )}
+
+ {(
+ Object.keys(selectedPortals) as Array<
+ "๋ค์ด๋ฒ" | "๊ตฌ๊ธ" | "๋ค์" | "์ค"
+ >
+ ).map((key) => (
+
+
+
+ handleCheckboxChange(key)}
+ borderColor="#A3A3A3"
+ sx={{
+ "& .chakra-checkbox__control": {
+ width: "16px",
+ height: "16px",
+ borderRadius: "0px",
+ bg: "white",
+ borderWidth: "2px",
+ },
+ "& .chakra-checkbox__control[data-checked]": {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ _hover: {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ },
+ },
+ }}
+ />
+
+ ))}
+ {key}
+
+
+ );
+};
+export default MonitoringPage;
diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx
new file mode 100644
index 0000000..ef05c9c
--- /dev/null
+++ b/src/pages/NotFound/index.tsx
@@ -0,0 +1,42 @@
+import { NotFoundIcon } from "@assets/svgs";
+import Button from "@components/Button";
+import routes from "@constants/routes";
+import { useNavigate } from "react-router-dom";
+
+const NotFound: React.FC = () => {
+ const navigate = useNavigate();
+
+ return (
+
+ {keywordsData &&
+ (
+ Object.entries(enToKrCategoryMap) as [
+ CategoryTypeEn,
+ CategoryTypeKr,
+ ][]
+ ).map(([categoryEn, categoryKr]) => (
+
+
+
+
+
+ {articlesToDisplay?.totalCount === 0 ? (
+
+ {
+ setShowDropdown(show);
+ if (show) {
+ setTempSelectedPortals(selectedPortals);
+ }
+ }}
+ selectedPortals={tempSelectedPortals}
+ handleCheckboxChange={handleCheckboxChange}
+ applySelection={applySelection}
+ portalDisplay={portalDisplay}
+ ref={dropdownRef}
+ />
+
+
+
+
+ ๊ฒ์ ๊ฒฐ๊ณผ
+
+ {articlesToDisplay?.totalCount}๊ฑด
+
+
+
+ ) : (
+
+
+ )}
+
+ {articlesToDisplay?.listPageResponse[0].googleArticles.map(
+ (article) => (
+
+
+
+ );
+};
+
+export default NotFound;
diff --git a/src/pages/Report/ReportBox/index.tsx b/src/pages/Report/ReportBox/index.tsx
new file mode 100644
index 0000000..53f422c
--- /dev/null
+++ b/src/pages/Report/ReportBox/index.tsx
@@ -0,0 +1,88 @@
+import { ClockIcon, DeleteIcon, EditNoteIcon, PencilIcon } from "@assets/svgs";
+import routes from "@constants/routes";
+import { useNavigate } from "react-router-dom";
+import convertUtcToKst from "@utils/convertUtcToKst";
+import { useState } from "react";
+import CancelModal from "@components/CancelModal";
+import useDeleteReport from "@api/hooks/reports/useDeleteReport";
+
+interface ReportBoxProps {
+ reportId: number;
+ title: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+const ReportBox: React.FC
+
+
+ ์กด์ฌํ์ง ์๋ ์ฃผ์๋ฅผ ์
๋ ฅํ์
จ๊ฑฐ๋,
+
+ ์ฃผ์๊ฐ ๋ณ๊ฒฝ, ์ญ์ ๋์ด ์ฐพ์ ์ ์์ต๋๋ค.{" "}
+
+
+
+
+
+
+ {isDeleteModalOpen && (
+
+ {title}
+
+
+
+
+
+ {isEdited && (
+
+
+ )}
+ {convertUtcToKst(updatedAt)}
+
+
+
+
+
+
+ );
+};
+
+export default ReportPage;
diff --git a/src/pages/ReportEdit/components/AddArticleForm/index.tsx b/src/pages/ReportEdit/components/AddArticleForm/index.tsx
new file mode 100644
index 0000000..cd260ed
--- /dev/null
+++ b/src/pages/ReportEdit/components/AddArticleForm/index.tsx
@@ -0,0 +1,194 @@
+import useGetKeywords from "@api/hooks/keywords/useGetKeywords";
+import usePostReportArticle from "@api/hooks/reports/usePostReportArticle";
+import Button from "@components/Button";
+import Dropdown from "@components/Dropdown";
+import Input from "@components/Input";
+import { krToEnCategoryMap } from "@constants/category";
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+type AddArticleFromData = {
+ headLine: string;
+ url: string;
+ publishedDate: string;
+ media: string;
+ reporter: string;
+};
+
+interface AddArticleFormProps {
+ reportId: number;
+ isMedia: boolean | undefined;
+ isReporter: boolean | undefined;
+}
+
+const AddArticleForm: React.FC
+
+ {!sortedReports || sortedReports?.length === 0 ? (
+
+
+
+
+ ์์ง ์ ์ฅ๋ ๋ณด๊ณ ์๊ฐ ์์ด์!
+
+
+ ) : (
+
+ ๋ฐ์ผ๋ฆฌ ๋ชจ๋ํฐ๋ง ๋ณด๊ณ ์๋ฅผ ์์ฑํ๊ณ ,
+ ์ด๊ณณ์์ ๋ณด๊ณ ์๋ฅผ ์กฐํ ๋ฐ ๊ด๋ฆฌํด๋ณด์ธ์
+
+ {sortedReports.map((report) => (
+
+ )}
+
+
+ );
+};
+
+export default CategoryAddModal;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/CategorySelectModal.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/CategorySelectModal.tsx
new file mode 100644
index 0000000..e834d84
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/CategorySelectModal.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Button from "@components/Button";
+import useGetReportCategories from "@api/hooks/reports/useGetReportCategories";
+import { CategoryTypeEn } from "types/category";
+import usePatchReportArticleCategory from "@api/hooks/reports/usePatchReportArticleCategory";
+
+interface CategorySelectModalProps {
+ reportId: number;
+ reportArticleId: number;
+ categoryType: CategoryTypeEn;
+ articleCategoryId: number;
+ onClose: () => void;
+}
+
+const CategorySelectModal: React.FC
+ ๊ธฐ์ฌ ์นดํ
๊ณ ๋ฆฌ
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default CategorySelectModal;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/SortableItem.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/SortableItem.tsx
new file mode 100644
index 0000000..070eaf5
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/ArticleTable/SortableItem.tsx
@@ -0,0 +1,158 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+ HandleIcon,
+ SummarizeIcon,
+ DeleteIcon,
+ DashboardIcon,
+} from "@assets/svgs";
+import { useState } from "react";
+import { ReportArticle } from "@api/types/reports";
+import useDeleteReportArticle from "@api/hooks/reports/useDeleteReportArticle";
+import CategorySelectModal from "./CategorySelectModal";
+import { CategoryTypeEn } from "types/category";
+import SummarizeModal from "@features/report/SummarizeModal";
+
+interface SortableItemProps {
+ reportId: number;
+ idx: number;
+ id: number;
+ article: ReportArticle;
+ categoryType: CategoryTypeEn;
+ articleCategoryId: number;
+ media: boolean | undefined;
+ reporter: boolean | undefined;
+}
+
+const SortableItem: React.FC
+
+
+ ์นดํ
๊ณ ๋ฆฌ ์ ํํ๊ธฐ
+
+
+ {filteredCategories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+
+ {article.headLine}
+
+ {article.summary && (
+ {article.summary}
+ )}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ArticleTable;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/ColorPicker/index.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/ColorPicker/index.tsx
new file mode 100644
index 0000000..d9b6181
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/ColorPicker/index.tsx
@@ -0,0 +1,93 @@
+import React, { KeyboardEvent, useRef, useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { useOutsideClick } from "@chakra-ui/react";
+import usePatchReportColor from "@api/hooks/reports/usePatchReportColor";
+
+interface ColorPickerProps {
+ reportId: number;
+ color: string;
+ onChangeColor: (color: string) => void;
+}
+
+const ColorPicker: React.FC
+ {enToKrCategoryMap[tableCategory]}
+
+ | + ๋ฒํธ + | ++ ๋ ์ง + | ++ ํค์๋ + | ++ ํค๋๋ผ์ธ + | ++ {isMedia && "๋ฏธ๋์ด"} + | ++ {isReporter && "๊ธฐ์"} + | ++ |
|---|---|---|---|---|---|---|
|
+
+
+ {isCategoryAddModalOpen && (
+
+ |
+ ||||||
|
+
+ {editingCategory !== "์ฌ์ฉ์ ์
๋ ฅ" && (
+
+ {editingCategory}
+
+ )}
+ setCategoryDescription(e.target.value)}
+ onKeyDown={handleKeyDown}
+ />
+
+
+ |
+ ||||||
|
+
+
+
+
+ {category.reportCategoryName}
+
+
+ {category.reportCategoryDescription}
+
+
+
+ |
+ )}
+
+
+ );
+};
+
+export default ColorPicker;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/DonerMenu/index.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/DonerMenu/index.tsx
new file mode 100644
index 0000000..682ed33
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/DonerMenu/index.tsx
@@ -0,0 +1,122 @@
+import React, { useRef, useState } from "react";
+import { Checkbox, useOutsideClick } from "@chakra-ui/react";
+import Button from "@components/Button";
+
+import usePatchReportArticlesOptions from "@api/hooks/reports/usePatchReportArticlesOptions";
+
+interface DonerMenuProps {
+ reportId: number;
+ isMedia: boolean | undefined;
+ isReporter: boolean | undefined;
+ onClose: () => void;
+}
+
+const DonerMenu: React.FC
+
+ {isColorEditing ? (
+ onChangeColor(e.target.value)}
+ onBlur={handleColorBlur}
+ onKeyDown={handleColorKeyDown}
+ className="w-[68px] text-sm font-semibold text-body1 outline-none"
+ />
+ ) : (
+
+ {color?.toUpperCase()}
+
+ )}
+
+
+ );
+};
+
+export default DonerMenu;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/LogoUploader/index.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/LogoUploader/index.tsx
new file mode 100644
index 0000000..4f6faab
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/LogoUploader/index.tsx
@@ -0,0 +1,68 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { AddCircleThinIcon, CloseIcon } from "@assets/svgs";
+import usePatchReportLogo from "@api/hooks/reports/usePatchReportLogo";
+
+interface LogoUploaderProps {
+ clientId: number;
+ reportId: number;
+ initialLogo?: string | null;
+}
+
+const LogoUploader: React.FC
+ ๋ณด๊ณ ์ ๊ตฌ์ฑ์์
+
+
+
+
+ handleCheckboxChange("media")}
+ borderColor="#A3A3A3"
+ sx={{
+ "& .chakra-checkbox__control": {
+ width: "16px",
+ height: "16px",
+ borderRadius: "0px",
+ bg: "white",
+ borderWidth: "2px",
+ },
+ "& .chakra-checkbox__control[data-checked]": {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ _hover: {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ },
+ },
+ }}
+ />
+
+ ๋ฏธ๋์ด
+
+ handleCheckboxChange("reporter")}
+ borderColor="#A3A3A3"
+ sx={{
+ "& .chakra-checkbox__control": {
+ width: "16px",
+ height: "16px",
+ borderRadius: "0px",
+ bg: "white",
+ borderWidth: "2px",
+ },
+ "& .chakra-checkbox__control[data-checked]": {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ _hover: {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ },
+ },
+ }}
+ />
+
+ ๊ธฐ์
+
+
+
+
+ {image ? (
+
+ );
+};
+
+export default LogoUploader;
diff --git a/src/pages/ReportEdit/components/ReportEditSection/components/TitleEditor/index.tsx b/src/pages/ReportEdit/components/ReportEditSection/components/TitleEditor/index.tsx
new file mode 100644
index 0000000..eaf9ed5
--- /dev/null
+++ b/src/pages/ReportEdit/components/ReportEditSection/components/TitleEditor/index.tsx
@@ -0,0 +1,59 @@
+import React, { KeyboardEvent, useEffect, useRef, useState } from "react";
+import usePatchReportTitle from "@api/hooks/reports/usePatchReportTitle";
+
+interface TitleEditorProps {
+ reportId: number;
+ initialTitle: string | undefined;
+}
+
+const TitleEditor: React.FC
+ 
+
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default ReportEditSection;
diff --git a/src/pages/ReportEdit/index.tsx b/src/pages/ReportEdit/index.tsx
new file mode 100644
index 0000000..9378f1e
--- /dev/null
+++ b/src/pages/ReportEdit/index.tsx
@@ -0,0 +1,36 @@
+import ReportHeader from "@features/report/ReportHeader";
+import { useParams } from "react-router-dom";
+import ReportEditSection from "./components/ReportEditSection";
+import AddArticleForm from "./components/AddArticleForm";
+import useGetReportArticlesOptions from "@api/hooks/reports/useGetReportArticlesOptions";
+
+const ReportEditPage = () => {
+ const { reportId } = useParams<{ reportId: string }>();
+ const numericReportId = Number(reportId);
+
+ const { data: options } = useGetReportArticlesOptions({
+ reportId: numericReportId,
+ });
+
+ return (
+
+
+
+
+
+ setIsDonerOpen((prev) => !prev)}
+ className="cursor-pointer rounded-[2px] hover:bg-neutral-100"
+ />
+ {isDonerOpen && (
+ setIsDonerOpen(false)}
+ />
+ )}
+
+
+ {reportDetail?.articles[0] &&
+ (
+ Object.entries(reportDetail.articles[0]) as [
+ CategoryTypeEn,
+ ReportCategory[],
+ ][]
+ ).map(([categoryType, categories]) => (
+
+
+
+ );
+};
+
+export default ReportEditPage;
diff --git a/src/pages/ReportNew/components/AddNews/Components/ScrappedArticleBox/index.tsx b/src/pages/ReportNew/components/AddNews/Components/ScrappedArticleBox/index.tsx
new file mode 100644
index 0000000..48aabc9
--- /dev/null
+++ b/src/pages/ReportNew/components/AddNews/Components/ScrappedArticleBox/index.tsx
@@ -0,0 +1,58 @@
+import {
+ CheckCircleFillIcon,
+ CheckCircleOutlineIcon,
+ ClockIcon,
+ PersonIcon,
+} from "@assets/svgs";
+
+interface ScrappedArticleBoxProps {
+ publisherName: string;
+ reporterName: string;
+ publishDate: string;
+ title: string;
+ isChecked: boolean;
+ onToggle: () => void;
+}
+
+const ScrappedArticleBox: React.FC
+
+
+
+
+
+ );
+};
+
+export default ScrappedArticleBox;
diff --git a/src/pages/ReportNew/components/AddNews/Components/ScrappedSection/index.tsx b/src/pages/ReportNew/components/AddNews/Components/ScrappedSection/index.tsx
new file mode 100644
index 0000000..5662f15
--- /dev/null
+++ b/src/pages/ReportNew/components/AddNews/Components/ScrappedSection/index.tsx
@@ -0,0 +1,72 @@
+import { ArrowDownIcon, ArrowUpIcon } from "@assets/svgs";
+import ScrappedArticleBox from "../ScrappedArticleBox";
+import { useState } from "react";
+import { CategoryTypeEn } from "types/category";
+import { enToKrCategoryMap } from "@constants/category";
+import { ScrappedArticle } from "@api/types/scrap";
+
+interface ScrappedSectionProps {
+ categoryType: CategoryTypeEn;
+ articles: ScrappedArticle[];
+ selectedArticles: number[]; // originalArticleId ๋ฆฌ์คํธ
+ onToggleArticle: (originalArticleId: number) => void;
+}
+
+const ScrappedSection: React.FC
+
+
+
+ {publisherName && (
+
+
+ {publisherName}
+
+ )}
+
+
+ {reporterName}
+
+
+ {publishDate}
+ {title}
+
+
+ );
+};
+
+export default ScrappedSection;
diff --git a/src/pages/ReportNew/components/AddNews/index.tsx b/src/pages/ReportNew/components/AddNews/index.tsx
new file mode 100644
index 0000000..0cf7ee4
--- /dev/null
+++ b/src/pages/ReportNew/components/AddNews/index.tsx
@@ -0,0 +1,60 @@
+import Button from "@components/Button";
+import ScrappedSection from "./Components/ScrappedSection";
+import { CategoryTypeEn } from "types/category";
+import { useNavigate } from "react-router-dom";
+import routes from "@constants/routes";
+
+import { GetScrapResponse } from "@api/types/scrap";
+
+interface AddNewsProps {
+ scrappedArticles: GetScrapResponse | undefined;
+ selectedArticles: { [key in CategoryTypeEn]: number[] };
+ onToggleArticleSelection: (
+ categoryType: CategoryTypeEn,
+ articleId: number,
+ ) => void;
+}
+
+const AddNews: React.FC
+
+ {enToKrCategoryMap[categoryType]}
+
+
+
+ {articles.length === 0 ? (
+
+ ๋ฐ์ผ๋ฆฌ ๋ชจ๋ํฐ๋ง์์ ๋ด์ค๋ฅผ ์ถ๊ฐํด์ฃผ์ธ์.
+
+ ) : (
+
+ {articles.map((article) => (
+ onToggleArticle(article.originalArticleId)}
+ />
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default AddNews;
diff --git a/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategoryAddModal.tsx b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategoryAddModal.tsx
new file mode 100644
index 0000000..417166e
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategoryAddModal.tsx
@@ -0,0 +1,71 @@
+import React, { useRef, useState } from "react";
+import { useOutsideClick } from "@chakra-ui/react";
+import Button from "@components/Button";
+
+interface CategoryAddModalProps {
+ onClose: () => void;
+ onAddCategory: (category: string) => void;
+}
+
+const CategoryAddModal: React.FC
+ ์ถ๊ฐํ ๋ด์ค
+
+
+
+ {scrappedArticles &&
+ Object.entries(scrappedArticles).map(([categoryType, articles]) => (
+
+ onToggleArticleSelection(
+ categoryType as CategoryTypeEn,
+ articleId,
+ )
+ }
+ />
+ ))}
+
+
+
+ );
+};
+
+export default CategoryAddModal;
diff --git a/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategorySelectModal.tsx b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategorySelectModal.tsx
new file mode 100644
index 0000000..e834d84
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/CategorySelectModal.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Button from "@components/Button";
+import useGetReportCategories from "@api/hooks/reports/useGetReportCategories";
+import { CategoryTypeEn } from "types/category";
+import usePatchReportArticleCategory from "@api/hooks/reports/usePatchReportArticleCategory";
+
+interface CategorySelectModalProps {
+ reportId: number;
+ reportArticleId: number;
+ categoryType: CategoryTypeEn;
+ articleCategoryId: number;
+ onClose: () => void;
+}
+
+const CategorySelectModal: React.FC
+ ๊ธฐ์ฌ ์นดํ
๊ณ ๋ฆฌ
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default CategorySelectModal;
diff --git a/src/pages/ReportNew/components/ReportSection/components/ArticleTable/SortableItem.tsx b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/SortableItem.tsx
new file mode 100644
index 0000000..edc2c7e
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/ArticleTable/SortableItem.tsx
@@ -0,0 +1,78 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { HandleIcon } from "@assets/svgs";
+import { CategoryTypeEn } from "types/category";
+import { ScrappedArticle } from "@api/types/scrap";
+
+interface SortableItemProps {
+ idx: number;
+ article: ScrappedArticle;
+ categoryType: CategoryTypeEn;
+ media: boolean | undefined;
+ reporter: boolean | undefined;
+}
+
+const SortableItem: React.FC
+
+
+ ์นดํ
๊ณ ๋ฆฌ ์ ํํ๊ธฐ
+
+
+ {filteredCategories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ArticleTable;
diff --git a/src/pages/ReportNew/components/ReportSection/components/ColorPicker/index.tsx b/src/pages/ReportNew/components/ReportSection/components/ColorPicker/index.tsx
new file mode 100644
index 0000000..46abb33
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/ColorPicker/index.tsx
@@ -0,0 +1,80 @@
+import { useRef, useState, KeyboardEvent } from "react";
+import { useOutsideClick } from "@chakra-ui/react";
+import { HexColorPicker } from "react-colorful";
+
+interface ColorPickerProps {
+ color: string;
+ onChangeColor: (color: string) => void;
+}
+
+const ColorPicker: React.FC
+ {enToKrCategoryMap[tableCategory]}
+
+ | + ๋ฒํธ + | ++ ๋ ์ง + | ++ ํค์๋ + | ++ ํค๋๋ผ์ธ + | ++ {isMedia && "๋ฏธ๋์ด"} + | ++ {isReporter && "๊ธฐ์"} + | +
|---|
+
+ );
+};
+
+export default ColorPicker;
diff --git a/src/pages/ReportNew/components/ReportSection/components/DonerMenu/index.tsx b/src/pages/ReportNew/components/ReportSection/components/DonerMenu/index.tsx
new file mode 100644
index 0000000..bbc5aee
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/DonerMenu/index.tsx
@@ -0,0 +1,109 @@
+import React, { useRef, useState } from "react";
+import { Checkbox, useOutsideClick } from "@chakra-ui/react";
+import Button from "@components/Button";
+
+interface DonerMenuProps {
+ media: boolean;
+ onChangeMedia: (value: boolean) => void;
+ reporter: boolean;
+ onChangeReporter: (value: boolean) => void;
+ onClose: () => void;
+}
+
+const DonerMenu: React.FC
+
+ {isColorEditing ? (
+ onChangeColor(e.target.value)}
+ onBlur={handleColorBlur}
+ onKeyDown={handleColorKeyDown}
+ className="w-[68px] text-sm font-semibold text-body1 outline-none"
+ />
+ ) : (
+
+ {color?.toUpperCase()}
+
+ )}
+
+
+ );
+};
+
+export default DonerMenu;
diff --git a/src/pages/ReportNew/components/ReportSection/components/LogoUploader/index.tsx b/src/pages/ReportNew/components/ReportSection/components/LogoUploader/index.tsx
new file mode 100644
index 0000000..b14ad3a
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/LogoUploader/index.tsx
@@ -0,0 +1,53 @@
+import React, { ChangeEvent } from "react";
+import { AddCircleThinIcon, CloseIcon } from "@assets/svgs";
+
+interface LogoUploaderProps {
+ logo: string | null;
+ onChangeLogo: (logo: string | null, file?: File) => void;
+}
+
+const LogoUploader: React.FC
+ ๋ณด๊ณ ์ ๊ตฌ์ฑ์์
+
+
+
+
+ setLocalMedia(!localMedia)}
+ borderColor="#A3A3A3"
+ sx={{
+ "& .chakra-checkbox__control": {
+ width: "16px",
+ height: "16px",
+ borderRadius: "0px",
+ bg: "white",
+ borderWidth: "2px",
+ },
+ "& .chakra-checkbox__control[data-checked]": {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ _hover: {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ },
+ },
+ }}
+ />
+
+ ๋ฏธ๋์ด
+
+ setLocalReporter(!localReporter)}
+ borderColor="#A3A3A3"
+ sx={{
+ "& .chakra-checkbox__control": {
+ width: "16px",
+ height: "16px",
+ borderRadius: "0px",
+ bg: "white",
+ borderWidth: "2px",
+ },
+ "& .chakra-checkbox__control[data-checked]": {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ _hover: {
+ bg: "#0050F0",
+ borderColor: "#0050F0",
+ },
+ },
+ }}
+ />
+
+ ๊ธฐ์
+
+
+
+
+ {logo ? (
+
+ );
+};
+
+export default LogoUploader;
diff --git a/src/pages/ReportNew/components/ReportSection/components/TitleEditor/index.tsx b/src/pages/ReportNew/components/ReportSection/components/TitleEditor/index.tsx
new file mode 100644
index 0000000..284ccfc
--- /dev/null
+++ b/src/pages/ReportNew/components/ReportSection/components/TitleEditor/index.tsx
@@ -0,0 +1,46 @@
+import { useRef, useState, KeyboardEvent } from "react";
+
+interface TitleEditorProps {
+ title: string;
+ onChangeTitle: (title: string) => void;
+}
+
+const TitleEditor: React.FC
+ 
+
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default ReportSection;
diff --git a/src/pages/ReportNew/index.tsx b/src/pages/ReportNew/index.tsx
new file mode 100644
index 0000000..52dca79
--- /dev/null
+++ b/src/pages/ReportNew/index.tsx
@@ -0,0 +1,148 @@
+import AddNews from "./components/AddNews";
+import ReportHeader from "@features/report/ReportHeader";
+import { useMemo, useState } from "react";
+import ReportSection from "./components/ReportSection";
+import usePostReport from "@api/hooks/reports/usePostReport";
+import { useToast } from "@chakra-ui/react";
+import useGetScrap from "@api/hooks/reports/useGetScrap";
+import { CategoryTypeEn } from "types/category";
+
+const ReportNewPage: React.FC = () => {
+ const toast = useToast();
+ const [title, setTitle] = useState("๋ณด๊ณ ์ ์ ๋ชฉ");
+ const [color, setColor] = useState("#FFFFFF");
+ const [media, setMedia] = useState(true);
+ const [reporter, setReporter] = useState(true);
+ const [logo, setLogo] = useState
+
+
+
+
+ setIsDonerOpen((prev) => !prev)}
+ className="cursor-pointer rounded-[2px] hover:bg-neutral-100"
+ />
+ {isDonerOpen && (
+ setIsDonerOpen(false)}
+ media={media}
+ onChangeMedia={onChangeMedia}
+ reporter={reporter}
+ onChangeReporter={onChangeReporter}
+ />
+ )}
+
+
+ {Object.entries(filteredArticles).map(([categoryType, articles]) => (
+
+
+
+ );
+};
+
+export default ReportNewPage;
diff --git a/src/pages/SettingEmail/MailTab/index.tsx b/src/pages/SettingEmail/MailTab/index.tsx
new file mode 100644
index 0000000..5b22062
--- /dev/null
+++ b/src/pages/SettingEmail/MailTab/index.tsx
@@ -0,0 +1,53 @@
+import KeywordList from "@features/setting/KeywordList";
+
+interface MailTabProps {
+ recipientEmails: string[];
+ ccEmails: string[];
+ signatureImageUrl: string | null;
+ handleKeywordChange: (
+ category: "RECIPIENT" | "CC",
+ keyword: string,
+ action: "add" | "delete",
+ ) => void;
+ handleImageChange: (uploadedImage: File | null) => void;
+}
+
+const MailTab = ({
+ recipientEmails,
+ ccEmails,
+ signatureImageUrl,
+ handleKeywordChange,
+ handleImageChange,
+}: MailTabProps) => (
+ <>
+
+
+
+
+
+
+ );
+};
+
+export default SettingEmailPage;
diff --git a/src/pages/SettingKeyword/SearchKeywordsTab/index.tsx b/src/pages/SettingKeyword/SearchKeywordsTab/index.tsx
new file mode 100644
index 0000000..484a19c
--- /dev/null
+++ b/src/pages/SettingKeyword/SearchKeywordsTab/index.tsx
@@ -0,0 +1,57 @@
+import KeywordList from "@features/setting/KeywordList";
+import { CategoryTypeEn } from "types/category";
+
+interface SearchKeywordsTabProps {
+ selfKeywords: string[];
+ competitorKeywords: string[];
+ industryKeywords: string[];
+ handleKeywordChange: (
+ category: CategoryTypeEn,
+ keyword: string,
+ action: "add" | "delete",
+ ) => void;
+}
+
+const SearchKeywordsTab = ({
+ selfKeywords,
+ competitorKeywords,
+ industryKeywords,
+ handleKeywordChange,
+}: SearchKeywordsTabProps) => (
+ <>
+
+
+
+
+ );
+};
+
+export default SettingKeywordPage;
diff --git a/src/pages/SignIn/index.tsx b/src/pages/SignIn/index.tsx
index edd486f..541dd8e 100644
--- a/src/pages/SignIn/index.tsx
+++ b/src/pages/SignIn/index.tsx
@@ -1,5 +1,109 @@
-const SignInPage = () => {
- return
+
+ SignInPage
;
+import usePostSignIn from "@api/hooks/accounts/usePostSignIn";
+import Button from "@components/Button";
+import Input from "@components/Input";
+import routes from "@constants/routes";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+
+type SignInFormData = {
+ email: string;
+ password: string;
+};
+
+const SignInPage: React.FC = () => {
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm
+
+ );
};
export default SignInPage;
diff --git a/src/pages/SignUp/components/Step1/PasswordCondition.tsx b/src/pages/SignUp/components/Step1/PasswordCondition.tsx
new file mode 100644
index 0000000..e877bc0
--- /dev/null
+++ b/src/pages/SignUp/components/Step1/PasswordCondition.tsx
@@ -0,0 +1,38 @@
+import {
+ CheckboxBlankIcon,
+ CheckboxErrorIcon,
+ CheckboxFillIcon,
+} from "@assets/svgs";
+
+interface PasswordConditionProps {
+ conditionMet: boolean;
+ conditionText: string;
+ password: string;
+}
+
+const PasswordCondition: React.FC
+
+ ๋ก๊ทธ์ธ
+ + ์์ง ๊ณ์ ์ด ์์ผ์ ๊ฐ์? + + + + ๋น๋ฐ๋ฒํธ ์ฐพ๊ธฐ + +
+ {password ? (
+ conditionMet ? (
+
+ );
+};
+
+export default PasswordCondition;
diff --git a/src/pages/SignUp/components/Step1/index.tsx b/src/pages/SignUp/components/Step1/index.tsx
new file mode 100644
index 0000000..0053eeb
--- /dev/null
+++ b/src/pages/SignUp/components/Step1/index.tsx
@@ -0,0 +1,228 @@
+import Button from "@components/Button";
+import Input from "@components/Input";
+import { ChangeEvent, useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import PasswordCondition from "./PasswordCondition";
+import usePostVerifyCode from "@api/hooks/accounts/usePostVerifyCode";
+import usePasswordValidation from "@hooks/useCheckPasswordValidation";
+import useEmailConfirmation from "@hooks/useEmailConfirmation";
+import formatTime from "@utils/formatTime";
+import { LoadingIcon } from "@assets/svgs";
+
+interface Step1Props {
+ handleNext: () => void;
+}
+
+const Step1: React.FC
+
+ );
+};
+
+export default Step1;
diff --git a/src/pages/SignUp/components/Step2/index.tsx b/src/pages/SignUp/components/Step2/index.tsx
new file mode 100644
index 0000000..aac1719
--- /dev/null
+++ b/src/pages/SignUp/components/Step2/index.tsx
@@ -0,0 +1,102 @@
+import Input from "@components/Input";
+import { Checkbox } from "@chakra-ui/react";
+import Button from "@components/Button";
+import { useFormContext } from "react-hook-form";
+
+const Step2: React.FC = () => {
+ const {
+ register,
+ formState: { errors, isValid },
+ } = useFormContext();
+
+ return (
+
+
+ ๊ณ์ ๋ง๋ค๊ธฐ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isEmailSent && !isVerificationSuccess && isTimerActive && (
+
+ + {formatTime(timer)} +
+ )} + {isEmailSent && isVerificationSuccess && ( ++ *์ธ์ฆ์ด ์๋ฃ๋์์ต๋๋ค. +
+ )} +
+
+
+
+
+
+
+
+
+ ๋ฌธ์ํ๊ธฐ
+
+
+
+
+ );
+};
+
+export default Step2;
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index b49703c..03f054b 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,5 +1,66 @@
-const SignUpPage = () => {
- return
+
+ ์ ๋ณด ์์ฑํ๊ธฐ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ๋ฌธ์ํ๊ธฐ
+
+
+ SignUpPage
;
+import { useState } from "react";
+import { useForm, FormProvider, SubmitHandler } from "react-hook-form";
+import Step1 from "./components/Step1";
+import Step2 from "./components/Step2";
+import usePostSignUp from "@api/hooks/accounts/usePostSignUp";
+
+type SingUpFormData = {
+ email: string;
+ verificationCode: string;
+ password: string;
+ companyName: string;
+ managerName: string;
+ managerPhone: string;
+ agreement: boolean;
+};
+
+const SignUpPage: React.FC = () => {
+ const [step, setStep] = useState(1);
+ const methods = useForm
+
+ );
};
export default SignUpPage;
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..80e2330
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,75 @@
+import routes from "@constants/routes";
+import { createBrowserRouter } from "react-router-dom";
+import App from "./App";
+import SignInPage from "@pages/SignIn";
+import SignUpPage from "@pages/SignUp";
+import FindPasswordPage from "@pages/FindPassword";
+import DashboardPage from "@pages/Dashboard";
+import MonitoringPage from "@pages/Monitoring";
+import ReportPage from "@pages/Report";
+import NotFound from "@pages/NotFound";
+import ReportNewPage from "@pages/ReportNew";
+import ReportEditPage from "@pages/ReportEdit";
+import SettingKeywordPage from "@pages/SettingKeyword";
+import SettingEmailPage from "@pages/SettingEmail";
+import LandingPage from "@pages/Landing";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
+
+
+
+
+