[FE][공통] 커스텀 UI 코드 리팩터링

frontend/manage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "manage",
-  "version": "^0.7.0",
+  "version": "^0.8.0",
   "description": "관리자 페이지",
   "main": "index.js",
   "author": "도비, 곤이",

frontend/manage/src/components/pages/ScriptPublishing/index.tsx

@@ -81,7 +81,13 @@ const JsxScriptCode = ({
 }: ScriptProps) => `
 import Darass from "darass-react";
 
-<Darass projectKey="${projectSecretKey}" darkMode={${isDarkModePage}} primaryColor="${primaryColor}" isShowSortOption={${isShowSortOption}} isAllowSocialLogin={${isAllowSocialLogin}} isShowLogo={${isShowLogo}}/>;
+<Darass 
+  projectKey="${projectSecretKey}" 
+  darkMode={${isDarkModePage}} 
+  primaryColor="${primaryColor}" 
+  isShowSortOption={${isShowSortOption}} isAllowSocialLogin={${isAllowSocialLogin}} 
+  isShowLogo={${isShowLogo}}
+/>;
 `;
 
 const ScriptPublishing = () => {
@@ -177,7 +183,7 @@ const ScriptPublishing = () => {
               <GuideStep title="UI 커스텀">
                 <PreviewForm>
                   <FormRow>
-                    <FormLabel>삽입할 페이지가 어둡나요?</FormLabel>
+                    <FormLabel>삽입할 페이지가 어둡나요? </FormLabel>
                     <DarkModeToggleButton
                       isDarkModePage={isDarkModePage}
                       onToggleDarkMode={() => setIsDarkModePage(state => !state)}

frontend/reply-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reply-module",
-  "version": "^2.4.0",
+  "version": "^2.5.0",
   "description": "댓글 모듈",
   "main": "index.js",
   "author": "도비, 곤이",

frontend/reply-module/src/components/ReplyModuleApp.tsx

@@ -12,37 +12,27 @@ import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 import { useReplyModuleApp } from "./useReplyModuleApp";
 
-const getIsDarkModePageParam = () => {
+const getReplyModuleParams = () => {
   const urlParams = new URLSearchParams(window.location.search);
-  const isDarkModePageString = urlParams.get("darkMode");
 
-  return isDarkModePageString === "true" ? true : false;
-};
-
-const getPrimaryColor = () => {
-  const urlParams = new URLSearchParams(window.location.search);
+  const isDarkModePage = urlParams.get("darkMode") === "true" ? true : false;
   const primaryColor = decodeURIComponent(urlParams.get("primaryColor") || PALETTE.PRIMARY);
 
-  return primaryColor;
-};
-
-const getUiInfo = () => {
-  const urlParams = new URLSearchParams(window.location.search);
   const isShowSortOption = urlParams.get("isShowSortOption") === "true" ? true : false;
   const isAllowSocialLogin = urlParams.get("isAllowSocialLogin") === "true" ? true : false;
   const isShowLogo = urlParams.get("isShowLogo") === "true" ? true : false;
 
   return {
+    isDarkModePage,
+    primaryColor,
     isShowSortOption,
     isAllowSocialLogin,
     isShowLogo
   };
 };
 
 const App = () => {
-  const isDarkModePage = getIsDarkModePageParam();
-  const primaryColor = getPrimaryColor();
-  const { isShowSortOption, isAllowSocialLogin, isShowLogo } = getUiInfo();
+  const { isDarkModePage, primaryColor, isShowSortOption, isAllowSocialLogin, isShowLogo } = getReplyModuleParams();
 
   const { user, logout, refetchUser, isLoading, isSuccess, accessToken, refetchAccessToken } = useUser();
 

frontend/reply-module/src/hooks/api/comment/useGetAllComments.ts

@@ -6,7 +6,6 @@ import { useQuery } from "simple-react-query";
 
 const compareComments = (prevComments: GetCommentsResponse, currComments: GetCommentsResponse) => {
   if (!prevComments) return false;
-  console.log(prevComments, currComments);
 
   return prevComments.totalComment === currComments.totalComment;
 };