+
{/* 아이돌 프로필 이미지 */}
diff --git a/src/pages/List/Donation/components/Carousel/Carousel.style.js b/src/pages/List/Donation/components/Carousel/Carousel.styles.js
similarity index 94%
rename from src/pages/List/Donation/components/Carousel/Carousel.style.js
rename to src/pages/List/Donation/components/Carousel/Carousel.styles.js
index e7a1484..7442af3 100644
--- a/src/pages/List/Donation/components/Carousel/Carousel.style.js
+++ b/src/pages/List/Donation/components/Carousel/Carousel.styles.js
@@ -19,8 +19,8 @@ export const sliderTrack = (
margin-top: 34px;
@media (max-width: 426px) {
- margin-top: 3.76vw;
- gap: 1.88vw;
+ margin-top: 3.76vw;
+ gap: 1.88vw;
};
`;
@@ -39,5 +39,5 @@ export const sliderViewport = css`
&::-webkit-scrollbar {
display: none;
- }
+ };
`;
diff --git a/src/pages/List/Donation/components/Carousel/index.jsx b/src/pages/List/Donation/components/Carousel/index.jsx
index 09bf79e..0f56732 100644
--- a/src/pages/List/Donation/components/Carousel/index.jsx
+++ b/src/pages/List/Donation/components/Carousel/index.jsx
@@ -6,8 +6,8 @@ import {
donationPageNation,
pageNationLeft,
pageNationRight,
-} from "../../Donation.style";
-import { sliderTrack, sliderViewport } from "./Carousel.style";
+} from "../../Donation.styles";
+import { sliderTrack, sliderViewport } from "./Carousel.styles";
/**
* 캐러셀(슬라이더) 컴포넌트
diff --git a/src/pages/List/Donation/components/Skeleton/index.jsx b/src/pages/List/Donation/components/Skeleton/index.jsx
index 1f3c145..a166f61 100644
--- a/src/pages/List/Donation/components/Skeleton/index.jsx
+++ b/src/pages/List/Donation/components/Skeleton/index.jsx
@@ -10,9 +10,9 @@ import {
progress,
subTitle,
text,
-} from "./style/CardSkeleton.style";
+} from "./style/CardSkeleton.styles";
/** @jsxImportSource @emotion/react */
-import { button, content, pageNation } from "./style/Skeleton.style";
+import { button, content, pageNation } from "./style/Skeleton.styles";
function CardSkeleton() {
return (
diff --git a/src/pages/List/Donation/components/Skeleton/style/CardSkeleton.style.js b/src/pages/List/Donation/components/Skeleton/style/CardSkeleton.styles.js
similarity index 92%
rename from src/pages/List/Donation/components/Skeleton/style/CardSkeleton.style.js
rename to src/pages/List/Donation/components/Skeleton/style/CardSkeleton.styles.js
index 4278cb0..e6ffb2f 100644
--- a/src/pages/List/Donation/components/Skeleton/style/CardSkeleton.style.js
+++ b/src/pages/List/Donation/components/Skeleton/style/CardSkeleton.styles.js
@@ -1,6 +1,6 @@
+import { shimmerStyle } from "@/styles/skeletonAnimation";
/** @jsxImportSource @emotion/react */
-import { css, keyframes } from "@emotion/react";
-import { shimmerStyle } from "../../../../../../styles/skeletonAnimation";
+import { css } from "@emotion/react";
export const container = css`
display: flex;
diff --git a/src/pages/List/Donation/components/Skeleton/style/Skeleton.style.js b/src/pages/List/Donation/components/Skeleton/style/Skeleton.styles.js
similarity index 79%
rename from src/pages/List/Donation/components/Skeleton/style/Skeleton.style.js
rename to src/pages/List/Donation/components/Skeleton/style/Skeleton.styles.js
index 325071b..4f70d11 100644
--- a/src/pages/List/Donation/components/Skeleton/style/Skeleton.style.js
+++ b/src/pages/List/Donation/components/Skeleton/style/Skeleton.styles.js
@@ -1,6 +1,6 @@
+import { shimmerStyle } from "@/styles/skeletonAnimation";
/** @jsxImportSource @emotion/react */
-import { css, keyframes } from "@emotion/react";
-import { shimmerStyle } from "../../../../../../styles/skeletonAnimation";
+import { css } from "@emotion/react";
export const pageNation = css`
position: relative;
diff --git a/src/pages/List/Donation/index.jsx b/src/pages/List/Donation/index.jsx
index a178936..aaf5820 100644
--- a/src/pages/List/Donation/index.jsx
+++ b/src/pages/List/Donation/index.jsx
@@ -1,8 +1,8 @@
/** @jsxImportSource @emotion/react */
-import { donationTitle } from "./Donation.style";
+import { donationTitle } from "./Donation.styles";
-import LoadingError from "../../../components/Error";
-import { useDonations } from "../../../hooks/useDonation";
+import LoadingError from "@/components/Error";
+import { useDonations } from "@/hooks/useDonation";
import Card from "./components/Card";
import Carousel from "./components/Carousel";
import DonationSkeleton from "./components/Skeleton";
diff --git a/src/pages/NotFound/NotFound.style.js b/src/pages/NotFound/NotFound.style.js
deleted file mode 100644
index 1f9888c..0000000
--- a/src/pages/NotFound/NotFound.style.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-
-export const container = css`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
-
- height: 100vh;
- overflow-y: auto;
- `;
-
-export const imgContainer = css`
-position: relative;
-width: 350px;
-height: 350px;
-
-@media(max-width: 769px) {
- width: 200px;
- height: 200px;
-}`;
-
-export const imgIdol = css`
-position: relative;
-width: 100%;
-height: 100%;
-opacity: 0.7;
-
-object-fit: cover;
-`;
-
-export const overlay = css`
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background: radial-gradient(
- 50% 50% at 50% 50%,
- rgba(2, 0, 14, 0) 0%,
- rgba(2, 0, 14, 0.18) 37.5%,
- rgba(2, 0, 14, 0.5) 79.5%,
- #02000e 100%
- );
- `;
-
-export const text = css`
- color: #ffffff;
- text-align: center;
-
- display: flex;
- flex-direction: column;
- align-items: center;
-
- gap: 30px;
-
- @media(max-width: 769px) {
- gap: 20px;
- }
- `;
-
-export const logo = css`
- width: 200px;
-
- opacity: 0.5;
-
- z-index: 3;
-
-@media(max-width: 769px) {
- width: 100px;
-}`;
-
-export const title = css`
-font-size: 30px;
-font-weight: 800;
-
-@media(max-width: 769px) {
- font-size: 20px;
- font-weight: 600;
-}`;
-
-export const description = css`
-font-size: 15px;
-color: var(--gray-A3A5A8);
-
-@media(max-width: 769px) {
- font-size: 13px;
-}`;
-
-export const buttons = css`
-display: flex;
-gap: 30px;
-`;
-
-export const button = css`
-width: 150px;
-height: 40px;
-border: 1px solid #ffffff;
-border-radius: 30px;
-
-font-size: 15px;
-
-&:hover {
-background: linear-gradient(90deg, #F86F65 0%, #FE5493 100%);
-border: none;
-}
-
-@media(max-width: 769px) {
- width: 110px;
- height: 30px;
-
- font-size: 12px;
-}`;
diff --git a/src/pages/NotFound/NotFound.styles.js b/src/pages/NotFound/NotFound.styles.js
new file mode 100644
index 0000000..24bb948
--- /dev/null
+++ b/src/pages/NotFound/NotFound.styles.js
@@ -0,0 +1,119 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+export const container = css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+
+ height: 100vh;
+ overflow-y: auto;
+ `;
+
+export const imgContainer = css`
+ position: relative;
+ width: 350px;
+ height: 350px;
+
+ @media(max-width: 769px) {
+ width: 200px;
+ height: 200px;
+ };
+`;
+
+export const imgIdol = css`
+ position: relative;
+ width: 100%;
+ height: 100%;
+ opacity: 0.7;
+
+ object-fit: cover;
+`;
+
+export const overlay = css`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(
+ 50% 50% at 50% 50%,
+ rgba(2, 0, 14, 0) 0%,
+ rgba(2, 0, 14, 0.18) 37.5%,
+ rgba(2, 0, 14, 0.5) 79.5%,
+ #02000e 100%
+ );
+ `;
+
+export const text = css`
+ color: #ffffff;
+ text-align: center;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ gap: 30px;
+
+ @media(max-width: 769px) {
+ gap: 20px;
+ };
+ `;
+
+export const logo = css`
+ width: 200px;
+
+ opacity: 0.5;
+
+ z-index: 3;
+
+ @media(max-width: 769px) {
+ width: 100px;
+ };
+`;
+
+export const title = css`
+ font-size: 30px;
+ font-weight: 800;
+
+ @media(max-width: 769px) {
+ font-size: 20px;
+ font-weight: 600;
+ };
+`;
+
+export const description = css`
+ font-size: 15px;
+ color: var(--gray-A3A5A8);
+
+ @media(max-width: 769px) {
+ font-size: 13px;
+ };
+`;
+
+export const buttons = css`
+ display: flex;
+ gap: 30px;
+`;
+
+export const button = css`
+ width: 150px;
+ height: 40px;
+ border: 1px solid #ffffff;
+ border-radius: 30px;
+
+ font-size: 15px;
+
+ &:hover {
+ background: linear-gradient(90deg, #F86F65 0%, #FE5493 100%);
+ border: none;
+ };
+
+ @media(max-width: 769px) {
+ width: 110px;
+ height: 30px;
+
+ font-size: 12px;
+ };
+`;
diff --git a/src/pages/NotFound/index.jsx b/src/pages/NotFound/index.jsx
index 3ab066b..d5b45ec 100644
--- a/src/pages/NotFound/index.jsx
+++ b/src/pages/NotFound/index.jsx
@@ -20,7 +20,7 @@ import {
overlay,
text,
title,
-} from "./NotFound.style";
+} from "./NotFound.styles";
import { useNavigate } from "react-router-dom";
diff --git a/src/pages/Testpage/index.jsx b/src/pages/Testpage/index.jsx
deleted file mode 100644
index c194f51..0000000
--- a/src/pages/Testpage/index.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { idolsAPI } from "../../apis/idolsAPI";
-import Button from "../../components/Button/Button";
-import Modal from "../../components/Modal";
-import RadioButton from "../../components/RadioButton";
-import { useCredit } from "../../context/CreditContext";
-const Testpage = () => {
- const { credit, addCredit, deductCredit } = useCredit(); // credit context test를 위한 선언
- const credits = [100, 500, 1000]; // 라디오 버튼 test를 위한 크레딧 배열
- const [select, setSelect] = useState(null); // 라디오 버튼 test를 위한 state설정 (현재 선택된 값을 저장하는 state)
- const [isOpen, setIsOpen] = useState(false);
-
- const handleClose = () => {
- setIsOpen(false);
- };
-
- const handleOpen = () => {
- setIsOpen(true);
- };
-
- const [totalList, setTotalList] = useState([]);
- const fetchIdols = useCallback(async () => {
- const response = await idolsAPI.getIdols(100);
- setTotalList(response.list);
- }, []);
-
- useEffect(() => {
- fetchIdols();
- }, [fetchIdols]);
-
- return (
-
- {/* Toast 사용법
- * 상단에 import { toast } from "react-toastify"; 선언
- * 성공일 때 toast.success("나올 문구")
- * 실패일 때 toast.error("나올 문구")
- */}
-
-
-
-
-
-
-
- );
-};
-
-// 라디오버튼 test를위한 css
-const radio = css`
- color: #ffffff;
-`;
-
-// 크레딧 test를 위한 css
-const creditStyle = css`
- color: #ffffff;
-`;
-
-const creditContainer = css`
- display: flex;
- gap: 24px;
-`;
-
-// API 테스트를 위한 css
-const testIdolsCircle = css`
- width: 980px;
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- > div {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- overflow: hidden;
- border: 2px solid var(--orange-F96D69);
- padding: 5px;
- > img {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- object-fit: cover;
- object-position: center top;
- }
- }
-`;
-
-const testIdolsDonation = css`
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 20px;
- width: 1920px;
- margin: 0 auto;
- > div {
- height: 400px;
- overflow: hidden;
- > img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: center top;
- }
- }
-`;
-
-export default Testpage;
모달 테스트
- - - - - -여기에 모달 내용이 들어갑니다.
-
- {totalList.map((item) => (
-
-
- 
-
- ))}
-
- {totalList.map((item) => (
-
-
-
-
-
- ))}
-
- {credits.map((credit) => (
-
- {credit}
-
- ))}
- {/* 클래스 적용 확인을 위한 test 같은 credit 배열을 사용해서 같이 작동되는 것입니다! */}
- {credits.map((credit) => (
-
- {credit}
-
- ))}
-
-
- {/* 크레딧 context test */}
-
-
-
- 현재 크레딧: {credit}
-
-