main merge

api/myShop.ts

@@ -21,7 +21,6 @@ export const submitShopForm = async (formData: FormData) => {
 export const fetchShopData = async (shopId: string) => {
   try {
     const response = await axios.get(`${BASE_URL}/shops/${shopId}`);
-    console.log(response);
     return response;
   } catch (error) {
     console.error("Shop data fetching failed:", error);

components/Filter/index.tsx

@@ -19,7 +19,6 @@ interface FilterProps {
 
 const Filter: React.FC<FilterProps> = ({ onClose, onApplyFilter }) => {
   const initSelectedDate = new Date();
-  initSelectedDate.setDate(initSelectedDate.getDate() + 1);
   const initSelectedLocations: string[] = [];
   const initInputValue = "";
 

components/Post/Post.module.scss

@@ -83,6 +83,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 36px;
 }
 
 .postPrice {

components/Post/index.tsx

@@ -21,7 +21,7 @@ const Post: React.FC<PostProps> = ({
   const startTime = moment(startsAt);
   const endTime = moment(startTime).add(workhour, "hours");
   const now = moment();
-  const isPast = now.isAfter(endTime);
+  const isPast = now.isAfter(startTime);
 
   const startTimeFormatted = startTime.format("YYYY-MM-DD HH:mm");
   const endTimeFormatted = endTime.format("HH:mm");

components/Profile/Profile.module.scss

@@ -7,6 +7,7 @@
   height: 395px;
 
   @media (max-width: $TABLET) {
+    width: 680px;
     padding: 60px 32px;
   }
 }
@@ -161,7 +162,7 @@
   }
 
   @media (max-width: $MOBILE) {
-    margin-top: 12px;
+    margin-top: 56px;
   }
 }
 

components/Profile/Profile.types.ts

@@ -3,19 +3,27 @@ import { MouseEventHandler } from "react";
 export interface ProfileEmptyProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
+
 export interface ProfileFormProps {
   onClose: () => void;
   onSubmit: () => void;
 }
+
 export interface ProfileData {
   name: string;
   phone: string;
   address: string;
   bio: string;
 }
+
 export interface FormData {
   name: string;
-  phoneNumber: string;
-  area: string;
-  introduction: string;
+  phone: string;
+  address: string;
+  bio: string;
+}
+
+export interface ProfileViewProps {
+  userId: string | null;
+  onEdit: () => void;
 }

components/Profile/ProfileEdit/index.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import Button from "@/components/Button";
+import classNames from "classnames/bind";
+import ConfirmModal from "@/components/Modal/ModalContent/AlertModal";
+import Dropdown from "@/components/Dropdown";
+import Input from "@/components/Input";
+import Image from "next/image";
+import Spinner from "@/components/Spinner";
+import styles from "../Profile.module.scss";
+import { LOCATIONS } from "@/constants/constants";
+import { ProfileData, ProfileFormProps } from "../Profile.types";
+import { IModalProps } from "@/components/Modal/Modal.types";
+import { instance } from "@/utils/instance";
+import { getUserId } from "@/utils/jwt";
+
+const cx = classNames.bind(styles);
+
+function ProfileEdit({ onClose, onSubmit }: ProfileFormProps) {
+  const { register, handleSubmit, setValue } = useForm<ProfileData>();
+  const [initAddress, setInitAddress] = useState("");
+  const [showAlert, setShowAlert] = useState(false);
+  const [modalData, setModalData] = useState<IModalProps>({
+    modalType: "",
+    content: "",
+    btnName: [""],
+  });
+
+  const userId = getUserId();
+
+  useEffect(() => {
+    const getProfileData = async () => {
+      try {
+        if (userId) {
+          const response = await instance.get<{ item: ProfileData }>(
+            `/users/${userId}`
+          );
+          setValue("name", response.data.item.name);
+          setValue("phone", response.data.item.phone);
+          setValue("address", response.data.item.address);
+          setValue("bio", response.data.item.bio);
+
+          setInitAddress(response.data.item.address);
+        }
+      } catch (error) {
+        console.error("Get Error :", error);
+      }
+    };
+    getProfileData();
+  }, [userId, setValue]);
+
+  const handleCloseAlert = () => {
+    setShowAlert(false);
+    onClose();
+  };
+
+  const handleSubmitForm = async (data: ProfileData) => {
+    try {
+      const response = await instance.put(`/users/${userId}`, data);
+      if (response.status === 200) {
+        setModalData({
+          modalType: "alert",
+          content: "프로필 수정이 완료되었습니다.",
+          btnName: ["확인"],
+        });
+        setShowAlert(true);
+        onSubmit();
+      } else {
+        alert("프로필 수정에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("수정 안됨:", error);
+    }
+  };
+
+  return (
+    <div className={cx("profile", "main")}>
+      <div className={cx("header")}>
+        <h1 className={cx("title")}>프로필</h1>
+        <Image
+          src="/image/icon/close.svg"
+          width={24}
+          height={24}
+          alt="close button"
+          onClick={onClose}
+          className={cx("close-button")}
+        />
+      </div>
+      <form className={cx("form")} onSubmit={handleSubmit(handleSubmitForm)}>
+        <div className={cx("input-wrapper")}>
+          <section className={cx("input-section")}>
+            <Input
+              label="이름"
+              type="text"
+              register={register("name", { required: true })}
+            />
+          </section>
+          <section className={cx("input-section")}>
+            <Input
+              label="전화번호"
+              type="tel"
+              register={register("phone", {
+                required: true,
+                pattern: /^\d{3}-\d{3,4}-\d{4}$/,
+              })}
+            />
+          </section>
+          <section className={cx("input-section")}>
+            <label htmlFor="address" className={cx("label")}>
+              선호 지역
+            </label>
+            <Dropdown
+              options={LOCATIONS}
+              id="address"
+              onChange={(value) => {
+                setValue("address", value);
+              }}
+            />
+          </section>
+        </div>
+        <section className={cx("textarea-section")}>
+          <Input
+            label="소개"
+            type="text"
+            id="introduction"
+            register={register("bio", { required: true })}
+            isTextArea={true}
+          />
+        </section>
+        <div className={cx("button-section")}>
+          <div className={cx("button-wrapper")}>
+            <Button btnColorType="orange">저장</Button>
+          </div>
+        </div>
+      </form>
+      {showAlert && (
+        <div className={cx("overlay")}>
+          <ConfirmModal
+            modalData={modalData}
+            closeFunction={handleCloseAlert}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ProfileEdit;

components/Profile/ProfileForm/index.tsx

@@ -12,6 +12,7 @@ import { FormData, ProfileData, ProfileFormProps } from "../Profile.types";
 import { instance } from "@/utils/instance";
 import ConfirmModal from "@/components/Modal/ModalContent/AlertModal";
 import { IModalProps } from "@/components/Modal/Modal.types";
+import { getUserId } from "@/utils/jwt";
 
 const cx = classNames.bind(styles);
 
@@ -26,10 +27,14 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
   });
 
   useEffect(() => {
-    const storedUserId = localStorage.getItem("userId");
-    if (storedUserId) {
-      setUserId(storedUserId);
-    }
+    const fetchUserId = async () => {
+      const userId = getUserId();
+      if (userId) {
+        setUserId(userId);
+        console.log(userId);
+      }
+    };
+    fetchUserId();
   }, []);
 
   const handleCloseAlert = () => {
@@ -40,9 +45,9 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
   const handleSubmitForm = async (data: FormData) => {
     const body: ProfileData = {
       name: data.name,
-      phone: data.phoneNumber,
-      address: data.area,
-      bio: data.introduction,
+      phone: data.phone,
+      address: data.address,
+      bio: data.bio,
     };
 
     try {
@@ -90,8 +95,8 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
             <Input
               label="전화번호"
               type="tel"
-              id="phon-number"
-              register={register("phoneNumber", {
+              id="phone"
+              register={register("phone", {
                 required: true,
                 pattern: /^\d{3}-\d{3,4}-\d{4}$/,
               })}
@@ -103,9 +108,9 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
             </label>
             <Dropdown
               options={LOCATIONS}
-              id="area"
+              id="address"
               onChange={(value) => {
-                setValue("area", value);
+                setValue("address", value);
               }}
             />
           </section>
@@ -114,8 +119,8 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
           <Input
             label="소개"
             type="text"
-            id="introduction"
-            register={register("introduction", { required: true })}
+            id="bio"
+            register={register("bio", { required: true })}
             isTextArea={true}
           />
         </section>
@@ -127,7 +132,10 @@ const ProfileForm: React.FC<ProfileFormProps> = ({ onClose, onSubmit }) => {
       </form>
       {showAlert && (
         <div className={cx("overlay")}>
-          <ConfirmModal modalData={modalData} closeFunction={handleCloseAlert} />
+          <ConfirmModal
+            modalData={modalData}
+            closeFunction={handleCloseAlert}
+          />
         </div>
       )}
     </main>

components/Profile/ProfileView/ProfileView.module.scss

@@ -13,7 +13,9 @@
   display: flex;
 
   @media (max-width: $TABLET) {
-    padding: 40px 32px;
+    width: 680px;
+    // height : ;
+    padding: 40px 32px 0;
     flex-direction: column;
   }
 
@@ -104,14 +106,8 @@
   }
 }
 
-.button {
+.button-wrapper {
   cursor: pointer;
-  color: var(--primary);
-  font-size: 16px;
-  font-weight: 700;
   width: 169px;
   height: 48px;
-  border-radius: 6px;
-  border: 1px solid var(--primary);
-  background-color: var(--white);
 }