Merge branch 'main' of https://github.com/sopt-makers/sopt-playground-frontend into feat/#1729

; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.

Author: pepperdad

public/icons/img/SoptReport/popup/MO.png

@@ -21,6 +21,7 @@ interface BottomSheetSelectProps {
   onChange: (value: string) => void;
   icon?: ReactNode;
   className?: string;
+  disabled?: boolean;
 }
 
 const BottomSheetSelect = ({
@@ -31,6 +32,7 @@ const BottomSheetSelect = ({
   onChange,
   icon,
   className,
+  disabled = false,
 }: BottomSheetSelectProps) => {
   const [open, setOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(value);
@@ -62,15 +64,24 @@ const BottomSheetSelect = ({
     };
   }, [open]);
 
+  useEffect(() => {
+    setSelectedValue(value);
+    setTemporaryValue(value);
+  }, [value]);
+
   const getSelectedLabel = (value: string) => {
-    return options.find((option) => option.value === value)?.label;
+    return options.find((option) => option.value === value)?.label || value;
   };
 
   return (
     <Container>
-      <InputField onClick={handleOpen} className={className}>
-        {selectedValue ? <p>{getSelectedLabel(selectedValue)}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
-        {icon || (
+      <InputField onClick={handleOpen} className={className} disabled={disabled}>
+        {selectedValue !== null && selectedValue !== undefined ? (
+          <p>{getSelectedLabel(selectedValue)}</p>
+        ) : (
+          <p style={{ color: '#808087' }}>{placeholder}</p>
+        )}
+        {!icon && !disabled && (
           <IconChevronDown
             style={{
               width: 20,
@@ -115,7 +126,7 @@ const Container = styled.div`
   position: relative;
 `;
 
-const InputField = styled.div`
+const InputField = styled.div<{ disabled: boolean }>`
   display: flex;
   gap: 12px;
   align-items: center;
@@ -127,6 +138,7 @@ const InputField = styled.div`
   ${fonts.BODY_16_M};
 
   width: 100%;
+  pointer-events: ${({ disabled }) => disabled && 'none'};
 `;
 
 const Overlay = styled.div`

public/icons/img/SoptReport/popup/PC.png

@@ -1,6 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { LINK_TITLES } from '@/components/members/upload/constants';
 import MemberSelectOptions from '@/components/members/upload/forms/SelectOptions';
 
 import EditableSelect from './EditableSelect';
@@ -11,7 +10,7 @@ export default {
 
 const Template: StoryFn<typeof EditableSelect> = (args) => (
   <EditableSelect {...args}>
-    <MemberSelectOptions options={LINK_TITLES} />
+    <MemberSelectOptions options={['option1', 'option2', 'option3']} />
   </EditableSelect>
 );
 

src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx

@@ -60,15 +60,15 @@ export const HomePopup = () => {
         <StPopupModal>
           <Responsive only='desktop'>
             <LoggingClick eventKey='adPopupBody'>
-              <a href='https://playground.sopt.org/group/list?category=번쩍'>
-                <StImage src='/icons/img/crew_home_popup_mo.png' />
+              <a href='https://playground.sopt.org/mySoptReport'>
+                <StImage src='/icons/img/SoptReport/popup/PC.png' />
               </a>
             </LoggingClick>
           </Responsive>
           <Responsive only='mobile'>
             <LoggingClick eventKey='adPopupBody'>
-              <a href='https://playground.sopt.org/group/list?category=번쩍'>
-                <StImage src='/icons/img/crew_home_popup_mo.png' />
+              <a href='https://playground.sopt.org/mySoptReport'>
+                <StImage src='/icons/img/SoptReport/popup/MO.png' />
               </a>
             </LoggingClick>
           </Responsive>

src/components/common/EditableSelect.stories.tsx

@@ -141,7 +141,7 @@ const StyledInput = styled.input`
 `;
 
 const StyledPreview = styled.img`
-  border-radius: 6px;
+  border-radius: 26px;
   width: inherit;
   height: inherit;
   object-fit: cover;
@@ -184,14 +184,15 @@ const StyledEditButton = styled.button`
   border-top-left-radius: 25px;
   border-bottom-left-radius: 25px;
   cursor: pointer;
+  line-height: 0;
 
   ${editButtonStyle}
 
   &::after {
     position: absolute;
     top: 10px;
     right: 0;
-    background-color: ${colors.gray600};
+    background-color: ${colors.gray400};
     width: 1px;
     height: 14px;
     content: '';

src/components/common/HomePopup.tsx

@@ -19,6 +19,7 @@ const useConfirm = () => {
       okButtonTextColor?: string;
       zIndex?: number;
       maxWidth?: number;
+      hideCloseButton?: boolean;
     }) =>
       new Promise<boolean>((resolve) => {
         open(({ isOpen, close }) => (
@@ -29,6 +30,7 @@ const useConfirm = () => {
               close();
             }}
             zIndex={options.zIndex}
+            hideCloseButton={true}
           >
             <StyledModalContent maxWidth={options.maxWidth}>
               <Modal.Title>{options.title}</Modal.Title>

src/components/common/ImageUploader/index.tsx

@@ -28,12 +28,12 @@ export default function MonthPicker({ onChange, value, placeholder }: MonthPicke
 const StyledDatePicker = styled(DatePicker)`
   box-sizing: border-box;
   transition: all 0.2s;
-  border: 1.5px solid ${colors.gray700};
+  border: 1.5px solid ${colors.gray800};
   border-radius: 6px;
-  background-color: ${colors.gray700};
-  padding: 14px 20px;
+  background-color: ${colors.gray800};
+  padding: 11px 16px;
   width: 100%;
-  color: ${colors.gray10};
+  color: ${colors.gray300};
   ${textStyles.SUIT_16_M};
 
   &::placeholder {

src/components/common/Modal/useConfirm.tsx

@@ -74,8 +74,8 @@ const MobileDeleteButton = styled.button<{ isVisible: boolean }>`
   align-self: flex-end;
   margin-top: 20px;
   margin-right: 5px;
-  color: ${colors.gray300};
-  font-size: 15px;
+  color: ${colors.gray200};
+  font-size: 14px;
   font-weight: 600;
 
   ${({ isVisible }) => isVisible || 'visibility: hidden;'}

src/components/common/MonthPicker.tsx

@@ -62,15 +62,22 @@ const MobileAddButton = styled.button`
 
   @media ${MOBILE_MEDIA_QUERY} {
     display: flex;
-    gap: 11px;
+    gap: 4px;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
     border: 1px solid ${colors.gray50};
     border-radius: 12px;
-    padding: 16px 0;
+    padding: 13px 0;
     width: 100%;
     color: ${colors.gray50};
+
+    ${textStyles.SUIT_14_SB}
+
+    & svg {
+      width: 12px;
+      height: 12px;
+    }
   }
 `;
 

src/components/members/upload/AddableItem.tsx

@@ -49,7 +49,7 @@ export default function CheckSoptActivity() {
           .map(({ generation, team, part }) => ({
             generation: `${generation}기`,
             part,
-            team: team ?? UNSELECTED,
+            team: team ?? '',
           })),
       });
     }