diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a7..15b1ed91a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": "next" } diff --git a/components/Account/Account.module.scss b/components/Account/Account.module.scss new file mode 100644 index 000000000..b87a064d9 --- /dev/null +++ b/components/Account/Account.module.scss @@ -0,0 +1,22 @@ +.account { + display: flex; + align-items: center; + gap: 6px; +} +.userProfileImg { + width: 28px; + aspect-ratio: 1/1; + border-radius: 50%; +} + +.userEmail { + width: fit-content; + font-size: 14px; + @media (max-width: 767px) { + position: absolute; + width: 1px; + height: 1px; + clip: rect(0 0 0 0); + overflow: hidden; + } +} diff --git a/components/Account/Account.tsx b/components/Account/Account.tsx new file mode 100644 index 000000000..517315718 --- /dev/null +++ b/components/Account/Account.tsx @@ -0,0 +1,20 @@ +import styles from './Account.module.scss'; + +interface AccountProps { + profileImgSource?: string; + userEmail: string; +} + +const Account = ({ profileImgSource, userEmail }: AccountProps) => { + return ( +
+ User Profile + {userEmail} +
+ ); +}; +export default Account; diff --git a/components/FolderToolBar/FolderToolBar.module.scss b/components/FolderToolBar/FolderToolBar.module.scss new file mode 100644 index 000000000..3a761f4c3 --- /dev/null +++ b/components/FolderToolBar/FolderToolBar.module.scss @@ -0,0 +1,116 @@ +.folderToolBarContainer { + display: flex; + flex-direction: column; + gap: 24px; + width: 1060px; + + .folderToolButtons { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + + .folderNameButtons { + display: flex; + flex-wrap: wrap; + width: 80%; + gap: 8px; + } + } + + .folderNameDisplay { + font-size: 24px; + letter-spacing: -0.2px; + font-weight: 600; + } + + .folderNameBar { + display: flex; + justify-content: space-between; + align-items: center; + + .utilButtons { + display: flex; + gap: 12px; + } + } + + @media (max-width: 1124px) { + width: 706px; + } + + @media (max-width: 767px) { + width: 325px; + + .folderNameBar { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + } +} + +.folderNameButton { + background-color: #fff; + border: 1px solid #6d6afe; + padding: 8px 12px; + border-radius: 5px; + height: 36px; + + &:hover { + background-color: #e7effb; + } +} + +.focusedButton { + background-color: #6d6afe; + color: #fff; + &:hover { + background-color: #6d6afe; + } +} + +.utilButton { + position: relative; + display: flex; + gap: 4px; + color: #9fa6b2; + font-size: 14px; + font-weight: 600; +} +.utilButtonIcon { + position: relative; + width: 18px; + height: 18px; +} + +.folderAddButton { + display: flex; + font-weight: 500; + gap: 4px; + color: #6d6afe; + + .addIconWhite { + display: none; + } + + @media (max-width: 767px) { + position: fixed; + bottom: 101px; + padding: 8px 24px; + left: 50%; + transform: translateX(-50%); + border-radius: 20px; + background-color: #6d6afe; + color: #fff; + z-index: 1; + + .addIcon { + display: none; + } + + .addIconWhite { + display: block; + } + } +} diff --git a/components/FolderToolBar/FolderToolBar.tsx b/components/FolderToolBar/FolderToolBar.tsx new file mode 100644 index 000000000..1eb03295d --- /dev/null +++ b/components/FolderToolBar/FolderToolBar.tsx @@ -0,0 +1,87 @@ +import FolderToolBarButton from './FolderToolBarButton'; +import styles from './FolderToolBar.module.scss'; +import UtilButton from './UtilButton'; +import { UTIL_BUTTONS_PROPS } from './constants'; +import { FolderObj } from '@/utils/interfaces'; + +const addIcon = '/assets/images/add_icon.svg'; +const addIconWhite = '/assets/images/add_icon_white.svg'; +interface FolderToolBarProps { + folders?: FolderObj[]; + currentFolderId?: number; + folderNameOnClick: (id: number) => void; + onFolderNameChangeClick: () => void; + onFolderAddClick: () => void; + onFolderDeleteClick: () => void; + onShare: () => void; +} + +export default function FolderToolBar({ + folders, + currentFolderId, + folderNameOnClick, + onFolderAddClick, + onFolderNameChangeClick, + onFolderDeleteClick, + onShare, +}: FolderToolBarProps) { + const currentFolder = folders?.find( + (folder) => folder.id === currentFolderId + ); + const currentFolderName = currentFolder?.name; + UTIL_BUTTONS_PROPS.share.onClick = onShare; + UTIL_BUTTONS_PROPS.changeName.onClick = onFolderNameChangeClick; + UTIL_BUTTONS_PROPS.delete.onClick = onFolderDeleteClick; + + return ( +
+
+ + + +
+
+ {currentFolderName} + +
+
+ ); +} diff --git a/components/FolderToolBar/FolderToolBarButton.tsx b/components/FolderToolBar/FolderToolBarButton.tsx new file mode 100644 index 000000000..72143b78f --- /dev/null +++ b/components/FolderToolBar/FolderToolBarButton.tsx @@ -0,0 +1,29 @@ +import styles from './FolderToolBar.module.scss'; + +interface FolderToolBarButtonProps { + id: number; + children: React.ReactNode; + onClick: (id: number) => void; + isFocused: boolean; +} + +export default function FolderToolBarButton({ + id, + children, + onClick, + isFocused, +}: FolderToolBarButtonProps) { + const handleClick = () => { + onClick(id); + }; + return ( + + ); +} diff --git a/components/FolderToolBar/UtilButton.tsx b/components/FolderToolBar/UtilButton.tsx new file mode 100644 index 000000000..514fa057b --- /dev/null +++ b/components/FolderToolBar/UtilButton.tsx @@ -0,0 +1,25 @@ +import styles from './FolderToolBar.module.scss'; +import Image from 'next/image'; + +interface UtilButtonProps { + imgSrc: string; + children: React.ReactNode; + onClick: () => void; + alt: string; +} + +export default function UtilButton({ + imgSrc, + children, + onClick, + alt, +}: UtilButtonProps) { + return ( + + ); +} diff --git a/components/FolderToolBar/constants.ts b/components/FolderToolBar/constants.ts new file mode 100644 index 000000000..19ba70a6d --- /dev/null +++ b/components/FolderToolBar/constants.ts @@ -0,0 +1,37 @@ +const shareIcon = '/assets/images/share_icon.svg'; +const penIcon = '/assets/images/pen_icon.svg'; +const deleteIcon = '/assets/images/delete_icon.svg'; + +interface UtilButtonProp { + imgSrc: string; + btnText: string; + alt: string; + id: number; + onClick: () => void; +} + +const noop = () => {}; + +export const UTIL_BUTTONS_PROPS: { [key: string]: UtilButtonProp } = { + share: { + imgSrc: shareIcon, + btnText: '공유', + alt: '공유 아이콘', + id: 1, + onClick: noop, + }, + changeName: { + imgSrc: penIcon, + btnText: '이름 변경', + alt: '이름 변경 아이콘', + id: 2, + onClick: noop, + }, + delete: { + imgSrc: deleteIcon, + btnText: '삭제', + alt: '삭제 아이콘', + id: 3, + onClick: noop, + }, +}; diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 4e38619c2..bebeda533 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -2,7 +2,29 @@ import Button from '../Button/Button'; import Image from 'next/image'; import styles from './Header.module.css'; import Link from 'next/link'; + +import Account from '@/components/Account/Account'; +import { useUserInfo } from '@/contexts/UserInfoContext'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useEffect } from 'react'; export default function Header() { + const { userInfo, setUserInfo } = useUserInfo(); + const loadUser = async () => { + const accessToken = localStorage.getItem('accessToken'); + if (accessToken) { + const response = await axiosInstance.get('/users', { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + setUserInfo(response.data.data[0]); + } + }; + + useEffect(() => { + loadUser(); + }, []); + return ( <>
@@ -10,9 +32,18 @@ export default function Header() { Logo - - - + + {userInfo ? ( + + ) : ( + + + + )} +
diff --git a/components/LinkCard/LinkCard.module.scss b/components/LinkCard/LinkCard.module.scss new file mode 100644 index 000000000..32d77155f --- /dev/null +++ b/components/LinkCard/LinkCard.module.scss @@ -0,0 +1,114 @@ +.linkCard { + width: 340px; + height: 334px; + border-radius: 15px; + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08); + display: flex; + flex-direction: column; +} + +.thumbnailContainer { + position: relative; + width: 340px; + height: 200px; + display: flex; + justify-content: center; + overflow: hidden; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + flex-shrink: 0; +} + +.thumbnail { + width: 100%; + height: auto; + object-fit: cover; + flex-shrink: 0; + transition: transform 0.3s ease; +} + +.starButton { + z-index: 1; + position: absolute; + top: 15px; + right: 15px; + width: 34px; + height: 34px; +} + +.starButton:hover { + scale: 1.1; +} + +.linkCardInfo { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 15px 20px; + gap: 10px; +} + +.linkCardTimestampBar { + display: flex; + justify-content: space-between; + font-size: 13px; + position: relative; +} + +.kebabButton { + position: relative; + width: 21px; + height: 17px; + &:hover { + background-color: #e7effb; + } +} + +.dropdownList { + position: absolute; + box-shadow: 0px 2px 8px 0px rgba(51, 50, 54, 0.1); +} + +.dropdownItem { + display: flex; + flex-shrink: 0; + width: 100px; + justify-content: center; + align-items: center; + font-size: 14px; + padding: 7px 12px; + background-color: #fff; +} + +.dropdownItem:hover { + background-color: #e7effb; + color: #6d6afe; +} + +.linkCardDescription { + display: -webkit-box; + overflow: hidden; + color: #000; + margin-top: -0.3125em; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 1em; + line-height: 1.5em; + height: 49px; +} + +.linkCard:hover .linkCardTitle, +.linkCard:hover .linkCardDescription { + text-decoration: underline; +} + +.linkCardCreated { + font-size: 14px; + height: 19px; + color: #333; +} + +.linkCard:hover .thumbnail { + transform: scale(1.3); +} diff --git a/components/LinkCard/LinkCard.tsx b/components/LinkCard/LinkCard.tsx new file mode 100644 index 000000000..82bea0cd9 --- /dev/null +++ b/components/LinkCard/LinkCard.tsx @@ -0,0 +1,149 @@ +import { useState, useEffect, useRef } from 'react'; +import Image from 'next/image'; +import styles from './LinkCard.module.scss'; +import getTimeDifference from '@/utils/time-functions/getTimeDifference'; +import formatDate from '@/utils/time-functions/formatDate'; +import { LinkObj } from '@/utils/interfaces'; + +const noImagePlaceholder = '/assets/images/no-image.png'; +import starIcon from '@/public/assets/images/star.svg'; +import purpleStarIcon from '@/public/assets/images/purplestar.svg'; +import kebab from '@/public/assets/images/kebab.svg'; + +interface LinkCardProp { + linkCardInfo: LinkObj; + onAddToFolder: (url: string) => void; + onLinkDelete: (url: string) => void; +} + +export default function LinkCard({ + linkCardInfo, + onAddToFolder, + onLinkDelete, +}: LinkCardProp) { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isFavorite, setIsFavorite] = useState(false); + const dropdownRef = useRef(null); + + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setIsDropdownOpen(false); + } + }; + + const handleLinkDelete = (e: React.MouseEvent) => { + e.preventDefault(); + onLinkDelete(linkCardInfo.url); + }; + + const handleAddToFolder = (e: React.MouseEvent) => { + e.preventDefault(); + onAddToFolder(linkCardInfo.url); + }; + + const DROPDOWN_LIST_ITEMS = [ + { text: '삭제하기', onClick: handleLinkDelete }, + { text: '폴더에추가', onClick: handleAddToFolder }, + ]; + + useEffect(() => { + document.addEventListener('click', handleClickOutside); + return () => { + document.removeEventListener('click', handleClickOutside); + }; + }, []); + + const thumbnailURL = linkCardInfo.image_source + ? linkCardInfo.image_source + : noImagePlaceholder; + const description = linkCardInfo.description; + const url = linkCardInfo.url; + const createdDate = new Date(linkCardInfo.created_at); + const timestamp = getTimeDifference(createdDate); + const altMessage = linkCardInfo.title; + + const handleKebabClick = (event: React.MouseEvent) => { + setIsDropdownOpen(!isDropdownOpen); + event.preventDefault(); + }; + + const handleStarClick = (event: React.MouseEvent) => { + event.preventDefault(); + setIsFavorite(!isFavorite); + }; + + useEffect(() => { + console.log(linkCardInfo); + }, [linkCardInfo]); + + return ( + +
+ + {altMessage} +
+
+
+ {timestamp} +
+ + {isDropdownOpen && ( +
    + {DROPDOWN_LIST_ITEMS.map((item, index) => ( +
  • + +
    • + ))} +
+ )} +
+
+

{description}

+ + {formatDate(createdDate)} + +
+ + ); +} diff --git a/components/LinkCardList/LinkCardList.module.scss b/components/LinkCardList/LinkCardList.module.scss new file mode 100644 index 000000000..f6e9e80c0 --- /dev/null +++ b/components/LinkCardList/LinkCardList.module.scss @@ -0,0 +1,53 @@ +.linkCardList { + display: grid; + gap: 20px; + grid-template-columns: auto auto auto; + justify-content: center; +} + +@media (max-width: 1124px) { + .linkCardList { + grid-template-columns: auto auto; + } +} + +@media (max-width: 767px) { + .linkCardList { + grid-template-columns: auto; + } +} + +.linkCardListContainer { + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; + width: 100%; + padding: 40px 200px 100px; + flex-grow: 1; +} + +@media (max-width: 1124px) { + .linkCardListContainer { + padding: 40px 32px 100px; + } +} + +@media (max-width: 767px) { + .linkCardListContainer { + padding: 20px 32px 60px; + } +} + +.contentWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +} + +.noSavedLink { + width: 100%; + text-align: center; + padding: 40px; +} diff --git a/components/LinkCardList/LinkCardList.tsx b/components/LinkCardList/LinkCardList.tsx new file mode 100644 index 000000000..e5adf6aea --- /dev/null +++ b/components/LinkCardList/LinkCardList.tsx @@ -0,0 +1,88 @@ +import FolderToolBar from '@/components/FolderToolBar/FolderToolBar'; +import LinkCard from '@/components/LinkCard/LinkCard'; +import SearchBar from '@/components/SearchBar/SearchBar'; +import styles from './LinkCardList.module.scss'; +import { FolderObj, LinkObj } from '@/utils/interfaces'; +import { useState } from 'react'; + +interface LinkCardListProp { + items: LinkObj[] | undefined; + folders?: FolderObj[]; + folderNameOnClick: (id: number) => void; + currentFolderId: number; + onFolderAddClick: () => void; + onFolderNameChangeClick: () => void; + onFolderDeleteClick: () => void; + onLinkDelete: (link: string) => void; + onAddtoFolder: (link: string) => void; + onShare: () => void; +} + +const LinkCardList = ({ + items, + folders, + folderNameOnClick, + currentFolderId, + onFolderAddClick, + onFolderNameChangeClick, + onFolderDeleteClick, + onLinkDelete, + onAddtoFolder, + onShare, +}: LinkCardListProp) => { + const [searchText, setSearchText] = useState(''); + + const handleSearchInput = (text: string) => { + setSearchText(text); + }; + + function filterLinksByKeyword(keyword: string) { + if (!items) return; + if (searchText === '') return items; + return items.filter( + (item) => + item.url?.includes(keyword) || + item.description?.includes(keyword) || + item.title?.includes(keyword) + ); + } + + const curItems = filterLinksByKeyword(searchText); + + return ( +
+
+ + {folders && ( + + )} + + {curItems && curItems.length > 0 ? ( +
    + {curItems.map((item) => ( +
  • + +
    • + ))} +
+ ) : ( +

저장된 링크가 없습니다

+ )} +
+
+ ); +}; + +export default LinkCardList; diff --git a/components/Modal/Modal.module.css b/components/Modal/Modal.module.css new file mode 100644 index 000000000..7b6a3019e --- /dev/null +++ b/components/Modal/Modal.module.css @@ -0,0 +1,29 @@ +.modalContainer { + z-index: 3; + background-color: #fff; + border-radius: 15px; + border: 1px solid #ccd5e3; + position: fixed; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.modalWrapper { + display: flex; + padding: 32px 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + position: relative; +} + +.closeButton { + position: absolute; + width: 24px; + height: 24px; + top: 16px; + right: 16px; + background-image: url(/assets/images/close.png); +} diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx new file mode 100644 index 000000000..af6c4a39f --- /dev/null +++ b/components/Modal/Modal.tsx @@ -0,0 +1,17 @@ +import styles from './Modal.module.css'; + +interface ModalProps { + children: React.ReactNode; + onClose: () => void; +} + +export default function Modal({ children, onClose }: ModalProps) { + return ( +
+
+ + {children} +
+
+ ); +} diff --git a/components/ModalContents/AddToFolderModal.tsx b/components/ModalContents/AddToFolderModal.tsx new file mode 100644 index 000000000..3f3434fdd --- /dev/null +++ b/components/ModalContents/AddToFolderModal.tsx @@ -0,0 +1,35 @@ +import { ModalContentProps } from '@/utils/interfaces'; +import styles from './ModalContents.module.scss'; +import Button from '@/components/Button/Button'; + +export default function AddToFolderModal({ + folders, + headerText, + subHeaderText, + buttonText, +}: ModalContentProps) { + if (!folders) return; + const curFolders = folders.slice(1); //전체 폴더를 제외시키기 위해서 + return ( +
+
+ {headerText} + {subHeaderText} +
+
    + {curFolders.map((folder) => ( +
  • + +
    • + ))} +
+ + +
+ ); +} diff --git a/components/ModalContents/DeleteModal.tsx b/components/ModalContents/DeleteModal.tsx new file mode 100644 index 000000000..58e8812db --- /dev/null +++ b/components/ModalContents/DeleteModal.tsx @@ -0,0 +1,17 @@ +import { ModalContentProps } from '@/utils/interfaces'; +import styles from './ModalContents.module.scss'; + +export default function DeleteModal({ + headerText, + subHeaderText, +}: ModalContentProps) { + return ( +
+
+ {headerText} + {subHeaderText} +
+ +
+ ); +} diff --git a/components/ModalContents/FolderInputModal.tsx b/components/ModalContents/FolderInputModal.tsx new file mode 100644 index 000000000..451c4117c --- /dev/null +++ b/components/ModalContents/FolderInputModal.tsx @@ -0,0 +1,31 @@ +import styles from './ModalContents.module.scss'; +import Button from '@/components/Button/Button'; +import { useState } from 'react'; +import { ModalContentProps } from '@/utils/interfaces'; + +export default function FolderInputModal({ + initialValue = '', + headerText, + buttonText, +}: ModalContentProps) { + const [inputValue, setInputValue] = useState(initialValue); + const handleInputChange = (e: React.ChangeEvent) => { + setInputValue(e.target.value); + }; + + return ( +
+ {headerText} +
+ + +
+
+ ); +} diff --git a/components/ModalContents/ModalContents.module.scss b/components/ModalContents/ModalContents.module.scss new file mode 100644 index 000000000..e924721f0 --- /dev/null +++ b/components/ModalContents/ModalContents.module.scss @@ -0,0 +1,160 @@ +.modalContentWrapper { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; +} + +.modalForm { + display: flex; + flex-direction: column; + gap: 15px; + width: 280px; +} + +.modalInput { + width: 100%; + padding: 18px 15px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid #ccd5e3; + &:focus { + border: 1px solid#6d6afe; + } +} + +.modalHeader { + color: #373740; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.modalHeaderWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.modalSubHeader { + color: #9fa6b2; + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 22px; + width: 280px; + word-wrap: break-word; +} + +.modalButton { + width: 100%; + font-size: 16px; + padding: 16px 20px; +} + +.deleteButton { + display: flex; + width: 280px; + padding: 16px 20px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 8px; + background: #ff5b56; + color: #f5f5f5; + font-family: 'Pretendard', sans-serif; + font-size: 16px; + font-weight: 600; +} + +.shareButtonBar { + display: flex; + gap: 32px; +} + +.shareButtonWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.shareButton { + position: relative; + width: 42px; + height: 42px; + border-radius: 50%; + &:hover { + box-shadow: 0 0 10px #6ae3fe; + } +} + +.folderList { + width: 280px; + max-height: 172px; + overflow-y: scroll; + display: flex; + flex-direction: column; + gap: 4px; +} + +.folderNameContainer { + width: 100%; + padding: 8px; + display: flex; + gap: 8px; + &:hover { + background-color: #f0f6ff; + cursor: pointer; + color: #6d6afe; + } + &:focus { + background: #f0f6ff url('/assets/images/check.svg') no-repeat top 8px right + 8px; + color: #6d6afe; + } +} + +.folderName { + font-family: Pretendard; + font-weight: 400; +} + +.linkCount { + color: #9fa6b2; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; +} + +.toast { + background: #6d6afe; + color: #fff; + border-radius: 8px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + padding: 12px 20px; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: 500; + line-height: 18px; + position: fixed; + bottom: 120px; + opacity: 0; + transition: opacity 0.5s ease-in-out; + z-index: 1010; + + @media (max-width: 767px) { + bottom: 90px; + } +} + +.toast.show { + opacity: 1; +} diff --git a/components/ModalContents/ShareModal.tsx b/components/ModalContents/ShareModal.tsx new file mode 100644 index 000000000..465bcac75 --- /dev/null +++ b/components/ModalContents/ShareModal.tsx @@ -0,0 +1,77 @@ +import facebook from '@/public/assets/images/facebook.svg'; +import share from '@/public/assets/images/link.svg'; +import kakao from '@/public/assets/images/kakao.svg'; +import styles from './ModalContents.module.scss'; +import { facebookShare } from '@/utils/shareFunctions/facebooShare'; +import { kakaoShare } from '@/utils/shareFunctions/kakaoshare'; +import { useState } from 'react'; +import { ModalContentProps } from '@/utils/interfaces'; +import Image from 'next/image'; + +interface ShareButtonProps { + text: string; + icon: string; + onClick: () => void; + id: number; +} + +function noop() {} + +const SHARE_BUTTONS_INFO: { [key: string]: ShareButtonProps } = { + kakao: { text: '카카오톡', icon: kakao, onClick: noop, id: 0 }, + facebook: { + text: '페이스북', + icon: facebook, + onClick: noop, + id: 1, + }, + copyLink: { text: '링크 복사', icon: share, onClick: noop, id: 2 }, +}; + +export default function ShareModal({ + headerText, + subHeaderText, + folderNum, +}: ModalContentProps) { + const [showToast, setShowToast] = useState(false); + + const SHARE_URL = `http://localhost:3000/shared/${folderNum}`; + + const handleCopyLinkClipBoard = async () => { + try { + await navigator.clipboard.writeText(SHARE_URL); + setShowToast(true); + setTimeout(() => setShowToast(false), 3000); + } catch (err) { + console.log(err); + } + }; + + SHARE_BUTTONS_INFO.kakao.onClick = () => kakaoShare(SHARE_URL); + SHARE_BUTTONS_INFO.facebook.onClick = () => facebookShare(SHARE_URL); + SHARE_BUTTONS_INFO.copyLink.onClick = handleCopyLinkClipBoard; + + return ( +
+
+ {headerText} + {subHeaderText} +
+
    + {Object.entries(SHARE_BUTTONS_INFO).map(([key, item]) => ( +
  • +
    + + {item.text} +
    +
    • + ))} +
+
+ URL이 복사되었습니다 +
+
+ ); +} diff --git a/components/ModalContents/index.ts b/components/ModalContents/index.ts new file mode 100644 index 000000000..2bbd5bd5f --- /dev/null +++ b/components/ModalContents/index.ts @@ -0,0 +1,6 @@ +// index.ts + +export { default as DeleteModal } from './DeleteModal'; +export { default as FolderInputModal } from './FolderInputModal'; +export { default as ShareModal } from './ShareModal'; +export { default as AddToFolderModal } from './AddToFolderModal'; diff --git a/components/SearchBar/SearchBar.module.scss b/components/SearchBar/SearchBar.module.scss new file mode 100644 index 000000000..52f4c6d57 --- /dev/null +++ b/components/SearchBar/SearchBar.module.scss @@ -0,0 +1,37 @@ +.searchInput { + background-color: #f5f5f5; + border: none; + color: #666; + line-height: 1.5em; + flex-grow: 1; +} + +.searchBar { + background-color: #f5f5f5; + width: 1060px; + display: flex; + gap: 10px; + padding: 16px; + align-items: center; + border-radius: 10px; + + @media (max-width: 1124px) { + width: 706px; + } + + @media (max-width: 767px) { + width: 325px; + } +} + +.searchButton { + position: relative; + background-color: transparent; + padding: 0; + width: 16px; + height: 16px; + + &:hover { + cursor: pointer; + } +} diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx new file mode 100644 index 000000000..1d0b87ca9 --- /dev/null +++ b/components/SearchBar/SearchBar.tsx @@ -0,0 +1,53 @@ +import styles from './SearchBar.module.scss'; // Import the CSS module +import searchIcon from '@/public/assets/images/search_icon.svg'; +import { ChangeEvent } from 'react'; +import deleteTextIcon from '@/public/assets/images/delete_text.png'; +import Image from 'next/image'; + +export const SEARCH_INPUT_ID = 'search-link'; +const SEARCH_INPUT_PLACEHOLDER = '링크를 검색하세요'; +const SEARCH_INPUT_ICON_ALT = 'Search Icon'; + +interface SearchBarProps { + onChange: (keyword: string) => void; + searchText: string; +} + +const SearchBar = ({ onChange, searchText }: SearchBarProps) => { + const handleChange = (e: ChangeEvent) => { + e.preventDefault(); + onChange(e.target.value); + }; + + const handleSearchDelete = () => { + onChange(''); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + }; + + return ( +
+ + + {searchText !== '' && ( + + )} +
+ ); +}; + +export default SearchBar; diff --git a/components/ShowTextToggle/ShowTextToggle.module.scss b/components/ShowTextToggle/ShowTextToggle.module.scss new file mode 100644 index 000000000..2fb0e875c --- /dev/null +++ b/components/ShowTextToggle/ShowTextToggle.module.scss @@ -0,0 +1,10 @@ +.toggleButton { + position: relative; + width: 16px; + height: 16px; + + &:hover { + filter: brightness(0); + } + } + \ No newline at end of file diff --git a/components/ShowTextToggle/ShowTextToggle.tsx b/components/ShowTextToggle/ShowTextToggle.tsx new file mode 100644 index 000000000..2ebe7d982 --- /dev/null +++ b/components/ShowTextToggle/ShowTextToggle.tsx @@ -0,0 +1,21 @@ +import Image from 'next/image'; +import styles from './ShowTextToggle.module.scss'; +interface ShowTextToggleProps { + showText: boolean; + onClick: () => void; +} + +export default function ShowTextToggle({ + showText, + onClick, +}: ShowTextToggleProps) { + return ( + + ); +} diff --git a/components/SignInForm/SignInForm.tsx b/components/SignInForm/SignInForm.tsx index ddbe5e4e7..85660e97c 100644 --- a/components/SignInForm/SignInForm.tsx +++ b/components/SignInForm/SignInForm.tsx @@ -4,6 +4,12 @@ import { z } from 'zod'; import { useForm, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import { useState } from 'react'; +import ShowTextToggle from '../ShowTextToggle/ShowTextToggle'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; + + const schema = z.object({ email: z .string() @@ -23,13 +29,34 @@ export default function SignInForm() { register, handleSubmit, formState: { errors, isSubmitting }, + trigger, + setError, } = useForm({ resolver: zodResolver(schema), }); + + const [showPassword, setShowPassword] = useState(false); + const router = useRouter(); + + const handleToggleClick = () => { + setShowPassword(!showPassword); + }; + const onSubmit: SubmitHandler = async (data) => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - console.log(data); + try { + const response = await axiosInstance.post('/sign-in', data); + if (response.status >= 200 && response.status < 300) { + const accessToken = response.data.data.accessToken; + localStorage.setItem('accessToken', accessToken); + router.push('/folder'); + } else { + } + } catch (error) { + setError('email', { message: '이메일을 확인해주세요' }); + setError('password', { message: '비밀번호를 확인해주세요' }); + } + }; return ( @@ -46,6 +73,7 @@ export default function SignInForm() { type='text' placeholder='Email' className={styles.authInput} + onBlur={() => trigger('email')} /> {errors.email && ( @@ -61,10 +89,13 @@ export default function SignInForm() { > trigger('password')} /> + + {errors.password && (
{errors.password.message}
diff --git a/components/SignUpForm/SignUpForm.tsx b/components/SignUpForm/SignUpForm.tsx index 2cbe041d1..b61bba53c 100644 --- a/components/SignUpForm/SignUpForm.tsx +++ b/components/SignUpForm/SignUpForm.tsx @@ -3,6 +3,10 @@ import styles from '@/styles/AuthForm.module.scss'; import { z } from 'zod'; import { useForm, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import { useState } from 'react'; +import ShowTextToggle from '../ShowTextToggle/ShowTextToggle'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; const schema = z .object({ @@ -14,9 +18,16 @@ const schema = z password: z .string() .min(1, { message: '비밀번호를 입력해주세요' }) - .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }), - confirmPassword: z.string().min(1, { message: '비밀번호를 확인해주세요' }), + .min(8, { + message: '비밀번호는 최소 8자 이상 영문, 숫자 조합이어야 합니다.', + }) + .regex(/^(?=.*[A-Za-z])(?=.*\d).{8,}$/, { + message: '비밀번호는 영문과 조합이어야 합니다', + }), + + confirmPassword: z.string().min(1, { message: '비밀번호를 입력해주세요' }), + }) .refine((data) => data.confirmPassword === data.password, { message: '비밀번호가 일치하지 않습니다.', @@ -30,13 +41,48 @@ export default function SignUpForm() { register, handleSubmit, formState: { errors, isSubmitting }, + trigger, + setError, } = useForm({ resolver: zodResolver(schema), }); + const router = useRouter(); + const [showPassword, setShowPassword] = useState(false); + const [showCPW, setShowCPW] = useState(false); + const onSubmit: SubmitHandler = async (data) => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - console.log(data); + const { email, password } = data; + try { + const response = await axiosInstance.post('/check-email', { + email: email, + }); + } catch (error) { + setError('email', { message: '이미 사용중인 이메일입니다' }); + return; + } + + try { + const response = await axiosInstance.post('/sign-up', { + email, + password, + }); + if (response.status >= 200 && response.status < 300) { + const accessToken = response.data.data.accessToken; + localStorage.setItem('accessToken', accessToken); + router.push('/folder'); + } + } catch (error) { + setError('email', { message: '사용할 수 없는 이메일 입니다' }); + } + }; + const handlePWToggleClick = () => { + setShowPassword(!showPassword); + }; + + const handleCPWToggleClick = () => { + setShowCPW(!showCPW); + }; return ( @@ -53,6 +99,7 @@ export default function SignUpForm() { type='text' placeholder='Email' className={styles.authInput} + onBlur={() => trigger('email')} /> {errors.email && ( @@ -68,9 +115,16 @@ export default function SignUpForm() { > trigger('password')} + /> + + {errors.password && ( @@ -86,10 +140,12 @@ export default function SignUpForm() { > trigger('confirmPassword')} /> + {errors.confirmPassword && (
diff --git a/contexts/UserInfoContext.tsx b/contexts/UserInfoContext.tsx new file mode 100644 index 000000000..44c4f8af2 --- /dev/null +++ b/contexts/UserInfoContext.tsx @@ -0,0 +1,19 @@ +import React, { createContext, useState, useContext } from 'react'; + +interface Props { + children: React.ReactNode; +} + +const UserInfoContext = createContext(undefined); + +export const UserInfoProvider = ({ children }: Props) => { + const [userInfo, setUserInfo] = useState(null); + + return ( + + {children} + + ); +}; + +export const useUserInfo = () => useContext(UserInfoContext); diff --git a/next.config.js b/next.config.js index a843cbee0..7d57d06ad 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, -} + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: '**', + }, + ], + }, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package-lock.json b/package-lock.json index 7291ba208..9d6193a23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@hookform/resolvers": "^3.3.4", + "axios": "^1.6.8", "next": "13.5.6", "react": "^18", "react-dom": "^18", @@ -730,6 +731,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -751,6 +757,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -928,6 +944,17 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1014,6 +1041,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -1718,6 +1753,25 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -1727,6 +1781,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2606,6 +2673,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3002,6 +3088,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 8ce47dbb0..9d1d65076 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.3.4", + "axios": "^1.6.8", "next": "13.5.6", "react": "^18", "react-dom": "^18", diff --git a/pages/_app.tsx b/pages/_app.tsx index 414555e40..a75faeba6 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import '@/styles/reset.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; +import { UserInfoProvider } from '@/contexts/UserInfoContext'; import Header from '@/components/Header/Header'; import Footer from '@/components/Footer/Footer'; @@ -8,16 +9,18 @@ export default function App({ Component, pageProps }: AppProps) { const isAuthPage = Component.name === 'SignIn' || Component.name === 'SignUp'; return ( - <> - {isAuthPage ? ( - - ) : ( - <> -
+ + <> + {isAuthPage ? ( -
- - )} - + ) : ( + <> +
+ +
+ + )} + + ); } diff --git a/pages/_document.tsx b/pages/_document.tsx index 54e8bf3e2..55ad65786 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,18 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( - + +
- ) + ); } diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx new file mode 100644 index 000000000..12309f765 --- /dev/null +++ b/pages/folder/index.tsx @@ -0,0 +1,184 @@ +import LinkCardList from '@/components/LinkCardList/LinkCardList'; +import { useUserInfo } from '@/contexts/UserInfoContext'; +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import { FolderObj, LinkObj } from '@/utils/interfaces'; +import Modal from '@/components/Modal/Modal'; +import styles from '@/styles/FolderPage.module.scss'; +import { + DeleteModal, + FolderInputModal, + ShareModal, + AddToFolderModal, +} from '@/components/ModalContents'; + +const allFolder = { + id: -1, + name: '전체', + user_id: -1, +}; + +export default function Folder() { + const [currentFolderId, setCurrentFolderId] = useState(-1); + const { userInfo, setUserInfo } = useUserInfo(); + const [folders, setFolders] = useState([]); + const [links, setLinks] = useState(); + const [showModal, setShowModal] = useState(false); + const [modalContent, setModalContent] = useState( + null + ); + const router = useRouter(); + + const loadUser = async () => { + const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) { + router.push('/signin'); + } + const response = await axiosInstance.get('/users', { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + setUserInfo(response.data.data[0]); + setCurrentFolderId(-1); + }; + + const getUserFolders = async () => { + if (userInfo) { + const response = await axiosInstance.get(`/users/${userInfo.id}/folders`); + allFolder.user_id = userInfo.id; + setFolders([allFolder, ...response.data.data]); + } + }; + + const getUserLinks = async (folderId?: number) => { + if (userInfo) { + const folderEndPoint = + folderId && folderId !== -1 ? `?folderId=${folderId}` : ''; + const response = await axiosInstance.get( + `/users/${userInfo.id}/links${folderEndPoint}` + ); + setLinks(response.data.data); + } + }; + + const handleFolderAddClick = () => { + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderNameChangeClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderDeleteClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleLinkDeleteClick = (link: string) => { + setShowModal(true); + + setModalContent( + + ); + }; + + const handleAddToFolder = (link: string) => { + setShowModal(true); + setModalContent( + + ); + }; + + const handleShareClick = () => { + const currentFolder = folders.find( + (folder) => folder.id === currentFolderId + ); + if (!currentFolder) return; + setShowModal(true); + setModalContent( + + ); + }; + + const handleFolderNameButtonClick = async (id: number) => { + setCurrentFolderId(id); + let result; + try { + result = await getUserLinks(id); + } catch (error) { + return; + } + }; + + useEffect(() => { + loadUser(); + }, []); + + useEffect(() => { + getUserFolders(); + getUserLinks(); + console.log(folders); + console.log(links); + }, [userInfo]); + + return ( + <> + {' '} + {showModal && ( + <> + setShowModal(false)}>{modalContent} +
setShowModal(false)} + >
+ + )} + + + ); +} diff --git a/pages/index.tsx b/pages/index.tsx index e71579f85..4592e5eab 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,14 +4,16 @@ import styles from '@/styles/Home.module.css'; import Button from '@/components/Button/Button'; import Image from 'next/image'; import { useRouter } from 'next/router'; +import { useUserInfo } from '@/contexts/UserInfoContext'; const inter = Inter({ subsets: ['latin'] }); export default function Home() { const router = useRouter(); // Access the router object - + const { userInfo } = useUserInfo(); const handleAddLinkClick = () => { - router.push('/signup'); // Navigate to /signup route when button is clicked + userInfo ? router.push('/folder') : router.push('/signup'); // Navigate to /signup route when button is clicked + }; return ( @@ -38,6 +40,7 @@ export default function Home() { fill alt='Page Example Image' /> +
diff --git a/pages/shared/[folderId].tsx b/pages/shared/[folderId].tsx new file mode 100644 index 000000000..a908c3778 --- /dev/null +++ b/pages/shared/[folderId].tsx @@ -0,0 +1,55 @@ +import { axiosInstance } from '@/utils/axiosInstance'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; + +interface FolderInfoObj { + created_at: string; + favorite: boolean; + id: number; + name: string; + user_id: number; +} + +interface UserInfoObj { + id: number; + created_at: string; + name: string; + image_source: string; + email: string; +} + +export default function SharedPage() { + const router = useRouter(); + const { folderId } = router.query; + const [folderInfo, setFolderInfo] = useState(null); + const [userInfo, setUserInfo] = useState(null); + console.log('Folder ID:', folderId); + + const loadSharedPage = async (folderId: any) => { + if (!folderId) return; + const response = await axiosInstance.get(`/folders/${folderId}`); + setFolderInfo(response.data.data[0]); + }; + + const getFolderOwnwer = async (folderInfo: FolderInfoObj | null) => { + if (!folderInfo) return; + const res = axiosInstance.get(`users/${folderInfo.user_id}`); + setUserInfo((await res).data.data[0]); + }; + + useEffect(() => { + loadSharedPage(folderId); + }, [folderId]); + + useEffect(() => { + getFolderOwnwer(folderInfo); + }, [folderInfo]); + + return ( +
+

Shared Page

+

Folder ID: {folderId}

+ {folderInfo &&

{folderInfo.user_id}

} +
+ ); +} diff --git a/public/assets/images/add_icon.svg b/public/assets/images/add_icon.svg new file mode 100644 index 000000000..f9d14e2bf --- /dev/null +++ b/public/assets/images/add_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/add_icon_white.svg b/public/assets/images/add_icon_white.svg new file mode 100644 index 000000000..4d8fab6ea --- /dev/null +++ b/public/assets/images/add_icon_white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/check.svg b/public/assets/images/check.svg new file mode 100644 index 000000000..2ab2949b7 --- /dev/null +++ b/public/assets/images/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/close.png b/public/assets/images/close.png new file mode 100644 index 000000000..f7bb6ca96 Binary files /dev/null and b/public/assets/images/close.png differ diff --git a/public/assets/images/delete_icon.svg b/public/assets/images/delete_icon.svg new file mode 100644 index 000000000..432374ff7 --- /dev/null +++ b/public/assets/images/delete_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/images/delete_text.png b/public/assets/images/delete_text.png new file mode 100644 index 000000000..20dace74d Binary files /dev/null and b/public/assets/images/delete_text.png differ diff --git a/public/assets/images/facebook.svg b/public/assets/images/facebook.svg new file mode 100644 index 000000000..2db2ab854 --- /dev/null +++ b/public/assets/images/facebook.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/assets/images/kebab.svg b/public/assets/images/kebab.svg new file mode 100644 index 000000000..0a86ab920 --- /dev/null +++ b/public/assets/images/kebab.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/link.svg b/public/assets/images/link.svg new file mode 100644 index 000000000..913adbec5 --- /dev/null +++ b/public/assets/images/link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/no-image.png b/public/assets/images/no-image.png new file mode 100644 index 000000000..cef494309 Binary files /dev/null and b/public/assets/images/no-image.png differ diff --git a/public/assets/images/pen_icon.svg b/public/assets/images/pen_icon.svg new file mode 100644 index 000000000..7ab295b6b --- /dev/null +++ b/public/assets/images/pen_icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/purplestar.svg b/public/assets/images/purplestar.svg new file mode 100644 index 000000000..6bf0e137c --- /dev/null +++ b/public/assets/images/purplestar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/search_icon.svg b/public/assets/images/search_icon.svg new file mode 100644 index 000000000..56d5872b2 --- /dev/null +++ b/public/assets/images/search_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/share_icon.svg b/public/assets/images/share_icon.svg new file mode 100644 index 000000000..9573f5f39 --- /dev/null +++ b/public/assets/images/share_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/assets/images/star.svg b/public/assets/images/star.svg new file mode 100644 index 000000000..4d700bdde --- /dev/null +++ b/public/assets/images/star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/styles/AuthForm.module.scss b/styles/AuthForm.module.scss index d859f2da9..efb632923 100644 --- a/styles/AuthForm.module.scss +++ b/styles/AuthForm.module.scss @@ -32,17 +32,7 @@ .authInput { width: 100%; - border: none; /* Remove border from authInput to avoid double border */ -} - -.toggleButton { - position: relative; - width: 16px; - height: 16px; - - &:hover { - filter: brightness(0); - } + border: none; } .errorMessage { diff --git a/styles/FolderPage.module.scss b/styles/FolderPage.module.scss new file mode 100644 index 000000000..eb83f3eb1 --- /dev/null +++ b/styles/FolderPage.module.scss @@ -0,0 +1,9 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 2; +} diff --git a/utils/axiosInstance.ts b/utils/axiosInstance.ts new file mode 100644 index 000000000..d4fbbc7dc --- /dev/null +++ b/utils/axiosInstance.ts @@ -0,0 +1,5 @@ +import axios from 'axios'; + +export const axiosInstance = axios.create({ + baseURL: 'https://bootcamp-api.codeit.kr/api', +}); diff --git a/utils/interfaces.ts b/utils/interfaces.ts new file mode 100644 index 000000000..044fd461c --- /dev/null +++ b/utils/interfaces.ts @@ -0,0 +1,26 @@ +export interface FolderObj { + id: number; + name: string; + user_id: number; + link?: { count: number }; +} + +export interface LinkObj { + created_at: string; + description: string; + folder_id: number; + id: number; + image_source: string; + title: string; + updated_at: string; + url: string; +} + +export interface ModalContentProps { + folders?: FolderObj[]; + headerText?: string; + subHeaderText?: string; + folderNum?: number; + buttonText?: string; + initialValue?: string; +} diff --git a/utils/shareFunctions/facebooShare.ts b/utils/shareFunctions/facebooShare.ts new file mode 100644 index 000000000..067d8ef9a --- /dev/null +++ b/utils/shareFunctions/facebooShare.ts @@ -0,0 +1,3 @@ +export function facebookShare(route: string): void { + window.open(`http://www.facebook.com/sharer.php?u=${route}`); +} diff --git a/utils/shareFunctions/kakaoshare.ts b/utils/shareFunctions/kakaoshare.ts new file mode 100644 index 000000000..d563c91af --- /dev/null +++ b/utils/shareFunctions/kakaoshare.ts @@ -0,0 +1,39 @@ +declare global { + interface Window { + Kakao: any; + } +} + +export function kakaoShare(route: string): void { + if (window.Kakao) { + const kakao = window.Kakao; + if (!kakao.isInitialized()) { + kakao.init('596ed3a4fcb13779c60a5e27d3ab4266'); // 카카오에서 제공받은 javascript key를 넣어줌 -> .env파일에서 호출시킴 + } + + kakao.Share.sendDefault({ + objectType: 'feed', // 카카오 링크 공유 여러 type들 중 feed라는 타입 -> 자세한 건 카카오에서 확인 + content: { + title: 'Linkbrary', // 인자값으로 받은 title + description: `위클리미션`, // 인자값으로 받은 title + imageUrl: + 'https://image6.uhdpaper.com/wallpaper-hd/yeji-itzy-uhdpaper.com-hd-6.1786.jpg', + link: { + mobileWebUrl: route, // 인자값으로 받은 route(uri 형태) + webUrl: route, + }, + }, + buttons: [ + { + title: '웹으로 보기', + link: { + mobileWebUrl: route, + webUrl: route, + }, + }, + ], + + installTalk: true, + }); + } +} diff --git a/utils/time-functions/formatDate.ts b/utils/time-functions/formatDate.ts new file mode 100644 index 000000000..835b9dcd9 --- /dev/null +++ b/utils/time-functions/formatDate.ts @@ -0,0 +1,3 @@ +export default function formatDate(date: Date): string { + return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`; +} diff --git a/utils/time-functions/getTimeDifference.ts b/utils/time-functions/getTimeDifference.ts new file mode 100644 index 000000000..f49af9962 --- /dev/null +++ b/utils/time-functions/getTimeDifference.ts @@ -0,0 +1,32 @@ +const MILLISECONDS_IN_YEAR = 31536000000; +const MILLISECONDS_IN_MONTH = 2592000000; +const MILLISECONDS_IN_DAY = 86400000; +const MILLISECONDS_IN_HOUR = 3600000; +const MILLISECONDS_IN_MINUTE = 60000; + +const INTERVALS = [ + { label: 'year', divisor: MILLISECONDS_IN_YEAR }, + { label: 'month', divisor: MILLISECONDS_IN_MONTH }, + { label: 'day', divisor: MILLISECONDS_IN_DAY }, + { label: 'hour', divisor: MILLISECONDS_IN_HOUR }, + { label: 'minute', divisor: MILLISECONDS_IN_MINUTE }, +]; + +export default function getTimeDifference( + createdDate: Date, + intervals = INTERVALS +): string { + const currentDate: Date = new Date(); + const timeDifference: number = currentDate.getTime() - createdDate.getTime(); + + for (const interval of intervals) { + const value = Math.floor(timeDifference / interval.divisor); + if (value >= 1) { + return value === 1 + ? `1 ${interval.label} ago` + : `${value} ${interval.label}s ago`; + } + } + + return 'just now'; +}