diff --git a/components/AddLinkIcon.tsx b/components/AddLinkIcon.tsx deleted file mode 100644 index c1adc724e..000000000 --- a/components/AddLinkIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { SVGProps } from 'react'; - -const LinkIcon = (props: SVGProps) => ( - - - - - - -) - -export default LinkIcon; diff --git a/components/FolderList.tsx b/components/FolderList.tsx index 4227e61c7..b38d2a0ed 100644 --- a/components/FolderList.tsx +++ b/components/FolderList.tsx @@ -1,12 +1,11 @@ import { useState } from "react"; import { LinkCardData } from "@/types/type"; -import Button from "./Button"; -import styles from "@/styles/FolderList.module.css"; -import plusIcon from "@/public/images/Icon_plus.svg"; import LinkList from "./LinkList"; -import AddModal from "@/modal/addModal/AddModal"; import FolderMenu from "./FolderMenu"; -import Image from "next/image"; +import AddModal from "@/modal/addModal/AddModal"; +import PlusIcon from "@/public/images/Icon_plus.svg"; +import Button from "./Button"; +import styles from "@/styles/FolderList.module.css"; const FIRST_SELECTED_FOLDER = "전체"; @@ -47,7 +46,7 @@ function FolderList({ keyword, linkData, folderNameList, currentId, folderName, diff --git a/components/FolderMenu.tsx b/components/FolderMenu.tsx index d33fc46fc..9cf2e0c5e 100644 --- a/components/FolderMenu.tsx +++ b/components/FolderMenu.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; -import shareIcon from "@/public/images/Icon_share.svg"; -import editIcon from "@/public/images/Icon_edit.svg"; -import deleteIcon from "@/public/images/Icon_delete.svg"; +import ShareIcon from "@/public/images/Icon_share.svg"; +import EditIcon from "@/public/images/Icon_edit.svg"; +import DeleteIcon from "@/public/images/Icon_delete.svg"; import DeleteModal from "@/modal/deleteModal/DeleteModal"; import EditModal from "@/modal/editModal/EditModal"; import ShareModal from "@/modal/shareModal/ShareModal"; @@ -29,17 +29,17 @@ function FolderMenu({ placeholder }: Props) { return (
diff --git a/components/Footer.tsx b/components/Footer.tsx index cb102ee0e..fcf3b0f48 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,7 +1,7 @@ -import facebook from '@/public/images/facebook.svg'; -import twitter from '@/public/images/twitter.svg'; -import youtube from '@/public/images/youtube.svg'; -import instagram from '@/public/images/instagram.svg'; +import Facebook from '@/public/images/facebook.svg'; +import Twitter from '@/public/images/twitter.svg'; +import Youtube from '@/public/images/youtube.svg'; +import Instagram from '@/public/images/instagram.svg'; import styles from '@/styles/Footer.module.css'; import Link from 'next/link'; import Image from 'next/image'; @@ -17,16 +17,16 @@ function Footer() {
- facebook + - twitter + - youtube + - instagram +
diff --git a/components/Header.tsx b/components/Header.tsx index 0dbc5dd49..e29ab5e85 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -6,7 +6,7 @@ interface Props { name: string, }; folderOwnerData:{ - profileImageSource: string, + image_source: string, name: string, }; } @@ -14,7 +14,13 @@ interface Props { function Header({folderData, folderOwnerData}: Props) { return (
- userProfile + userProfile
{folderOwnerData.name}
{folderData.name}
diff --git a/components/LinkAdd.tsx b/components/LinkAdd.tsx index ff8da034e..db04047b3 100644 --- a/components/LinkAdd.tsx +++ b/components/LinkAdd.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import styles from '@/styles/LinkAdd.module.css'; import AddLinkModal from '@/modal/addLinkModal/AddLinkModal'; -import LinkIcon from './AddLinkIcon'; +import LinkIcon from '@/public/images/Icon_link.svg'; function LinkAdd() { const [isAddLinkModalOpen, setIsAddLinkModalOpen] = useState(false); diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index c89c6b00a..3891aa209 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -2,20 +2,18 @@ import { MouseEvent, useState } from 'react'; import { LinkCardData } from '@/types/type'; import formatDate from '@/utils/formatDate'; import diffTime from '@/utils/diffTime'; -import star from '@/public/images/Icon_star.svg'; -import kebab from '@/public/images/Icon_kebab.svg' -import noImg from '@/public/images/noImg.svg'; -import styles from '@/styles/LinkCard.module.css'; import Popover from './Popover'; -import Image from 'next/image'; import Link from 'next/link'; +import Star from '@/public/images/Icon_star.svg'; +import Kebab from '@/public/images/Icon_kebab.svg' +import styles from '@/styles/LinkCard.module.css'; interface Props { item: LinkCardData } -function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props) { +function LinkCard({item: {url, id, image_source, created_at, description}}: Props) { const [isOpen, setIsOpen] = useState(false); const handleClick = (e: MouseEvent) => { @@ -26,19 +24,19 @@ function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props) return (
- star +
-

{diffTime(createdAt)}

+

{diffTime(created_at)}

{description}

-

{formatDate(createdAt)}

+

{formatDate(created_at)}

diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 651e2f09e..0d7bc6ff3 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,4 +1,4 @@ -import linkbraryLogo from '@/public/images/logo.svg'; +import LinkbraryLogo from '@/public/images/logo.svg'; import styles from '@/styles/Navbar.module.css'; import Image from 'next/image'; import Link from 'next/link'; @@ -7,7 +7,7 @@ interface Props { className: string; profileData: { email: string, - profileImageSource: string, + image_source: string, }; isLoginStatus: boolean; } @@ -15,10 +15,12 @@ interface Props { function NavigationBar({ className, profileData, isLoginStatus }: Props) { return (

페이스북

@@ -75,7 +72,7 @@ function ShareModal({ isOpenModal, closeModal }: ModalBaseProps) { className={styles.copyLink} type="button" onClick={() => handleCopyClipBoard(currentUrl)}> - {IconLink} + IconLink

링크 복사

diff --git a/next.config.js b/next.config.js index f341217b5..914f50aa9 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + webpack: config => { + config.module.rules.push({ + test: /\.svg$/, + use: ["@svgr/webpack"], + }); + + return config; + }, images: { dangerouslyAllowSVG: true, remotePatterns: [ @@ -13,8 +21,12 @@ const nextConfig = { hostname: 'codeit-images.codeit.com', pathname: '/badges/**', }, + { + protocol: 'https', + hostname: 'avatars.githubusercontent.com', + }, ], }, } -module.exports = nextConfig +module.exports = nextConfig; diff --git a/pages/folder.tsx b/pages/folder/[folderId].tsx similarity index 73% rename from pages/folder.tsx rename to pages/folder/[folderId].tsx index 5bb6f3a0e..dd5576537 100644 --- a/pages/folder.tsx +++ b/pages/folder/[folderId].tsx @@ -1,5 +1,6 @@ -import { getFolderLinksData, getFolderLists, getFolderUserInfo } from "@/utils/api"; -import { ChangeEvent, MouseEvent, useEffect, useState } from "react"; +import { getFolderLinksData, getFolderLists, getUserInfo } from "@/utils/api"; +import { ChangeEvent, MouseEvent, useCallback, useEffect, useState } from "react"; +import { useRouter } from "next/router"; import { LinkCardData } from "@/types/type"; import FolderList from "@/components/FolderList"; import Footer from "@/components/Footer"; @@ -9,7 +10,7 @@ import SearchBar from "@/components/SearchBar"; const FIRST_SELECTED_FOLDER = "전체"; const INITIAL_VALUE = { - profileImageSource: '', + image_source: '', email: '', } @@ -26,18 +27,25 @@ export default function FolderPage() { const [folderName, setFolderName] = useState(FIRST_SELECTED_FOLDER); const [search, setSearch] = useState(''); const [searchWord, setSearchWord] = useState(''); + const router = useRouter(); + const { folderId } = router.query; + + + useEffect(() => { + const checkAccessToken = async () => { + const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) await router.push('/signin'); + }; + + checkAccessToken(); + }, [router]) const getProfileData = async () => { - const { data } = await getFolderUserInfo(); + const { data } = await getUserInfo(); if (!data[0]) return; - const purifiedData = { - profileImageSource: data[0].image_source, - email: data[0].email, - } - - setProfileData(purifiedData); + setProfileData(data[0]); setIsLoginStatus(true); } @@ -62,15 +70,17 @@ export default function FolderPage() { const handleFolderButtonClick = (id: number, name: string) => { setCurrentId(id); setFolderName(name); + if (id === 0) return router.push('/folder'); + router.push(`/folder/${id}`) } //폴더 이름 가져오는 함수. const getFolderData = async () => { const { data } = await getFolderLists(); - if (!data) return; + if (!data.folder) return; - setFolderListData(data); + setFolderListData(data.folder); } useEffect(() => { @@ -78,30 +88,17 @@ export default function FolderPage() { }, []) //폴더 안에 저장된 링크를 가져오는 함수 - const getLinkData = async (id: string|number) => { - if (id === 0) id = ''; + const getLinkData = useCallback(async (id: string | string[] | undefined) => { const { data } = await getFolderLinksData(id); if (!data) return; - const purifiedData = data.map((item: any) => - ( - { - url: item.url, - id: item.id, - imageSource: item.image_source, - createdAt: item.created_at, - description: item.description, - } - ) - ) - - setLinkData(purifiedData); - } + setLinkData(data); + }, []) useEffect(() => { - getLinkData(currentId); - }, [currentId]) + getLinkData(folderId); + }, [folderId, getLinkData]) return ( <> diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx new file mode 100644 index 000000000..1a362a930 --- /dev/null +++ b/pages/folder/index.tsx @@ -0,0 +1,121 @@ +import { getAllLinksData, getFolderLists, getUserInfo } from "@/utils/api"; +import { ChangeEvent, MouseEvent, useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import { LinkCardData } from "@/types/type"; +import FolderList from "@/components/FolderList"; +import Footer from "@/components/Footer"; +import LinkAdd from "@/components/LinkAdd"; +import NavigationBar from "@/components/Navbar"; +import SearchBar from "@/components/SearchBar"; + +const FIRST_SELECTED_FOLDER = "전체"; +const INITIAL_VALUE = { + image_source: '', + email: '', +} + +interface SearchData extends LinkCardData { + title?: string; +} + +export default function FolderPage() { + const [profileData, setProfileData] = useState(INITIAL_VALUE); + const [isLoginStatus, setIsLoginStatus] = useState(false); + const [folderListData, setFolderListData] = useState([]); + const [linkData, setLinkData] = useState([]); + const [currentId, setCurrentId] = useState(0); + const [folderName, setFolderName] = useState(FIRST_SELECTED_FOLDER); + const [search, setSearch] = useState(''); + const [searchWord, setSearchWord] = useState(''); + const router = useRouter(); + + useEffect(() => { + const checkAccessToken = async () => { + const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) await router.push('/signin'); + }; + + checkAccessToken(); + }, [router]) + + const getProfileData = async () => { + const { data } = await getUserInfo(); + + if (!data[0]) return; + + setProfileData(data[0]); + setIsLoginStatus(true); + } + + useEffect(() => { + getProfileData(); + }, []); + + const handleChange = (e: ChangeEvent) => { + setSearch(e.target.value); + } + + const handleCloseButtonClick = (e: MouseEvent) => { + setSearch(''); + setSearchWord(''); + } + + const handleSubmit = (searchQuery: string) => { + setSearchWord(searchQuery); + }; + + //button의 id와 이름 가져오는 함수. + const handleFolderButtonClick = (id: number, name: string) => { + setCurrentId(id); + setFolderName(name); + router.push(`/folder/${currentId}`) + } + + //폴더 이름 가져오는 함수. + const getFolderData = async () => { + const { data } = await getFolderLists(); + + if (!data.folder) return; + + setFolderListData(data.folder); + } + + useEffect(() => { + getFolderData(); + }, []) + +//전체 데이터 불러오는 함수 + const getLinkDataAll = async () => { + const { data } = await getAllLinksData(); + + if (!data.folder) return; + + setLinkData(data.folder); + } + + useEffect(() => { + getLinkDataAll(); + }, []) + + return ( + <> + + + + +