Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[오동혁] Week11 #362

Merged
merged 1 commit into from
Apr 29, 2024
Merged

[오동혁] Week11 #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 2 additions & 28 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
25 changes: 25 additions & 0 deletions src/components/common/Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import styled from 'styled-components';

const StyledInput = styled.input`
box-sizing: border-box;
width: ${(props) => props.$width};
height: ${(props) => props.$height};
margin: ${(props) => props.$margin};
border-radius: 8px;
border: 1px solid #ccd5e3;
padding: 0 15px;
font-size: 16px;
line-height: 24px;

&:hover {
border: 1px solid #6d6afe;
}

&:focus {
outline: 1px solid #6d6afe;
}
`;

export default function Input({ width, height, margin, placeholder }) {
return <StyledInput $width={width} $height={height} $margin={margin} placeholder={placeholder} />;
}
203 changes: 145 additions & 58 deletions src/components/common/Item.js
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

js와 jsx로 파일이름이 나뉘어진 컴포넌트들이 꽤 있네요. 혹시 어떤 이유로 파일 확장자가 다른 것인지 알 수 있을까요~?

Original file line number Diff line number Diff line change
Expand Up @@ -2,101 +2,188 @@ import styled from 'styled-components';
import { calcDateDiff, dateToString } from '../../common/date';
import { Link } from 'react-router-dom';
import noImage from '../../images/noImage.jpg';
import star from '../../images/star.png';
import kebbab from '../../images/kebab.png';
import { handleImageError } from '../../common/error';

const ImgDiv = styled.div``;
const StyledImg = styled.img``;
const Time = styled.span``;
const Detail = styled.span``;
const CreatedDate = styled.span``;
import { useEffect, useRef, useState } from 'react';
import KebbabPopover from '../../pages/Folder/KebbabPopover';
import DeleteModal from '../../pages/Folder/DeleteModal';
import AddLinkModal from '../../pages/Folder/AddLinkModal';

const StyledArticle = styled.article`
position: relative;
display: flex;
flex-direction: column;
border-radius: 10px;
box-shadow: 0px 0px 3px #808080;
overflow: hidden;

@media screen and (min-width: 769px) {
max-width: 340px;
height: 334px;
}

@media screen and (max-width: 768px) {
width: 100%;
height: 327px;
}

&:hover {
border: 2px solid #6d6afe;
margin: -2px;
}
`;

${Time},
${Detail},
${CreatedDate} {
margin: 20px 20px 0 20px;
}
const Content = styled.div`
box-sizing: border-box;
height: 135px;
padding: 15px 20px;
display: flex;
flex-direction: column;
gap: 10px;
`;

${ImgDiv} {
width: 100%;
height: 200px;
overflow: hidden;
}
const ImgDiv = styled.div`
width: 100%;
height: 200px;
overflow: hidden;
`;

