merge 최신화

src/assets/svg/FemaleIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgFemaleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 1200 1200"
+    {...props}
+  >
+    <path d="M600 0C387.136 0 214.538 172.598 214.538 385.462c0 187.751 134.31 344.181 312.055 378.479V888.02H361.278v146.74h165.314V1200h146.74v-165.24h165.314V888.02H673.333V763.94c177.78-34.269 312.129-190.702 312.129-378.479C985.462 172.598 812.864 0 600 0m0 153.278c128.231 0 232.184 103.953 232.184 232.184S728.232 617.647 600 617.647 367.816 513.693 367.816 385.462 471.769 153.278 600 153.278" />
+  </svg>
+);
+export default SvgFemaleIcon;

src/assets/svg/MaleIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgMaleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 1200 1200"
+    {...props}
+  >
+    <path d="M727.498 0v167.082h182.347L669.487 405.84c-67.443-43.645-147.834-68.973-234.15-68.973-238.345 0-431.585 193.202-431.585 431.547C3.751 1006.76 196.992 1200 435.337 1200s431.548-193.24 431.548-431.586c0-90.596-27.903-174.67-75.601-244.09l236.321-236.321V468.75h167.082c0-146.475 1.587-322.656 1.561-468.75zM435.337 510.575c142.412 0 257.839 115.427 257.839 257.839s-115.427 257.878-257.839 257.878-257.878-115.466-257.878-257.878 115.465-257.839 257.878-257.839" />
+  </svg>
+);
+export default SvgMaleIcon;

src/assets/svg/index.ts

@@ -20,6 +20,7 @@ export { default as Goddess } from "./Goddess";
 export { default as HeartTag } from "./HeartTag";
 export { default as Helmet } from "./Helmet";
 export { default as LionCut } from "./LionCut";
+export { default as Loading } from "./Loading";
 export { default as Maker } from "./Maker";
 export { default as Medal } from "./Medal";
 export { default as MoneyTag } from "./MoneyTag";
@@ -58,10 +59,11 @@ export { default as Calendar } from "./Calendar";
 export { default as Camera } from "./Camera";
 export { default as Check } from "./Check";
 export { default as Favicon } from "./Favicon";
+export { default as FemaleIcon } from "./FemaleIcon";
 export { default as Home } from "./Home";
 export { default as Letter } from "./Letter";
-export { default as Loading } from "./Loading";
 export { default as Logo } from "./Logo";
+export { default as MaleIcon } from "./MaleIcon";
 export { default as Payment } from "./Payment";
 export { default as Pen } from "./Pen";
 export { default as Pin } from "./Pin";

src/components/button/DateDropBox/DateDropBox.tsx

@@ -69,17 +69,38 @@ export default function DateDropBox({
     ),
   ];
 
-  const filteredMonths =
-    type === "birthday" && selectedYear === currentYear.toString()
-      ? ["선택 없음", ...months.slice(1, currentMonth + 1)] // Only past months for current year
-      : months;
-
-  const filteredDays =
-    type === "birthday" &&
-    selectedYear === currentYear.toString() &&
-    selectedMonth === currentMonth.toString().padStart(2, "0")
-      ? ["선택 없음", ...days.slice(1, currentDay + 1)] // Only past days for current month of current year
-      : days;
+  const filteredMonths = (() => {
+    if (type === "birthday" && selectedYear === currentYear.toString()) {
+      // 생일일 때는 현재 연도면 이전 월까지만 선택 가능
+      return ["선택 없음", ...months.slice(1, currentMonth + 1)];
+    } else if (
+      type === "reservation" &&
+      selectedYear === currentYear.toString()
+    ) {
+      // 예약일 때는 현재 연도에 오늘 이후의 월부터 가능
+      return ["선택 없음", ...months.slice(currentMonth)];
+    }
+    return months;
+  })();
+
+  const filteredDays = (() => {
+    if (
+      type === "birthday" &&
+      selectedYear === currentYear.toString() &&
+      selectedMonth === currentMonth.toString().padStart(2, "0")
+    ) {
+      // 생일일 때는 현재 연도와 월이 현재 월과 같다면, 오늘 이전의 일만 선택 가능
+      return ["선택 없음", ...days.slice(1, currentDay + 1)];
+    } else if (
+      type === "reservation" &&
+      selectedYear === currentYear.toString() &&
+      selectedMonth === currentMonth.toString().padStart(2, "0")
+    ) {
+      // 예약일 때는 현재 연도와 월이 현재 월과 같다면, 오늘의 다음 날부터 선택 가능
+      return ["선택 없음", ...days.slice(currentDay + 1)];
+    }
+    return days;
+  })();
 
   const handleDateChange = () => {
     if (selectedYear && selectedMonth && selectedDay) {

src/components/button/MultiSelectButton/MultiSelectButton.stories.tsx

@@ -67,3 +67,14 @@ export const LargeGrid: Story = {
     onSelect: (indexes) => console.log("선택된 버튼 인덱스:", indexes),
   },
 };
+
+export const Payment: Story = {
+  args: {
+    row: 1,
+    col: 3,
+    buttonNames: [, "카드 결제", "현금 결제", "계좌 이체"],
+    selectedIndexes: [],
+    onSelect: (indexes: number[]) =>
+      console.log("선택된 버튼 인덱스:", indexes),
+  },
+};

src/components/button/RadioSelectButton/RadioSelectButton.stories.tsx

@@ -31,15 +31,6 @@ export const Gender: Story = {
   },
 };
 
