STAYINN 스테이인

• 🗓 기간: 2023.11.20 ~ 2023.12.01
• ❓ 주제: Next.js를 활용한 숙박 예약 서비스
• 🎉 배포 링크
• ❗ 테스트 계정 :
  • [email protected] / asdasd123
  • [email protected] / asdasd123
  • [email protected] / asdasd123
  • [email protected] / asdasd123
  • [email protected] / asdasd123

📗 목차

1. 참여 인원 및 담당 기능
2. 기획 및 디자인
3. OVERVIEW
4. 기술 스택
5. 협업 프로세스
6. 팀원별 구현 기능 및 회고
7. 리팩토링 이후 추가/변경 된 기능

👭 참여 인원 및 담당 기능

FE 팀

팀장 | 남궁종민	팀원 | 박성후	팀원 | 서지수	팀원 | 장문용	팀원 | 정진주
@NamgungJongMin	@HOOOO98	@jseo9732	@moonyah	@jinjoo-jung
초기 개발 환경 세팅 회원가입 / 로그인	숙박 / 객실 상세페이지 클라이언트 배포	장바구니 페이지 헤더 / 푸터 컴포넌트	메인 페이지 카테고리 페이지	예약 관련 페이지 예약 주문/내역/상세

BE팀

팀장 | 김진홍	팀원 | 김정훈	팀원 | 박찬영
@deepredk	@Aleexender	@cyPark95
유저 정보 장바구니	예약 주문	숙박업소

📃 API 설계

✒ 기획 및 디자인

Figma

🎞 OVERVIEW

🔍️ 기술 스택

FE 개발

협업 툴

배포

👨‍👨‍👦‍👦 협업 프로세스

개발용 repository 분리 및 브랜치 분기 전략

1) 분담한 역할에 따라 구현할 기능에 대한 개발 내용을 이슈로 등록한다.

2) 개인이 개발한 내용은 반드시 pr을 통해서 팀원들의 코드리뷰와 approval을 거친 뒤 적용한다.

3) Trello를 활용하여 백엔드 팀과 API와 관련 내용을 상의한다.

💻 팀원별 구현 기능 및 회고

남궁종민

작업 내용

• 초기 개발환경 세팅 (절대 경로 alias 설정 / eslint, prettier 설정 / 디렉터리 구조 / api 요청 메서드를 반환하는 객체 설정)
• 검색엔진최적화를 위한 Metadatas 작성 (robots, sitemap, favicon, title, description)
• 로그인/ 회원가입 input 값 validation
• validation 결과에 따라 디자인 변경 및 버튼 활성화 여부 결정
• 각 input 컴포넌트 단위 리렌더링
• 반복되는 react hooks -> custom hooks로 분리 (useAuthInput, useButtonActivate)
• 단위 당 한번의 요청만이 갈 수 있도록 debounce를 함수에 적용

로그인	회원가입

💥 트러블 슈팅

1. input 값을 채운 후 버튼 클릭을 통해 api 요청을 할 때 더블클릭이나 단시간에 여러번의 클릭을 할 경우 여러번의 요청이 가능 이슈가 있었다. debounce를 적용하여 의도한 동작에서 한번의 요청만이 가도록 해결했다.

const signup = debounce(
  async (
    email: InputType,
    password: InputType,
    nickname: InputType,
    phone: InputType
  ) => {
    try {
      const res = await authRequest.createUser({
        email: email.value,
        password: password.value,
        nickname: nickname.value,
        phone: phone.value,
      });
      console.log(res);

      if (res.status === 'SUCCESS') {
        router.replace('/auth/signin');
      } else {
        setSubmitError(res.errorMessage);
      }
    } catch (error) {
      console.log(error);
    }
  },
  200
);

2. 각 input마다 value값의 변화를 상태로 저장하고 렌더링하는 코드가 반복되었고 validation 까지 하려고 하니 코드가 너무 지저분해지고 유지보수성이 떨어졌다. 각 input 별 관리와 validation까지 한번에 처리하는 useAuthInput이라는 custom hook으로 분리하여 해결했다.

const useAuthInput = (target: string, password?: InputType) => {
  const [input, setInput] = useState({
    value: '',
    validationPass: false,
  });

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>): void => {
      if (target === 'email') {
        setInput({
          value: e.target.value,
          validationPass:
            /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(
              e.target.value
            ),
        });
      }

      if (target === 'password') {
        setInput({
          value: e.target.value,
          validationPass: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,15}$/.test(
            e.target.value
          ),
        });
      }

      if (target === 'passwordConfirm') {
        if (password) {
          setInput({
            value: e.target.value,
            validationPass: e.target.value === password.value,
          });
        }
      }

      if (target === 'name') {
        setInput({
          value: e.target.value,
          validationPass: (input.validationPass =
            e.target.value.length >= 2 && e.target.value.length <= 10),
        });
      }

      if (target === 'contact') {
        setInput({
          value: e.target.value,
          validationPass: /^\d{2,3}-\d{3,4}-\d{4}$/.test(e.target.value),
        });
      }
    },
    [input, target, password]
  );

  return [input, handleChange, setInput];
};