${StyledImg} {
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
&:hover {
transform: scale(1.3);
}
}
${Time} {
font-size: 13px;
color: #666666;
}
${Detail} {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 16px;
color: black;
}
${CreatedDate} {
font-size: 14px;
color: #333333;
margin-bottom: 20px;
const StyledImg = styled.img`
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
&:hover {
transform: scale(1.3);
}
`;

const CardHeader = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
height: 17px;
`;

const Time = styled.span`
font-size: 13px;
color: #666666;
`;

const KebbabButton = styled.button`
position: relative;
border: none;
background: none;
cursor: pointer;
`;

const Detail = styled.span`
height: 49px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 16px;
line-height: 24px;
color: black;
`;

const CreatedDate = styled.span`
height: 19px;
font-size: 14px;
color: #333333;
`;

const StyledLink = styled(Link)`
text-decoration: none;
`;

function Item({ createdAt, url, title, description, imageSource }) {
const KebbabDiv = styled.div``;

const ModalDiv = styled.div`
position: relative;
`;

const StarImg = styled.img`
position: absolute;
width: 34px;
height: 34px;
top: 15px;
right: 15px;
z-index: 99;
`;

function Item({ createdAt, url, title, description, imageSource, folderData, editable }) {
const [openPopover, setOpenPopover] = useState(false);
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [openAddLinkModal, setOpenAddLinkModal] = useState(false);
const kebbabRef = useRef();

useEffect(() => {
const handler = (e) => {
if (kebbabRef.current && !kebbabRef.current.contains(e.target)) {
setOpenPopover(false);
}
};

document.addEventListener('mousedown', handler);

return () => {
document.removeEventListener('mousedown', handler);
};
}, []);

return (
<StyledLink to={url} target='_blank'>
<StyledArticle>
<StyledArticle>
{editable && <StarImg src={star} />}
<StyledLink to={url} target='_blank'>
<ImgDiv>
<StyledImg src={imageSource ? imageSource : noImage} alt={title} onError={handleImageError} />
</ImgDiv>
<Time>{calcDateDiff(new Date(), new Date(createdAt))}</Time>
<Detail>
{description ? (
description
</StyledLink>
<Content>
<CardHeader>
<Time>{calcDateDiff(new Date(), new Date(createdAt))}</Time>
{editable ? (
<KebbabButton onClick={setOpenPopover}>
<img src={kebbab} alt='kebbab'></img>
<KebbabDiv ref={kebbabRef}>
{openPopover && <KebbabPopover handleDelete={setOpenDeleteModal} handleAdd={setOpenAddLinkModal} />}
</KebbabDiv>
</KebbabButton>
) : (
<>
<br />
<br />
</>
<div></div>
)}
</Detail>
</CardHeader>
<Detail>{description}</Detail>
<CreatedDate>{dateToString(new Date(createdAt))}</CreatedDate>
</StyledArticle>
</StyledLink>
</Content>
<ModalDiv>
{openDeleteModal && (
<DeleteModal
title='링크 삭제'
width='360px'
height='193px'
padding='32px 40px'
setter={setOpenDeleteModal}
subtitle={url}
/>
)}
{openAddLinkModal && (
<AddLinkModal
title='폴더에 추가'
width='360px'
height='auto'
padding='32px 40px'
setter={setOpenAddLinkModal}
url={url}
folderData={folderData}
/>
)}
</ModalDiv>
</StyledArticle>
);
}

Expand Down
61 changes: 61 additions & 0 deletions src/components/common/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import styled from 'styled-components';
import close from '../../images/close.png';

const ModalBack = styled.div`
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 998;
`;

const ModalDiv = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
width: ${(props) => props.$width};
height: ${(props) => props.$height};
border-radius: 15px;
padding: ${(props) => props.$padding};
background-color: white;
z-index: 999;
`;

const TitleDiv = styled.div`
display: flex;
justify-content: center;
width: 100%;
font-size: 20px;
font-weight: bold;
`;

const CloseButton = styled.button`
position: absolute;
top: 15px;
right: 15px;
border: none;
background: none;
cursor: pointer;
`;

export default function Modal({ title, width, height, padding, setter, children }) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

width, height의 경우는 기본 값을 미리 정해두면 어떨까요~? 다양한 곳에서 사용할 때 항상 width와 height를 넣어주는 것은 다소 번거로울 수 있을 것 같아요.

또 좋은 방법으로는 width, height를 주지 않으면 내부 컴포넌트에 fit하게 만드는 것도 방법이에요!

const handleClose = () => {
setter?.(false);
};

return (
<ModalBack>
<ModalDiv $width={width} $height={height} $padding={padding}>
<CloseButton onClick={handleClose}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

닫기 버튼은 기능적으로 중요한 �요소인데요, 이 버튼에 대한 접근성을 높이기 위해 aria-label을 추가하는 것을 고려해야 합니다. 현재는 이미지 태그에만 alt 속성이 있는데, 버튼 자체에도 추가적인 설명이 있으면 좋겠습니다!

<img src={close} alt='Modal close button' />
</CloseButton>
<TitleDiv>{title}</TitleDiv>
{children}
</ModalDiv>
</ModalBack>
);
}
Loading
Loading