Skip to content

Commit

Permalink
Merge branch 'main' into feat-18
Browse files Browse the repository at this point in the history
  • Loading branch information
Bersk3r committed May 11, 2024
2 parents c36a190 + 3c72ef1 commit 1d72fc9
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 8 deletions.
166 changes: 166 additions & 0 deletions src/assets/icons/Spinner.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import * as React from 'react';
const Spinner = ({ width = 200, height = 200, fill = '#f96d69', ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
width={width}
height={height}
style={{
shapeRendering: 'auto',
display: 'block',
background: 'transparent',
}}
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g>
<g transform="rotate(0 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.9166666666666666s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(30 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.8333333333333334s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(60 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.75s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(90 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.6666666666666666s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(120 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.5833333333333334s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(150 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.5s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(180 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.4166666666666667s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(210 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.3333333333333333s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(240 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.25s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(270 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.16666666666666666s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(300 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="-0.08333333333333333s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g transform="rotate(330 50 50)">
<rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
<animate
repeatCount="indefinite"
begin="0s"
dur="1s"
keyTimes="0;1"
values="1;0"
attributeName="opacity"
/>
</rect>
</g>
<g />
</g>
</svg>
);
export default Spinner;
8 changes: 5 additions & 3 deletions src/components/CustomButton/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types';

import { motion } from 'framer-motion';
import s from './styles.module.scss';

/**
Expand All @@ -27,7 +27,9 @@ const CustomButton = ({
children,
}) => {
return (
<button
<motion.button
initial={{ scale: 1 }}
whileTap={{ scale: 0.9 }}
className={s.button}
type="button"
onClick={onClick}
Expand All @@ -41,7 +43,7 @@ const CustomButton = ({
</div>
)}
{btnText}
</button>
</motion.button>
);
};

Expand Down
9 changes: 8 additions & 1 deletion src/pages/ListPage/Credit/index.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import styles from './styles.module.scss';
import CreditIcon from '@/assets/icons/Credit';
import { motion } from 'framer-motion';

const Credit = () => {
return (
Expand All @@ -13,7 +14,13 @@ const Credit = () => {
</div>
</div>
<div>
<button className={styles.charge}>충전하기</button>
<motion.button
initial={{ scale: 1 }}
whileTap={{ scale: 0.9 }}
className={styles.charge}
>
충전하기
</motion.button>
</div>
</section>
);
Expand Down
16 changes: 12 additions & 4 deletions src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@ import PropTypes from 'prop-types';
import styles from './styles.module.scss';
import { numberWithCommas } from '@/utils/numberWithCommas';
import Profile from '@/components/Profile';
import { motion } from 'framer-motion';

/**
*
*
* @param {object} idol 아이돌 객체
* @param {number} ranking 아이돌 순위
*/

const ChartElement = ({ idol, ranking }) => {
const { name, profilePicture } = idol;
const totalVotes = numberWithCommas(idol.totalVotes);

return (
<li className={styles.container}>
<motion.li
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
className={styles.container}
>
<div className={styles.idolInfo}>
<div className={styles.img}>
<Profile size="sm" imageUrl={profilePicture} />
Expand All @@ -24,11 +30,13 @@ const ChartElement = ({ idol, ranking }) => {
<div className={styles.name}>{name}</div>
</div>
<div className={styles.totalVotes}>{totalVotes}</div>
</li>
</motion.li>
);
};

ChartElement.propTypes = {
idol: PropTypes.object,
ranking: PropTypes.number,
};

export default ChartElement;
1 change: 1 addition & 0 deletions src/pages/ListPage/MonthlyChart/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import CustomButton from '@/components/CustomButton';
import Chart from '@/assets/icons/Chart';
import { boys, girls } from './mock';
import useSetNumOfItemsToShow from '@/hooks/useSetNumberOfItemsToShow';
import Spinner from '@/assets/icons/Spinner';

const MonthlyChart = () => {
const [idolList, setIdolList] = useState([]);
Expand Down
8 changes: 8 additions & 0 deletions src/pages/ListPage/MonthlyChart/styles.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -119,3 +119,11 @@
background: #ffffff1a;
}
}

.loading_spinner{
min-height: 418px;
display: flex;
align-items: center;
justify-content: center;

}
2 changes: 2 additions & 0 deletions src/pages/TestPage/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import Modal from '@/components/Modal';
import ModalHeader from '@/components/Modal/components/ModalHeader';
import Profile from '@/components/Profile';
import LoadingError from '@/components/LoadingError';
import Spinner from '@/assets/icons/Spinner';

const TestPage = () => {
const [isOpen, openModal, closeModal] = useModal();

return (
<div style={{ backgroundColor: 'black' }}>
<Header />
<Spinner />
<div
style={{ display: 'flex', justifyContent: 'center', padding: '24px' }}
></div>
Expand Down

0 comments on commit 1d72fc9

Please sign in to comment.