3. 각 input값 입력시 해당 input만이 리렌더링되게 하려고 컴포넌트를 memo로 묶어주었지만 의도한대로 값을 입력하는 input 값만이 리렌더링되지 않았다. 커스텀 훅에서 생성되는 handleChange 함수가 여러번 생성되며 제대로 메모이제이션이 되지 않는다는 것을 깨닫고 useCallback으로 사용하는 커스텀 훅의 함수또한 메모이제이션 해줌으로써 원하는 결과를 얻을 수 있었다.

// inputEmail.tsx
const InputEmail = memo(({ email, handleEmail }: EmailProps) => (
  <div className='relative my-5'>
    <label htmlFor='email' className='text-base leading-10'>
      이메일*
    </label>

    <input
      type='text'
      name='email'
      id='email'
      value={email.value}
      placeholder='이메일을 입력해주세요.'
      onChange={handleEmail}
      required
      autoComplete='off'
      className='border-lightGray top-10 h-14 w-full rounded-[10px] border-2 p-4 text-base text-black'
    />

    <ValidationIcon input={email} />
    <ErrorMsg target='email' input={email} />
  </div>
));

// useAuthInput.ts
const handleChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>): void => {
    if (target === 'email') {
      setInput({
        value: e.target.value,
        validationPass:
          /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(
            e.target.value
          ),
      });
    }

    if (target === 'password') {
      setInput({
        value: e.target.value,
        validationPass: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,15}$/.test(
          e.target.value
        ),
      });
    }

    if (target === 'passwordConfirm') {
      if (password) {
        setInput({
          value: e.target.value,
          validationPass: e.target.value === password.value,
        });
      }
    }

    if (target === 'name') {
      setInput({
        value: e.target.value,
        validationPass: (input.validationPass =
          e.target.value.length >= 2 && e.target.value.length <= 10),
      });
    }

    if (target === 'contact') {
      setInput({
        value: e.target.value,
        validationPass: /^\d{2,3}-\d{3,4}-\d{4}$/.test(e.target.value),
      });
    }
  },
  [input, target, password]
);

4. 서버 컴포넌트에서 로그인시 백단에서 set-cookie 해준 값을 읽어오지 못하는 이슈 발생. http only 속성이라 자바스크립트로 해당 쿠키에 접근할 수가 없었다. 또한 클라이언트 컴포넌트와 달리 서버사이드에서는 set-cookie해준 쿠키값을 가지고 있지 않기 때문에 미들웨어를 설정하여 쿠키값을 가로채거나 http only를 해제하는 방법을 생각하게 되었다. set-cookie를 해준다면 프론트에서 요청에 쿠키를 심어주지 않아도 알아서 담아갈 것이라 기대했던 바와 달라 이 두 방식도 올바른 해결방법이 아니라고 생각했고, 실제 현업에서 next.js app router를 쓸 때 어떤식으로 쿠키 인증을 하는지 피드백 때 여쭤보려고 한다.

5. 로그인이 필요한 동작에서 로그인이 되어있지 않아 로그인 페이지로 리다이렉션 되었을 때 해당 페이지에서 로그인 한다면 루트 페이지가 아닌 해당 동작을 하려던 페이지로 돌아가게 구현하고 싶었다. 이를 위해 로그인이 될 경우 뒤로가기 동작을 하는 것이 어떨까 생각하게 되었지만, 첫 페이지가 로그인일 경우와 회원가입에서 로그인페이지로 왔을 경우 등 여러 예외 사항들이 많이 발생하였다. 이 부분도 피드백을 듣고 리팩토링 때 반영해야겠다고 생각했다.

회고

백엔드와의 첫 협업이라 설레기도 했고, 걱정도 많았던 프로젝트였다. 백엔드를 제대로 경험해본적이 없기 때문에 내가 요구하는 사항들이 백엔드 팀에게 어느정도의 시간이 쓰이는지 감이 잡히지 않았고, 백엔드 팀 또한 마찬가지였다. 잘못하면 서로 감정이 상할 수도 있을 것이라 생각이 들었다. 서로의 상황을 부담없이 말하고 자유롭게 의견들을 공유하기 위해서는 단지 텍스트로 의사 전달을 하는 것이 아닌 서로가 직접 대화할 수 있는 순간이 많아야 한다고 느꼈다. 따라서 짧은 간격으로 화상 회의를 통해 의견을 조율했고, 테스트를 위한 중요한 미팅때는 오프라인 미팅을 통해 프로젝트를 진행했다. 덕분에 좋은 분위기로 프로젝트를 끝맺을 수 있었던 것 같다. 이번 프로젝트에서 가장 크게 느꼈던 것은 내 일이 아니더라도 어느정도 공감할 수 있는 정도의 지식을 가지고 있어야 개발의 긍적적인 진행이 가능하다는 것이었다. 내가 프론트기 때문에 프론트엔드 기술만을 공부한다면 제대로 협업할 수 없을 것이라 느꼈고, 개발 프로세스에 있어서 전체적인 그림을 알아두는 것이 앞으로 큰 도움이 될 것이라 생각했다. 이번 프로젝트 덕분에 프론트엔드 뿐만이 아니라 백엔드 팀들의 상황과 에로사항들을 알 수 있었고, 다음번 협업 때는 더욱 잘할수 있겠다는 자신감을 얻게 되었다.

