Merge pull request #32 from Team-inglo/feat/IGW-27/28

Feat/IGW-27/28 - 마이페이지, 언어설정 페이지 작업

src/components/Common/Button.tsx

@@ -1,56 +1,74 @@
 import CallIcon from '@/assets/icons/CallIcon.svg?react';
+import ScrapIcon from '@/assets/icons/Scrap.svg?react';
 import { buttonTypeKeys, buttonTypeUnion } from '@/constants/components';
 
 type buttonProps = {
   type: buttonTypeUnion; // 정의된 버튼을 5가지 타입으로 나누었습니다.
-  bgColor: string; // 버튼의 배경색
-  fontColor: string; // 버튼 글자색
+  bgColor?: string; // 버튼의 배경색 (optional)
+  fontColor?: string; // 버튼 글자색 (optional)
   isCallIcon?: boolean; // 전화기 아이콘 여부 (optional)
   isBorder: boolean; // 버튼 테두리 여부
-  title: string; // 버튼에 포함되는 글자
+  title?: string; // 버튼에 포함되는 글자 (optional)
   onClick?: () => void; // 클릭 이벤트 핸들러 (optional)
 };
 
 const Button = ({
   type,
   bgColor,
   fontColor,
-  isCallIcon = false, // 기본값 false 설정
-  isBorder,
+  isCallIcon = false,
+  isBorder = false,
   title,
   onClick,
 }: buttonProps) => {
   const getButtonStyle = () => {
     switch (type) {
       case buttonTypeKeys.LARGE:
-        return 'w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] button-1';
+        return 'w-[85vw] py-4 flex justify-center items-center rounded-[2rem] button-1';
       case buttonTypeKeys.SMALL:
-        return 'w-[5.5rem] py-3 flex justify-center items-center rounded-[1.25rem] button-2';
+        return 'w-[24vw] py-3 flex justify-center items-center rounded-[1.25rem] button-2';
       case buttonTypeKeys.APPLY:
-        return `w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] bg-[url("/src/assets/images/applyButton.jpeg")] bg-cover bg-center button-1 text-[#F4F4F9]`;
-      case buttonTypeKeys.BACK:
-        return 'w-[7.5rem] py-4 flex justify-center items-center rounded-[2rem] button-1';
-      case buttonTypeKeys.CONTINUE:
-        return 'w-[12.5rem] py-4 flex justify-center items-center rounded-[2rem] button-1';
+        return `w-[85vw] py-4 flex justify-center items-center rounded-[2rem] bg-[url("/src/assets/images/applyButton.jpeg")] bg-cover bg-center button-1 text-[#F4F4F9]`;
+      case buttonTypeKeys.SMALLAPPLY: // 스크랩 버튼과 함께 쓰이는 Apply 버튼
+        return `w-[71vw] py-4 flex justify-center items-center rounded-[2rem] bg-[url("/src/assets/images/applyButton.jpeg")] bg-cover bg-center button-1 text-[#F4F4F9]`;
+      case buttonTypeKeys.BACK: // CONTINUE 버튼과 같은 열에 사용
+        return 'w-[31vw] py-4 flex justify-center items-center rounded-[2rem] button-1';
+      case buttonTypeKeys.CONTINUE: // BACK 버튼과 같은 열에 사용
+        return 'w-[53vw] py-4 flex justify-center items-center rounded-[2rem] button-1';
+      case buttonTypeKeys.SCRAP:
+        return 'p-4 flex justify-center items-center rounded-[2rem] bg-[rgba(244,244,249,0.5)';
       default: // 기본값으로 large type 적용
-        return 'w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] button-1';
+        return 'w-[85vw] py-4 flex justify-center items-center rounded-[2rem] button-1';
     }
   };
 
   return (
-    <button
-      className={`${getButtonStyle()} ${bgColor} ${fontColor}  ${isBorder && 'border-solid border-[0.5px] border-[#1E1926]'}`}
-      onClick={onClick}
-    >
-      {isCallIcon ? (
-        <div className="flex justify-center items-center gap-1.5">
-          <CallIcon />
-          <div>{title}</div>
-        </div>
+    <>
+      {/* 스크랩 버튼 아이콘 처리 */}
+      {type === buttonTypeKeys.SCRAP ? (
+        <button
+          className={`${getButtonStyle()} bg-[rgba(244,244,249,0.5)`}
+          onClick={onClick}
+        >
+          <ScrapIcon />
+        </button>
       ) : (
-        <div>{title}</div>
+        // 스크랩 버튼 이외 텍스트 버튼
+        <button
+          className={`${getButtonStyle()} ${bgColor} ${fontColor} ${isBorder && 'border-solid border-[0.5px] border-[#1E1926]'}`}
+          onClick={onClick}
+        >
+          {isCallIcon ? (
+            <div className="flex justify-center items-center gap-1.5">
+              <CallIcon />
+              <div>{title}</div>
+            </div>
+          ) : (
+            <div>{title}</div>
+          )}
+        </button>
       )}
-    </button>
+    </>
   );
 };
 

src/components/Common/SubHeader.tsx

@@ -40,13 +40,7 @@ const SubHeader = ({
   };
 
   const InfoHeader = () => (
-    <div
-      className="w-full px-8 pt-6 pb-7 rounded-b-lg"
-      style={{
-        boxShadow:
-          '0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)',
-      }}
-    >
+    <div className="w-full px-8 pt-6 pb-7 rounded-b-lg shadow-subHeaderShadow">
       <h1 className="w-[70%] head-2">{title}</h1>
       <p className="w-[70%] caption-1">{body}</p>
     </div>

src/components/Profile/ApplicationStatus.tsx

@@ -0,0 +1,51 @@
+import { ApplicationCountType, BookmarkCountType } from '@/types/api/profile';
+import { useEffect, useState } from 'react';
+
+const ApplicationStatus = () => {
+  const [applicationCounts, setApplicationCounts] =
+    useState<ApplicationCountType>({
+      application_counts: 7,
+      successful_hire_counts: 2,
+    });
+  const [bookmarkCounts, setBookmarkCounts] = useState<BookmarkCountType>({
+    book_mark_counts: 10,
+  });
+
+  useEffect(() => {
+    // TODO : API 로직 추가
+    setApplicationCounts({
+      application_counts: 7,
+      successful_hire_counts: 2,
+    });
+    setBookmarkCounts({
+      book_mark_counts: 10,
+    });
+  }, []);
+
+  return (
+    <div className="flex gap-4 items-center justify-center">
+      <div className="flex flex-col gap-3 w-24 py-2 px-1">
+        <div className="body-3 text-[#1E1926] text-center">Applications</div>
+        <div className="head-3 text-[#1E1926] text-center">
+          {applicationCounts.application_counts}
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 py-2 px-1">
+        <div className="body-3 text-[#1E1926] text-center">
+          Successful Hires
+        </div>
+        <div className="head-3 text-[#1E1926] text-center">
+          {applicationCounts.successful_hire_counts}
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 w-24 py-2 px-1">
+        <div className="body-3 text-[#1E1926] text-center">Scraps</div>
+        <div className="head-3 text-[#1E1926] text-center">
+          {bookmarkCounts.book_mark_counts}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicationStatus;

src/components/Profile/DeleteAccount.tsx

@@ -0,0 +1,20 @@
+type DeleteAccountProps = {
+  onDeleteButton: (value: boolean) => void;
+};
+
+const DeleteAccount = ({ onDeleteButton }: DeleteAccountProps) => {
+  return (
+    <>
+      <div className="pt-3 px-6 pb-[3.125rem] flex justify-center items-center">
+        <button
+          className="bg-[#FF6F61] p-4 flex justify-center items-center rounded-[2rem] button-1 text-white"
+          onClick={() => onDeleteButton(true)}
+        >
+          Delete account
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default DeleteAccount;

src/components/Profile/DeleteModal.tsx

@@ -0,0 +1,41 @@
+type DeleteModalProps = {
+  onDeleteButton: (value: boolean) => void;
+  onAccountDelete: () => void;
+};
+
+const DeleteModal = ({ onDeleteButton, onAccountDelete }: DeleteModalProps) => {
+  return (
+    <div className="w-[100vw] h-[100vh] fixed top-0 left-0 flex items-center justify-center bg-[rgba(70,70,70,0.6)] z-50">
+      <div className="w-[90%] max-w-[22rem] flex flex-col gap-8 bg-white rounded-[1.125rem] overflow-hidden">
+        <div>
+          <h1 className="pt-[1.125rem] pb-4 border-b-[0.5px] border-solid border-[#DCDCDC] text-center head-3 text-[#464646]">
+            Do you want me to delete the account?
+          </h1>
+          <p className="pt-7 body-3 text-[#656565] text-center">
+            If you delete your account, you will not be able to
+            <br />
+            recover it again.
+            <br />
+            Do you still want to delete it?
+          </p>
+        </div>
+        <div className="flex items-center justify-center">
+          <button
+            className="bg=[#F4F4F9] py-[1.125rem] w-[50%] flex justify-center items-center button-1 text-[#656565]"
+            onClick={() => onDeleteButton(false)}
+          >
+            Cancel
+          </button>
+          <button
+            className="bg-[#FEF387] py-[1.125rem] w-[50%] flex justify-center items-center button-1 text-[#1E1926]"
+            onClick={onAccountDelete}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteModal;