[Feat/#32] 폴더리스트 페이지 기능 구현

app/.eslintrc

@@ -1,74 +1,77 @@
 {
-    "plugins": ["prettier", "@typescript-eslint"],
-    "extends": ["airbnb-typescript", "react-app", "prettier"],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "project": "./tsconfig.json"
-    },
-    "settings": {
-        "import/resolver": {
-            "typescript": {
-                "alwaysTryTypes": true
-            }
-        }
-    },
-    "rules": {
-        "object-curly-spacing": ["warn", "always"],
-        "no-unused-vars": [
-            "warn",
-            {
-                "vars": "all",
-                "args": "none"
-            }
-        ],
-        "@typescript-eslint/no-unused-vars": [
-            "warn",
-            {
-                "vars": "all",
-                "args": "none"
-            }
-        ],
-        "@typescript-eslint/no-explicit-any": [
-            "error",
-            {
-                "ignoreRestArgs": true
-            }
-        ],
-        "max-len": [
-            "warn",
-            {
-                "code": 80,
-                "ignoreStrings": true,
-                "ignoreTemplateLiterals": true,
-                "ignoreComments": true
-            }
-        ],
-        "no-plusplus": [
-            "error",
-            {
-                "allowForLoopAfterthoughts": true
-            }
-        ],
-        "react/jsx-key": "error",
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                "devDependencies": [
-                    "**/*.test.js",
-                    "**/*.test.jsx",
-                    "**/*.test.ts",
-                    "**/*.test.tsx",
-                    "src/tests/**/*"
-                ]
-            }
-        ],
-        "react/jsx-props-no-spreading": "off",
-        "import/prefer-default-export": "off",
-        "react/jsx-boolean-value": "off",
-        "react/prop-types": "off",
-        "react/no-unescaped-entities": "off",
-        "react/jsx-one-expression-per-line": "off",
-        "react/jsx-wrap-multilines": "off",
-        "react/destructuring-assignment": "off"
+  "plugins": ["prettier", "@typescript-eslint"],
+  "extends": ["airbnb-typescript", "react-app", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
     }
+  },
+  "rules": {
+    "object-curly-spacing": ["warn", "always"],
+    "no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": [
+      "error",
+      {
+        "ignoreRestArgs": true
+      }
+    ],
+    "max-len": [
+      "warn",
+      {
+        "code": 100,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreComments": true
+      }
+    ],
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "react/jsx-key": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.js",
+          "**/*.test.jsx",
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "src/tests/**/*"
+        ]
+      }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "react/jsx-boolean-value": "off",
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-wrap-multilines": "off",
+    "react/destructuring-assignment": "off",
+    "no-useless-return": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off"
+  }
 }

app/.prettierrc

@@ -1,8 +1,8 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "singleQuote": true,
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "arrowParens": "always"
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
 }

app/src/components/Folder/colors.ts

@@ -0,0 +1,13 @@
+import ObjectType from '../../types/ObjectType';
+
+type ColorType = {
+  [key: string]: ObjectType;
+};
+
+const colors: ColorType = {
+  yellow: { head: '#ff9f00', body: '#ffc928' },
+  red: { head: '#fb3939', body: '#fe7676' },
+  blue: { head: '#26aaf5', body: '#76f6ff' },
+};
+
+export default colors;

app/src/components/Folder/index.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 
 import styles from './styles.scss';
+import colors from './colors';
 
 type FolderProps = {
-  color: string
+  color: string;
 };
 
 const Folder = (props: FolderProps) => {
   const { color } = props;
 
   return (
     <div className={styles.folder_container}>
-      <div className={styles.folder_header} style={{ backgroundColor:color }} />
-      <div className={styles.folder_body} style={{ backgroundColor:color }} />
+      <div className={styles.folder_header} style={{ backgroundColor: colors[color].head }} />
+      <div className={styles.folder_body} style={{ backgroundColor: colors[color].body }} />
     </div>
   );
 };
 
 Folder.defaultProps = {
-  color: '#ffc928'
+  color: 'yellow',
 };
 
 export default Folder;

app/src/components/Folder/styles.scss

@@ -5,14 +5,14 @@
   position: relative;
   width: 100px;
   height: 80px;
-    
+
   .folder_header {
     position: absolute;
     top: 5px;
     left: 10px;
     width: 30px;
     height: 30px;
-    background-color: #ffc928;
+    // background-color: #ff9f00;
     border-radius: 10px 0px 0px 0px;
 
     &:after {
@@ -23,15 +23,15 @@
       height: 30px;
       transform: rotateZ(45deg);
       background-color: inherit;
-      content:'';
+      content: '';
     }
   }