추가로 팀장의 부담감이 심했었던 프로젝트였다. 익숙하지 않은 기술들로 개발을 진행하면서 내가 과연 팀원들을 리딩할 수 있을까라는 두려움도 있었다. 그러나 모든 부담을 내가 질 필요는 없었다. 성후님은 항상 자신감이 부족했던 나를 북돋아주었고, 지수님은 정말 든든하게 나의 부족한 부분들을 메꿔주셨다. 또 진주님은 팀의 분위기를 항상 밝게 해주셨고, 문용님 또한 소심한 내가 팀에 잘 적응할 정도의 분위기를 만들어주셨다. 프로젝트 결과뿐이 아니라 진정한 동료들을 얻을 수 있었던 것 같아 풍족한 프로젝트였다.

박성후

작업 내용

• 버튼 태그 속 이미지 태그 vs 버튼 백그라운드 이미지

// 버튼 태그 속 이미지 태그
<button>
  <img/>
</button>
// 이 방법은 버튼 안에 이미지 태그를 직접 포함시키는 방법입니다.
// 버튼은 텍스트 또는 다른 콘텐츠와 함께 이미지를 포함할 수 있습니다.
// 이 방법을 선택하면 이미지와 속성을 조작할 수 있습니다.
// 버튼에 텍스트와 이미지를 함께 표시해야 하는 경우 첫 번째 방법이 유용할 수 있습니다.

//   VS

