-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #404 from Byukchong/part3-정지성-week13
[정지성] Week13
- Loading branch information
Showing
81 changed files
with
3,543 additions
and
480 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"presets": ["next/babel"], | ||
"plugins": ["babel-plugin-styled-components"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
.addLinkBar { | ||
position: relative; | ||
margin: 0 auto; | ||
width: 80rem; | ||
display: flex; | ||
align-items: center; | ||
background-color: var(--light-blue); | ||
|
||
@media (max-width: 1123px) { | ||
width: 70.4rem; | ||
} | ||
|
||
@media (max-width: 767px) { | ||
width: 32.5rem; | ||
} | ||
} | ||
|
||
.addLinkInput { | ||
width: 100%; | ||
padding: 2rem 3.8rem 2rem 5.2rem; | ||
border-radius: 1rem; | ||
border: 1px solid var(--primary); | ||
background-color: var(--white); | ||
font-size: 1.4rem; | ||
display: flex; | ||
justify-content: center; | ||
|
||
@media (min-width: 768px) { | ||
padding-left: 4.2rem; | ||
font-size: 1.6rem; | ||
line-height: 150%; | ||
} | ||
} | ||
|
||
.addLinkBar::placeholder { | ||
color: var(--gray60); | ||
} | ||
|
||
.addLinkIcon { | ||
position: absolute; | ||
top: 50%; | ||
transform: translateY(-50%); | ||
left: 1.6rem; | ||
} | ||
|
||
.addLinkButton { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
|
||
cursor: pointer; | ||
padding: 1rem 1.55rem; | ||
background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%); | ||
border-radius: 0.8rem; | ||
color: #f5f5f5; | ||
font-size: 1.4rem; | ||
font-weight: 600; | ||
position: absolute; | ||
right: 2rem; | ||
top: 55%; | ||
transform: translateY(-50%); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import styled from 'styled-components'; | ||
import { useState, ChangeEvent } from 'react'; | ||
import ModalAddToFolder from '@/components/modal/ModalAddToFolder'; | ||
import styles from '@/components/Addlink/index.module.css'; | ||
import addLinkIcon from '@/public/link.svg'; | ||
import Image from 'next/image'; | ||
|
||
const AddlinkContainer = styled.div` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
width: 100%; | ||
height: 24.4rem; | ||
padding: 2rem 0 6rem; | ||
background-color: var(--light-blue); | ||
`; | ||
|
||
function Addlink() { | ||
const [isModalOpen, setIsModalOpen] = useState(false); | ||
const [targetName, setTargetName] = useState(''); | ||
|
||
function handleClickButton() { | ||
setIsModalOpen((prev) => !prev); | ||
} | ||
function handleChange(event: ChangeEvent<HTMLInputElement>) { | ||
setTargetName(event.target.value); | ||
} | ||
function handleCloseModal() { | ||
setIsModalOpen(false); // 모달을 닫습니다. | ||
} | ||
|
||
return ( | ||
<AddlinkContainer> | ||
<div className={styles.addLinkBar}> | ||
<input | ||
type="search" | ||
className={styles.addLinkInput} | ||
placeholder="링크를 추가해 보세요." | ||
value={targetName} | ||
onChange={handleChange} | ||
/> | ||
<Image | ||
src={addLinkIcon} | ||
className={styles.addLinkIcon} | ||
alt="링크 추가 아이콘" | ||
/> | ||
<button className={styles.addLinkButton} onClick={handleClickButton}> | ||
추가하기 | ||
</button> | ||
{isModalOpen && ( | ||
<ModalAddToFolder | ||
title={'폴더에 추가'} | ||
targetName={targetName} | ||
isModalOpen={isModalOpen} | ||
onClose={handleCloseModal} | ||
/> | ||
)} | ||
</div> | ||
</AddlinkContainer> | ||
); | ||
} | ||
|
||
export default Addlink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
.card { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-start; | ||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | ||
border-radius: 10px; | ||
} | ||
|
||
.card_txt_div_body { | ||
margin: 0.8rem 0; | ||
font-size: 1.2rem; | ||
display: -webkit-box; | ||
-webkit-line-clamp: 2; | ||
-webkit-box-orient: vertical; | ||
white-space: normal; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
.left_time_p { | ||
font-size: 1.4rem; | ||
color: var(--text-content-gray); | ||
} | ||
|
||
.card_txt_div_body { | ||
font-size: 1.6rem; | ||
} | ||
|
||
.card_txt_date { | ||
font-size: 1.4rem; | ||
color: var(--text-content-black); | ||
margin-bottom: 1rem; | ||
} | ||
|
||
.card_txt_div { | ||
padding: 1.5rem 2rem; | ||
} | ||
|
||
.noLinkText { | ||
font-size: 1.6rem; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
grid-column: span 3; | ||
} | ||
.card_img_div { | ||
position: relative; | ||
width: 34rem; | ||
height: 20rem; | ||
border-top-left-radius: 10px; | ||
border-top-right-radius: 10px; | ||
} | ||
|
||
.card_img { | ||
width: 34rem; | ||
height: 20rem; | ||
object-fit: cover; | ||
border-top-left-radius: 10px; | ||
border-top-right-radius: 10px; | ||
|
||
@media (max-width: 767px) { | ||
width: 32.5rem; | ||
} | ||
} | ||
|
||
.card_grid_container { | ||
display: grid; | ||
grid-template-columns: repeat(3, 34rem); | ||
grid-template-rows: 33.4rem; | ||
column-gap: 2rem; | ||
row-gap: 2.5rem; | ||
margin: 0 auto; | ||
|
||
@media (max-width: 1123px) { | ||
grid-template-columns: repeat(2, 34rem); | ||
} | ||
|
||
@media (max-width: 767px) { | ||
grid-template-columns: 32.5rem; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import { useFetch } from '@/hooks/useFetch'; | ||
import { formatDate, generateTimeText } from '@/hooks/date'; | ||
import styles from '@/components/Cards/index.module.css'; | ||
import Image from 'next/image'; | ||
import { SyntheticEvent } from 'react'; | ||
|
||
export interface Link { | ||
id: string; | ||
url: string; | ||
imageSource?: string; | ||
title: string; | ||
createdAt: Date; | ||
description: string; | ||
} | ||
|
||
interface FolderData { | ||
folder: { | ||
links: Link[]; | ||
}; | ||
} | ||
|
||
const AddThumbnail = (e: SyntheticEvent<HTMLImageElement, Event>) => { | ||
e.currentTarget.src = '/thumbnail.svg'; | ||
}; | ||
|
||
function Cards({ url }: { url: string }) { | ||
// props를 비구조화 할당하여 사용 | ||
const CardData = useFetch<FolderData>(url); | ||
|
||
return ( | ||
<div className={styles.card_grid_container}> | ||
{CardData ? ( | ||
CardData.folder.links.map((link: Link) => ( | ||
<a href={link.url} key={link.id}> | ||
<div className={styles.card}> | ||
<div className={styles.card_img_div}> | ||
{link.imageSource ? ( | ||
<img | ||
src={link.imageSource} | ||
className={styles.card_img} | ||
alt={link.title} | ||
onError={AddThumbnail} | ||
/> | ||
) : ( | ||
<Image | ||
width="320" | ||
height="200" | ||
src={'/thumbnail.svg'} | ||
className={styles.card_img} | ||
alt="thumbnail_img" | ||
/> | ||
)} | ||
</div> | ||
<div className={styles.card_txt_div}> | ||
<div className={styles.card_txt_div_top}> | ||
<p className={styles.left_time_p}> | ||
{generateTimeText(link.createdAt)} | ||
</p> | ||
</div> | ||
<div className={styles.card_txt_div_body}> | ||
<p className={styles.card_txt_div_body}>{link.description}</p> | ||
</div> | ||
<div className={styles.card_txt_date}> | ||
{formatDate(link.createdAt)} | ||
</div> | ||
</div> | ||
</div> | ||
</a> | ||
)) | ||
) : ( | ||
<div className={styles.noLinkText}>저장된 링크가 없습니다</div> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
export default Cards; |
Oops, something went wrong.