[허우림] week14

.eslintrc.json

@@ -7,23 +7,24 @@
     "createDefaultProgram": true
   },
   "env": {
-    "browser": true, 
+    "browser": true,
     "node": true,
     "es6": true
   },
-  "ignorePatterns": ["node_modules/"], 
+  "ignorePatterns": ["node_modules/"],
   "extends": [
     "airbnb",
     "airbnb-typescript",
     "airbnb/hooks",
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "prettier" 
+    "prettier"
   ],
   "rules": {
+    "jsx-quotes": ["error", "prefer-single"],
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }],
-    "no-useless-catch": "off" 
+    "no-useless-catch": "off"
   }
 }

.prettierrc

@@ -1,6 +1,7 @@
 {
   "semi": true,
   "singleQuote": true,
+  "jsxSingleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all"
 }

components/common/Card.tsx

@@ -8,18 +8,16 @@ import NoImg from '@/public/assets/icons/card/card_no-img.svg';
 import kebab from '@/public/assets/icons/card/kebab.svg';
 import styles from '@/styles/card/card.module.css';
 
-interface Link {
-  link: {
-    id: string;
-    createdAt: string;
-    url: string;
-    title: string;
-    description: string;
-    imageSource: string;
-  };
+interface LinkProps {
+  id: string;
+  createdAt: string;
+  url: string;
+  title: string;
+  description: string;
+  imageSource: string;
 }
 
-export default function Card({ link }: Link) {
+export default function Card({ link }: { link: LinkProps }) {
   const { id, createdAt, url, title, description, imageSource } = link;
   const [linkInfo, setLinkInfo] = useState({
     id: '',
@@ -43,7 +41,7 @@ export default function Card({ link }: Link) {
     });
   };
 
-  const getCreatedAt = useMemo(() => {
+  const yearMonthDay = useMemo(() => {
     const [year, month, day] = calCreatedDates(createdAt);
     setMins(calCreatedAt(year, month, day));
     return { year, month, day };
@@ -57,7 +55,7 @@ export default function Card({ link }: Link) {
     <KebabContextProvider>
       <div className={styles.flexWrapper} id={`card-${id}`}>
         <div className={styles.cardImgWrapper}>
-          <Link target="_blank" href={url}>
+          <Link target='_blank' href={url}>
             {imageSource ? (
               <Image
                 className={
@@ -92,7 +90,7 @@ export default function Card({ link }: Link) {
           imgSrc={kebab}
           title={title}
           description={description}
-          createdDates={getCreatedAt}
+          createdDates={yearMonthDay}
           linkInfo={linkInfo}
         />
       </div>

components/common/Header.tsx

@@ -3,23 +3,17 @@ import LoginButton from '@/components/common/LoginButton';
 import Logo from '@/components/common/Logo';
 import styles from '@/styles/header/header.module.css';
 
-interface Props {
-  profileData: {
-    id: number;
-    created_at?: string;
-    name: string;
-    image_source: string;
-    email: string;
-    auth_id?: string;
-  };
+interface HeaderProps {
+  id: number;
+  created_at?: string;
+  name: string;
+  image_source: string;
+  email: string;
+  auth_id?: string;
 }
 
-export default function Header({ profileData }: Props) {
-  const {
-    name = 'defaultName',
-    image_source = 'https://images.unsplash.com/photo-1701600713610-0f724c65168d?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    email = '[email protected]',
-  } = profileData;
+export default function Header({ profileData }: { profileData: HeaderProps }) {
+  const { id, created_at, name, image_source, email, auth_id } = profileData;
 
   return (
     <div className={styles.header}>

components/common/SearchBar.tsx

@@ -14,10 +14,10 @@ export default function SearchBar() {
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Backspace' && router.query.keyword === '') {
-      setKeyword(router.query);
+      setKeyword(router.query.keyword);
     }
     if (e.key === 'Enter') {
-      setKeyword(router.query);
+      setKeyword(router.query.keyword);
       if (!router.query.keyword) return;
       setIsSearchResultShowed(true);
     }
@@ -59,19 +59,19 @@ export default function SearchBar() {
           className={`${styles.searchbarInput} ${
             isSearchActive ? styles.active : styles.inactive
           }`}
-          name="keyword"
-          type="text"
-          placeholder="링크를 검색해 보세요."
+          name='keyword'
+          type='text'
+          placeholder='링크를 검색해 보세요.'
           onChange={(e) => handleKeywordChange(e)}
           onKeyDown={(e) => handleKeyDown(e)}
         />
         <button onClick={handleButtonClick}>
           <Image
             className={styles.closeButton}
-            src="/assets/icons/search/close.svg"
+            src='/assets/icons/search/close.svg'
             width={24}
             height={24}
-            alt="reset-addLink"
+            alt='reset-addLink'
           />
         </button>
       </div>

components/common/SearchResult.tsx

@@ -1,16 +1,14 @@
-import { useRouter } from 'next/router';
+import { useContext } from 'react';
+import FolderContext from '@/contexts/FolderContext';
 import styles from '@/styles/search/searchResult.module.css';
 
 export default function SearchResult() {
-  const router = useRouter();
-  const search = router.query.keyword;
+  const { keyword } = useContext(FolderContext);
 
   return (
-    <>
-      <span className={styles.resultMessage}>
-        <span className={styles.keyword}>{search}</span>
-        <span className={styles.sub}>으로 검색한 결과입니다.</span>
-      </span>
-    </>
+    <span className={styles.resultMessage}>
+      <span className={styles.keyword}>{keyword}</span>
+      <span className={styles.sub}>으로 검색한 결과입니다.</span>
+    </span>
   );
 }

components/common/auth/Input.tsx

@@ -4,37 +4,39 @@ import styles from '@/styles/auth/auth.module.css';
 
 export default function Input({
   type,
-  name,
   placeholder,
-  onClick,
   onBlurInput,
   errorMsg,
 }: {
   type: string;
-  name?: string;
   placeholder: string;
-  onClick?: any;
   onBlurInput: (value: string) => any;
   errorMsg: string;
 }) {
-  const [isEyeClicked, setIsEyeClicked] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
 
   const handleEyeClick = () => {
-    setIsEyeClicked((prev) => !prev);
+    setIsPasswordVisible((prev) => !prev);
   };
 
-  const handleOnBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
-    onBlurInput(e.target.value);
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleOnBlur = () => {
+    onBlurInput(inputValue);
   };
 
   return (
     <>
       <div className={styles.inputBox}>
         <input
           placeholder={placeholder}
-          onBlur={(e) => handleOnBlur(e)}
+          onChange={(e) => handleOnChange(e)}
+          onBlur={handleOnBlur}
           name={type}
-          type={type === 'password' && isEyeClicked ? 'text' : type}
+          type={type === 'password' && isPasswordVisible ? 'text' : type}
           className={
             errorMsg
               ? `${styles.textfieldInput} ${styles.errorInput}`
@@ -43,23 +45,23 @@ export default function Input({
         />
         {type === 'password' && (
           <button
-            type="button"
+            type='button'
             className={styles.eyeToggleButton}
             onClick={handleEyeClick}
           >
-            {isEyeClicked ? (
+            {isPasswordVisible ? (
               <Image
-                src="/assets/icons/auth/eye-on.svg"
+                src='/assets/icons/auth/eye-on.svg'
                 width={16}
                 height={16}
-                alt="eye-on"
+                alt='eye-on'
               />
             ) : (
               <Image
-                src="/assets/icons/auth/eye-off.svg"
+                src='/assets/icons/auth/eye-off.svg'
                 width={16}
                 height={16}
-                alt="eye-off"
+                alt='eye-off'
               />
             )}
           </button>

components/common/folderPage/Dropdown.tsx

@@ -25,15 +25,15 @@ export default function Dropdown({
       <div className={styles.container}>
         {clickedKebabOption.delete && (
           <Modal
-            title="링크 삭제"
+            title='링크 삭제'
             subtitle={linkInfo.url}
             button={{ color: 'red', text: '삭제하기' }}
             closeKebab={closeKebab}
           />
         )}
         {clickedKebabOption.addToFolder && (
           <Modal
-            title="폴더에 추가"
+            title='폴더에 추가'
             button={{ color: 'blue', text: '추가하기' }}
             subtitle={linkInfo.url}
             closeKebab={closeKebab}

contexts/FolderContext.jsx

@@ -4,13 +4,7 @@ const FolderContext = createContext();
 
 export function FolderContextProvider({ children }) {
   const [folderList, setFolderList] = useState([]);
-  const [clickedOption, setClickedOption] = useState({
-    addFolderLink: false,
-    shareFolder: false,
-    editFolderName: false,
-    deleteFolder: false,
-    addNewFolder: false,
-  });
+  const [clickedOption, setClickedOption] = useState({});
   const [addedLink, setAddedLink] = useState('');
   const [keyword, setKeyword] = useState('');
   const [filteredLinks, setFilteredLinks] = useState([]);
@@ -21,8 +15,8 @@ export function FolderContextProvider({ children }) {
       value={{
         clickedOption,
         setClickedOption,
-        setAddedLink,
         addedLink,
+        setAddedLink,
         folderList,
         setFolderList,
         keyword,