프로필 수정 페이지

src/assets/icons/index.ts

@@ -41,3 +41,7 @@ export { default as icTrash } from './ic_trash.svg';
 export { ReactComponent as IcMeatball } from './ic_meatball.svg';
 export { ReactComponent as IcSetting } from './ic_setting.svg';
 export { ReactComponent as IcBell } from './ic_bell.svg';
+export { default as icEdit } from './ic_edit.svg';
+export { default as icEditProfile } from './ic_edit_profile.svg';
+export { default as icInputPencil } from './ic_input_pencil.svg';
+export { default as icCrown } from './ic_crown.svg';

src/presentation/components/JoinForm/index.tsx

@@ -87,7 +87,7 @@ function JoinForm() {
         <CommonLabel content="아이디" marginTop="44px" marginBottom="20px" />
         <CommonInput
           width="100%"
-          isJoinConditionPassed={isJoinConditionPassed.id}
+          isConditionPassed={isJoinConditionPassed.id}
           errorMsg={errorMsg}
           placeholder="neososeo_team"
           onChange={(value) => {
@@ -99,7 +99,7 @@ function JoinForm() {
         <CommonLabel content="이름" marginTop="44px" marginBottom="20px" />
         <CommonInput
           width="100%"
-          isJoinConditionPassed={isJoinConditionPassed.name}
+          isConditionPassed={isJoinConditionPassed.name}
           placeholder="이름을 입력해주세요"
           onChange={(value) => {
             setInputName(value);

src/presentation/components/common/BottomSheet/MyPageEdit/index.tsx

@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+
+import BottomSheet from '..';
+import { icEdit } from '@assets/icons';
+
+type MyPageEditBottomSheetProps = {
+  isOpened: boolean;
+  closeBottomSheet: () => void;
+  type: string;
+  userID?: string;
+};
+
+function MyPageEditBottomSheet(props: MyPageEditBottomSheetProps) {
+  const { isOpened, closeBottomSheet, type, userID } = props;
+  const navigate = useNavigate();
+
+  const navigateToEditPage = () => {
+    navigate(`/edit/${type}/${userID}`);
+  };
+
+  return (
+    <BottomSheet
+      buttonList={[
+        {
+          icon: icEdit,
+          label: '수정하기',
+          onClick: navigateToEditPage,
+        },
+      ]}
+      closeBottomSheet={closeBottomSheet}
+      isOpened={isOpened}
+    />
+  );
+}
+
+export default MyPageEditBottomSheet;

src/presentation/components/common/BottomSheet/style.ts

@@ -24,7 +24,7 @@ export const StBlackBlur = styled.div<{ isClosing: boolean }>`
 
 export const StWrapper = styled.div<{ isClosing: boolean }>`
   position: fixed;
-  width: min(100vw, 400px);
+  width: min(100vw, 390px);
   border-top-left-radius: 32px;
   border-top-right-radius: 32px;
   background-color: ${COLOR.WHITE};
@@ -39,6 +39,8 @@ export const StButton = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  cursor: pointer;
+  width: fit-content;
   color: ${COLOR.GRAY_7};
   ${FONT_STYLES.R_16_BODY}
 `;
@@ -53,6 +55,7 @@ export const StButtonWrapper = styled.div`
 `;
 
 export const StCancelButton = styled.div`
+  cursor: pointer;
   text-align: center;
   border-top: 1px solid ${COLOR.GRAY_3};
   padding-top: 16px;

src/presentation/components/common/Input/index.tsx

@@ -8,7 +8,7 @@ interface CommonInputProps {
   maxLength?: number;
   value?: string;
   defaultValue?: string;
-  isJoinConditionPassed?: boolean;
+  isConditionPassed?: boolean;
   img?: string;
   onChange?: (value: string) => void;
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -25,7 +25,7 @@ function CommonInput(props: CommonInputProps) {
     maxLength,
     value,
     defaultValue,
-    isJoinConditionPassed,
+    isConditionPassed,
     onChange,
     onSubmit,
     img,
@@ -63,7 +63,7 @@ function CommonInput(props: CommonInputProps) {
           <StSubmitButton disabled={submitButtonDisabled}>{submitButtonValue}</StSubmitButton>
         )}
       </StInputWrapper>
-      {!isJoinConditionPassed && isInput !== '' && errorMsg && <StErrorMsg>{errorMsg}</StErrorMsg>}
+      {!isConditionPassed && isInput !== '' && errorMsg && <StErrorMsg>{errorMsg}</StErrorMsg>}
     </StCommonInput>
   );
 }

src/presentation/components/common/Navigation/style.ts

@@ -13,6 +13,7 @@ export const StCommonNavigation = styled.div`
 
 export const StBack = styled.img`
   margin-left: 14px;
+  cursor: pointer;
 `;
 
 export const StTitle = styled.div`

src/presentation/pages/Edit/DeleteKeyword/index.tsx

@@ -0,0 +1,23 @@
+import { useParams } from 'react-router-dom';
+
+import CommonNavigation from '@components/common/Navigation';
+import { StMyKeywordDelete, StMyKeywordHeader } from './style';
+
+function MyKeywordDelete() {
+  const { userID } = useParams();
+
+  if (!userID) return <></>;
+
+  return (
+    <>
+      <CommonNavigation title="My 키워드" />
+      <StMyKeywordDelete>
+        <StMyKeywordHeader>
+          <span>My 키워드</span>
+        </StMyKeywordHeader>
+      </StMyKeywordDelete>
+    </>
+  );
+}
+
+export default MyKeywordDelete;

src/presentation/pages/Edit/DeleteKeyword/style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { COLOR } from '@styles/common/color';
+
+export const StMyKeywordDelete = styled.div``;
+
+export const StMyKeywordHeader = styled.div`
+  height: 76px;
+  background-color: ${COLOR.GRAY_1};
+  padding: 42px 20px 19px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;

src/presentation/pages/Edit/Profile/index.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useToast } from '@hooks/useToast';
+import { useLoginUser } from '@hooks/useLoginUser';
+import CommonInput from '@components/common/Input';
+import CommonLabel from '@components/common/Label';
+import CommonNavigation from '@components/common/Navigation';
+import FileUpload from '@components/common/FileUpload';
+import { StInputWrapper, StMyProfileEdit, StProfileImg } from './style';
+import { IcMypageEdit } from '@assets/icons';
+import { imgEmptyProfile } from '@assets/images';
+
+function MyProfileEdit() {
+  const navigate = useNavigate();
+  const { fireToast } = useToast();
+  const { username, userID, profileImage } = useLoginUser();
+  const [image, setImage] = useState<File | null>(null);
+  const [inputId, setInputId] = useState('');
+  const [inputName, setInputName] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+  const [isEditConditionPassed, setIsEditConditionPassed] = useState({
+    id: false,
+    name: false,
+  });
+
+  useEffect(() => {
+    const idCheck = /^[a-z]+[a-z|0-9|.|_]{4,15}$/;
+    setIsEditConditionPassed({
+      ...isEditConditionPassed,
+      id: idCheck.test(inputId),
+    });
+
+    if (!idCheck.test(inputId)) {
+      setErrorMsg('*영문 소문자, 숫자, 특수문자(._) 4~15자 이내');
+    }
+
+    if (!/^[a-z]/.test(inputId)) {
+      setErrorMsg('*아이디의 첫 글자는 영문 소문자');
+    }
+  }, [inputId]);
+
+  useEffect(() => {
+    setIsEditConditionPassed({
+      ...isEditConditionPassed,
+      name: inputName !== '',
+    });
+  }, [inputName]);
+
+  const editProfile = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    try {
+      const form = new FormData();
+      form.append('profileId', inputId);
+      form.append('name', inputName);
+      image && form.append('image', image);
+      // 나중에 여기 put 추가할 예정
+      fireToast({ content: '수정 완료' });
+    } catch (error) {
+      console.error(error);
+      navigate('/');
+    }
+  };
+
+  return (
+    <>
+      <CommonNavigation title="프로필 수정" />
+      <StMyProfileEdit>
+        <StProfileImg>
+          <FileUpload width="118px" height="118px" setFile={setImage} borderRadius="50%">
+            <>
+              <img src={profileImage || imgEmptyProfile} />
+              <IcMypageEdit />
+            </>
+          </FileUpload>
+        </StProfileImg>
+        <StInputWrapper>
+          <CommonLabel content="아이디" marginTop="52px" marginBottom="20px" />
+          <CommonInput
+            width="100%"
+            isConditionPassed={isEditConditionPassed.id}
+            onChange={(value) => {
+              setInputId(value);
+            }}
+            errorMsg={errorMsg}
+            placeholder={userID}
+            maxLength={15}
+          />
+          <CommonLabel content="이름" marginTop="46px" marginBottom="20px" />
+          <CommonInput
+            width="100%"
+            isConditionPassed={isEditConditionPassed.name}
+            onChange={(value) => {
+              setInputName(value);
+            }}
+            errorMsg={errorMsg}
+            placeholder={username}
+          />
+        </StInputWrapper>
+        <button
+          onClick={editProfile}
+          disabled={!Object.values(isEditConditionPassed).every((condition) => condition === true)}
+        >
+          완료
+        </button>
+      </StMyProfileEdit>
+    </>
+  );
+}
+
+export default MyProfileEdit;

src/presentation/pages/Edit/Profile/style.ts

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+import { CORAL_MAIN_BUTTON } from '@styles/common/button';
+import { COLOR } from '@styles/common/color';
+import { FONT_STYLES } from '@styles/common/font-style';
+import { icEmail, icInputPencil } from '@assets/icons';
+
+export const StMyProfileEdit = styled.div`
+  padding: 0 20px;
+
+  & > div > button {
+    display: block;
+    margin: 0 auto;
+    margin-top: 52px;
+  }
+
+  & > button {
+    width: 100%;
+    border-radius: 16px;
+    padding: 20px 0;
+    margin-top: 178px;
+    margin-bottom: 48px;
+    ${FONT_STYLES.M_16_TITLE};
+    color: ${COLOR.WHITE};
+    background-color: ${COLOR.GRAY_3};
+
+    :not(:disabled) {
+      ${CORAL_MAIN_BUTTON};
+    }
+  }
+`;
+
+export const StProfileImg = styled.div`
+  position: relative;
+  width: fit-content;
+  margin: 0 auto;
+  margin-top: 52px;
+
+  img {
+    width: 118px;
+    height: 118px;
+    border-radius: 50%;
+  }
+
+  svg {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 32.29px;
+    height: 32.29px;
+  }
+`;
+
+const iconEmail = icEmail;
+const iconInputPencil = icInputPencil;
+
+export const StInputWrapper = styled.div`
+  & > div:nth-of-type(2n + 1) {
+    margin-left: 4px;
+  }
+
+  & div:nth-child(2) > form > input {
+    background-image: url(${iconEmail}), url(${iconInputPencil});
+    background-position: 12px, calc(100% - 20px);
+    background-repeat: no-repeat, no-repeat;
+    padding-left: 36px;
+  }
+
+  & div:last-child > form > input {
+    background-image: url(${iconInputPencil});
+    background-position: calc(100% - 20px);
+    background-repeat: no-repeat;
+  }
+`;