diff --git a/public/jingyu/jingyu01.jpg b/public/jingyu/jingyu01.jpg deleted file mode 100644 index 51f8cc9..0000000 Binary files a/public/jingyu/jingyu01.jpg and /dev/null differ diff --git a/public/mocks/mock01.png b/public/mocks/mock01.png deleted file mode 100644 index 40f536e..0000000 Binary files a/public/mocks/mock01.png and /dev/null differ diff --git a/public/mocks/mock02.png b/public/mocks/mock02.png deleted file mode 100644 index 5f45081..0000000 Binary files a/public/mocks/mock02.png and /dev/null differ diff --git a/public/mocks/mock03.png b/public/mocks/mock03.png deleted file mode 100644 index 5b46700..0000000 Binary files a/public/mocks/mock03.png and /dev/null differ diff --git a/public/mocks/mock04.png b/public/mocks/mock04.png deleted file mode 100644 index 9519da6..0000000 Binary files a/public/mocks/mock04.png and /dev/null differ diff --git a/src/App.jsx b/src/App.jsx index 1c168cf..2f1f213 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,7 +11,6 @@ import Landing from "./pages/Landing"; import List from "./pages/List"; import Mypage from "./pages/Mypage"; import NotFound from "./pages/NotFound/index.jsx"; -import Testpage from "./pages/Testpage/index.jsx"; function App() { const lenisRef = useRef(null); @@ -46,7 +45,6 @@ function App() { }> } /> } /> - } /> } /> } /> diff --git a/src/components/Error/Error.style.js b/src/components/Error/Error.styles.js similarity index 86% rename from src/components/Error/Error.style.js rename to src/components/Error/Error.styles.js index cb3ae67..94108d8 100644 --- a/src/components/Error/Error.style.js +++ b/src/components/Error/Error.styles.js @@ -14,7 +14,7 @@ export const errorWrapper = css` @media(max-width: 476px) { gap: 6px; - } + }; `; /** @@ -36,7 +36,7 @@ export const iconWrapper = css` @media(max-width: 476px) { width: 60px; height: 60px; - } + }; `; /** @@ -48,7 +48,7 @@ export const black = css` top: 50%; left: 50%; transform: translate(-50%, -50%); - background: #000000; /* = 대신 : */ + background: #000000; width: 75px; height: 75px; border-radius: 50%; @@ -58,8 +58,8 @@ export const black = css` z-index: 1; @media(max-width: 476px) { - width: 50px; - height: 50px; + width: 50px; + height: 50px; } `; @@ -89,7 +89,7 @@ export const title = css` @media(max-width: 476px) { font-size: 16px; font-weight: 800; - } + }; `; /** @@ -101,25 +101,26 @@ export const description = css` @media(max-width: 476px) { font-size: 13px; - } + }; `; /** * '다시 시도하기' 버튼 스타일 */ export const button = css` -width: 140px; -height: 30px; + width: 140px; + height: 30px; -background: linear-gradient(90deg, #F86F65 0%, #FE5493 100%); -border-radius: 20px; + background: linear-gradient(90deg, #F86F65 0%, #FE5493 100%); + border-radius: 20px; -font-size: 12px; -font-weight: 400; + font-size: 12px; + font-weight: 400; -@media(max-width: 476px) { -width: 100px; -height: 25px; + @media(max-width: 476px) { + width: 100px; + height: 25px; -font-size: 10px; -}`; + font-size: 10px; + }; +`; diff --git a/src/components/Error/index.jsx b/src/components/Error/index.jsx index d28f61c..dfa6afd 100644 --- a/src/components/Error/index.jsx +++ b/src/components/Error/index.jsx @@ -8,7 +8,7 @@ import { icon, iconWrapper, title, -} from "./Error.style"; +} from "./Error.styles"; const ERROR_MESSAGE = { donation: "후원 목록을", diff --git a/src/components/RadioButton/index.jsx b/src/components/RadioButton/index.jsx index 41eb676..8ce532f 100644 --- a/src/components/RadioButton/index.jsx +++ b/src/components/RadioButton/index.jsx @@ -46,7 +46,7 @@ const contentWrapper = (className) => css` justify-content: space-between; width: 100%; height: 100%; - padding: ${className === "vote" ? "0" : "0 23px 0 16px"}; + padding: ${className === "vote" ? "0" : "0 23px 0 16px"}; `; // 라디오 버튼 스타일 정의 diff --git a/src/components/TestComponents.jsx b/src/components/TestComponents.jsx deleted file mode 100644 index 21a1b70..0000000 --- a/src/components/TestComponents.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import styled from '@emotion/styled'; -import { IDOLS } from '../mocks/idols'; -import { DONATIONS } from '../mocks/donations'; - -const StyledTest = styled.div` - margin: auto; - color: var(--white-F7F7F8); - padding-block: 100px; - - .mainGrid { - border: 1px solid var(--orange-F96D69); - padding: 30px; - border-radius: 10px; - } -`; - -const TestComponents = () => { - return -
-