-export const Payment: Story = {
-  args: {
-    buttonNames: ["카드 결제", "현금 결제", "계좌이체"],
-    selectedIndex: 1,
-    col: 3,
-    onSelect: (index) => console.log("선택된 버튼 인덱스:", index),
-  },
-};
-
 export const GroomingType: Story = {
   args: {
     buttonNames: ["전체", "위생 미용"],

src/components/cards/Card/Card.styles.ts

@@ -10,9 +10,9 @@ export const CardWrapper = styled.div<{
       ? `1px solid ${colors.blue200}`
       : `1px solid ${colors.background}`};
   border-radius: 15px;
-  padding: 16px 22px;
+  padding-left: 20px;
   background-color: ${({ isSelected, disabled }) =>
-    disabled ? colors.gray200 : isSelected ? colors.blue300 : colors.white};
+    disabled ? colors.gray300 : isSelected ? colors.blue300 : colors.white};
   display: flex;
   align-items: center;
   text-align: center;
@@ -21,7 +21,7 @@ export const CardWrapper = styled.div<{
       ? "not-allowed"
       : "pointer"}; // disabled일 때 pointer를 not-allowed로 설정
   opacity: ${({ disabled }) =>
-    disabled ? 0.6 : 1}; // disabled일 때 opacity를 낮춤
+    disabled ? 0.3 : 1}; // disabled일 때 opacity를 낮춤
 `;
 
 export const TagsWrapper = styled.div`

src/components/input/CustomInput/CustomInput.tsx

@@ -6,7 +6,6 @@ import {
   StyledInputWrapper,
   StyledInput,
   StyledTextarea,
-  Message,
   SuffixContainer,
   NoticeContainer,
 } from "./CustomInput.styles";
@@ -74,13 +73,6 @@ export default function CustomInput({
     props.onChange?.(e);
   };
 
-  // 색상 결정 함수
-  const getColor = () => {
-    if (error) return "red100";
-    if (success) return "blue100";
-    return "black100";
-  };
-
   return (
     <Container fullwidth={fullwidth} hasButton={hasButton} width={width}>
       {label && (

src/components/profile-img/ProfileImg/ProfileImg.styles.ts

@@ -14,6 +14,7 @@ export const StyleProfileImg = {
     display: flex;
     justify-content: center;
     position: relative;
+    margin: 20px 0;
   `,
   RoundImg: styled.img<StyleImg>`
     width: ${(props) => (props.width ? props.width : "100%")};

src/pages/customer/mypage/detail/index.tsx

@@ -7,12 +7,13 @@ import {
   LeftAlignedText,
   EndWrapper,
 } from "./index.styles";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { ROUTE } from "../../../../constants/routes";
 import { useEffect, useState } from "react";
 import { getCustomerProfile } from "../../../../apis/customer/resources/customer";
 import { GetCustomerProfileResponse } from "../../../../types/customer/customer";
 import { useUserDetails } from "../../../../hooks/useUserDetails";
+import Toast from "../../../../components/toast";
 
 export default function CustomerMyPageDetail() {
   const navigate = useNavigate();
@@ -21,6 +22,15 @@ export default function CustomerMyPageDetail() {
     {},
   );
 
+  const location = useLocation();
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  useEffect(() => {
+    // location.state로부터 toastMessage 가져오기
+    if (location.state?.toastMessage) {
+      setToastMessage(location.state.toastMessage); // 메시지를 상태로 저장
+    }
+  }, [location]);
+
   useEffect(() => {
     const fetchProfile = async () => {
       if (userId) {
@@ -104,6 +114,7 @@ export default function CustomerMyPageDetail() {
         </EndWrapper>
         <GNB type="designer" />
       </PageWrapper>
+      {toastMessage && <Toast style={{ bottom: "25px" }}>{toastMessage}</Toast>}
     </>
   );
 }

src/pages/customer/mypage/edit/CustomerMyPageEdit.styles.ts

@@ -5,6 +5,5 @@ export const MyPageEditWrapper = styled.div`
   flex-direction: column;
   gap: 20px;
   width: 100%;
-  height: 100vh;
   overflow-y: auto;
 `;