From ab23fa0dc156f1e00db75e29270471125ade9d51 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Sun, 19 May 2024 19:00:49 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Style=20:=20module=20css=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{cardlist.css => cardlist.module.css} | 0 src/components/cardlist.tsx | 26 +++++++++---------- ...foldertitle.css => foldertitle.module.css} | 0 src/components/foldertitle.tsx | 12 ++++----- .../{footer.css => footer.module.css} | 8 +++--- src/components/footer.tsx | 18 ++++++------- .../{header.css => header.module.css} | 2 +- src/components/header.tsx | 8 +++--- ...mainsection.css => mainsection.module.css} | 0 src/components/mainsection.tsx | 4 +-- .../{profile.css => profile.module.css} | 0 src/components/profile.tsx | 8 +++--- .../{searchbar.css => searchbar.module.css} | 0 src/components/searchbar.tsx | 8 +++--- 14 files changed, 47 insertions(+), 47 deletions(-) rename src/components/{cardlist.css => cardlist.module.css} (100%) rename src/components/{foldertitle.css => foldertitle.module.css} (100%) rename src/components/{footer.css => footer.module.css} (93%) rename src/components/{header.css => header.module.css} (94%) rename src/components/{mainsection.css => mainsection.module.css} (100%) rename src/components/{profile.css => profile.module.css} (100%) rename src/components/{searchbar.css => searchbar.module.css} (100%) diff --git a/src/components/cardlist.css b/src/components/cardlist.module.css similarity index 100% rename from src/components/cardlist.css rename to src/components/cardlist.module.css diff --git a/src/components/cardlist.tsx b/src/components/cardlist.tsx index f34473206..0c49213a7 100644 --- a/src/components/cardlist.tsx +++ b/src/components/cardlist.tsx @@ -1,4 +1,4 @@ -import "./cardlist.css"; +import styles from "./cardlist.module.css"; import { useFetch } from "../usefetch"; import DefaultImgae from "../assets/NoImage.svg"; import { Link } from "react-router-dom"; @@ -78,40 +78,40 @@ function CardListItem({ item }: any) { return ( <> -
+
{thumbnail ? ( {item.title} ) : ( {item.title} )}
-
-

{getElapsedTime(creatTime)}

-

+

+

{getElapsedTime(creatTime)}

+

{item.description ? item.description : item.title}

-

+

{year}. {month}. {day}

카드 케밥 버튼 이미지 { e.stopPropagation(); // 상위 링크 클릭 방지 e.preventDefault(); // 기본 링크 이벤트 방지 @@ -124,7 +124,7 @@ function CardListItem({ item }: any) {
- 즐겨찾기 버튼 이미지 + 즐겨찾기 버튼 이미지
); @@ -139,7 +139,7 @@ function CardList({ url , folder = false } : CardListProps) { const cardListItems = useFetch(url); return ( -
+
{cardListItems?.folder?.links.map((link: any) => ( ))} @@ -147,7 +147,7 @@ function CardList({ url , folder = false } : CardListProps) { ? cardListItems?.data?.map((link : any) => ( )) - : folder &&
저장된 링크가 없습니다.
} + : folder &&
저장된 링크가 없습니다.
}
); } diff --git a/src/components/foldertitle.css b/src/components/foldertitle.module.css similarity index 100% rename from src/components/foldertitle.css rename to src/components/foldertitle.module.css diff --git a/src/components/foldertitle.tsx b/src/components/foldertitle.tsx index f91cfaa3d..f9fc51495 100644 --- a/src/components/foldertitle.tsx +++ b/src/components/foldertitle.tsx @@ -1,20 +1,20 @@ import { useFetch } from "../usefetch"; -import "./foldertitle.css"; +import styles from "./foldertitle.module.css"; function FolderTitle() { const folderData = useFetch( `https://bootcamp-api.codeit.kr/api/sample/folder` ); return ( -
-
+
+
프로필 이미지 -

{folderData?.folder?.owner?.name}

-

{folderData?.folder?.name}

+

{folderData?.folder?.owner?.name}

+

{folderData?.folder?.name}

); diff --git a/src/components/footer.css b/src/components/footer.module.css similarity index 93% rename from src/components/footer.css rename to src/components/footer.module.css index 8db1cabe2..3c088ad99 100644 --- a/src/components/footer.css +++ b/src/components/footer.module.css @@ -32,7 +32,7 @@ width: 105px; height: 18px; } -.footer__rights--mobile { +.footer__rights__mobile { display: none; } @@ -54,13 +54,13 @@ line-height: normal; } -.footer-sns_link { +.footer_sns_link { display: flex; align-items: flex-start; gap: 12px; } -.footer-sns_link img { +.footer_sns_link img { width: 20px; height: 20px; } @@ -78,7 +78,7 @@ display: none; } - .footer__rights--mobile { + .footer__rights__mobile { display: block; color: #676767; text-align: center; diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 4f691cf19..7745ed4c6 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,4 +1,4 @@ -import "./footer.css"; +import styles from "./footer.module.css"; import FacebookImg from "../assets/facebook.svg"; import InstagramImg from "../assets/instagram.svg"; import TwitterImg from "../assets/twitter.svg"; @@ -7,20 +7,20 @@ import { Link } from "react-router-dom"; function Footer() { return ( -