Merge branch 'feature/#48' into feature/#59

src/apis/index.ts

@@ -10,6 +10,5 @@ const apiClient = axios.create({
 
 apiClient.defaults.headers.common['Authorization'] =
   `Bearer ${useAuthToken().accessToken}`;
-// `Bearer eyJhbGciOiJIUzM4NCJ9.eyJpc3MiOiJnZHNjLWhvbmdpayIsInN1YiI6IjI5NCIsImlhdCI6MTcwOTAzMzUxNywiZXhwIjoxODA5MDQwNzE3LCJyb2xlIjoiUkVHVUxBUiJ9.63RmsXULrgf2Nh0vU4IsJRyeVB_93yo34-U3hTsMm6eTANik5iiBHXBYd86YyY_v`;
 
 export default apiClient;

src/apis/member/memberType.ts

@@ -3,7 +3,7 @@ import { User } from '@/types/user';
 
 export interface MemberInfoResponse {
   member: User;
-  currentRecruitment: CurrentRecruitmentType;
+  currentRecruitmentRound: CurrentRecruitmentType;
   currentMembership: CurrentMembershipType;
 }
 

src/components/auth/DepartmentSelect.tsx

@@ -1,9 +1,19 @@
 import { Select } from '@/components/common/Select';
+import React from 'react';
 import { useGetDepartmentList } from '@/hooks/query';
 import { Control, Controller, FieldValues } from 'react-hook-form';
-
+import DropDown from 'wowds-ui/DropDown';
+import DropDownOption from 'wowds-ui/DropDownOption';
 type DepartmentSelectProps = {
-  control: Control<FieldValues, any, FieldValues>;
+  control: Control<{
+    name: '';
+    studentId: '';
+    phone: '';
+    department: '';
+    email: '';
+    terms: false;
+    personalPrivacy: false;
+  }>;
 };
 
 export default function DepartmentSelect({ control }: DepartmentSelectProps) {
@@ -15,14 +25,28 @@ export default function DepartmentSelect({ control }: DepartmentSelectProps) {
       control={control}
       defaultValue=""
       render={({ field }) => (
-        <Select
-          {...field}
-          label="학과"
-          required
-          items={departmentList}
-          idField="code"
-          displayField="name"
-        />
+        <DropDown {...field} label="학과" placeholder="선택하세요">
+          {' '}
+          <React.Fragment key=".0">
+            {departmentList.map((department, index) => {
+              return (
+                <DropDownOption
+                  key={`${index}-dropdownOption`}
+                  text={department.name}
+                  value={department.name}
+                />
+              );
+            })}
+          </React.Fragment>
+        </DropDown>
+        // <Select
+        //   {...field}
+        //   label="학과"
+        //   required
+        //   items={departmentList}
+        //   idField="code"
+        //   displayField="name"
+        // />
       )}
     />
   );

src/components/myPage/ApproveBox.tsx

@@ -6,6 +6,7 @@ import { formatDate } from '@/utils/mypage/formatDate';
 type MemberRole = 'GUEST' | 'ASSOCIATE' | 'REGULAR' | 'ADMIN';
 type BoxVariantType = 'arrow' | 'checkbox' | 'text' | 'warn';
 type BoxStatusType = 'default' | 'success' | 'error';
+
 const convertRecruitmentName = (name: string) => {
   const [period, round] = name.split(' ');
   const [year, semester] = period.split('-');

src/components/myPage/MemberStatusInfoBox.tsx

@@ -57,10 +57,12 @@ MemberStatusInfoBox.displayName = 'MemberStatusInfoBox';
 export default MemberStatusInfoBox;
 
 const Wrapper = styled(Flex)`
+  position: absolute;
   background-color: ${color.blackOpacity60};
   border-radius: 8px;
   box-shadow: 0px 4px 8px 0px ${color.shadowMedium};
   backdrop-filter: blur(15px);
   padding: ${space.xl};
   height: fit-content;
+  z-index: 99;
 `;

src/components/myPage/MemberStatusStepper.tsx

@@ -0,0 +1,40 @@
+import Stepper from 'wowds-ui/Stepper';
+import { User, UserRoleType } from '@/types/user';
+import styled from '@emotion/styled';
+
+const MemberStatusStepper = ({ member }: { member: User }) => {
+  const { role } = member;
+
+  const convertRoleToStep = (role: UserRoleType) => {
+    switch (role) {
+      case 'GUEST':
+        return 1;
+      case 'ASSOCIATE':
+        return 2;
+      default:
+        return 3;
+    }
+  };
+  return (
+    <StepperContainer>
+      <Stepper
+        maxStep={3}
+        step={convertRoleToStep(role)}
+        labels={[
+          { value: 1, label: '게스트' },
+          { value: 2, label: '준회원' },
+          { value: 3, label: '정회원' }
+        ]}
+      />
+    </StepperContainer>
+  );
+};
+
+export default MemberStatusStepper;
+
+const StepperContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 2.875rem;
+`;

src/pages/Dashboard.tsx

@@ -1,13 +1,14 @@
 import { Flex, Space, Text } from '@/components/common/Wrapper';
 import { space, color } from 'wowds-tokens';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import JoinRegularMember from '@/components/myPage/JoinRegularMember';
 import MemberStatusInfoBox from '@/components/myPage/MemberStatusInfoBox';
 import AssociateRequirementCheck from '@/components/myPage/AssociateRequirementCheck';
+import MemberStatusStepper from '@/components/myPage/MemberStatusStepper';
 import BasicUserInfo from '@/components/myPage/BasicUserInfo';
 import { media } from '@/styles';
 import { useRef, useState } from 'react';
-import styled from '@emotion/styled';
 import { Help } from 'wowds-icons';
 import { Privacy } from '@/components/myPage/Privacy';
 import { useQuery } from '@tanstack/react-query';
@@ -28,7 +29,7 @@ export const Dashboard = () => {
     return <div> 로딩중 ...</div>;
   }
 
-  const { member, currentRecruitment, currentMembership } = data;
+  const { member, currentRecruitmentRound, currentMembership } = data;
 
   return (
     <Wrapper
@@ -59,12 +60,12 @@ export const Dashboard = () => {
             />
           )}
         </Container>
+        <Space height={40} />
+        <MemberStatusStepper member={member} />
         <Space height={20} />
-        프로그래스바 자리
-        <Space height={24} />
         <ApproveBox
           role={member.role}
-          currentRecruitment={currentRecruitment}
+          currentRecruitment={currentRecruitmentRound}
         />
       </Flex>
       {currentMembership && (

src/pages/ForwardRef.tsx

@@ -0,0 +1,38 @@
+import {
+  forwardRef,
+  InputHTMLAttributes,
+  ForwardedRef,
+  Ref,
+  TextareaHTMLAttributes
+} from 'react';
+import TextField from 'wowds-ui/TextField';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  label?: string;
+  errorText?: string;
+  isError?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { value, placeholder, label = '', errorText, isError = false, ...props },
+    ref
+  ) => {
+    return (
+      <TextField
+        label={label}
+        helperText={errorText}
+        error={isError}
+        {...props}
+        // ref={ref as Ref<TextareaHTMLAttributes>}
+        //   error={isValid}
+        // helperText={errors.name?.message}
+        value={value}
+        placeholder={placeholder}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';