Merge branch 'dev' into 11-refactor-and-organize-various-button-compo…

…nents
academic-relations · Oct 8, 2024 · fafd5ec · fafd5ec
2 parents b337801 + bd6f17d
commit fafd5ec
Show file tree

Hide file tree

Showing 25 changed files with 128 additions and 89 deletions.
diff --git a/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx b/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx
@@ -10,7 +10,7 @@ interface BreadCrumbItemProps {
 
 const BreadCrumbInner = styled.div<{ disabled: boolean }>`
   color: ${({ theme, disabled }) =>
-    disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY};
+    disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY};
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 `;
 

diff --git a/packages/web/src/common/components/Buttons/Button.tsx b/packages/web/src/common/components/Buttons/Button.tsx
@@ -38,7 +38,7 @@ const ButtonDefaultInner = styled(ButtonInner)`
   background: ${({ theme }) => theme.colors.PRIMARY};
   cursor: pointer;
   &:hover {
-    background: ${({ theme }) => theme.colors.MINT[800]};
+    background: ${({ theme }) => theme.colors.GREEN[800]};
   }
 `;
 
@@ -47,13 +47,13 @@ const ButtonOutlinedInner = styled(ButtonInner)`
   background: ${({ theme }) => theme.colors.WHITE};
   cursor: pointer;
   &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+    border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   }
 `;
 
 const ButtonDisabledInner = styled(ButtonInner)`
-  color: ${({ theme }) => theme.colors.GRAY[300]};
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   background: ${({ theme }) => theme.colors.GRAY[100]};
   cursor: not-allowed;
 `;

diff --git a/packages/web/src/common/components/Buttons/TextButton.tsx b/packages/web/src/common/components/Buttons/TextButton.tsx
@@ -9,7 +9,7 @@ const StyledTextButton = styled.button<ButtonProps>`
   background: none;
   border: none;
   color: ${({ theme, disabled }) =>
-    disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY};
+    disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   line-height: 20px;

diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
@@ -15,7 +15,7 @@ const getBackgroundColor = (
   type?: CalendarDateProps["type"],
 ) => {
   if (type === "Default") return theme.colors.PRIMARY;
-  if (type === "Past/Future") return theme.colors.GRAY[300];
+  if (type === "Past/Future") return theme.colors.GRAY[100];
   return theme.colors.WHITE;
 };
 
@@ -78,12 +78,12 @@ const DateContainer = styled.div<CalendarDateProps>`
   }}
   background-color: ${({ type, theme }) => {
     if (type === "Past/Future" || type === "Default") return "transparent";
-    if (type === "Pass") return theme.colors.MINT[300];
+    if (type === "Pass") return theme.colors.GREEN[300];
     return theme.colors.PRIMARY;
   }};
   color: ${({ type, theme }) => {
     if (type === "Default") return theme.colors.BLACK;
-    if (type === "Past/Future") return theme.colors.GRAY[300];
+    if (type === "Past/Future") return theme.colors.GRAY[100];
     return theme.colors.WHITE;
   }};
 `;
@@ -118,11 +118,11 @@ const DateWrapper = styled.div<{
   background: ${({ type, theme }) => {
     switch (type) {
       case "End":
-        return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.MINT[300]} 50%)`;
+        return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
       case "Start":
