Merge pull request #151 from choco-team/143-randompick

143 randompick
choco-team · Dec 3, 2023 · 029cda8 · 029cda8
2 parents 0bf9b27 + 9baff60
commit 029cda8
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 30 deletions.
diff --git a/src/components/Input/style.ts b/src/components/Input/style.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { INPUT_THEME } from './constant';
+import { INPUT_THEME } from './constants';
 import * as T from './type';
 
 export const Input = styled.input<T.StyledInput>`

diff --git a/src/pages/ClassManagement/LunchMenu/MenusInformation/index.tsx b/src/pages/ClassManagement/LunchMenu/MenusInformation/index.tsx
@@ -9,7 +9,7 @@ import { ROUTE_PATH } from '@Constant/routePath';
 
 import Button from '@Components/Button';
 
-import { LUNCH_MENU_GUIDES } from './constant';
+import { LUNCH_MENU_GUIDES } from './constants';
 import * as S from './style';
 import { MenusInformationProps } from './type';
 import AllergyModal from '../AllergyModal';

diff --git a/src/pages/Tools/RandomPick/RandomPickModal/index.tsx b/src/pages/Tools/RandomPick/RandomPickModal/index.tsx
@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import { IoEllipse, IoEllipseOutline } from 'react-icons/io5';
 
 import useModal from '@Hooks/useModal';
 
 import Button from '@Components/Button';
 import Input from '@Components/Input';
 
+import theme from '@Styles/theme';
+
 import * as S from './style';
 import { MOCK_STUDENTS_LISTS } from '../mock';
 
@@ -85,11 +88,18 @@ function RandomPickModal({ randomPickSetting }: RandomPickModalProps) {
   return (
     <>
       <S.ModalContainer>
+        <S.BigBsShield />
+        <S.WarningSpan>
+          명렬표 또는 중복 여부를 바꾸면 뽑기가 초기화됩니다
+        </S.WarningSpan>
+      </S.ModalContainer>
+      <S.ModalContainer>
+        <S.ListSpan>명렬표 선택</S.ListSpan>
         <S.ListSelect
           value={settings.studentsListId}
           onChange={handleChangeStudentsListId}
         >
-          <option value={0}>명렬표 선택</option>
+          <option value={0}>클릭하여 명렬표 선택</option>
           {MOCK_STUDENTS_LISTS.map(({ id, name }) => (
             <option key={id} value={id}>
               {name}
@@ -98,6 +108,7 @@ function RandomPickModal({ randomPickSetting }: RandomPickModalProps) {
         </S.ListSelect>
       </S.ModalContainer>
       <S.ModalContainer>
+        <S.ListSpan>학생 수 선택</S.ListSpan>
         <label>
           <Input
             size="sm"
@@ -112,26 +123,43 @@ function RandomPickModal({ randomPickSetting }: RandomPickModalProps) {
         </label>
       </S.ModalContainer>
       <S.ModalContainer>
+        <S.ListSpan>중복 여부</S.ListSpan>
+
         <S.SmallButton
           value="YES"
           isOnClick={settings.isAllowDuplication}
           onClick={handleClickDuplication}
         >
+          <S.IconWrapper>
+            {settings.isAllowDuplication ? (
+              <IoEllipse color={theme.color.primary[300]} />
+            ) : (
+              <IoEllipseOutline />
+            )}
+          </S.IconWrapper>
           학생 중복뽑기
         </S.SmallButton>
         <S.SmallButton
           value="NO"
           isOnClick={!settings.isAllowDuplication}
           onClick={handleClickDuplication}
         >
+          <S.IconWrapper>
+            {settings.isAllowDuplication ? (
+              <IoEllipseOutline />
+            ) : (
+              <IoEllipse color={theme.color.primary[300]} />
+            )}
+          </S.IconWrapper>
           뽑힌 학생 제외하기
         </S.SmallButton>
       </S.ModalContainer>
       <S.SmallButtonWrapper>
-        <Button onClick={handleCancelBtn}>취소</Button>
+        <Button concept="text" variant="gray" onClick={handleCancelBtn}>
+          취소
+        </Button>
         <Button onClick={handleSaveBtn}>저장</Button>
       </S.SmallButtonWrapper>
-      <p>명렬표와 중복 여부를 수정하면 처음부터 다시 학생을 뽑게 됩니다</p>
     </>
   );
 }

diff --git a/src/pages/Tools/RandomPick/RandomPickModal/style.ts b/src/pages/Tools/RandomPick/RandomPickModal/style.ts
@@ -1,42 +1,72 @@
+import { BsShieldExclamation } from 'react-icons/bs';
 import styled from 'styled-components';
 
 import theme from '@Styles/theme';
 
 export const ModalContainer = styled.div`
   padding: 5px;