// 버튼태그의 백그라운드 이미지
<button style={{'backGroundImage:'url(...)'}}/>
// 이 방법은 버튼에 배경 이미지를 추가하는 방법입니다.
// 버튼 텍스트나 다른 콘텐츠는 일반적으로 버튼 내에 추가됩니다.
// 이 방법을 선택하면 배경이미지와 스타일 속성을 조작할 수 있습니다.
// 반면에 버튼 전체가 이미지여야 하는 경우 두 번째 방법이 더 적합할 수 있습니다.

• 인풋 Placeholder vs label

<input placeholder="입력해주세요"/>
//placeholder 속성은 사용자가 입력할 내용에 대한 예시나 힌트를 제공하는 데 사용됩니다.
// 하지만 placeholder는 시각적인 힌트로만 제공되기 때문에
// 스크린 리더 사용자 등에게는 충분한 정보를 제공하지 못할 수 있습니다.

//    VS

<label for="test">테스트 인풋</label>
<input/>
// 위의 예시에서 for 속성은 input 요소의 id 값과 일치시켜 어떤 입력 필드와 관련이 있는지 지정합니다.
// 이 방식을 사용하면 스크린 리더 사용자 및 시각적 디자인과 상관없이 명확한 설명을 제공할 수 있습니다.

비로그인 시 예약하기	로그인 시 예약하기

비로그인 시 장바구니	로그인 시 장바구니

객실 예약 유효성 검사

💥 트러블 슈팅

• 라이브러리 CSS override
  rsuite? vercel사에서 제작한 라이브러리이기 때문에 리액트와 넥스트에 최적화되어 있습니다.
  상황 : 숙박 날짜 선택을 위해 DaterangePicker를 가져와 사용했습니다.
  문제 : 라이브러리를 사용할 때, 공식문서를 정독하지 않아 발생했습니다.
  CSS 모듈이 같이 설치가 되어 사용했으나 라이브러리를 사용한 페이지를 방문하면 CSS가 override되어 다른 페이지도 레이아웃이 깨지는 현상이 일어났습니다.
  해결 : 라이브러리 내에 이미 해결방안이 나와 있었습니다.
  기존에 사용하던 'rsuite/dist/rsuite.min.css'; 대신 'rsuite/dist/rsuite-no-reset.min.css'; 를 사용하면 되었습니다.
  느낀점 : 사실 이 문제도 직접 해결한 문제가 아니라 리팩토링 이후로 미룬 후에 조원 분이 찾아주신 해결책이었습니다. 앞으로는 어떤 것이든 공식문서를 꼼꼼히 보고 사용해야겠습니다.
  

회고

이번 프로젝트에서는 검색 엔진 최적화(SEO), 스크린 리더를 사용하는 유저들의 웹 접근성을 고려해보기 위해 NEXT를 사용하자는 팀 의견에 동의 했다. 다만 문제는 NEXT에 대한 이해도가 떨어진 상태로 개발을 시작했다는 점이다. 단순히 서버 컴포넌트와 클라이언트 컴포넌트의 차이에 대해서만 알고 있었는데, 실제 프로젝트에서는 깊이가 더 깊어지고, 상호작용이 많아지기 때문에 얕은 지식만으로 개발을 진행하기가 어려웠습니다. 중간중간 필요한 내용은 공식문서, 블로그를 참고하며 공부를 했습니다. 앞으로도 새로운 환경에 지속적으로 노출 시켜 이런 성장을 이루어 나가야 겠다고 생각했습니다. 처음 백엔드 개발자 분들과 협업을 통해 느낀 점은 데이터 구조, API 명세 부분에서 확실하게 문서화를 하고 지속적으로 소통을 하여 오차가 없도록 해야 한다는 것을 느꼈습니다.

서지수

작업 내용

헤더, 푸터

• 각 페이지에 맞게 사용할 수 있도록 컴포넌트화

장바구니

• 장바구니 조회
• 장바구니에 담긴 상품 데이터 (이미지, 상품명, 옵션 등)에 따른 상품별 구매 금액, 전체 주문 합계 금액 등을 화면에 출력
• 지난 체크인 날짜, 재고 없음으로 인한 예약 마감 상품 표시
• 장바구니 개별 삭제 기능 구현
• 장바구니 체크 박스를 통해 삭제 기능 구현
• 예약 불가 상품 삭제 기능 구현
• 예약 마감 상품을 제외한 전체 선택 / 해제 기능 구현
• 체크 박스를 통해 결제할 상품을 선택/제외 기능 구현
• 장바구니에서 주문하기 버튼 클릭 시, 예약(주문) 페이지로 이동

헤더	장바구니 개별, 선택 삭제

예약 불가 장바구니 삭제	전체 선택, 선택 항목 예약

💥 트러블 슈팅

• 필요한 위치에서만 푸터 표시 NextJS 서버에서 푸터가 필요한 페이지인지 구분한 뒤에 렌더링이 되기 전에 푸터 유무를 판단하여 보여 주고 싶었는데 서버 컴포넌트의 header, cookie (from next/header)를 사용하여 정보를 받아와도 페이지를 판단할 수 있는 원하는 값을 찾을 수 없었다. 프로젝트 기한 때문에 필요한 페이지마다 푸터를 넣어주는 방식으로 임시 해결했지만 서버 컴포넌트와 클라이언트 컴포넌트의 차이에 대해서 공부할 수 있었다. 이후 리펙토링 과정에서 아쉬웠던 부분을 개선해보려고 한다.
• 장바구니 선택 장바구니에 예약 불가(체크인 날짜가 지났거나 예약 가능한 방의 수가 없는 경우) 항목은 체크가 불가능하게 처리, 전체 선택, 필요한 항목만 선택 후 삭제, 개별 삭제 등 고려해야할 경우의 수가 많아 많은 어려움이 있었다.
  • Strict 모드로 인한 전체 선택 배열에 같은 아이템이 들어가 실제 선택한 수의 2배가 선택 처리되는 이슈
  • 첫 렌더링 시 전체 선택이 될 때 각 checkbox의 onChange가 개별적으로 인식되지 않아 각 항목이 체크가 되었을 때 그에 따른 배열 값을 바꿔줘야하는 이슈
• 이 외에도 많은 이슈가 있었지만 useEffect와 useState 를 잘 고려하여 해결하면서 다시 리액트의 라이프 사이클을 공부할 수 있었다.

회고

이전 토이2 프로젝트에서 익숙했던 페이지 라우터를 사용했었는데 이번 프로젝트에서 app 라우터를 사용하면서 app 라우터 개발 경험을 할 수 있었고 이전에는 고민하지 않았던 서버 컴포넌트와 클라이언트 컴포넌트에서 대해서 공부할 수 있었습니다.
백엔드와의 협업을 통해서 많은 개발이 진행되기 전에 빠르게 데이터 형식이나 api 문서를 통일한 뒤에 작업해야지 큰 문제 발생하지 않고 문제 해결도 수월하게 할 수 있다는 것을 알게 되었고 문서화와 소통의 중요성을 알게 되었습니다.
장바구니 기능 구현을 담당하면서 디테일한 작업들이 많아서 상태관리나 라이프 사이클을 공부할 수 있는 좋은 경험이 되었습니다. 코드의 가독성을 위해서 컴포넌트의 분리 및 컨벤션을 따르려고 노력했습니다. 팀원들과 대면으로 소통하여 원할하게 프로젝트를 마무리 할 수 있었습니다!

장문용

작업 내용

• main Carousel : autoplay 적용
• main Icon : 숙박 업소 카테고리 별 분류 아이콘, 분류 페이지와 연결되어 있다.
• main contents 01 → 지역 별 펜션 보여주기, API 연결
• main contents 02 → 지역 별 호텔 보여주기, API 연결
• main contents 03 → 지역 별 전체 숙소 보여주기 (분류 페이지와 연결)
• 카테고리 별 분류 드롭다운
• 지역 별 분류 드롭다운
• 숙소 카드 제작, infinite scroll 적용
• 숙박 업소 목록 조회 API 연결
• 숙소들은 각각의 detail page와 연결

메인페이지 carousel	메인페이지 contents

카테고리 페이지	상세페이지로 이동

💥 트러블 슈팅

호텔 카테고리와 지역을 동시에 분류해야 하는 상황에서, URL을 활용하여 페이지를 구성하는 과정에서 발생한 어려움이 있었다.

• 상황 : 처음에는 URL을 slug로 설정하여 호텔을 분류하려고 했으나, 이 방식이 너무 헷갈려서 로직을 변경하게 되었다.
• 문제 : slug를 사용한 URL은 category와 location의 명시성이 부족해 혼란을 초래해서 사용자가 원하는 정보를 정확히 식별하기 어렵다.
• 해결 : URL을 product?category=&location=로 명시적으로 변경하여 각각의 매개변수를 명확히 나타내게 되었다. 사용자가 쉽게 필터링하고 원하는 정보를 찾을 수 있도록 개선이 되었다.
• 느낀 점 : URL 구조의 중요성을 깨달았고, 명확한 매개변수를 통해 사용자 경험을 향상시키는 결정을 내렸다.

회고

이 프로젝트를 통해 백엔드와 소통하면서 api 연결과 데이터를 활용하는 협업 경험을 하였습니다. 프론트 개발에서 넥스트와 타입스크립트를 사용하면서 코드의 가독성과 유지보수성을 향상시키고자 하였습니다. 담당했던 부분에서는 메인 페이지와 분류 페이지 간의 연결 및 사용자 경험을 개선하기 위해 신경을 썼던 것 같습니다. 팀원들 간의 적극적이고 활발한 소통으로 인해 짧은 기간이지만 무사히 프로젝트를 마무리 지을 수 있었습니다!❤️

정진주

작업 내용

• 주문 결제 페이지 , api 연결
  • 주문할 숙소 정보 결제 페이지로 가져오기
  • 이용자 , 예약자 정보 동일하면 예약자 정보 가져오기
  • 이용자 정보, 결제 방식, 필수 체크박스 선택 후 결제 가능
• 주문 내역 상세 페이지 , api 연결
  • 결제 완료 → 주문 완료 상세 페이지
  • 결제 금액, 결제 수단, 이용자, 예약자 정보 보여주기
• 주문 내역 목록 페이지, api 연결
  • 사용자가 숙소 결제한 날짜 기준으로 숙소 목록 띄어주기
  • 상세보기 클릭시 상세 페이지로 이동

숙소 예약 정보 조회 & 결제 완료	결제(예약)했던 숙소 목록 조회

장바구니 담은 숙소 2개 결제

💥 트러블 슈팅

1. Next.js SSR을 사용한 SEO를 위한 Next.js를 사용한 프로젝트가 이번이 처음이라서 그런지, 서버 컴포넌트와 클라이언트 컴포넌트 간의 렌더링의 차이점이나 props전달하는 방식들을 헤맸던 것 같습니다. 그러다 보니 서버 컴포넌트에서 useState, useEffect를 사용하게 됐고 결과 ‘use client’를 작성하라는 에러 메세지를 마주하면서 다시 서버컴포넌트와 클라이언트의 차이점을 제대로 공부하고 코드를 작성해야겠다고 생각했습니다. 이후 lifecycle hooks같은 상호작용성을 포함하는 컴포넌트라면 그것을 클라이언트 컴포넌트로 만들고, 그렇지 않으면 서버컴포넌트로 관리를 하는 방식으로 코드를 작성하면서 next.js를 왜 사용하는지, 어떤 부분에서 사용해야하는지 등 문제를 해결해나가며 배울 수 있었습니다.

2. ChunkError

이 부분은 완전히 해결하지 않은 상태이지만 겪은 문제이기에 적었습니다. 직역하면 Chunk 파일을 불러오지 못해서 발생하는 에러라고 합니다. 사용자의 브라우저에서 캐싱이 되었거나, 이전 버전의 페이지가 계속 열려있던가 하는 등의 이류로 인해 지금은 존재하지 않는 이전 저번의 chunk 파일을 요청하게 되면서 ChunkError가 발생하는 현상인데, 이 에러가 계속 뜨면서 화면이 보이지 않는 것이 아니라 열 번 중 한번꼴로 발생하고 새로고침하면 브라우저 화면은 잘 작동을 해서 정확한 에러 발생 이유는 찾지 못 했습니다. 어떤 이유로 에러가 발생하는지 대충 이해는 했지만 정확하게 해결을 한 것은 아니라서 더 찾아보고 문제를 해결해 나갈 예정입니다.

회고

이번 프로젝트는 숙박 예약 서비스로, 제가 맡았던 부분인 숙소 결제 페이지와 주문 내역 목록 페이지간의 상호작용을 원활하게 하기위한 컴포넌트 구조를 나누고 코드를 작성하도록 노력하였습니다. next.js 프레임워크를 프로젝트에 처음으로 사용하면서 기존과는 달리 서버사이드렌더링을 통해 코드를 짜고 구조가 달라진 부분이 어렵다고 느껴졌지만 좋은 팀원분들을 만나서 next.js에 대해서 더 많이 배울 수 있었고, 백엔드분들과 협업하면서 API 문서를 보고 데이터 구조를 잡고, 데이터 정보를 가져오기까지 같이 소통하고 수정하는 과정을 거치면서 협업의 중요성도 다시 한 번 느낄 수 있었던 프로젝트였습니다.

🛠 리팩토링 이후 추가/변경 된 기능

남궁종민

1. 유저 정보와 관련된 기능 추가 (비밀번호 변경 / 회원 탈퇴)

마이페이지에 비밀번호 변경과 회원 탈퇴 요청을 하는 버튼들을 추가하였다. 해당 버튼들을 누르면 요청 여부를 다시 한번 확인하는 모달이 뜨게 되고 필수 input 값을 채우고 validation이 충족되면 확인 버튼이 활성화되어 요청들을 보낼 수 있게 된다.

마이페이지 버튼 추가	비밀번호 변경 모달	회원 탈퇴 모달

2. 미들웨어를 작성하여 페이지 렌더링 이전 서버 측에서 로그인 여부를 판별

로그인 여부에 따라 페이지를 보여줄지 리다이렉트 시킬지에 대한 여부를 판별하는 기존 로직은 해당 페이지에서 useEffect를 통해 로그인 여부를 판별하는 api요청을 보내고 그 여부에 따라 페이지를 리다이렉트 시키는 방식이었다. 이 방법의 문제는 인가여부를 판별하는 컴포넌트를 서버컴포넌트로 사용할 수 없다는 점과 페이지가 mount되어 렌더링 할 때 api요청이 가기 때문에 리다이렉트 전에도 잠깐 페이지가 보이며 깜빡거리는 현상이 일어난다는 점이었다. 따라서 해당 페이지의 렌더링 이전에 인증여부를 판별하기 위해 미들웨어를 작성했다.

이 때 미들웨어를 작성하면서 쿠키 이슈가 생겼는데, 백엔드 단에서 Set-cookie를 해주더라도 next서버에는 쿠키라는 개념이 없기 때문에 next서버에서의 요청에서 쿠키가 담겨가지 않아 인증 요청을 할 수가 없었다. 이를 해결하기 위해 로그인시 브라우저에 Set-cookie된 토큰들을 직접 next서버에 변수로 불러와 header의 cookie로 직접 넣어서 api 요청을 해주어야 했다. 이를 위해 'next-client-cookies/server'의 CookiesProvider를 RootLayout에 감싸주어 서버 컴포넌트와 클라이언트 컴포넌트에서 쿠키들을 공유할 수 있게하였다. 이후엔 Set-cookie한 토큰들의 값을 로그인시 읽어와 CookiesProvider에 따로 set 해주어 미들웨어에서 토큰들을 읽을 수 있게 하였고, 마찬가지로 로그아웃 시에는 따로 CookiesProvider의 토큰 값들을 remove 해주는 로직을 추가하였다.

// src/middleware.ts

export async function needAuth(req: NextRequest) {
  const cookies = getCookies();
  const url = req.nextUrl.clone();
  url.pathname = '/auth/signin';

  try {
    const response = await authRequest.getUser(cookies?.get('accessToken'));

    if (response.status === 'SUCCESS') {
      return NextResponse.next();
    }
  } catch (error) {
    console.log('err: ', error);
    return NextResponse.redirect(url);
  }
}

export async function alreadyAuth(req: NextRequest) {
  const cookies = getCookies();
  const url = req.nextUrl.clone();
  url.pathname = '/';

  try {
    const response = await authRequest.getUser(cookies?.get('accessToken'));

    if (response.status === 'SUCCESS') {
      return NextResponse.redirect(url);
    }
  } catch (error) {
    console.log('err: ', error);
    return NextResponse.next();
  }
}

export function middleware(request: NextRequest) {
  // <user signed> redirect to '/' when access auth pages
  if (request.nextUrl.pathname.startsWith('/auth/signin')) {
    console.log('call middleware - /auth/signin');

    return alreadyAuth(request);
  }
  if (request.nextUrl.pathname.startsWith('/auth/signup')) {
    console.log('call middleware - /auth/signup');

    return alreadyAuth(request);
  }

  // <user not signed> redirect to '/auth/signin' when access pages required authentication
  if (request.nextUrl.pathname.startsWith('/mypage')) {
    console.log('call middleware - /mypage');

    return needAuth(request);
  }

  if (request.nextUrl.pathname.startsWith('/cart')) {
    console.log('call middleware - /cart');

    return needAuth(request);
  }

  if (request.nextUrl.pathname.startsWith('/reservation')) {
    console.log('call middleware - /reservation');

    return needAuth(request);
  }

  if (request.nextUrl.pathname.startsWith('/reservationConfirm')) {
    console.log('call middleware - /reservationConfirm');

    return needAuth(request);
  }
}

export const config = {
  matcher: [
    '/',
    '/mypage',
    '/cart',
    '/auth/:path*',
    '/reservation/:path*',
    '/reservationConfirm/:path*',
  ],
};

// src/app/layout.tsx

const RootLayout = ({ children }: AppLayout) => (
  <CookiesProvider>
    <html lang='ko' className='bg-background'>
      <body className='container mx-auto mb-24 max-w-3xl'>{children}</body>
    </html>
  </CookiesProvider>
);

박성후

라이브러리 유사 CSS pollyfill

• 상황 : rsuite라는 라이브러리에서 제공하는 daterangepicker는 하나의 모달에서 두개의 달력을 제공하여 사용자로 하여금 한눈에 기간을 선택할 수 있게 합니다.
• 문제 : 하지만 반응형을 제공하지 않아 모바일의 경우 뷰포트를 벗어나는 문제가 발생합니다. 뿐만 아니라 올해 2023년 부터 해당 라이브러리의 update를 중지하면서 contribution도 할 수 없는 상황이었습니다.
• 해결 : 그래서 css module을 사용해서 class로 직접 반응형을 적용했습니다. 이미 적용된 css는 important를 적용하여 덮어씌워 스타일을 적용했습니다.

코드

//styles/dateRangePicker.css

.rs-picker-daterange-calendar-group {
  height: 100% !important;
}
@media screen and (max-width: 768px) {
  .rs-picker-daterange-menu {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rs-picker-daterange-panel {
    text-align: center;
    height: 100%;
  }
  .rs-stack-item {
    width: fit-content;
  }
  .rs-picker-daterange-content {
    width: 100%;
  }
  .rs-picker-daterange-header {
    width: 100%;
  }
  .rs-calendar-header-title {
    font-weight: bold;
  }

  .rs-picker-daterange-calendar-group {
    height: 578px;
    display: flex;
    flex-direction: column;
    min-width: 270px !important;
  }
  .rs-clendar,
  .rs-picker-menu {
    margin: 0;
  }
}

서지수

1. 장바구니 목록 삭제 확인 절차없이 바로 삭제되는 문제

• 상황
  장바구니 목록을 조회하는 페이지에서 '예약불가삭제', '선택삭제', '개별삭제' 버튼을 클릭하면 한번 더 확인하는 절차없이 바로 삭제되는 상황
• 문제
  장바구니에 추가한 항목이 확인 절차없이 바로 삭제된다면 사용자 경험이 떨어지는 것으로 판단
• 해결
  삭제를 확인하는 모달을 만들어서 바로 삭제되어 사용자 경험을 개선
• 코드

  'use client';
  
   import { useEffect } from 'react';
   
   interface Props {
     title?: string;
     content?: string;
     cancel?: string;
     onCancelClick: VoidFunction;
     confirm?: string;
     onConfirmClick: VoidFunction;
   }
   
   const Modal = ({
     title = '삭제하시겠어요?',
     content,
     cancel = '아니요',
     onCancelClick,
     confirm = '삭제하기',
     onConfirmClick,
   }: Props) => {
     useEffect(() => {
       document.body.style.overflow = 'hidden';
       return () => {
         document.body.style.overflow = 'unset';
       };
     }, []);
   
     return (
       <div className='fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-[rgba(0,0,0,0.5)]'>
         <div className='w-[18.5rem] rounded-2xl bg-white px-4 pb-2 pt-8'>
           <div className='mx-1 mb-4 text-center text-base font-bold text-black'>
             {title}
           </div>
           <div className='text-gray1 mx-1 mb-5 text-center text-sm'>
             {content}
           </div>
           <div className='flex items-center justify-center text-base'>
             <button
               className='text-gray1 mx-1 h-10 w-full flex-1'
               onClick={onCancelClick}
             >
               {cancel}
             </button>
             <button
               className='text-blue mx-1 h-10 flex-1 font-bold'
               onClick={onConfirmClick}
             >
               {confirm}
             </button>
           </div>
         </div>
       </div>
     );
   };
   
   export default Modal;

  const DeleteButton = ({ cartId }: Props) => {
  const [isShowModal, setIsShowModal] = useState(false);
  
  return (
      <>
        <button
          type='button'
          aria-label='장바구니 삭제'
          onClick={() => setIsShowModal(true)}
        >
          <HiMiniXMark className='text-gray1' />
        </button>
        {isShowModal && (
          <Modal
            content='선택하신 상품이 삭제됩니다'
            onCancelClick={() => setIsShowModal(false)}
            onConfirmClick={deleteCartItem}
          />
        )}
       {isShowToast && <Toast message={isShowToast} />}
     </>
    );
  };
   
  export default DeleteButton;

  삭제 버튼을 클릭하면 모달을 표시해주고 항목을 삭제할지 한번 더 확인하는 절차를 거치도록 개선

2. api로 받아온 데이터를 사용하는 코드에 맞도록 전처리하는 코드가 길어 파일에 너무 많은 코드를 보유하고 있는 문제

• 상황
  api로 받아온 장바구니 데이터가 화면에 보여줘야하는 형식과 차이가 있어 전처리를 해주어야하는데 그 코드가 너무 길어 한 파일에 너무 많은 내용을 가지고 있는 상황
• 문제
  한 파일에 너무 많은 코드를 가지고 있어서 코드 가독성이 떨어지고 유지보수가 쉽지 않은 문제
• 해결
  데이터를 전처리하는 코드를 커스텀훅으로 분리
• 코드

   import { useEffect, useState } from 'react';
   
   import type { CartItemInfo, PreppedCartProduct } from '@/@types/cart.types';
   
   const useCartList = (apiCartList: CartItemInfo[]) => {
     const [preppedProductList, setPreppedProductList] = useState<
       PreppedCartProduct[]
     >([]);
   
     useEffect(() => {
       setPreppedProductList([]);
   
       apiCartList.map((item) => {
         setPreppedProductList((prevPreppedProductList) => {
           const existingIndex = prevPreppedProductList.findIndex(
             (prevPreppedProductItem) =>
               prevPreppedProductItem.productId === item.product.productId
           );
   
           // 배열 안에 숙소가 존재하면
           if (existingIndex !== -1) {
             return prevPreppedProductList.map((prevPreppedProductItem, index) => {
               // 숙소 안에 방만 추가
               if (index === existingIndex) {
                 return {
                   ...prevPreppedProductItem,
                   cartRoomList: [
                     ...prevPreppedProductItem.cartRoomList,
                     {
                       id: item.id,
                       roomId: item.product.roomId,
                       imageUrl: item.product.imageUrl,
                       roomName: item.product.roomName,
                       baseGuestCount: item.product.baseGuestCount,
                       maxGuestCount: item.product.maxGuestCount,
                       price: item.product.price,
                       checkInTime: item.product.checkInTime,
                       checkOutTime: item.product.checkOutTime,
                       stock: item.product.stock,
                       checkInDate: item.checkInDate,
                       checkOutDate: item.checkOutDate,
                       numberOfNights: item.numberOfNights,
                       guestCount: item.product.guestCount,
                     },
                   ],
                 };
               }
               return prevPreppedProductItem;
             });
           }
   
           // 존재하지 않으면 숙소 및 방 추가
           return [
             ...prevPreppedProductList,
             {
               productId: item.product.productId,
               productName: item.product.productName,
               address: item.product.address,
               cartRoomList: [
                 {
                   id: item.id,
                   roomId: item.product.roomId,
                   imageUrl: item.product.imageUrl,
                   roomName: item.product.roomName,
                   baseGuestCount: item.product.baseGuestCount,
                   maxGuestCount: item.product.maxGuestCount,
                   price: item.product.price,
                   checkInTime: item.product.checkInTime,
                   checkOutTime: item.product.checkOutTime,
                   stock: item.product.stock,
                   checkInDate: item.checkInDate,
                   checkOutDate: item.checkOutDate,
                   numberOfNights: item.numberOfNights,
                   guestCount: item.product.guestCount,
                 },
               ],
             },
           ];
         });
       });
     }, [apiCartList]);
   
     return preppedProductList;
   };
   
   export default useCartList;

장문용

리팩토링 내용

1. 숙소 개수를 불러오는 중에 발생한 오류를 해결했습니다. 이 문제의 원인은 API 문서에서 페이지의 기본값이 1로 명시되어 있어서, 초기에는 페이지가 1부터 시작한다고 오해하고 있었던 것입니다. 하지만 실제로는 페이지가 0부터 시작한다는 것을 발견했습니다. 이로 인해 발생한 오류를 수정했습니다

2. 메인캐러셀 코드에서 있던 any 타입을 명시적인 TypeScript 타입으로 대체하였습니다.

3. 컴포넌트 main, products 폴더에 index 파일을 추가하였습니다.

4. 컴포넌트에 section 태그 넣어서 main 페이지 코드를 정리하였습니다.

5. 날짜 관련 기능에 대한 부분을 유틸리티 함수 적용으로 개선하였습니다.

6. 프로젝트 구조를 개선하기 위해 코드를 리팩토링하여 타입 정의를 types 폴더로, 그리고 API 요청과 관련된 로직을 api 폴더로 이동시켰습니다. 이 변경은 코드의 모듈화와 가독성을 향상시키고, 유지보수성을 강화하는 데 목적이 있습니다.

정진주

추가기능

• 예약 내역 목록 확인 무한스크롤 적용
• 주문 내역 목록, 주문 내역 디테일 페이지에에서도 몇 박인지 보이게 변경

수정사항

• 발견하지 못 한 any타입 제거
• 불명확한 변수, 함수명 수정
• 기간 최근 6개월 fix
• 주문 내역 목록에서 CARD, CASH -> 카드, 계좌이체 한글로 보이게 변경
• 버튼 누르면 제출되는 버그 변경

무한 스크롤 시연 영상

2023-12-15.2.37.30.mov