Skip to content

Commit

Permalink
Merge pull request #166 from choco-team/랜덤뽑기-반응형
Browse files Browse the repository at this point in the history 
[FE] 랜덤뽑기 반응형
  • Loading branch information
@nlom0218
nlom0218 authored Jan 25, 2024
2 parents 1d22d7a + 29bb662 commit 5b6e34c
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 134 deletions.
8 changes: 8 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"ag-grid-react": "^30.2.0",
"axios": "^1.5.1",
"calendar-in-react": "^1.0.5",
"chalk": "^5.3.0",
"date-fns": "^2.30.0",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
Expand Down Expand Up @@ -82,5 +83,12 @@
"_id": "[email protected]",
"msw": {
"workerDirectory": "public"
},
"resolutions": {
"strip-ansi": "6.0.1",
"string-width": "4.2.2",
"wrap-ansi": "7.0.0"
}
}


2 changes: 2 additions & 0 deletions src/pages/Tools/RandomPick/RandomPickModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export type RandomPickSetting = {

type RandomPickModalProps = {
randomPickSetting: RandomPickSetting;
media: string;
style?: React.CSSProperties;
};

function RandomPickModal({ randomPickSetting }: RandomPickModalProps) {
Expand Down
9 changes: 3 additions & 6 deletions src/pages/Tools/RandomPick/RandomPickModal/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import theme from '@Styles/theme';
export const ModalContainer = styled.div`
padding: 5px;
display: flex; /* Use flexbox */
align-items: center; /* Align items vertically */
align-items: center;
`;

export const SmallButtonWrapper = styled.div`
Expand All @@ -23,7 +23,6 @@ export const SmallButton = styled.button<{ isOnClick?: boolean }>`
display: flex;
border-radius: 2px;
margin-right: 8px;
padding: 4px;
`;

export const IconWrapper = styled.span`
Expand All @@ -34,12 +33,11 @@ export const IconWrapper = styled.span`

export const ListSpan = styled.span`
margin: 5px;
border-radius: 2px;
min-height: 24px;
min-width: 96px;
padding: 8px;
color: black;
color: 'black';
`;

export const ListSelect = styled.select`
Expand All @@ -52,12 +50,11 @@ export const ListSelect = styled.select`
}
&:focus {
border-color: ${({ theme }) => theme.border.primary};
border-color: ${({ theme }) => theme.accentText};
}
align-items: center;
text-align: center;
padding: 8px 12px;
margin-left: 5px;
`;

export const BigBsShield = styled(BsShieldExclamation)`
Expand Down
172 changes: 104 additions & 68 deletions src/pages/Tools/RandomPick/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { AiOutlineUserAdd, AiFillSetting } from 'react-icons/ai';
import { css } from 'styled-components';

import useMedia from '@Hooks/useMedia';
import useModal from '@Hooks/useModal';

import Button from '@Components/Button';
Expand All @@ -14,6 +15,7 @@ import { MOCK_STUDENTS_LISTS } from './mock';
import * as S from './style';

function RandomPick() {
const media = useMedia();
const [randomPickSetting, setRandomPickSetting] = useState<RandomPickSetting>(
{
studentsListId: undefined,
Expand Down Expand Up @@ -44,6 +46,10 @@ function RandomPick() {
setbackground('white');
};

const lightGreen = 'rgb(23, 142, 23)';
const darkGreen = 'rgb(20, 84, 13)';
const darkYellow = 'rgb(236, 230, 204)';

const handlePick = () => {
//학생 명단 셔플하기
for (let i = studentsList.length - 1; i >= 0; i--) {
Expand Down Expand Up @@ -106,77 +112,107 @@ function RandomPick() {

return (
<S.Layout>
<S.RandomResult
backgroundImage={
background == 'wood' ? woodbackground : whitebackground
}
>
<S.SelectBackgroundButtonWrapper justifyContent="space-between">
<S.WoodBackgroundButton
onClick={toggleWoodBackground}
backgroundColor="#007200"
hoverBackground="#14540d"
textColor="white"
>
G
</S.WoodBackgroundButton>
<S.WoodBackgroundButton
onClick={toggleWhiteBackground}
backgroundColor="white"
hoverBackground="#ece6cc"
textColor="black"
{media === 'mobile' ? (
<>
{/* <Mobile
randomPickSetting={randomPickSetting}
studentsList={studentsList}
pickedStudents={pickedStudents}
handleConfirm={handleConfirm}
handlePick={handlePick}
/> */}
</>
) : (
<>
<S.RandomResult
media={media}
backgroundImage={
background == 'wood' ? woodbackground : whitebackground
}
>
W
</S.WoodBackgroundButton>
</S.SelectBackgroundButtonWrapper>
<S.ResultWrapper color={background == 'wood' ? 'white' : 'black'}>
{pickedStudents.length !== 0 && (
<p>
<S.ResultSpan>{pickedStudents.join(' ')}</S.ResultSpan>
</p>
)}

{!localStorage.getItem('random-pick-setting') && (
<p>학생 목록을 선택하세요</p>
)}

{studentsList.length === 0 &&
localStorage.getItem('random-pick-setting') && (
<>
<S.SelectBackgroundButtonWrapper justifyContent="space-between">
<S.WoodBackgroundButton
media={media}
onClick={toggleWoodBackground}
backgroundColor={lightGreen}
hoverBackground={darkGreen}
textColor="white"
>
G
</S.WoodBackgroundButton>
<S.WoodBackgroundButton
media={media}
onClick={toggleWhiteBackground}
backgroundColor="white"
hoverBackground={darkYellow}
textColor="black"
>
W
</S.WoodBackgroundButton>
</S.SelectBackgroundButtonWrapper>
<S.ResultWrapper color={background == 'wood' ? 'white' : 'black'}>
{pickedStudents.length !== 0 && (
<p>
모든 학생을 선정했습니다. 확인을 누르면 처음부터 다시 선정할
수 있습니다.
<S.ResultSpan media={media}>
{pickedStudents.join(' ')}
</S.ResultSpan>
</p>

<Button
onClick={handleConfirm}
$style={css`
margin: 20px;
`}
>
확인
</Button>
</>
)}
</S.ResultWrapper>
<S.ButtonWrapper>
<Button size="lg">
<AiOutlineUserAdd />
<div onClick={handlePick}>뽑기</div>
</Button>
<Button
size="lg"
onClick={() => {
openModal(
<RandomPickModal randomPickSetting={randomPickSetting} />,
);
}}
>
<AiFillSetting />
<div>설정</div>
</Button>
</S.ButtonWrapper>
</S.RandomResult>
)}

{!localStorage.getItem('random-pick-setting') && (
<S.CheckParagraph media={media}>
학생 목록을 선택하세요
</S.CheckParagraph>
)}

{studentsList.length === 0 &&
localStorage.getItem('random-pick-setting') && (
<>
<S.CheckParagraph media={media}>
모든 학생을 선정했습니다. 확인을 누르면 처음부터 다시
선정할 수 있습니다.
</S.CheckParagraph>

<Button
onClick={handleConfirm}
$style={css`
margin: 20px;
`}
size={media === 'tablet' ? 'sm' : 'lg'}
>
확인
</Button>
</>
)}
</S.ResultWrapper>
<S.ButtonWrapper>
<Button
onClick={handlePick}
size={media === 'tablet' ? 'sm' : 'lg'}
>
<AiOutlineUserAdd />
뽑기
</Button>
<Button
size={media === 'tablet' ? 'sm' : 'lg'}
onClick={() => {
{
openModal(
<RandomPickModal
randomPickSetting={randomPickSetting}
media={media}
/>,
);
}
}}
>
<AiFillSetting />
설정
</Button>
</S.ButtonWrapper>
</S.RandomResult>
</>
)}
</S.Layout>
);
}
Expand Down
35 changes: 22 additions & 13 deletions src/pages/Tools/RandomPick/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { flexCustom } from '@Styles/common';
import theme from '@Styles/theme';

type RandomResultLayoutProps = {
backgroundImage: string;
backgroundImage?: string;
media: string;
};

export const Layout = styled.div`
Expand All @@ -25,7 +26,8 @@ export const RandomResult = styled.div<RandomResultLayoutProps>`
aspect-ratio: 5/3;
margin: auto;
border-radius: 10px;
background-image: url(${(props) => props.backgroundImage});
background-image: ${(props) =>
props.media !== 'mobile' ? `url(${props.backgroundImage})` : 'none'};
background-size: cover;
background-repeat: no-repeat;
background-position: center;
Expand All @@ -36,7 +38,7 @@ export const ChoosedComponentsContainer = styled.div`
${flexCustom('row', 'center', 'flex-start')}
width: 100%;
max-width: 720px;
border: 3px solid ${theme.color.primary[500]};
border: 3px solid ${theme.color.primary};
border-radius: 3px;
margin: 20px 0 20px 0;
padding: 16px;
Expand Down Expand Up @@ -65,19 +67,19 @@ export const BackgroundButtonContainer = styled.div`
${flexCustom('row', 'center', 'center')}
`;

interface backgroundButtonProps {
type backgroundButtonProps = {
backgroundColor: string;
hoverBackground: string;
textColor: string;
}
media: string;
};

export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
${flexCustom('row', 'center', 'center')}
width: 24px;
min-width: 24px;
height: 24px;
margin: 8px 4px;
width: ${(props) => (props.media === 'tablet' ? '20px' : '28px')};
margin: 12px 12px 8px 0px;
border-radius: 50%;
padding: 0px;
background-color: ${(props) => props.backgroundColor};
border-color: ${(props) => props.backgroundColor};
color: ${(props) => props.textColor};
Expand All @@ -88,6 +90,7 @@ export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
&:active {
background-color: ${(props) => props.hoverBackground};
}
font-size: ${(props) => (props.media === 'tablet' ? 'smaller' : 'large')};
`;

export const ResultWrapper = styled.div<ResultWrapperProps>`
Expand All @@ -98,13 +101,21 @@ export const ResultWrapper = styled.div<ResultWrapperProps>`
text-align: center;
`;

export const ResultSpan = styled.span`
type ResultSpanProps = {
media: string;
};

export const ResultSpan = styled.span<ResultSpanProps>`
display: inline-block;
text-align: center;
font-size: 3.6rem;
max-width: 840px;
word-break: break-all;
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, gold 50%); */
font-size: ${(props) => (props.media === 'tablet' ? 'large' : {})};
`;

export const CheckParagraph = styled.p<ResultSpanProps>`
font-size: ${(props) => (props.media === 'tablet' ? 'large' : {})};
`;

export const ButtonWrapper = styled.div`
Expand All @@ -115,8 +126,6 @@ export const ButtonWrapper = styled.div`
display: flex;
justify-content: flex-end;
align-items: flex-end;
display: flex;
gap: 10px;
margin: 10px;
Expand Down
Loading

0 comments on commit 5b6e34c

Please sign in to comment.