[Release] 리뷰미 운영서버 배포 v1.0.1

[All] 리뷰미 v1.0.1 배포
woowacourse-teams · Aug 23, 2024 · 7b442c9 · 7b442c9
2 parents f2a5d15 + 0ae1630
commit 7b442c9
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 25 deletions.
diff --git a/backend/src/main/java/reviewme/config/SwaggerConfig.java b/backend/src/main/java/reviewme/config/SwaggerConfig.java
@@ -5,8 +5,10 @@
 import org.springframework.boot.context.properties.EnableConfigurationProperties;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Profile;
 import reviewme.config.properties.SwaggerProperties;
 
+@Profile("!prod")
 @Configuration
 @EnableConfigurationProperties(SwaggerProperties.class)
 @RequiredArgsConstructor

diff --git a/frontend/src/components/common/modals/ContentModal/index.tsx b/frontend/src/components/common/modals/ContentModal/index.tsx
@@ -7,15 +7,23 @@ import ModalPortal from '../ModalPortal';
 import * as S from './styles';
 
 interface ContentModalProps {
+  title?: string;
   handleClose: () => void;
+  isClosableOnBackground?: boolean;
 }
 
-const ContentModal = ({ handleClose, children }: EssentialPropsWithChildren<ContentModalProps>) => {
+const ContentModal = ({
+  title,
+  handleClose,
+  children,
+  isClosableOnBackground = true,
+}: EssentialPropsWithChildren<ContentModalProps>) => {
   return (
     <ModalPortal>
-      <ModalBackground closeModal={handleClose}>
+      <ModalBackground closeModal={isClosableOnBackground ? handleClose : null}>
         <S.ContentModalContainer>
           <S.ContentModalHeader>
+            <S.Title>{title}</S.Title>
             <S.CloseButton onClick={handleClose}>
               <img src={CloseIcon} alt="모달 닫기" />
             </S.CloseButton>

diff --git a/frontend/src/components/common/modals/ContentModal/styles.ts b/frontend/src/components/common/modals/ContentModal/styles.ts
@@ -23,14 +23,22 @@ export const ContentModalContainer = styled.div`
 
 export const ContentModalHeader = styled.div`
   display: flex;
-  justify-content: flex-end;
+  gap: 2rem;
+  align-items: center;
+  justify-content: space-between;
+
   width: 100%;
   height: 3rem;
 `;
 
+export const Title = styled.span`
+  font-size: 1.8rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+`;
+
 export const Contents = styled.div`
   overflow-y: auto;
-  padding-right: 1.2rem;
+  width: 100%;
 `;
 
 export const CloseButton = styled.button`

diff --git a/frontend/src/components/common/modals/ModalBackground/index.tsx b/frontend/src/components/common/modals/ModalBackground/index.tsx
@@ -7,7 +7,7 @@ import * as S from './styles';
 interface ModalBackgroundProps {
   closeModal: (() => void) | null;
 }
-
+// TODO: 배경, ESC를 통한 모달 닫히는 기능을 불리해야함
 const ModalBackground: React.FC<PropsWithChildren<ModalBackgroundProps>> = ({ children, closeModal }) => {
   const modalBackgroundRef = useRef<HTMLDivElement>(null);
   useModalClose({ closeModal, modalBackgroundRef });

diff --git a/frontend/src/favicons/favicon.ico b/frontend/src/favicons/favicon.ico
diff --git a/frontend/src/hooks/useLongReviewItem.ts b/frontend/src/hooks/useLongReviewItem.ts
@@ -16,6 +16,10 @@ const useLongReviewItem = ({ minLength, maxLength, initialValue, required }: Use
     const value = e.target.value;
     if (value.length <= maxLength) setValue(value);
     if (value.length >= minLength) setIsError(false);
+    if (value.length > maxLength) {
+      setIsError(true);
+      setErrorMessage(`최대 ${maxLength}자까지만 입력 가능해요`);
+    }
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {

diff --git a/frontend/src/pages/HomePage/components/Carousel/index.tsx b/frontend/src/pages/HomePage/components/Carousel/index.tsx
@@ -26,12 +26,12 @@ const Carousel = ({ slideList }: CarouselProps) => {
   // NOTE: 첫 슬라이드와 마지막 슬라이드의 복제본을 각각 맨 뒤, 맨 처음에 추가
   const clonedSlideList = [slideList[slideLength - 1], ...slideList, slideList[0]];
 
-  const scrollToSlide = (index: number) => {
+  const scrollToSlide = (index: number, withTransition = true) => {
     if (slideRef.current) {
       setIsTransitioning(true);
 
       const slideWidth = slideRef.current.clientWidth;
-      slideRef.current.style.transition = 'transform 0.5s ease-in-out';
+      slideRef.current.style.transition = withTransition ? `transform ${TRANSITION_DURATION}ms ease-in-out` : 'none';
       slideRef.current.style.transform = `translateX(-${slideWidth * index * 0.1}rem)`;
     }
     setCurrentSlideIndex(index);
@@ -45,29 +45,29 @@ const Carousel = ({ slideList }: CarouselProps) => {
     scrollToSlide(currentSlideIndex - 1);
   };
 
+  // NOTE: // 초기 슬라이드 위치 설정
+  useEffect(() => {
+    scrollToSlide(REAL_START_INDEX, false);
+  }, []);
+
   // NOTE: 맨 처음/맨 끝 슬라이드 전환용 useEffect
   useEffect(() => {
     if (isTransitioning) {
       if (currentSlideIndex === slideLength + 1) {
         // 마지막 슬라이드 처리
         setTimeout(() => {
           setIsTransitioning(false);
-          slideRef.current!.style.transition = 'none';
-          slideRef.current!.style.transform = `translateX(-${slideRef.current!.clientWidth * 0.1}rem)`;
-          setCurrentSlideIndex(REAL_START_INDEX);
+          scrollToSlide(REAL_START_INDEX, false);
         }, TRANSITION_DURATION); // NOTE: 애니메이션 트랜지션 시간과 동일하게 설정 (0.5초)
-      }
-      if (currentSlideIndex === 0) {
+      } else if (currentSlideIndex === 0) {
         // 첫 번째 슬라이드 처리
         setTimeout(() => {
           setIsTransitioning(false);
-          slideRef.current!.style.transition = 'none';
-          slideRef.current!.style.transform = `translateX(-${slideRef.current!.clientWidth * slideLength * 0.1}rem)`;
-          setCurrentSlideIndex(slideLength);
+          scrollToSlide(slideLength, false);
         }, TRANSITION_DURATION);
       }
     }
-  }, [currentSlideIndex, slideLength]);
+  }, [currentSlideIndex, slideLength, isTransitioning]);
 
   // NOTE: 슬라이드 자동 이동용
   useEffect(() => {

diff --git a/frontend/src/pages/ReviewWritingCardFromPage/components/SubmitCheckModal/index.tsx b/frontend/src/pages/ReviewWritingCardFromPage/components/SubmitCheckModal/index.tsx
@@ -19,7 +19,7 @@ const SubmitCheckModal = ({
       cancelButton={{
         styleType: 'secondary',
         text: '취소',
-        handleClick: () => handleCancelButtonClick,
+        handleClick: handleCancelButtonClick,
       }}
       handleClose={handleCloseModal}
       isClosableOnBackground={true}

diff --git a/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx b/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
@@ -7,6 +7,9 @@ import { ROUTE } from '@/constants/route';
 import { useCheckPasswordValidation, useEyeButton, useGroupAccessCode } from '@/hooks';
 
 import * as S from './styles';
+
+const REVIEW_PASSWORD_INPUT_MESSAGE = '리뷰 확인을 위해 설정한 비밀번호를 입력해주세요';
+
 interface PasswordModalProps {
   closeModal: () => void;
   reviewRequestCode: string;
@@ -52,9 +55,8 @@ const PasswordModal = ({ closeModal, reviewRequestCode }: PasswordModalProps) =>
   };
 
   return (
-    <ContentModal handleClose={closeModal}>
+    <ContentModal title={REVIEW_PASSWORD_INPUT_MESSAGE} handleClose={closeModal} isClosableOnBackground={false}>
       <S.PasswordModal>
-        <S.ModalTitle>리뷰 확인을 위해 설정한 비밀번호를 입력해주세요</S.ModalTitle>
         <S.InputContainer>
           <S.PasswordInputContainer>
             <Input

diff --git a/frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts b/frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts
@@ -3,12 +3,7 @@ import styled from '@emotion/styled';
 export const PasswordModal = styled.div`
   display: flex;
   flex-direction: column;
-  height: 14rem;
-`;
-
-export const ModalTitle = styled.h3`
-  margin-bottom: 2rem;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  margin-top: 2rem;
 `;
 
 export const InputContainer = styled.form`
@@ -27,6 +22,8 @@ export const Label = styled.label`
 export const PasswordInputContainer = styled.div`
   position: relative;
   display: flex;
+  gap: 30rem;
+  width: 70%;
 `;
 
 export const ErrorMessage = styled.p`