From 4b2ed1514403519b22899abd82001f2fb6f0f091 Mon Sep 17 00:00:00 2001
From: Eugene Kim <67894159+eugene028@users.noreply.github.com>
Date: Thu, 5 Sep 2024 01:10:12 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20:=20=EC=9E=90=EC=9E=98=ED=95=9C=20UI=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=88=EB=93=A4=20=ED=95=B4=EA=B2=B0=20(#114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 와우클래스 박스 생성

* fix: 정회원 가입 조건 regular일때 보이도록

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

* fix: textfield 사용 안하는 것 제거
---
 .../bottomsheet/JoinRegularMemberBottomSheet.tsx  |  5 ++++-
 src/components/myPage/ApproveBox.tsx              | 15 ++++++++++-----
 src/components/myPage/JoinStatus.tsx              | 15 ++++++++++++---
 src/components/signup/EmailInputField.tsx         |  4 ++--
 src/pages/Dashboard.tsx                           |  3 +++
 5 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/bottomsheet/JoinRegularMemberBottomSheet.tsx b/src/components/bottomsheet/JoinRegularMemberBottomSheet.tsx
index b8b4ca6..1a2c0e4 100644
--- 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
index 805cf00..c085ec6 100644
--- 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
index b8542e0..e6673dd 100644
--- 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
index fa2f587..0a9ed67 100644
--- 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
index ca1ab30..c7cf352 100644
--- 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>