Merge branch 'develop'

w3labkr · Sep 1, 2022 · bb72568 · bb72568
2 parents dd08a1d + 523cf63
commit bb72568
Show file tree

Hide file tree

Showing 42 changed files with 376 additions and 254 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -65,7 +65,7 @@
     "[javascriptreact]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.tabSize": 2,
-        "editor.formatOnSave": false,
+        "editor.formatOnSave": true,
         "editor.codeActionsOnSave": {
             "source.fixAll.eslint": true
         },

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -57,8 +57,8 @@ yarn build
 `.env`
 
 ```txt
-REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
+REACT_APP_VERSION=$npm_package_version
 REACT_APP_GA_TRACKING_ID=UA-000000-01
 ```
 

diff --git a/build/asset-manifest.json b/build/asset-manifest.json
diff --git a/build/index.html b/build/index.html
diff --git a/package.json b/package.json
@@ -3,6 +3,14 @@
     "version": "1.3.0",
     "author": "W3LabKr",
     "description": "Shuffle the words on each line",
+    "keywords": [
+        "js",
+        "javascript",
+        "react",
+        "reactjs",
+        "shuffle",
+        "words"
+    ],
     "main": "src/index.js",
     "homepage": "./",
     "private": true,

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import { useRecoilState } from 'recoil';
+import { Helmet } from 'react-helmet-async';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { themeColorModeState } from './store/atoms/theme';
 import { ColorModeContext } from './contexts/theme';
 import useGATracker from './hooks/useGATracker';