-        return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.MINT[300]} 50%)`;
+        return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
       case "Pass":
-        return `${theme.colors.MINT[300]}`;
+        return `${theme.colors.GREEN[300]}`;
       default:
         return "transparent";
     }

diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx
@@ -17,7 +17,7 @@ const DayWrapper = styled.div<{
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   line-height: 20px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
-  color: ${({ theme }) => theme.colors.GRAY[600]};
+  color: ${({ theme }) => theme.colors.GRAY[400]};
   width: 100%;
   ${({ size }) => {
     switch (size) {

diff --git a/packages/web/src/common/components/Checkbox.tsx b/packages/web/src/common/components/Checkbox.tsx
@@ -18,10 +18,10 @@ const CheckboxInner = styled.div<{ disabled: boolean }>`
   border-radius: 4px;
   border: 1px solid
     ${({ disabled, theme }) =>
-      disabled ? theme.colors.GRAY[300] : theme.colors.BLACK};
+      disabled ? theme.colors.GRAY[100] : theme.colors.BLACK};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   background-color: ${({ disabled, theme }) =>
-    disabled ? theme.colors.GRAY[100] : "transparent"};
+    disabled ? theme.colors.GRAY[50] : "transparent"};
 `;
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -34,7 +34,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
       <Icon
         type="check"
         size={16}
-        color={disabled ? colors.GRAY[300] : colors.BLACK}
+        color={disabled ? colors.GRAY[100] : colors.BLACK}
       />
     )}
   </CheckboxInner>

diff --git a/packages/web/src/common/components/CheckboxOption.tsx b/packages/web/src/common/components/CheckboxOption.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Checkbox from "./Checkbox";
+import Typography from "./Typography";
+
+interface CheckboxOptionProps {
+  optionText: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const CheckboxOptionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  padding-left: 2px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    gap: 8px;
+  }
+`;
+
+const ResponsiveTypography = styled(Typography)`
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+
+  @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) {
+    font-size: 14px;
+  }
+`;
+
+const CheckboxOption: React.FC<CheckboxOptionProps> = ({
+  optionText,
+  checked,
+  onClick,
+}) => (
+  <CheckboxOptionWrapper onClick={onClick}>
+    <Checkbox checked={checked} />
+    <ResponsiveTypography
+      ff="PRETENDARD"
+      color="BLACK"
+      onClick={e => {
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {optionText}
+    </ResponsiveTypography>
+  </CheckboxOptionWrapper>
+);
+
+export default CheckboxOption;
diff --git a/packages/web/src/common/components/Forms/ItemNumberInput.tsx b/packages/web/src/common/components/Forms/ItemNumberInput.tsx
@@ -30,13 +30,13 @@ const LabelWithIcon = styled.div`
 `;
 
 const StyledInfoIcon = styled(InfoOutlinedIcon)`
-  color: ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
   cursor: pointer;
   font-size: 16px;
 `;
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -62,7 +62,7 @@ const RightContentWrapper = styled.div<{ hasError: boolean }>`
   line-height: 20px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ theme, hasError }) =>
-    hasError ? theme.colors.RED[600] : theme.colors.GRAY[300]};
+    hasError ? theme.colors.RED[700] : theme.colors.GRAY[100]};
 `;
 
 const Input = styled.input<ItemNumberInputProps & { hasError: boolean }>`
@@ -88,7 +88,7 @@ const Input = styled.input<ItemNumberInputProps & { hasError: boolean }>`
 
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled ? theme.colors.GRAY[300] : undefined};
+      !hasError && !disabled ? theme.colors.GRAY[100] : undefined};
   }
 
   &::placeholder {

diff --git a/packages/web/src/common/components/Forms/PhoneInput.tsx b/packages/web/src/common/components/Forms/PhoneInput.tsx
@@ -37,7 +37,7 @@ export interface PhoneInputProps
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -67,7 +67,7 @@ const Input = styled.input.withConfig({
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};

diff --git a/packages/web/src/common/components/Forms/SearchSelect/index.tsx b/packages/web/src/common/components/Forms/SearchSelect/index.tsx
@@ -43,7 +43,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -71,7 +71,7 @@ const Input = styled.input<InputProps>`
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};
@@ -99,7 +99,7 @@ const SearchList = styled.div`
   opacity: 1;
   background-color: ${({ theme }) => theme.colors.WHITE};
   border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   padding: 8px;
   max-height: 280px;
   overflow-y: auto;

diff --git a/packages/web/src/common/components/Forms/Select.tsx b/packages/web/src/common/components/Forms/Select.tsx
@@ -44,7 +44,7 @@ const StyledSelect = styled.div<{
   border: 1px solid
     ${({ theme, hasError, isOpen }) => {
       if (isOpen) return theme.colors.PRIMARY;
-      return hasError ? theme.colors.RED[600] : theme.colors.GRAY[200];
+      return hasError ? theme.colors.RED[700] : theme.colors.GRAY[200];
     }};
   border-radius: 4px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
@@ -55,7 +55,7 @@ const StyledSelect = styled.div<{
   &:focus,
   &:hover:not(:focus) {
     border-color: ${({ theme, isOpen }) =>
-      isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[300]};
+      isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[100]};
   }
 
   ${({ disabled }) => disabled && disabledStyle}
@@ -68,7 +68,7 @@ const Dropdown = styled.div`
   width: 100%;
   margin-top: 4px;
   padding: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.GRAY[300]};
+  border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.colors.WHITE};
   gap: 4px;
@@ -84,7 +84,7 @@ const Option = styled.div<{ selectable?: boolean }>`
   line-height: 20px;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   color: ${({ theme, selectable }) =>
-    selectable ? theme.colors.BLACK : theme.colors.GRAY[300]};
+    selectable ? theme.colors.BLACK : theme.colors.GRAY[100]};
   ${({ selectable }) =>
     selectable &&
     css`
@@ -103,7 +103,7 @@ const NoOption = styled.div`
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   text-align: center;
   pointer-events: none;
-  color: ${({ theme }) => theme.colors.GRAY[300]};
+  color: ${({ theme }) => theme.colors.GRAY[100]};
 `;
 
 const IconWrapper = styled.div`

diff --git a/packages/web/src/common/components/Forms/TextInput.tsx b/packages/web/src/common/components/Forms/TextInput.tsx
@@ -17,7 +17,7 @@ export interface TextInputProps
 }
 
 const errorBorderStyle = css`
-  border-color: ${({ theme }) => theme.colors.RED[600]};
+  border-color: ${({ theme }) => theme.colors.RED[700]};
 `;
 
 const disabledStyle = css`
@@ -53,7 +53,7 @@ const Input = styled.input.attrs<TextInputProps>(({ area }) => ({
   }
   &:hover:not(:focus) {
     border-color: ${({ theme, hasError, disabled }) =>
-      !hasError && !disabled && theme.colors.GRAY[300]};
+      !hasError && !disabled && theme.colors.GRAY[100]};
   }
   &::placeholder {
     color: ${({ theme }) => theme.colors.GRAY[200]};

diff --git a/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx b/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components";
 const StyledErrorMessage = styled.span`
   display: block;
   padding: 0px 0px 0px 2px;
-  color: ${({ theme }) => theme.colors.RED[600]};
+  color: ${({ theme }) => theme.colors.RED[700]};
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   font-size: 12px;

diff --git a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
@@ -32,7 +32,7 @@ const MobileNavMenuInner = styled.div`
   justify-content: flex-start;
   gap: 8px;
 
-  background: ${({ theme }) => theme.colors.BACKGROUND};
+  background: ${({ theme }) => theme.colors.WHITE};
 
   @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.xs}) {
     display: none;

diff --git a/packages/web/src/common/components/Radio/RadioOption.tsx b/packages/web/src/common/components/Radio/RadioOption.tsx
@@ -22,6 +22,11 @@ const RadioOptionInner = styled.div`
   line-height: 20px;
   font-style: normal;
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
+  cursor: pointer;
+
+  & > * {
+    pointer-events: none;
+  }
 `;
 
 const RadioOption = <T extends string>({

diff --git a/packages/web/src/common/components/SearchInput.tsx b/packages/web/src/common/components/SearchInput.tsx
@@ -18,7 +18,7 @@ const SearchInputWrapper = styled.div`
   align-items: center;
   flex: 1;
   &:hover {
-    border-color: ${({ theme }) => theme.colors.GRAY[300]};
+    border-color: ${({ theme }) => theme.colors.GRAY[100]};
   }
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.PRIMARY};

diff --git a/packages/web/src/common/components/SelectedItem.tsx b/packages/web/src/common/components/SelectedItem.tsx
@@ -38,7 +38,7 @@ const SelectedItem: React.FC<SelectedItemProps> = ({
     <Typography
       fs={16}
       lh={20}
-      color={isDisabled ? "GRAY.300" : "BLACK"}
+      color={isDisabled ? "GRAY.100" : "BLACK"}
       style={{ flex: 1 }}
     >
       {text}

diff --git a/packages/web/src/common/components/StepProcess/StepProcess.tsx b/packages/web/src/common/components/StepProcess/StepProcess.tsx
@@ -30,7 +30,7 @@ const StepContainer = styled.div<{ width: string }>`
   &::before {
     content: "";
     position: absolute;
-    background: ${props => props.theme.colors.GRAY[300]};
+    background: ${props => props.theme.colors.GRAY[100]};
     height: 4px;
     border-radius: 2px;
     width: 100%;
@@ -44,8 +44,8 @@ const StepContainer = styled.div<{ width: string }>`
     position: absolute;
     background: linear-gradient(
       to right,
-      ${props => props.theme.colors.MINT[300]} 100%,
-      ${props => props.theme.colors.GRAY[300]} 100%
+      ${props => props.theme.colors.GREEN[300]} 100%,
+      ${props => props.theme.colors.GRAY[100]} 100%
     );
     height: 4px;
     border-radius: 2px;