-    
+
   .folder_body {
     position: absolute;
     width: 80px;
     height: 50px;
-    background-color: #ffc928;
+    // background-color: #ffc928;
     border-radius: 10px;
   }
-}
+}

app/src/components/Header/index.tsx

@@ -1,48 +1,52 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './styles.scss';
 
-import FolderSetting from '../../components/FolderSetting';
-import MemoSetting from '../../components/MemoSetting';
+import FolderSetting from '../FolderSetting';
+import MemoSetting from '../MemoSetting';
 
 type HeaderProps = {
   hasSelectBtn?: boolean;
   hasLogoutBtn?: boolean;
   hasSaveBtn?: boolean;
   hasBackBtn?: boolean;
+  isSelecting: boolean;
+  setIsSelecting: Function;
 };
 
 const Header = ({
   hasSelectBtn,
   hasLogoutBtn,
   hasSaveBtn,
   hasBackBtn,
+  isSelecting,
+  setIsSelecting,
 }: HeaderProps) => {
   const handleSelectBtnClick = () => {
     setIsSelecting(!isSelecting);
   };
 
-  const [isSelecting, setIsSelecting] = useState(false);
-
   return (
     <>
       <header className={styles.header}>
         <div className={styles.home_btn_div}>
-          <button className={styles.home_btn} type="button" />
+          <button className={styles.home_btn} type="button">
+            ''
+          </button>
         </div>
 
         {hasSelectBtn && (
           <button
-            className={classNames(
-              styles.select_btn,
-              isSelecting ? styles.active : ''
-            )}
+            type="button"
+            className={classNames(styles.select_btn, isSelecting ? styles.active : '')}
             onClick={handleSelectBtnClick}
-          />
+          >
+            ''
+          </button>
         )}
-        {hasSaveBtn && <button className={styles.save_btn} />}
-        {hasLogoutBtn && <button className={styles.logout_btn} />}
-        {hasBackBtn && <button className={styles.back_btn} />}
+        {hasSaveBtn && <input type="button" className={styles.save_btn} />}
+        {hasLogoutBtn && <input type="button" className={styles.logout_btn} />}
+        {hasBackBtn && <input type="button" className={styles.back_btn} />}
       </header>
 
       {isSelecting && hasLogoutBtn && <FolderSetting />}

app/src/containers/FolderListPage/index.tsx

@@ -1,31 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classnames from 'classnames/bind';
+
 import styles from './styles.scss';
 import Header from '../../components/Header';
 import Folder from '../../components/Folder';
+import folders from '../../mock/folders';
+
+const cx = classnames.bind({ ...styles });
 
 const FolderListPage = () => {
+  const [isSelecting, setIsSelecting] = useState<boolean>(false);
+  const [selectedFolders, setSelectedFolders] = useState<number[]>([]);
+
+  const handleFolderClick = (id: number) => {
+    if (!isSelecting) return;
+
+    if (selectedFolders.includes(id)) {
+      const newSelectedFolders = [...selectedFolders];
+      const index = selectedFolders.indexOf(id);
+      newSelectedFolders.splice(index, 1);
+      setSelectedFolders(newSelectedFolders);
+      return;
+    }
+
+    setSelectedFolders([...selectedFolders, id]);
+  };
   return (
     <>
-      <Header hasSelectBtn={true} hasLogoutBtn={true} />
+      <Header
+        hasSelectBtn={true}
+        hasLogoutBtn={true}
+        isSelecting={isSelecting}
+        setIsSelecting={setIsSelecting}
+      />
 
       <div className={styles.folder_container}>
         <div className={styles.folder_list}>
-          <div className={styles.folder}>
-            <Folder />
-            <div className={styles.title}>새 폴더</div>
-          </div>
-          <div className={styles.folder}>
-            <Folder />
-            <div className={styles.title}>새 폴더</div>
-          </div>
-          <div className={styles.folder}>
-            <Folder />
-            <div className={styles.title}>새 폴더</div>
-          </div>
-          <div className={styles.folder}>
-            <Folder />
-            <div className={styles.title}>새 폴더</div>
-          </div>
+          {folders.map((folder) => {
+            return (
+              <div
+                className={cx('folder', { selected: selectedFolders.includes(folder.id) })}
+                key={folder.id}
+                onClick={() => handleFolderClick(folder.id)}
+              >
+                <Folder color={folder.color} />
+                <div className={styles.title}>{folder.name}</div>
+              </div>
+            );
+          })}
           <div className={styles.add} />
         </div>
       </div>