Merge branch 'dev' into Feat/#308

src/components/Input/Input.tsx

@@ -18,6 +18,7 @@ interface InputProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   checkButtonText?: string;
   inputWidth?: string;
+  isValid?: boolean;
 }
 
 const Input = ({
@@ -30,6 +31,7 @@ const Input = ({
   onCheck,
   checkButtonText = '중복확인',
   inputWidth = '100%',
+  isValid,
 }: InputProps) => {
   const [inputValue, setInputValue] = useState('');
   const [showPassword, setShowPassword] = useState(false);
@@ -69,7 +71,7 @@ const Input = ({
         <div css={inputContainerStyle}>
           <div css={inputWrapperStyle}>
             <input
-              css={inputStyle(error)}
+              css={inputStyle(error, isValid)}
               type={type}
               placeholder={placeholder}
               {...register}
@@ -101,10 +103,16 @@ const Input = ({
             </button>
           )}
         </div>
+        {isValid && (
+          <div css={errorContainerStyle}>
+            <img src="/img/icon-valid.svg" alt="유효성 검사 통과" css={errorIconStyle} />
+            <p css={errorStyle(error, isValid)}>유효성 검사 통과</p>
+          </div>
+        )}
         {error && (
           <div css={errorContainerStyle}>
-            <img src="/img/icon-error.svg" alt="error" css={errorIconStyle} />
-            <p css={errorStyle}>{error}</p>
+            <img src="/img/icon-error.svg" alt="검증 실패 " css={errorIconStyle} />
+            <p css={errorStyle(error, isValid)}>{error}</p>
           </div>
         )}
       </label>
@@ -121,23 +129,23 @@ const labelStyle = css`
   ${TypoBodySmM}
 `;
 
-const inputStyle = (error?: string) => css`
+const inputStyle = (error?: string, isValid?: boolean) => css`
   && {
     margin-top: 0.4rem;
     margin-bottom: 0.4rem;
     width: 100%;
     height: 5.6rem;
     box-sizing: border-box;
     padding: 1rem;
-    border: 1px solid ${error ? 'red' : variables.colors.gray300};
+    border: 1px solid ${error ? 'red' : isValid ? 'green' : variables.colors.gray300};
     border-radius: 0.6rem;
     background-color: ${variables.colors.white};
     font-size: 1.6rem;
 
     ${error && `animation: shake 0.3s ease-in-out 2;`}
   }
   &:focus {
-    outline: 1px solid ${error ? 'red' : variables.colors.primary};
+    outline: 1px solid ${error ? 'red' : isValid ? 'green' : variables.colors.primary};
   }
 
   @keyframes shake {
@@ -164,9 +172,8 @@ const errorIconStyle = css`
   width: 1.6rem;
   height: 1.6rem;
 `;
-
-const errorStyle = css`
-  color: red;
+const errorStyle = (error?: string, isValid?: boolean) => css`
+  color: ${error ? 'red' : isValid ? 'green' : variables.colors.gray600};
 `;
 
 const inputWrapperStyle = css`

src/components/Navigator/ReservationNavigator.tsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+import { ResStatus } from '@pages/Reservation/ReservationList';
+import { TypoTitleXsM } from '@styles/Common';
+import variables from '@styles/Variables';
+import { Dispatch, SetStateAction } from 'react';
+
+const ReservationNavigator = ({
+  list,
+  status,
+  setStatus,
+}: {
+  list: ResStatus[];
+  status: ResStatus;
+  setStatus: Dispatch<SetStateAction<ResStatus>>;
+}) => {
+  return (
+    <nav>
+      <UlStyle>
+        {list.map((item, index) => {
+          const isActive = item === status;
+          const length = list.length;
+
+          return (
+            <LiStyle
+              key={index}
+              className={isActive ? 'active' : ''}
+              onClick={() => setStatus(item)}
+              length={length}
+            >
+              <span css={TypoTitleXsM}>{item}</span>
+            </LiStyle>
+          );
+        })}
+      </UlStyle>
+    </nav>
+  );
+};
+
+const UlStyle = styled.ul`
+  display: flex;
+`;
+
+const LiStyle = styled.li<{ length: number }>`
+  position: relative;
+  width: calc(100% / length);
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 0;
+  box-sizing: border-box;
+  color: ${variables.colors.gray600};
+
+  & > span {
+    position: relative;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: ${variables.colors.gray300};
+    height: 0.1rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.active {
+    color: ${variables.colors.black};
+  }
+
+  &.active::before {
+    content: '';
+    position: absolute;
+    background-color: ${variables.colors.black};
+    height: 0.2rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.active > span::after {
+    content: '';
+    position: absolute;
+    right: calc(-4 * sqrt(2) * 0.1rem);
+    top: calc(-2 * sqrt(2) * 0.1rem);
+    width: 0.4rem;
+    height: 0.4rem;
+    background-color: ${variables.colors.primary};
+    transform: translateX(-25%) rotate(45deg);
+  }
+`;
+
+export default ReservationNavigator;

src/components/ReservationCard/RatingReview.tsx

@@ -0,0 +1,64 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { TypoCapXsR } from '@styles/Common';
+import variables from '@styles/Variables';
+
+const RatingReview = ({ ratingValue = 0 }) => {
+  let ratingComment = '';
+
+  switch (ratingValue) {
+    case 1:
+      ratingComment = '별로였어요.';
+      break;
+    case 2:
+      ratingComment = '그저 그랬어요.';
+      break;
+    case 3:
+      ratingComment = '괜찮았어요.';
+      break;
+    case 4:
+      ratingComment = '좋았어요.';
+      break;
+    case 5:
+      ratingComment = '최고였어요!';
+      break;
+    default:
+      ratingComment = '촬영은 어떠셨나요? 사진관 이용 리뷰를 남겨주세요.';
+      break;
+  }
+
+  return (
+    <div css={CardRatingStar}>
+      <p>{ratingComment}</p>
+      <div className="ratingBox">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <img
+            key={i}
+            src={`/img/icon-rating${i < ratingValue ? '.svg' : '-disabled.svg'}`}
+            alt={i < ratingValue ? '평가됨' : '미평가'}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RatingReview;
+
+const CardRatingStar = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  border-top: 0.1rem solid ${variables.colors.gray300};
+  padding-top: 1rem;
+
+  & p {
+    ${TypoCapXsR}
+    color: ${variables.colors.gray800};
+  }
+
+  .ratingBox {
+    display: flex;
+    gap: 0.2rem;
+  }
+`;