[안성재] Week14

.gitignore

@@ -36,7 +36,4 @@ yarn-error.log*
 next-env.d.ts
 
 # spell
-cspell.json
-
-# signin
-src/pages/signin.tsx
+cspell.json

package.json

@@ -13,6 +13,7 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.48.2",
     "react-tiny-popover": "^8.0.4",
     "styled-components": "^6.1.1",
     "timeago": "^1.6.7",

src/api/fetch.ts → src/api/apiRequest.ts

@@ -1,12 +1,12 @@
 import axios, { AxiosRequestConfig } from 'axios';
 
 const api = axios.create({
-  baseURL: 'https://bootcamp-api.codeit.kr/api/',
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
-const fetch = async (options: AxiosRequestConfig) => {
+const apiRequest = async (options: AxiosRequestConfig) => {
   const response = await api({ ...options });
   return response;
 };
 
-export default fetch;
+export default apiRequest;

src/components/AddLinkForm/AddLinkForm.tsx

@@ -7,7 +7,7 @@ interface Props {
   isScrolled: boolean;
 }
 
-function AddLinkForm({ isScrolled }: Props) {
+const AddLinkForm = ({ isScrolled }: Props) => {
   const [value, setValue] = useState('');
   const [showFooter, setShowFooter] = useState(false);
   const footerRef = useContext(FooterRefContext);
@@ -18,11 +18,7 @@ function AddLinkForm({ isScrolled }: Props) {
 
   useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
-        setShowFooter(true);
-      } else {
-        setShowFooter(false);
-      }
+      setShowFooter(entry.isIntersecting);
     });
 
     const currentRef = footerRef?.current;
@@ -53,6 +49,6 @@ function AddLinkForm({ isScrolled }: Props) {
       </S.Form>
     </S.FormContainer>
   );
-}
+};
 
 export default AddLinkForm;

src/components/CardList/Card/Card.tsx

@@ -1,7 +1,7 @@
 import * as S from './Card.style';
 import { formatDate, formatTimeDiff } from '@utils/format';
 import { Popover } from 'react-tiny-popover';
-import { MouseEvent, useState } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 import Modal from '@components/Modal';
 import ModalDeleteLink from '@components/Modal/ModalDeleteLink';
 import ModalAddLink from '@components/Modal/ModalAddLink';
@@ -15,7 +15,7 @@ interface Props {
   item: Data;
 }
 
-function Card({ folders, item }: Props) {
+const Card = ({ folders, item }: Props) => {
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const [modalDeleteLinkIsOpen, setModalDeleteLinkIsOpen] = useState(false);
   const [modalAddLinkIsOpen, setModalAddLinkIsOpen] = useState(false);
@@ -24,6 +24,35 @@ function Card({ folders, item }: Props) {
   const timeDiff = formatTimeDiff(created_at);
   const date = formatDate(created_at);
 
+  const handleOpenPopover = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setPopoverIsOpen(!popoverIsOpen);
+  }, []);
+
+  const handleClosePopover = useCallback(() => {
+    setPopoverIsOpen(false);
+  }, []);
+
+  const handleOpenModalDeleteLink = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setModalDeleteLinkIsOpen(true);
+  }, []);
+
+  const handleCloseModalDeleteLink = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setModalDeleteLinkIsOpen(false);
+  }, []);
+
+  const handleOpenModalAddLink = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setModalAddLinkIsOpen(true);
+  }, []);
+
+  const handleCloseModalAddLink = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    setModalAddLinkIsOpen(false);
+  }, []);
+
   return (
     <Link href={url} target='_blank' rel='noopener noreferrer'>
       <S.ImageContainer>
@@ -40,48 +69,28 @@ function Card({ folders, item }: Props) {
         <Popover
           isOpen={popoverIsOpen}
           positions={'bottom'}
-          onClickOutside={() => setPopoverIsOpen(false)}
+          onClickOutside={handleClosePopover}
           content={
             <S.PopoverContainer>
-              <S.PopoverButton
-                onClick={(e) => {
-                  e.preventDefault();
-                  setModalDeleteLinkIsOpen(true);
-                }}>
+              <S.PopoverButton onClick={handleOpenModalDeleteLink}>
                 삭제하기
               </S.PopoverButton>
-              {modalDeleteLinkIsOpen && (
-                <Modal
-                  close={(e: MouseEvent) => {
-                    e.preventDefault();
-                    setModalDeleteLinkIsOpen(false);
-                  }}>
+              {modalDeleteLinkIsOpen ? (
+                <Modal close={handleCloseModalDeleteLink}>
                   <ModalDeleteLink url={url} />
                 </Modal>
-              )}
-              <S.PopoverButton
-                onClick={(e) => {
-                  e.preventDefault();
-                  setModalAddLinkIsOpen(true);
-                }}>
+              ) : null}
+              <S.PopoverButton onClick={handleOpenModalAddLink}>
                 폴더에 추가
               </S.PopoverButton>
-              {modalAddLinkIsOpen && (
-                <Modal
-                  close={(e: MouseEvent) => {
-                    e.preventDefault();
-                    setModalAddLinkIsOpen(false);
-                  }}>
+              {modalAddLinkIsOpen ? (
+                <Modal close={handleCloseModalAddLink}>
                   <ModalAddLink folders={folders} url={url} />
                 </Modal>
-              )}
+              ) : null}
             </S.PopoverContainer>
           }>
-          <S.KebabButton
-            onClick={(e: MouseEvent) => {
-              e.preventDefault();
-              setPopoverIsOpen(!popoverIsOpen);
-            }}>
+          <S.KebabButton onClick={handleOpenPopover}>
             <img src='/assets/images/kebab.svg' alt='케밥 버튼' />
           </S.KebabButton>
         </Popover>
@@ -91,6 +100,6 @@ function Card({ folders, item }: Props) {
       </S.Info>
     </Link>
   );
-}
+};
 
 export default Card;

