Fix: 옮기변서 생긴 에러 수정 및 정리

codeit-bootcamp-frontend · May 13, 2024 · 06b13bf · 06b13bf
1 parent 82aaa22
commit 06b13bf
Show file tree

Hide file tree

Showing 29 changed files with 407 additions and 268 deletions.
diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -1,28 +1,53 @@
-import { useState } from "react";
-import useFetch from "@/src/hook/useFetch";
-import { IHeaderUserLoginInfoApi } from "./interface";
-import { BASE_URL } from "@/src/constant/api";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
 import { Email, HeaderControl, HeaderInner, HeaderLogo, HeaderUserInfo, HeaderWrap } from "./headerStyle";
-import Link from "next/link";
+import { useRouter } from "next/router";
 import { Profile } from "@/styles/commonStyle";
 import LinkButton from "./atoms/LinkButton";
+import Link from "next/link";
 
 const logo = '/assets/logo/logo.svg';
 
-function Header() {
-  // const { pathname } = useLocation();
-  const { value } = useFetch<IHeaderUserLoginInfoApi>(BASE_URL);
+export interface IHeaderUser {
+  id:number,
+  email:string,
+  name?:string,
+  image_source?:string,
+  created_at?:string,
+  auth_id:string
+}
+
+export interface IHeaderUserLoginInfoApi {
+  userInfo?: {
+    data: IHeaderUser[];
+  };
+}
+
+export async function getStaticProps() {
+  const res = await axios.get(``);
+  const userInfo = res.data;
+
+  return {
+    props:{
+      userInfo,
+    }
+  }
+}
+
+function Header({userInfo}:IHeaderUserLoginInfoApi) {
+  const {pathname} = useRouter();
   const [fixed, setFixed] = useState(true);
-  // useEffect(() => {
-  //   if (pathname === '/folder') {
-  //     setFixed(false);
-  //   }
-  // }, [pathname]);
-  const userInfo = value?.data[0] ?? undefined;
+
+  useEffect(() => {
+    if (pathname === '/folder') {
+      setFixed(false);
+    }
+  }, [pathname]);
+
   return (
     <HeaderWrap className="head__wrap" $position={fixed}>
       <HeaderInner>
-        <HeaderLogo>
+        <HeaderLogo className="head__logo">
           <Link href="/">
             <img src={logo} alt="linkbrary" />
           </Link>
@@ -31,7 +56,7 @@ function Header() {
           {userInfo ? (
             <HeaderUserInfo>
               <Profile></Profile>
-              <Email>{userInfo?.email}</Email>
+              <Email>{userInfo?.data[0].email}</Email>
             </HeaderUserInfo>
           ) : (
             <LinkButton $link={'/signin'} $linkClass={'link--gradient link--login large'}>

diff --git a/components/common/atoms/Button.tsx b/components/common/atoms/Button.tsx
@@ -1,11 +1,12 @@
+import { ButtonHTMLAttributes } from 'react';
 import { ButtonModule } from './buttonStyle';
 interface IButtonModule {
   children: React.ReactNode;
   $btnClass: string;
   $BeforButtonIcon?: string;
-  $id?: string | number;
+  $id?: string;
   $afterButtonIcon?: string;
-  $type?: 'button' | 'reset' | 'submit' | undefined;
+  $type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   onclick?: () => void;
 }
 

diff --git a/components/common/atoms/CheckBox.tsx b/components/common/atoms/CheckBox.tsx
@@ -6,7 +6,7 @@ interface ICheckBoxData {
 }
 
 function CheckBox({ $data }: ICheckBoxData) {
-  if (typeof $data) {
+  if ($data?.data) {
     return (
       <CheckBoxWrap className="chk--list-type1">
         {$data &&

diff --git a/components/common/atoms/Input.tsx b/components/common/atoms/Input.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import { InputModule } from './inputStyle';
 import Button from './Button';
 import { SearchResults } from '@/pages/folder/folderStyle';
+import { Relative } from '@/styles/commonStyle';
 
 interface IButtonModule {
   $type?: string;
@@ -47,7 +48,7 @@ function Input({
 
   return (
    <>
-     <div style={{position:'relative'}}>
+     <Relative>
         <InputModule
           type={$type}
           className={$inputClass}
@@ -62,7 +63,7 @@ function Input({
             {children}
           </Button>
         )}
-      </div>
+      </Relative>
     {value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
    </>
   );

diff --git a/components/common/atoms/LinkButton.tsx b/components/common/atoms/LinkButton.tsx
@@ -3,15 +3,17 @@ interface IButtonModule {
   children: React.ReactNode;
   $link: string;
   $linkClass: string;
+  $target?: string;
 }
 
 export default function LinkButton({
   children,
   $link,
   $linkClass,
+  $target="_self"
 }: IButtonModule) {
   return (
-    <LinkModule href={$link} className={$linkClass}>
+    <LinkModule href={$link} className={$linkClass} target="$target">
       {children}
     </LinkModule>
   );

diff --git a/components/common/atoms/LinkButtonStyle.ts b/components/common/atoms/LinkButtonStyle.ts
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { theme } from "@/styles/theme";
 import Link from "next/link";
+import { font24 } from "@/styles/commonStyle";
 
 
 export const LinkModule = styled(Link)`
@@ -21,6 +22,11 @@ export const LinkModule = styled(Link)`
         width: 80px;
       }
     }
+    &--title {
+      &-text {
+        ${font24}
+      }
+    }
   }
   &.full {
     width: 100% !important; 

diff --git a/components/common/interface.ts b/components/common/interface.ts
diff --git a/components/folder/ContantList.tsx b/components/folder/ContantList.tsx
diff --git a/components/folder/FolderButtonList.tsx b/components/folder/FolderButtonList.tsx
@@ -5,21 +5,21 @@ import { IFolderMenuButtonApi } from '@/pages/folder/interface';
 
 interface IButtonList {
   $menu: IFolderMenuButtonApi | null;
-  $btnActive: number | string;
+  $activeBtnId: number;
   onClick: (id:number) => void;
 }
 
 function FolderButtonList({
   $menu,
-  $btnActive,
+  $activeBtnId,
   onClick,
 }: IButtonList) {
 
   return (
     <BookMarkBtnList>
       <Button
-        $id={-1}
-        $btnClass={`button--outlined ${$btnActive === -1 ? 'active' : ''}`}
+        $id={`-1`}
+        $btnClass={`button--outlined ${$activeBtnId === -1 ? 'active' : ''}`}
         onclick={() => onClick(-1)}
       >
         전체
@@ -30,7 +30,7 @@ function FolderButtonList({
             key={item.id}
             $id={`${item.id}`}
             $btnClass={`button--outlined ${
-              $btnActive === item.id ? 'active' : ''
+              $activeBtnId === item.id ? 'active' : ''
             }`}
             onclick={() => onClick(item.id)}
           >

diff --git a/components/folder/FolderContentControll.tsx b/components/folder/FolderContentControll.tsx
@@ -1,8 +1,9 @@
 import { memo } from 'react';
 import Button from '../common/atoms/Button';
-import Link from 'next/link';
 import { ShareBox } from '../share/shareStyle';
 import { ShareListBtn } from '@/pages/folder/folderStyle';
+import LinkButton from '../common/atoms/LinkButton';
+import { Font } from '@/styles/commonStyle';
 
 const folderControlBtn = [
   {
@@ -27,17 +28,22 @@ const folderControlBtn = [
 
 interface iControll {
   $title: string;
-  onclick: (type: any) => void;
+  onclick: (type: string) => void;
   $id?:number
 }
 
 function FolderContentControll({ $title, onclick, $id }: iControll) {
   const handleModalOpen = (type: any) => {
     onclick(type);
   };
+
   return (
     <ShareBox>
-      <Link href={`/shared/${$id}`} target='_blank'>{$title}</Link>
+      {
+        $id &&
+        $id === -1 ? <Font as='strong' className='font--size-ls tab-title'>{$title}</Font>:
+        <LinkButton $link={`/shared/${$id}`} $linkClass="link--title-text tab-title" $target='_blank'>{$title}</LinkButton>  
+      }
       {$title === '전체' || (
         <ShareListBtn>
           {folderControlBtn.map((btn) => (

diff --git a/components/folder/PostCard.tsx b/components/folder/PostCard.tsx
@@ -1,21 +1,14 @@
-import { IFolderContent, IFolderMenuButtonApi } from "@/pages/folder/interface";
-import useFetch from "@/src/hook/useFetch";
 import { useMemo, useState } from "react";
+import Link from "next/link";
+import { IFolderContent} from "@/pages/folder/interface";
 import { IModal } from "../modal/interface";
-import { FOLDER_MENU_LIST_API } from "@/src/constant/api";
 import { BookMarkBtn, CardMenu, CardWrap } from "./PostCardStyle";
-import Link from "next/link";
-import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
 import { calculateTimeAgo } from "@/src/utils/calcTilmAgo";
 import Modal from "../modal/Modal";
-import { modalOrder } from "@/src/constant/modal";
+import { DFlaxAlignCenterBtw, EllipsisLine } from "@/styles/commonStyle";
 
 const emptyImg = '/assets/logo/logo.svg';
 
-function useFatchDataLoad<T>(api: string) {
-  return useFetch<T>(api);
-}
-
 export default function PostCard({ image_source, description, created_at}: IFolderContent) {
   const [bookMark, setBookMark] = useState(false);
   const [cardMenuShow, setCardMenuShow] = useState(false);
@@ -28,25 +21,10 @@ export default function PostCard({ image_source, description, created_at}: IFold
     $buttonText: null,
     $modalData: null,
   });
-  const { value: menu, isLoading: menuLoading } =
-    useFatchDataLoad<IFolderMenuButtonApi>(FOLDER_MENU_LIST_API);
 
   const handelerBookMarkActive = () => setBookMark((prev) => !prev);
   const handelerCardDropdown = () => setCardMenuShow((prev) => !prev);
 
-  const handleModalOpen = (type: string) => {
-    let modalInfo = modalOrder[type];
-    if (type === 'folderInAdd') {
-      modalInfo = {
-        ...modalInfo,
-        $modalData: menu,
-      };
-    }
-    setModalInfo(modalInfo);
-    setModalShow(true);
-    setCardMenuShow(false);
-  };
-
   const handleModalClose = () => {
     setModalShow(false);
   };
@@ -93,7 +71,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
           </button>
           {cardMenuShow && (
             <div className="card__dropdown-menu">
-              <button
+              {/* <button
                 className="card__menu-btn"
                 onClick={() => handleModalOpen('folderDelete')}
               >
@@ -104,7 +82,7 @@ export default function PostCard({ image_source, description, created_at}: IFold
                 onClick={() => handleModalOpen('folderInAdd')}
               >
                 폴더에 추가
-              </button>
+              </button> */}
             </div>
           )}
         </CardMenu>

diff --git a/components/folder/PostCardList.tsx b/components/folder/PostCardList.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { IFolderContent } from '@/pages/folder/interface';
+import PostCard from './PostCard';
+import { EmptyBox, PostCardWrap } from '@/pages/folder/folderStyle';
+
+
+interface IFolderList {
+  $content: IFolderContent[] | undefined | null;
+}
+
+function PostCardList({ $content }: IFolderList) {
+  if(!$content) return <EmptyBox>저장된 링크가 없습니다.</EmptyBox>
+  return (
+    <PostCardWrap>
+      {$content?.map((data) => (
+        <PostCard key={data.id} {...data} />
+      ))}
+    </PostCardWrap>
+  );
+}
+export default memo(PostCardList);
diff --git a/components/share/ShareModal.tsx b/components/share/ShareModal.tsx
@@ -1,4 +1,4 @@
-import { snsShare } from '../../constant/share';
+import { snsShare } from '@/src/constant/share';
 import Button from '../common/atoms/Button';
 import { ShareBox } from './shareStyle';
 

diff --git a/components/share/shareStyle.ts b/components/share/shareStyle.ts
@@ -1,4 +1,18 @@
 import { DFlaxAlignCenterBtw } from "@/styles/commonStyle";
+import { theme } from "@/styles/theme";
 import styled from "styled-components";
 
-export const ShareBox = styled(DFlaxAlignCenterBtw)``
+export const ShareBox = styled(DFlaxAlignCenterBtw)`
+  .tab-title {
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+  }
+  @media screen and (max-width: ${theme.screenSize.moLarge}) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: 1.15rem;
+    .tab-title {
+      margin-bottom: 0.75rem;
+    }
+  }
+`