[Fix] : 자잘한 UI 이슈들 해결 (#114)

* fix: 와우클래스 박스 생성 * fix: 정회원 가입 조건 regular일때 보이도록 * fix: 이메일 도메인 입력시 UI 깨지는 문제 해결 * fix: textfield 사용 안하는 것 제거
GDSC-Hongik · Sep 4, 2024 · 4b2ed15 · 4b2ed15
1 parent e2ddae6
commit 4b2ed15
Show file tree

Hide file tree

Showing 5 changed files with 31 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}

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -31,6 +31,8 @@ export const Dashboard = () => {
 
   const { member, currentRecruitmentRound, currentMembership } = data;
 
+  console.log(data);
+
   return (
     <div style={{ height: '100%' }}>
       <Wrapper direction="column" justify="flex-start">
@@ -40,6 +42,7 @@ export const Dashboard = () => {
           <JoinStatus
             role={member.role}
             currentRecruitmentRound={currentRecruitmentRound}
+            currentMembership={currentMembership}
             member={member}
           />
         </Flex>