Fix: 오류수정

codeit-bootcamp-frontend · May 5, 2024 · 0d7cfc9 · 0d7cfc9
1 parent 3b9d7fb
commit 0d7cfc9
Show file tree

Hide file tree

Showing 15 changed files with 203 additions and 121 deletions.
diff --git a/public/assets/icon/icon_loading.svg b/public/assets/icon/icon_loading.svg
diff --git a/src/components/common/atoms/Button.tsx b/src/components/common/atoms/Button.tsx
@@ -3,7 +3,7 @@ interface IButtonModule {
   children: React.ReactNode;
   $btnClass: string;
   $BeforButtonIcon?: string;
-  $id?: string;
+  $id?: string | number;
   $afterButtonIcon?: string;
   $type?: 'button' | 'reset' | 'submit' | undefined;
   onclick?: () => void;

diff --git a/src/components/common/atoms/Input.tsx b/src/components/common/atoms/Input.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import Button from './Button';
 import { InputModule } from './inputStyle';
+import { SearchResults } from '../../../pages/folder/folderStyle';
 interface IButtonModule {
   $type?: string;
   $inputClass?: string;
@@ -44,22 +45,25 @@ function Input({
   };
 
   return (
-    <>
-      <InputModule
-        type={$type}
-        className={$inputClass}
-        placeholder={$placeholder}
-        value={value}
-        onChange={handleChangInput}
-        $beforeBgIcon={$beforeBgIcon}
-        ref={refInput}
-      />
-      {$btnShow && (
-        <Button $btnClass={$btnClass} onclick={() => handleButtonEvent(value)}>
-          {children}
-        </Button>
-      )}
-    </>
+   <>
+     <div style={{position:'relative'}}>
+        <InputModule
+          type={$type}
+          className={$inputClass}
+          placeholder={$placeholder}
+          value={value}
+          onChange={handleChangInput}
+          $beforeBgIcon={$beforeBgIcon}
+          ref={refInput}
+        />
+        {$btnShow && (
+          <Button $btnClass={$btnClass} onclick={() => handleButtonEvent(value)}>
+            {children}
+          </Button>
+        )}
+      </div>
+    {value && <SearchResults><span>{value}</span>으로 검색한 결과입니다.</SearchResults>}
+   </>
   );
 }
 export default Input;
diff --git a/src/components/folder/ContantList.tsx b/src/components/folder/ContantList.tsx
@@ -4,23 +4,22 @@ import { IFolderContent } from '../../pages/folder/interface';
 
 interface IFolderList {
   contant: IFolderContent[] | [] | undefined | null;
-  loading: boolean;
 }
 
-function ContantList({ contant, loading }: IFolderList) {
+function ContantList({ contant }: IFolderList) {
   return (
     <div>
-      {loading ? (
-        <EmptyBox>Loading...</EmptyBox>
-      ) : contant ? (
-        <PostCardWrap>
-          {contant?.map((data) => (
-            <PostCard key={data.id} {...data} />
-          ))}
-        </PostCardWrap>
-      ) : (
-        <EmptyBox>저장된 링크가 없습니다.</EmptyBox>
-      )}
+      {
+        contant ? (
+          <PostCardWrap>
+            {contant?.map((data) => (
+              <PostCard key={data.id} {...data} />
+            ))}
+          </PostCardWrap>
+        ) : (
+          <EmptyBox>저장된 링크가 없습니다.</EmptyBox>
+        )
+      }
     </div>
   );
 }

diff --git a/src/components/folder/FolderButtonList.tsx b/src/components/folder/FolderButtonList.tsx
@@ -5,44 +5,38 @@ import { IFolderMenuButtonApi } from '../../pages/folder/interface';
 
 interface IButtonList {
   $menu: IFolderMenuButtonApi | null;
-  $loading: boolean;
-  $btnActive: number;
+  $btnActive: number | string;
   onClick: (id:number) => void;
 }
 
 function FolderButtonList({
   $menu,
-  $loading,
   $btnActive,
   onClick,
 }: IButtonList) {
 
   return (
     <BookMarkBtnList>
-      {$loading ? null : (
-        <>
+      <Button
+        $id={-1}
+        $btnClass={`button--outlined ${$btnActive === -1 ? 'active' : ''}`}
+        onclick={() => onClick(-1)}
+      >
+        전체
+      </Button>
+      {$menu &&
+        $menu.data?.map((item) => (
           <Button
-            $id={'all'}
-            $btnClass={`button--outlined ${$btnActive === -1 ? 'active' : ''}`}
-            onclick={() => onClick(-1)}
+            key={item.id}
+            $id={`${item.id}`}
+            $btnClass={`button--outlined ${
+              $btnActive === item.id ? 'active' : ''
+            }`}
+            onclick={() => onClick(item.id)}
           >
-            전체
+            {item.name}
           </Button>
-          {$menu &&
-            $menu.data?.map((item, i) => (
-              <Button
-                key={item.id}
-                $id={`${item.id}`}
-                $btnClass={`button--outlined ${
-                  $btnActive === i ? 'active' : ''
-                }`}
-                onclick={() => onClick(item.id)}
-              >
-                {item.name}
-              </Button>
-            ))}
-        </>
-      )}
+        ))}
     </BookMarkBtnList>
   );
 }

diff --git a/src/components/folder/FolderContentControll.tsx b/src/components/folder/FolderContentControll.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { ShareBox, ShareListBtn } from '../../pages/folder/folderStyle';
-import { SubTitle } from '../../styles/commonStyle';
 import Button from '../common/atoms/Button';
+import { Link } from 'react-router-dom';
 
 const folderControlBtn = [
   {
@@ -27,15 +27,16 @@ const folderControlBtn = [
 interface iControll {
   $title: string;
   onclick: (type: any) => void;
+  $id?:number
 }
 
-function FolderContentControll({ $title, onclick }: iControll) {
+function FolderContentControll({ $title, onclick, $id }: iControll) {
   const handleModalOpen = (type: any) => {
     onclick(type);
   };
   return (
     <ShareBox>
-      <SubTitle>{$title}</SubTitle>
+      <Link to={`/shared/${$id}`} target='_blank'>{$title}</Link>
       {$title === '전체' || (
         <ShareListBtn>
           {folderControlBtn.map((btn) => (

diff --git a/src/components/loading/Loading.tsx b/src/components/loading/Loading.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components"
+
+const LoadingWrap = styled.div`
+  position: fixed;
+  top:0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,.7);
+  z-index: 10;
+  img {
+    width: 150px;
+  }
+`
+
+function Loading() {
+  return <LoadingWrap>
+    <img src="/assets/icon/icon_loading.svg" alt="loading" />
+  </LoadingWrap>
+}
+export default Loading
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -14,23 +14,23 @@ import CheckBox from '../common/atoms/CheckBox';
 import { ModlaTitle } from '../../styles/commonStyle';
 import Button from '../common/atoms/Button';
 
+interface IModalInfo extends IModal {
+  onOpen: boolean;
+  onClose: () => void;
+  $folderId?:number | null
+}
+
 function bodyContent(body: string, data: IModal['$modalData'], id :number|null = null) {
   if (body === 'input') {
     return <Input />;
   } else if (body === 'sns') {
-    return <ShareModal sharedId={id}/>;
+    return <ShareModal sharedId={id} />;
   } else if (body === 'checkbox') {
     if (!data) return null;
     return <CheckBox $data={data} />;
   }
 }
 
-interface IModalInfo extends IModal {
-  onOpen: boolean;
-  onClose: () => void;
-  $folderId?:number | null
-}
-
 function Modal({
   onOpen,
   onClose,
@@ -42,6 +42,7 @@ function Modal({
   $buttonText,
   $modalData,
 }: IModalInfo) {
+
   const modalClose = () => {
     onClose();
   };
@@ -56,7 +57,9 @@ function Modal({
             <ModlaTitle>{$title}</ModlaTitle>
             {$titleDescText && <div className="desc">{$titleDescText}</div>}
           </ModalHead>
-          {$body && <ModalBody>{bodyContent($body, $modalData, $folderId)}</ModalBody>}
+          {$body && 
+            <ModalBody>{bodyContent($body, $modalData, $folderId)}</ModalBody>
+          }
           {$buttonStyle && (
             <ModalFoot>
               <Button $btnClass={$buttonStyle} onclick={() => modalClose()}>

diff --git a/src/components/share/ShareModal.tsx b/src/components/share/ShareModal.tsx
@@ -1,11 +1,10 @@
-import { FOLDER_SHARED_BASE_URL } from '../../constant/api';
 import { snsShare } from '../../constant/share';
 import Button from '../common/atoms/Button';
 import { ShareBox } from './shareStyle';
 
 const handleLinkCopy = async (id:number) => {
   try {
-    navigator.clipboard.writeText(`${FOLDER_SHARED_BASE_URL}/shared?user=${1}&folder=${id}`)
+    navigator.clipboard.writeText(`${window.location.host}/shared/${id}`)
   } catch (e) {
     console.log(e)
   }
@@ -15,6 +14,7 @@ function ShareModal({sharedId}:{sharedId:number | null}) {
   const handlerSns = (snsId:string) => {
     if(sharedId && snsId === 'sh_link') {
       handleLinkCopy(sharedId);
+      alert('주소를 복사하였습니다.');
     } else if (snsId === 'sh_kakao') {
       // 추후 작업 예정..
     } else if (snsId === 'sh_face') {

diff --git a/src/constant/api.ts b/src/constant/api.ts
@@ -1,6 +1,5 @@
 
 export const BASE_URL = 'https://bootcamp-api.codeit.kr/api/users/1';
-export const FOLDER_SHARED_BASE_URL = 'https://megummy-linkbrary.netlify.app';
 
 export const FOLDER_MENU_LIST_API = `${BASE_URL}/folders`;
 export const FOLDER_CONTANT_LIST_API = `${BASE_URL}/links`;

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -9,7 +9,7 @@ function Index() {
         <br/><br/><br/>
         <LinkButton $link="/folder" $linkClass="link--gradient large">폴더 페이지</LinkButton>
         <br/>
-        <LinkButton $link="/share" $linkClass="link--gradient large">쉐어 페이지</LinkButton>
+        <LinkButton $link="/share/14" $linkClass="link--gradient large">쉐어 (즐겨찾기)페이지</LinkButton>
       </InnerLarge>
 
     </MainWrap>