-import Page from './pages/Home';
-import Head from './templates/Head';
+import Home from './pages/Home';
 
 function App() {
   const [mode, setMode] = useRecoilState(themeColorModeState);
@@ -39,14 +39,13 @@ function App() {
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
+        <Helmet>
+          <title>Smart Shuffle Words</title>
+          <meta name="description" content="Shuffle the words on each line" />
+          <meta name="keywords" content="js,javascript,react,reactjs,shuffle,words" />
+        </Helmet>
         <div className="App">
-          <Head
-            title="Smart Shuffle Words"
-            description="Shuffle the words on each line<"
-            keywords="js,javascript,react,reactjs,shuffle,words"
-            canonical="https://w3labkr.github.io/js-smart-shuffle-words/"
-          />
-          <Page />
+          <Home />
         </div>
       </ThemeProvider>
     </ColorModeContext.Provider>

diff --git a/src/components/LanguageChange.jsx b/src/components/LanguageChange.jsx
@@ -22,8 +22,8 @@ export default function LanguageChange() {
 
   return (
     <ToggleButtonGroup size="small" value={language} exclusive onChange={(e, value) => setLanguage(value)}>
-      <ToggleButton value="en">EN</ToggleButton>
       <ToggleButton value="ko">KO</ToggleButton>
+      <ToggleButton value="en">EN</ToggleButton>
     </ToggleButtonGroup>
   );
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1,38 +1,44 @@
 {
-  "Smart Shuffle Words": "Smart Shuffle Words",
-  "Text": "Text",
-  "Preview": "Preview",
-  "Console": "Console",
-  "Shuffle": "Shuffle",
-  "Shuffled!": "Shuffled!",
-  "Copy": "Copy",
-  "Copied!": "Copied!",
-  "Updated!": "Updated!",
-  "Shuffle & Copy": "Shuffle & Copy",
-  "General Market": "General Market",
-  "Generate Random Text": "Generate Random Text",
-  "Start text": "Start text",
-  "End text": "End text",
-  "Random Text": "Random Text",
-  "Length of random text generated:": "Length of random text generated:",
-  "Enter the stopwords to be removed:": "Enter the stopwords to be removed:",
-  "Enter the special characters to be removed:": "Enter the special characters to be removed:",
-  "Please enter text": "Please enter text",
-  "Seperated by whitespace": "Seperated by whitespace",
-  "Select the text length per line:": "Select the text length per line:",
-  "Naver Ads": "Naver Ads",
-  "Auction": "Auction",
-  "G-Market": "G-Market",
-  "Highlighting stopwords": "Highlighting stopwords",
-  "General Settings": "General Settings",
-  "Advanced Settings": "Advanced Settings",
-  "Characters to use when creating random text:": "Characters to use when creating random text:",
-  "Reset": "Reset",
-  "Reseted!": "Reseted!",
-  "Agree": "Agree",
-  "Disagree": "Disagree",
-  "Are you sure you want to reset all settings?": "Are you sure you want to reset all settings?",
-  "All settings in General Settings and Advanced Settings will be reset.": "All settings in General Settings and Advanced Settings will be reset.",
-  "Resetting cannot restore existing settings.": "Resetting cannot restore existing settings.",
-  "Remove index column:": "Remove index column:"
+    "Smart Shuffle Words": "Smart Shuffle Words",
+    "Text": "Text",
+    "Preview": "Preview",
+    "Console": "Console",
+    "Shuffle": "Shuffle",
+    "Shuffled!": "Shuffled!",
+    "Copy": "Copy",
+    "Copied!": "Copied!",
+    "Removed!": "Removed!",
+    "Updated!": "Updated!",
+    "Shuffle & Copy": "Shuffle & Copy",
+    "General Market": "General Market",
+    "Generate Random Text": "Generate Random Text",
+    "Start text": "Start text",
+    "End text": "End text",
+    "Random Text": "Random Text",
+    "Length of random text generated:": "Length of random text generated:",
+    "Enter the stopwords to be removed:": "Enter the stopwords to be removed:",
+    "Enter the special characters to be removed:": "Enter the special characters to be removed:",
+    "Please enter text": "Please enter text",
+    "Seperated by whitespace": "Seperated by whitespace",
+    "Select the text length per line:": "Select the text length per line:",
+    "Naver Ads": "Naver Ads",
+    "Auction": "Auction",
+    "G-Market": "G-Market",
+    "Highlighting stopwords": "Highlighting stopwords",
+    "General Settings": "General Settings",
+    "Advanced Settings": "Advanced Settings",
+    "Characters to use when creating random text:": "Characters to use when creating random text:",
+    "Reset": "Reset",
+    "Reseted!": "Reseted!",
+    "Agree": "Agree",
+    "Disagree": "Disagree",
+    "Are you sure you want to reset all settings?": "Are you sure you want to reset all settings?",
+    "All settings in General Settings and Advanced Settings will be reset.": "All settings in General Settings and Advanced Settings will be reset.",
+    "Resetting cannot restore existing settings.": "Resetting cannot restore existing settings.",
+    "Remove index column:": "Remove index column:",
+    "Remove stopwords": "Remove stopwords",
+    "Reorder random text characters:": "Reorder random text characters:",
+    "Digit+Word": "Digit+Word",
+    "Word+Digit": "Word+Digit",
+    "None": "None"
 }
diff --git a/src/locales/i18n.js b/src/locales/i18n.js
@@ -27,8 +27,8 @@ i18n
     // It is recommended to read up on IETF Language Codes.
     // If you're using a language detector, do not define the lng option
     // https://en.wikipedia.org/wiki/IETF_language_tag
-    lng: 'en',
-    fallbackLng: 'en',
+    lng: 'ko',
+    fallbackLng: 'ko',
 
     ns: ['translations'], // string or array of namespaces to load
     defaultNS: 'translations', // default namespace used if not passed to the translation function

diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
@@ -1,38 +1,44 @@
 {
-  "Smart Shuffle Words": "스마트 셔플 워드",
-  "Text": "상품명",
-  "Preview": "미리보기",
-  "Console": "작업내역",
-  "Shuffle": "상품명 변경",
-  "Shuffled!": "상품명이 변경되었습니다!",
-  "Copy": "복사",
-  "Copied!": "복사되었습니다!",
-  "Updated!": "업데이트되었습니다!",
-  "Shuffle & Copy": "상품명 변경 후 복사",
-  "General Market": "일반 마켓",
-  "Generate Random Text": "무작위 문자 생성",
-  "Start text": "시작 문자",
-  "End text": "마지막 문자",
-  "Random Text": "무작위 문자",
-  "Length of random text generated:": "생성되는 랜덤 텍스트의 길이:",
-  "Enter the stopwords to be removed:": "삭제할 금칙어를 입력하세요:",
-  "Enter the special characters to be removed:": "삭제할 특수 문자를 입력하세요:",
-  "Please enter text": "텍스트를 입력 하십시오",
-  "Seperated by whitespace": "공백으로 구분 합니다",
-  "Select the text length per line:": "텍스트 길이를 선택하세요:",
-  "Naver Ads": "네이버 광고",
-  "Auction": "옥션",
-  "G-Market": "지마켓",
-  "Highlighting stopwords": "금칙어 강조 표시",
-  "General Settings": "일반 설정",
-  "Advanced Settings": "고급 설정",
-  "Characters to use when creating random text:": "랜덤 텍스트를 생성할 때 사용할 문자:",
-  "Reset": "초기화",
-  "Reseted!": "재설정되었습니다!",
-  "Agree": "동의",
-  "Disagree": "미동의",
-  "Are you sure you want to reset all settings?": "모든 설정을 재설정하시겠습니까?",
-  "All settings in General Settings and Advanced Settings will be reset.": "일반 설정 및 고급 설정의 모든 설정이 재설정됩니다.",
-  "Resetting cannot restore existing settings.": "재설정하면 기존 설정을 복원할 수 없습니다.",
-  "Remove index column:": "인덱스 열 제거:"
+    "Smart Shuffle Words": "스마트 셔플 워드",
+    "Text": "상품명",
+    "Preview": "미리보기",
+    "Console": "작업내역",
+    "Shuffle": "상품명 변경",
+    "Shuffled!": "상품명이 변경되었습니다!",
+    "Copy": "복사",
+    "Copied!": "복사되었습니다!",
+    "Removed!": "제거되었습니다!",
+    "Updated!": "업데이트되었습니다!",
+    "Shuffle & Copy": "상품명 변경 후 복사",
+    "General Market": "일반 마켓",
+    "Generate Random Text": "무작위 문자 생성",
+    "Start text": "시작 문자",
+    "End text": "마지막 문자",
+    "Random Text": "무작위 문자",
+    "Length of random text generated:": "생성되는 랜덤 텍스트의 길이:",
+    "Enter the stopwords to be removed:": "삭제할 금칙어를 입력하세요:",
+    "Enter the special characters to be removed:": "삭제할 특수 문자를 입력하세요:",
+    "Please enter text": "텍스트를 입력 하십시오",
+    "Seperated by whitespace": "공백으로 구분 합니다",
+    "Select the text length per line:": "텍스트 길이를 선택하세요:",
+    "Naver Ads": "네이버 광고",
+    "Auction": "옥션",
+    "G-Market": "지마켓",
+    "Highlighting stopwords": "금칙어 강조 표시",
+    "General Settings": "일반 설정",
+    "Advanced Settings": "고급 설정",
+    "Characters to use when creating random text:": "랜덤 텍스트를 생성할 때 사용할 문자:",
+    "Reset": "초기화",
+    "Reseted!": "재설정되었습니다!",
+    "Agree": "동의",
+    "Disagree": "미동의",
+    "Are you sure you want to reset all settings?": "모든 설정을 재설정하시겠습니까?",
+    "All settings in General Settings and Advanced Settings will be reset.": "일반 설정 및 고급 설정의 모든 설정이 재설정됩니다.",
+    "Resetting cannot restore existing settings.": "재설정하면 기존 설정을 복원할 수 없습니다.",
+    "Remove index column:": "인덱스 열 제거:",
+    "Remove stopwords": "금칙어 중복 제거",
+    "Reorder random text characters:": "랜덤 텍스트 문자 재정렬:",
+    "Digit+Word": "숫자+문자",
+    "Word+Digit": "문자+숫자",
+    "None": "없음"
 }
diff --git a/...onents/Actions/AuctionGMarketSettings.jsx → .../ActionSection/AuctionGMarketSettings.jsx b/...onents/Actions/AuctionGMarketSettings.jsx → .../ActionSection/AuctionGMarketSettings.jsx
@@ -5,23 +5,23 @@ import { styled } from '@mui/system';
 import MuiButton from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
+import { debounce as _debounce } from 'lodash';
 import * as mainState from '~/store/atoms/main';
-import { debounce } from 'lodash';
 
 const Button = styled(MuiButton)(({ theme }) => ({
   marginRight: theme.spacing(1),
   marginBottom: theme.spacing(1),
 }));
 
-export default function MyComponent() {
+export default function AuctionGMarketSettings() {
   const { t } = useTranslation();
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [marketSettings, setMarketSettings] = useRecoilState(mainState['marketSettingsState']);
   const setStartEnabled = useSetRecoilState(mainState['startEnabledState']);
   const setEndEnabled = useSetRecoilState(mainState['endEnabledState']);
   const setLineTextLength = useSetRecoilState(mainState['lineTextLengthState']);
 
-  const handleClick = debounce(() => {
+  const handleClick = _debounce(() => {
     setMarketSettings('Auction/G-Market');
     setLineTextLength(100);
     setStartEnabled(true);

diff --git a/.../Home/components/Actions/ConsolePanel.jsx → ...components/ActionSection/ConsolePanel.jsx b/.../Home/components/Actions/ConsolePanel.jsx → ...components/ActionSection/ConsolePanel.jsx
@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue } from 'recoil';
 import { styled } from '@mui/system';
 import Typography from '@mui/material/Typography';
 import MuiList from '@mui/material/List';
 import MuiListItem from '@mui/material/ListItem';
-import * as mainState from '~/store/atoms/main';
+import { consoleTextState } from '~/store/atoms/main';
 
 const List = styled(MuiList)(({ theme }) => ({
   padding: theme.spacing(2),
@@ -14,13 +14,13 @@ const List = styled(MuiList)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
 
-const ListItem = styled(MuiListItem)(({ theme }) => ({
+const ListItem = styled(MuiListItem)(() => ({
   padding: 0,
 }));
 
-export default function MyComponent() {
+export default function ConsolePanel() {
   const { t } = useTranslation();
-  const consoleText = useRecoilValue(mainState['consoleTextState']);
+  const consoleText = useRecoilValue(consoleTextState);
 
   useMemo(() => {
     console.log(consoleText);
@@ -32,7 +32,7 @@ export default function MyComponent() {
         {t('Console')}
       </Typography>
       <List>
-        {consoleText.map((item, index) => {
+        {consoleText.map((item) => {
           return (
             <ListItem key={item.key}>
               <Typography>{item.value}</Typography>

diff --git a/...es/Home/components/Actions/CopyAction.jsx → ...e/components/ActionSection/CopyAction.jsx b/...es/Home/components/Actions/CopyAction.jsx → ...e/components/ActionSection/CopyAction.jsx
@@ -6,20 +6,20 @@ import { styled } from '@mui/system';
 import MuiButton from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
-import * as mainState from '~/store/atoms/main';
-import { debounce } from 'lodash';
+import { debounce as _debounce } from 'lodash';
+import { previewTextState } from '~/store/atoms/main';
 
 const Button = styled(MuiButton)(({ theme }) => ({
   marginRight: theme.spacing(1),
   marginBottom: theme.spacing(1),
 }));
 
-export default function MyComponent() {
+export default function CopyAction() {
   const { t } = useTranslation();
   const [snackbarOpen, setSnackbarOpen] = useState(false);
-  const previewText = useRecoilValue(mainState['previewTextState']);
+  const previewText = useRecoilValue(previewTextState);
 
-  const handleClick = debounce(() => {
+  const handleClick = _debounce(() => {
     copy(previewText, {
       debug: false,
       format: 'text/plain', // (default) "text/html"

diff --git a/...ponents/Actions/GeneralMarketSettings.jsx → ...s/ActionSection/GeneralMarketSettings.jsx b/...ponents/Actions/GeneralMarketSettings.jsx → ...s/ActionSection/GeneralMarketSettings.jsx
@@ -5,23 +5,23 @@ import { styled } from '@mui/system';
 import MuiButton from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
+import { debounce as _debounce } from 'lodash';
 import * as mainState from '~/store/atoms/main';
-import { debounce } from 'lodash';
 
 const Button = styled(MuiButton)(({ theme }) => ({
   marginRight: theme.spacing(1),
   marginBottom: theme.spacing(1),
 }));
 
-export default function MyComponent() {
+export default function GeneralMarketSettings() {
   const { t } = useTranslation();
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [marketSettings, setMarketSettings] = useRecoilState(mainState['marketSettingsState']);
   const setStartEnabled = useSetRecoilState(mainState['startEnabledState']);
   const setEndEnabled = useSetRecoilState(mainState['endEnabledState']);
   const setLineTextLength = useSetRecoilState(mainState['lineTextLengthState']);
 
-  const handleClick = debounce(() => {
+  const handleClick = _debounce(() => {
     setMarketSettings('General');
     setLineTextLength(-1);
     setStartEnabled(false);