src/components/CardList/CardList.tsx

@@ -10,7 +10,7 @@ interface Props {
   searchKeyword: string;
 }
 
-function CardList({ folders, items, searchKeyword }: Props) {
+const CardList = ({ folders, items, searchKeyword }: Props) => {
   const lowerCaseKeyword = searchKeyword.toLowerCase();
 
   const filteredItems = useMemo(
@@ -23,23 +23,19 @@ function CardList({ folders, items, searchKeyword }: Props) {
     [items, lowerCaseKeyword]
   );
 
+  if (!filteredItems?.length) {
+    return <S.NoLink>저장된 링크가 없습니다</S.NoLink>;
+  }
+
   return (
-    <>
-      {!filteredItems?.length ? (
-        <S.NoLink>저장된 링크가 없습니다</S.NoLink>
-      ) : (
-        filteredItems && (
-          <S.CardListContainer>
-            {filteredItems.map((item) => (
-              <S.CardContainer key={item.id}>
-                <Card folders={folders} item={item} />
-              </S.CardContainer>
-            ))}
-          </S.CardListContainer>
-        )
-      )}
-    </>
+    <S.CardListContainer>
+      {filteredItems.map((item) => (
+        <S.CardContainer key={item.id}>
+          <Card folders={folders} item={item} />
+        </S.CardContainer>
+      ))}
+    </S.CardListContainer>
   );
-}
+};
 
 export default CardList;

src/components/CurrentFolderInfo/CurrentFolderInfo.tsx

@@ -10,7 +10,7 @@ interface Props {
   selectedId: string | undefined;
 }
 
-function CurrentFolderInfo({ selectedName, selectedId }: Props) {
+const CurrentFolderInfo = ({ selectedName, selectedId }: Props) => {
   const [modalShareIsOpen, setModalShareIsOpen] = useState(false);
   const [modalEditIsOpen, setModalEditIsOpen] = useState(false);
   const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
@@ -23,32 +23,32 @@ function CurrentFolderInfo({ selectedName, selectedId }: Props) {
           <img src='/assets/images/share.svg' alt='공유 아이콘' />
           <span>공유</span>
         </button>
-        {modalShareIsOpen && (
+        {modalShareIsOpen ? (
           <Modal close={() => setModalShareIsOpen(false)}>
             <ModalShare folderName={selectedName} folderId={selectedId} />
           </Modal>
-        )}
+        ) : null}
         <button onClick={() => setModalEditIsOpen(true)}>
           <img src='/assets/images/name-change.svg' alt='이름 변경 아이콘' />
           <span>이름 변경</span>
         </button>
-        {modalEditIsOpen && (
+        {modalEditIsOpen ? (
           <Modal close={() => setModalEditIsOpen(false)}>
             <ModalEdit folderName={selectedName} />
           </Modal>
-        )}
+        ) : null}
         <button onClick={() => setModalDeleteIsOpen(true)}>
           <img src='/assets/images/delete.svg' alt='삭제 아이콘' />
           <span>삭제</span>
         </button>
-        {modalDeleteIsOpen && (
+        {modalDeleteIsOpen ? (
           <Modal close={() => setModalDeleteIsOpen(false)}>
             <ModalDelete folderName={selectedName} />
           </Modal>
-        )}
+        ) : null}
       </S.OptionContainer>
     </S.Container>
   );
-}
+};
 
 export default CurrentFolderInfo;

src/components/FolderInfo/FolderInfo.tsx

@@ -5,11 +5,9 @@ interface Props {
   folder: Folder;
 }
 
-function FolderInfo({ folder }: Props) {
-  const folderName = folder?.name;
-  const owner = folder?.owner;
-  const ownerName = owner?.name;
-  const ownerProfileImg = owner?.profileImageSource;
+const FolderInfo = ({ folder }: Props) => {
+  const { name: folderName } = folder;
+  const { name: ownerName, profileImageSource: ownerProfileImg } = folder.owner;
 
   return (
     <S.Container>
@@ -18,6 +16,6 @@ function FolderInfo({ folder }: Props) {
       <S.H1>{folderName}</S.H1>
     </S.Container>
   );
-}
+};
 
 export default FolderInfo;