+  display: flex; /* Use flexbox */
+  align-items: center; /* Align items vertically */
 `;
 
 export const SmallButtonWrapper = styled.div`
   display: flex;
   padding: 0;
   margin-top: 24px;
-  justify-content: center;
-  align-items: center;
+  justify-content: right;
   button {
     margin-right: 5px;
   }
 `;
 
 export const SmallButton = styled.button<{ isOnClick?: boolean }>`
-  background-color: ${({ isOnClick }) =>
-    isOnClick ? theme.color.primary[500] : 'grey'};
-  border: black;
-  color: white;
+  display: flex;
   border-radius: 2px;
-  margin: 5px;
+  margin-right: 8px;
   padding: 4px;
 `;
 
-export const ListSpan = styled.span`
-  margin-right: 5px;
+export const IconWrapper = styled.span`
+  display: flex;
+  margin-right: 2px;
+  align-items: center;
 `;
 
-export const ListSelect = styled.select`
-  background-color: grey;
+export const ListSpan = styled.span`
+  margin: 5px;
+
   border-radius: 2px;
   min-height: 24px;
-  color: white;
+  min-width: 96px;
+  padding: 8px;
+  color: black;
+`;
+
+export const ListSelect = styled.select`
+  border: 1px solid ${theme.color.gray[300]};
+  border-radius: 4px;
+  min-height: 32px;
+  color: black;
+  &:hover {
+    border-color: ${({ theme }) => theme.hoverBorder.gray};
+  }
+
+  &:focus {
+    border-color: ${({ theme }) => theme.border.primary};
+  }
   align-items: center;
   text-align: center;
-  padding: 4px;
+  padding: 8px 12px;
+  margin-left: 5px;
+`;
+
+export const BigBsShield = styled(BsShieldExclamation)`
+  width: 20px;
+  height: 20px;
+  margin: 4px;
+  color: #cc0000;
+`;
+
+export const WarningSpan = styled.span`
+  color: #cc0000;
 `;
diff --git a/src/pages/Tools/RandomPick/index.tsx b/src/pages/Tools/RandomPick/index.tsx
@@ -112,18 +112,22 @@ function RandomPick() {
         }
       >
         <S.SelectBackgroundButtonWrapper justifyContent="space-between">
-          <S.BackgroundButtonContainer>
-            <S.WoodBackgroundButton
-              onClick={toggleWoodBackground}
-              backgroundColor="#007200"
-              hoverBackground="#14540d"
-            />
-            <S.WoodBackgroundButton
-              onClick={toggleWhiteBackground}
-              backgroundColor="white"
-              hoverBackground="#ece6cc"
-            />
-          </S.BackgroundButtonContainer>
+          <S.WoodBackgroundButton
+            onClick={toggleWoodBackground}
+            backgroundColor="#007200"
+            hoverBackground="#14540d"
+            textColor="white"
+          >
+            G
+          </S.WoodBackgroundButton>
+          <S.WoodBackgroundButton
+            onClick={toggleWhiteBackground}
+            backgroundColor="white"
+            hoverBackground="#ece6cc"
+            textColor="black"
+          >
+            W
+          </S.WoodBackgroundButton>
         </S.SelectBackgroundButtonWrapper>
         <S.ResultWrapper color={background == 'wood' ? 'white' : 'black'}>
           {pickedStudents.length !== 0 && (

diff --git a/src/pages/Tools/RandomPick/style.ts b/src/pages/Tools/RandomPick/style.ts
@@ -68,6 +68,7 @@ export const BackgroundButtonContainer = styled.div`
 interface backgroundButtonProps {
   backgroundColor: string;
   hoverBackground: string;
+  textColor: string;
 }
 
 export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
@@ -79,6 +80,7 @@ export const WoodBackgroundButton = styled(Button)<backgroundButtonProps>`
   border-radius: 50%;
   background-color: ${(props) => props.backgroundColor};
   border-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.textColor};
   &:hover {
     background-color: ${(props) => props.hoverBackground};
   }