fix: 이메일 도메인 입력시 UI 깨지는 문제 해결

GDSC-Hongik · Sep 4, 2024 · 94c981b · 94c981b
1 parent 7738ba2
commit 94c981b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/src/components/bottomsheet/JoinRegularMemberBottomSheet.tsx b/src/components/bottomsheet/JoinRegularMemberBottomSheet.tsx
@@ -81,10 +81,13 @@ const JoinRegularMemberBottomSheet = ({
           text={<Text typo="label1">{recruitmentPeriod}</Text>}
         />
         <Button
+          disabled={currentRecruitment ? true : false}
           onClick={() => {
             joinRegularMember(currentRecruitment.recruitmentId);
           }}>
-          지원하러 가기
+          {currentRecruitment
+            ? '정회원 가입 조건을 완료해주세요'
+            : '지원하러 가기'}
         </Button>
       </BottomSheetContent>
     </BottomSheet>

diff --git a/src/components/myPage/ApproveBox.tsx b/src/components/myPage/ApproveBox.tsx
@@ -1,6 +1,9 @@
 import Box from 'wowds-ui/Box';
 import styled from '@emotion/styled';
-import { CurrentRecruitmentType } from '@/apis/member/memberType';
+import {
+  CurrentMembershipType,
+  CurrentRecruitmentType
+} from '@/apis/member/memberType';
 import {
   convertRecruitmentPeriod,
   convertRecruitmentName
@@ -13,14 +16,16 @@ type BoxStatusType = 'default' | 'success' | 'error';
 
 export const ApproveBox = ({
   role,
-  currentRecruitment
+  currentRecruitment,
+  currentMembership
 }: {
   role: UserRoleType;
   currentRecruitment: CurrentRecruitmentType;
+  currentMembership?: CurrentMembershipType;
 }) => {
   const { handleBottomSheet } = useBottomSheet();
 
-  if (!currentRecruitment) {
+  if (!currentRecruitment && role !== 'REGULAR') {
     return (
       <Box
         variant="warn"
@@ -48,7 +53,7 @@ export const ApproveBox = ({
     ASSOCIATE: {
       title: `${convertRecruitmentName(currentRecruitment.name, currentRecruitment.roundTypeValue)}`,
       description: `${convertRecruitmentPeriod(currentRecruitment.period)}`,
-      boxVariant: 'arrow',
+      boxVariant: currentMembership ? 'text' : 'arrow',
       status: 'error'
     },
     REGULAR: {
@@ -63,7 +68,7 @@ export const ApproveBox = ({
   return (
     <BoxWrapper
       onClick={() => {
-        if (role === 'ASSOCIATE') handleBottomSheet();
+        if (role === 'ASSOCIATE' && !currentMembership) handleBottomSheet();
         else if (role === 'REGULAR') {
           window.location.href = 'https://study.gdschongik.com/';
         } else {

diff --git a/src/components/myPage/JoinStatus.tsx b/src/components/myPage/JoinStatus.tsx
@@ -5,18 +5,23 @@ import styled from '@emotion/styled';
 import MemberStatusInfoBox from '@/components/myPage/MemberStatusInfoBox';
 import { ApproveBox } from './ApproveBox';
 import { Text, Flex, Space } from '../common/Wrapper';
-import { CurrentRecruitmentType } from '@/apis/member/memberType';
+import {
+  CurrentMembershipType,
+  CurrentRecruitmentType
+} from '@/apis/member/memberType';
 import MemberStatusStepper from './MemberStatusStepper';
 import { User, UserRoleType } from '@/types/user';
 
 const JoinStatus = ({
   role,
   currentRecruitmentRound,
-  member
+  member,
+  currentMembership
 }: {
   role: UserRoleType;
   currentRecruitmentRound: CurrentRecruitmentType;
   member: User;
+  currentMembership?: CurrentMembershipType;
 }) => {
   const [openInfo, setOpenInfo] = useState(false);
   const helpButtonRef = useRef<HTMLDivElement>(null);
@@ -50,7 +55,11 @@ const JoinStatus = ({
       <Space height={40} />
       <MemberStatusStepper member={member} />
       <Space height={20} />
-      <ApproveBox role={role} currentRecruitment={currentRecruitmentRound} />
+      <ApproveBox
+        role={role}
+        currentRecruitment={currentRecruitmentRound}
+        currentMembership={currentMembership}
+      />
     </Flex>
   );
 };

diff --git a/src/components/signup/EmailInputField.tsx b/src/components/signup/EmailInputField.tsx
@@ -38,7 +38,7 @@ const EmailInputField = ({ control }: DepartmentSelectProps) => {
         render={({ field, fieldState }) => (
           <TextFieldWrapper>
             <TextField
-              style={{ minWidth: '100%' }}
+              style={{ minWidth: '100%', flex: 1, maxWidth: '150px' }}
               label="이메일"
               error={fieldState.invalid}
               ref={field.ref}
@@ -69,7 +69,7 @@ const EmailInputField = ({ control }: DepartmentSelectProps) => {
             {customEmail ? (
               <TextFieldWrapper>
                 <TextField
-                  style={{ minWidth: '100%' }}
+                  style={{ minWidth: '100%', flex: 1, maxWidth: '150px' }}
                   label="도메인"
                   error={fieldState.invalid}
                   ref={field.ref}
@@ -137,3 +137,9 @@ const EmailFieldWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
 `;
+
+const TextFieldStyle = {
+  minWidth: '100%',
+  flex: 1,
+  maxWidth: '100%'
+};
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -42,6 +42,7 @@ export const Dashboard = () => {
           <JoinStatus
             role={member.role}
             currentRecruitmentRound={currentRecruitmentRound}
+            currentMembership={currentMembership}
             member={member}
           />
         </Flex>