아이돌 데이터

- {IDOLS.map((idol) => ( -
-

이름: {idol.idol.name}

-

그룹: {idol.idol.group}

-

총 투표수: {idol.idol.totalVotes}

-
- ))} -

후원 데이터

- {DONATIONS.map((donation) => ( -
-

제목: {donation.title}

-

장소: {donation.subtitle}

-

목표 금액: {donation.targetDonation}

-

현재 금액: {donation.receivedDonations}

-
- ))} -
-
; -}; - -export default TestComponents; diff --git a/src/mocks/donations.js b/src/mocks/donations.js deleted file mode 100644 index 69c336a..0000000 --- a/src/mocks/donations.js +++ /dev/null @@ -1,78 +0,0 @@ -export const DONATIONS = [ - { - status: true, - deadline: "2025-04-21T00:00:00.000Z", - createdAt: "2025-04-15T09:53:35.947Z", - receivedDonations: 500000, - targetDonation: 1000000, - idolId: 0, - subtitle: "강남역 10번 출구", - title: "민지 생일 축하", - id: 0, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 0, - }, - }, - { - status: true, - deadline: "2025-12-25T00:00:00.000Z", - createdAt: "2025-06-20T14:22:15.123Z", - receivedDonations: 2000000, - targetDonation: 2000000, - idolId: 1, - subtitle: "코엑스몰 메가박스 앞", - title: "원영이 20번째 생일", - id: 1, - idol: { - totalVotes: 800, - profilePicture: "/mocks/mock02.png", - group: "아이브", - gender: "female", - name: "장원영", - id: 1, - }, - }, - { - status: false, - deadline: "2025-08-31T00:00:00.000Z", - createdAt: "2025-05-01T10:15:45.789Z", - receivedDonations: 300000, - targetDonation: 1500000, - idolId: 2, - subtitle: "홍대입구역 9번 출구", - title: "채원 팬미팅 서포트", - id: 2, - idol: { - totalVotes: 750, - profilePicture: "/mocks/mock03.png", - group: "르세라핌", - gender: "female", - name: "채원", - id: 2, - }, - }, - { - status: true, - deadline: "2026-01-15T00:00:00.000Z", - createdAt: "2025-07-10T08:45:30.456Z", - receivedDonations: 900000, - targetDonation: 3000000, - idolId: 3, - subtitle: "잠실 롯데월드몰 광장", - title: "블랙핑크 제니 지하철 광고", - id: 3, - idol: { - totalVotes: 650, - profilePicture: "/mocks/mock04.png", - group: "블랙핑크", - gender: "female", - name: "제니", - id: 3, - }, - }, -]; diff --git a/src/mocks/idols.js b/src/mocks/idols.js deleted file mode 100644 index 3d11b56..0000000 --- a/src/mocks/idols.js +++ /dev/null @@ -1,102 +0,0 @@ -export const IDOLS = [ - { - voteId: 1, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 0, - }, - }, - { - voteId: 2, - idol: { - totalVotes: 800, - profilePicture: "/mocks/mock02.png", - group: "아이브", - gender: "female", - name: "장원영", - id: 1, - }, - }, - { - voteId: 3, - idol: { - totalVotes: 750, - profilePicture: "/mocks/mock03.png", - group: "르세라핌", - gender: "female", - name: "채원", - id: 2, - }, - }, - { - voteId: 4, - idol: { - totalVotes: 650, - profilePicture: "/mocks/mock04.png", - group: "블랙핑크", - gender: "female", - name: "제니", - id: 3, - }, - }, - // 추가 - { - voteId: 5, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 4, - }, - }, - { - voteId: 6, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 5, - }, - }, - { - voteId: 7, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 6, - }, - }, - { - voteId: 8, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 7, - }, - }, - { - voteId: 9, - idol: { - totalVotes: 1000, - profilePicture: "/mocks/mock01.png", - group: "뉴진스", - gender: "female", - name: "민지", - id: 8, - }, - }, -]; diff --git a/src/pages/List/Donation/Donation.style.js b/src/pages/List/Donation/Donation.styles.js similarity index 80% rename from src/pages/List/Donation/Donation.style.js rename to src/pages/List/Donation/Donation.styles.js index 92b4f63..ed65245 100644 --- a/src/pages/List/Donation/Donation.style.js +++ b/src/pages/List/Donation/Donation.styles.js @@ -5,16 +5,17 @@ import { css } from "@emotion/react"; * 슬라이더 위에 고정되어 나타나는 타이틀 스타일 */ export const donationTitle = css` -margin-top: 50px; + margin-top: 50px; -color: #ffffff; -font-size: 24px; -font-weight: 700; + color: #ffffff; + font-size: 24px; + font-weight: 700; -@media (max-width: 426px) { -font-size: 4.27vw; -margin-top: 10.67vw; -}`; + @media (max-width: 426px) { + font-size: 4.27vw; + margin-top: 10.67vw; + }; +`; export const donationPageNation = css` position: relative;`; @@ -39,11 +40,11 @@ export const pageNationRight = css` &:hover { background-color: #1B1B1B; border-radius: 4px; - } + }; @media (max-width: 1365px) { - display: none; - } + display: none; + }; `; @@ -65,11 +66,11 @@ export const pageNationLeft = css` margin-right: 30px; &:hover { - background-color: #1B1B1B; - border-radius: 4px; - } + background-color: #1B1B1B; + border-radius: 4px; + }; @media (max-width: 1365px) { - display: none; - } + display: none; + }; `; diff --git a/src/pages/List/Donation/components/Card/Card.style.js b/src/pages/List/Donation/components/Card/Card.styles.js similarity index 59% rename from src/pages/List/Donation/components/Card/Card.style.js rename to src/pages/List/Donation/components/Card/Card.styles.js index 520a500..36c496a 100644 --- a/src/pages/List/Donation/components/Card/Card.style.js +++ b/src/pages/List/Donation/components/Card/Card.styles.js @@ -17,24 +17,24 @@ export const donationCardContainer = css` flex-shrink: 0; @media (max-width: 426px) { - width: 158px; - height: 303px; - } + width: 158px; + height: 303px; + }; `; /** * 이미지 영역 컨테이너 * - 버튼 및 오버레이를 절대 위치로 배치하기 위한 기준 요소 */ -export const donatioImgContainer = css` +export const donationImgContainer = css` position: relative; width: 282px; height: 293px; @media (max-width: 426px) { - width: 158px; - height: 206px; - } + width: 158px; + height: 206px; + }; `; /** @@ -78,18 +78,18 @@ export const overlaySvg = css` * - 배치 제외 나머지는 공통 컴포넌트로 대체 예정 */ export const donationButton = css` -position: absolute; -bottom: 30px; -left: 22px; + position: absolute; + bottom: 30px; + left: 22px; -z-index: 3; + z-index: 3; -font-size: 13px; + font-size: 13px; -@media (max-width: 426px) { - bottom: 4vw; - left: 1.87vw; -} + @media (max-width: 426px) { + bottom: 4vw; + left: 1.87vw; + }; `; /** @@ -97,26 +97,27 @@ font-size: 13px; * - 수직 정렬 */ export const donationDescription = css` -display: flex; -width: 100%; -flex-direction: column; -align-items: flex-start; -gap: 24px; + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + gap: 24px; `; /** * 제목 영역 (서브제목 + 제목) */ export const donationTitleContainer = css` -display: flex; -width: 100%; -flex-direction: column; -align-items: flex-start; -gap: 8px; + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + gap: 8px; -@media (max-width: 426px) { -gap: 1.6vw; -}`; + @media (max-width: 426px) { + gap: 1.6vw; + }; +`; /** * 장소(서브제목) 스타일 @@ -124,34 +125,36 @@ gap: 1.6vw; * - 투명도 적용 */ export const descriptionSubtitle = css` -color: #FFF; + color: #FFF; -text-align: center; -font-size: 16px; -font-style: normal; -font-weight: 400; -line-height: 18px; /* 112.5% */ -letter-spacing: -0.165px; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 112.5% */ + letter-spacing: -0.165px; -opacity: 0.4; + opacity: 0.4; -@media (max-width: 426px) { -font-size: 2.82vw; + @media (max-width: 426px) { + font-size: 2.82vw; + }; `; /** * 제목(조공 제목) 텍스트 스타일 */ export const descriptionTitle = css` -color: var(--white-whtie_F7F7F8, #F7F7F8); -text-align: center; -font-size: 18px; -font-style: normal; -font-weight: 500; -line-height: normal; + color: var(--white-F7F7F8, #F7F7F8); + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; -@media (max-width: 426px) { -font-size: 3.05vw; + @media (max-width: 426px) { + font-size: 3.05vw; + }; `; /** @@ -159,24 +162,25 @@ font-size: 3.05vw; * - 세로 정렬로 D-day, 진행률 등 순차적으로 배치 */ export const donationFooter = css` -width: 100%; -display: flex; -flex-direction: column;`; + width: 100%; + display: flex; + flex-direction: column; +`; /** * 하단 정보 라인 (크레딧 + D-day) * - 좌우로 나란히 배치 */ export const donationFooterUp = css` -width: 100%; -display: flex; -justify-content: space-between; + width: 100%; + display: flex; + justify-content: space-between; -margin-bottom: 4px; + margin-bottom: 4px; -@media (max-width: 426px) { -margin-bottom: 0.27vw; -}; + @media (max-width: 426px) { + margin-bottom: 0.27vw; + }; `; /** @@ -184,44 +188,48 @@ margin-bottom: 0.27vw; * - 아이콘 옆에 텍스트 배치 */ export const donationFooterLeft = css` -display: flex; -align-items: center`; + display: flex; + align-items: center; +`; /** * 크레딧 아이콘 이미지 */ export const creditImg = css` -width: 12px; -height: 12px`; + width: 12px; + height: 12px; +`; /** * 목표 금액 텍스트 스타일 */ export const targetDonation = css` -color: var(--orange-F96D69); -font-size: 12px; -font-style: normal; -font-weight: 400; -line-height: 18px; /* 150% */ -letter-spacing: -0.165px; + color: var(--orange-F96D69); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + letter-spacing: -0.165px; -@media (max-width: 426px) { -font-size: 2.67vw; -}`; + @media (max-width: 426px) { + font-size: 2.67vw; + }; +`; /** * D-Day 남은 일 수 텍스트 * - 오른쪽 정렬 스타일 */ export const donationDday = css` -color: var(--white-F7F7F8); -text-align: right; -font-size: 12px; -font-style: normal; -font-weight: 400; -line-height: 18px; /* 150% */ -letter-spacing: -0.165px; - -@media (max-width: 426px) { -font-size: 2.67vw; -}`; + color: var(--white-F7F7F8); + text-align: right; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + letter-spacing: -0.165px; + + @media (max-width: 426px) { + font-size: 2.67vw; + }; +`; diff --git a/src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.style.js b/src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.styles.js similarity index 81% rename from src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.style.js rename to src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.styles.js index aad3f6c..2ac6e60 100644 --- a/src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.style.js +++ b/src/pages/List/Donation/components/Card/ProgressBar/ProgressBar.styles.js @@ -9,12 +9,11 @@ import { css } from "@emotion/react"; * - 배경색은 흰색으로 설정되어, 진행 바의 배경 역할 */ export const progressContainer = css` -width: 100%; -height: 1px; -flex-shrink: 0; + width: 100%; + height: 1px; + flex-shrink: 0; -background-color: #ffffff -; + background-color: #ffffff; `; /** @@ -27,6 +26,7 @@ background-color: #ffffff * - 배경색은 CSS 변수 `--orange-F96D69` 사용 */ export const progressContent = (progress) => css` -width:${progress}%; -height: 100%; -background-color: var(--orange-F96D69)`; + width:${progress}%; + height: 100%; + background-color: var(--orange-F96D69); +`; diff --git a/src/pages/List/Donation/components/Card/ProgressBar/index.jsx b/src/pages/List/Donation/components/Card/ProgressBar/index.jsx index 80c2a46..4e47b7c 100644 --- a/src/pages/List/Donation/components/Card/ProgressBar/index.jsx +++ b/src/pages/List/Donation/components/Card/ProgressBar/index.jsx @@ -1,6 +1,6 @@ /** @jsxImportSource @emotion/react */ -import { progressContainer, progressContent } from "./ProgressBar.style"; +import { progressContainer, progressContent } from "./ProgressBar.styles"; /** * ProgressBar 컴포넌트 diff --git a/src/pages/List/Donation/components/Card/index.jsx b/src/pages/List/Donation/components/Card/index.jsx index 2470c85..6ec757e 100644 --- a/src/pages/List/Donation/components/Card/index.jsx +++ b/src/pages/List/Donation/components/Card/index.jsx @@ -3,7 +3,6 @@ import { creditImg, descriptionSubtitle, descriptionTitle, - donatioImgContainer, donationButton, donationCardContainer, donationDday, @@ -12,14 +11,15 @@ import { donationFooterLeft, donationFooterUp, donationImg, + donationImgContainer, donationTitleContainer, imgWrapper, overlaySvg, targetDonation, -} from "./Card.style"; // 스타일 import +} from "./Card.styles"; // 스타일 import +import Button from "@/components/Button/Button"; import { useNavigate } from "react-router-dom"; -import Button from "../../../../../components/Button/Button"; import ProgressBar from "./ProgressBar"; /** @@ -50,7 +50,7 @@ function Card({ donation }) { return (
{/* 상단 이미지 영역 */} -
+
{/* 아이돌 프로필 이미지 */} {idol.name} 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("나올 문구") - */} - - - -

모달 테스트

- - - - - - -

여기에 모달 내용이 들어갑니다.

-
- -
- {totalList.map((item) => ( -
- {item.name} -
- ))} -
-
- {totalList.map((item) => ( -
- {item.name} -
- ))} -
- -
- {credits.map((credit) => ( - - {credit} - - ))} - {/* 클래스 적용 확인을 위한 test 같은 credit 배열을 사용해서 같이 작동되는 것입니다! */} - {credits.map((credit) => ( - - {credit} - - ))} -
- - {/* 크레딧 context test */} -
- - - 현재 크레딧: {credit} -
-
- ); -}; - -// 라디오버튼 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;