✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

배포환경에서 MUI 스타일 적용 안 되는 이슈 해결(슬라이더)

📝 상세 내용

• SSR에서 MUI 적용 설정
• 커스텀한 슬라이더 바 스타일 적용 안 되는 이슈 해결
• 슬라이더바 최솟값 0 -> 1 수정

📚 참고 레퍼런스

• next.js에서 material-ui 사용하기
• 공식 문서 - Style library interoperability(스타일 라이브러리 상호 운용성)

⚠️ 참고 사항

• ssr 설정을 해도 커스텀한 스타일이 적용되지 않았던 이유는 커스텀 스타일 코드가 스타일 컴포넌트 문법이 아니었기 때문이었다. 아마 구글링을 하며 이모션 문법을 사용했던 것 같다.
  

🖥️ 스크린샷

수정 전	수정 후

✏️ 한 줄 요약

SelectBox 컴포넌트 작성

📝 상세 내용

type Props = {
  initialText: string;
  optionData: string[];
  width: string;
};

• Select 컴포넌트 작성
• 테스트 페이지 생성: /test/select

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

404 페이지 커스텀

📝 상세 내용

• 404 페이지에서 사용할 애니메이션 업로드
• 반응형 작업

📚 참고 레퍼런스

공식문서 - 404 page

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

피드백 받을 수 있는 comment 페이지 생성

📝 상세 내용

comment 페이지 생성 후 메인 페이지에서 연결

📚 참고 레퍼런스

• 공식 사용법 - utterances 🔮
• Next.js기반 blog에 uttarences 추가하기
• 공식 문서 - next/dynamic

⚠️ 참고 사항

🖥️ 스크린샷

메인 페이지	코멘트 페이지	로그인 후	댓글 작성

✏️ 한 줄 요약

로딩 컴포넌트 생성 및 적용

📝 상세 내용

type Props = {
  width: string;
  size: 'big' | 'small';
};

• /question : 'big' 사용
• /interview : 'small' 사용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

/question

/interview

✏️ 한 줄 요약

정보 입력 후 페이지 이동할 때 경로에 쿼리 사용하기

📝 상세 내용

• 메인 페이지에서 정보 입력 후 생성 버튼 클릭 시 입력한 데이터를 쿼리에 담아서 /question 페이지로 이동
• /question 에서 질문 선택 시 해당 질문을 쿼리에 담아서 /interview 로 이동
• /interview 페이지에서는 쿼리로 넘어온 question을 GPT의 질문처럼 보이게 초기 데이터 생성
• 새로고침을 해도 url의 쿼리를 사용할 수 있도록 getServerSideProps 함수 사용
• Question 컴포넌트에 onClick props 추가하고 이를 테스트 페이지에 반영

📚 참고 레퍼런스

• [Next] NextJS 페이지간 query 데이터 이동방법 (Link, next/router)
• 공식문서 - useRouter
• [NextJS] NextJS 시작하기 - 8. URL에 데이터 전달하고 가져오기(Catch All URL)

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

질문 개수 설정하는 슬라이더 컴포넌트 작성

📝 상세 내용

• MUI 라이브러리 설치
• 커스텀 디자인 적용
• 슬라이더 움직일 때마다 값이 달라지도록 onChange 이벤트 props 사용
• 테스트 페이지 생성: /test/slider

📚 참고 레퍼런스

⚠️ 참고 사항

width를 props로 받아서 사용

🖥️ 스크린샷

피그마 디자인

메인페이지 - 로그인o	메인페이지 - 로그인x

구현

✏️ 한 줄 요약

메인 페이지 헤더 없앤 버전으로 퍼블리싱 및 api 요청 전 데이터 작업 완료

📝 상세 내용

• 반응형 작업
• 콘솔이 두 번씩 찍히는 현상 해결하기 위해 next.config.js 수정
  • reactStrictMode: true -> false
• 사용자가 선택해야 하는 셀렉트 박스의 옵션 값들을 constants 폴더에 상수로 분리 후 @constants/* 절대경로 설정
• Select, Slider 컴포넌트 수정
  • 선택한 값을 페이지에서 사용할 수 있게 하기 위해 props로 setState 함수 전달
  • Slider 컴포넌트는 width에 %를 사용하기 위해 타입을 number -> string 으로 타입 변경
  • 컴포넌트 수정 사항에 따른 테스트 페이지 변경

  // Select.tsx

  type Props = {
    initialText: string;
    optionData: string[];
    width: string;
    setSelect: (data: string) => void;
  };

// Slider.tsx

type Props = {
  width: string;
  setSelect: (data: number) => void;
};

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

소형 휴대기기 320*766	대형 휴대기기 425*766	태블릿 768*766	노트북 1024*766	대형 노트북 1440*766

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

Question컴포넌트 작성

📝 상세 내용

type Props = {
  text: string;
};

구현 완료

• 반응형 작업
• 텍스트 내용에 따른 자동 줄바꿈

추후 도입 예정

• 북마크
  • 삭제하기 클릭 시 x버튼 활성화
  • x버튼 클릭 시 삭제 모달 등장
• 생성된 질문리스트
  • 북마크 추가하기 클릭 시 북마크 버튼 활성화
  • 북마크 버튼 클릭 시 북마크 등록 또는 해제

📚 참고 레퍼런스

⚠️ 참고 사항

• 빠르게 MVP 작업을 위해 로그인, 북마크 기능을 제외
• 해당 기능들은 추후 도입 예정
• 각 질문을 클릭 시 chatGPT에 질문하도록 api 연결 예정

🖥️ 스크린샷

구현 완료

도입 예정

북마크 리스트	북마크 리스트 - 삭제하기 클릭 시	북마크 리스트 - 삭제버튼 클릭 시

생성된 질문 리스트	생성된 질문 리스트 - 북마크 추가하기 클릭 시

✏️ 한 줄 요약

리드미 작성

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

Interviz | Comment

https://interviz.vercel.app/comment

✏️ 한 줄 요약

question 페이지 api 작업

📝 상세 내용

• .env 파일 생성 후 .gitignore에 추가
• CORS 에러 해결을 위해 next.config.js 수정
• url 쿼리에 있는 값들 불러와서 api 호출 후 데이터 화면에 그리기

📚 참고 레퍼런스

• Next.js CORS 에러..
• [nextjs] next.config.js 내부의 Rewrite 적용
• 공식문서 - Environment Variables
• 공식문서 - getServerSideProps

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

SplashScreen 컴포넌트 작성

📝 상세 내용

• 애니메이션 위한 lottie-react 설치
• 반응형 작업
• 절대경로 수정
  • 기존 @/ : src/* 를 삭제하고
  • @* 방식 사용
    • @src/*
    • @public/*
    • @styles/*
• 더 잠실체 폰트 추가

📚 참고 레퍼런스

• Next에 폰트 적용하려면!
• [react] Next.js에 global 폰트 삽입하기 (ft. index.html 역할)
• [React] React에서 Lottie를 사용해보자

⚠️ 참고 사항

🖥️ 스크린샷

소형 휴대기기 320*766	대형 휴대기기 425*766	태블릿 768*766	노트북 1024*766	대형 노트북 1440*766

✏️ 한 줄 요약

SplashScreen 띄우기

📝 상세 내용

• 세션 스토리지를 이용해서 SplashScreen을 띄웠었는지 판별 후, 처음이라면 2초 띄우고 사이트 보여주기

📚 참고 레퍼런스

Next js에서 sessionStorage is not defined 문제 해결 방법

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

프로젝트 세팅

📝 상세 내용

• 깃허브 이슈 템플릿 생성
• PR 템플릿 생성
• Next.js 및 라이브러리 설치
  • TypeScript
  • ESLint
  • Yarn Berry (zero-install)
  • Axios
  • Recoil
  • styled-components

⚠️ 참고 레퍼런스

• [yarn berry + vscode] yarn berry 적용 방법 (with vscode setting)
• [Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기
• yarn berry zero-install 적용기 (node_modules 잘가~)

✏️ 한 줄 요약

제출 전 전반적인 디자인 검토 후 수정할 부분 수정

📝 상세 내용

• / , /question, /interview 페이지 검토 후 수정
• Header 컴포넌트 사이즈 축소

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

/question

/interview

✏️ 한 줄 요약

interview 페이지 api 작업

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

styled-components 및 프로젝트 스타일 초기 세팅

📝 상세 내용

• 스타일 컴포넌트 ssr 세팅
• 글로벌 폰트 - Noto Sans Korean 설정
• reset style
• themeProvider 세팅
  • color
  • boxShadow

📚 참고 레퍼런스

• Server Side Rendering Setting
  • 공식문서 - Server Side Rendering Setting
  • [Next.js] styled-component 설정하기 (SSR FOUC 이슈)
• google font
  • 공식문서 - next/font/google
  • next.js : google font 적용하기🧚‍♀️(feat. tailwind)
  • [next.js 13] styled-components, 폰트 설정하기
• themeProvider
  • 공식문서 - Theming
  • styled-component 설정 및GlobalStyle과 ThemeProvider 적용하기 with typescript

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

파비콘 설정

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

기술면접 페이지 퍼블리싱

📝 상세 내용

• 더미데이터 이용
• textarea 높이는 내용물에 따라 자동 조절
• 띄어쓰기 및 공백으로 입력 후 전송 버튼 클릭 시 안내문구 띄우고 전송이 안 되도록 처리
• 띄어쓰기 및 공백 정규표현식 이용해서 공백 한 칸으로 교체
• textarea에는 자동으로 폰트 적용이 안 돼서 글로벌 스타일로 전체 기본 폰트 설정
• 스크롤이 생길 시 그림자가 생기도록 해서 사용자에게 내용물이 더 있음을 암시
• hover 했을 경우에만 스크롤바가 생기도록 스타일링
• 스크롤이 생긴 상황에서 새로 입력하고 전송하면 스크롤이 가장 아래로 내려와 방금 작성한 텍스트를 볼 수 있도록 처리
• 반응형 작업 완료
• SpeechBubble 컴포넌트 props와 스타일 수정
  • type?: 'color' -> type: string
    • props.type 의 존재로 조건부 스타일링 했던 것을 props.type === 'gpt' 로 조건 변경
  • word-break: keep-all -> 제거
    • 단어 단위로 줄바꿈을 했기 때문에 단어가 아니라 쭉 나열한 글자는 줄바꿈을 하지 못하는 문제 발생했기 때문에 제거

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마

구현

띄어쓰기와 엔터 여러 개 처리

✏️ 한 줄 요약

레이아웃 구현

📝 상세 내용

• 화면 사이즈
  • 모바일일 경우: 화면이 채워지게
  • 데스크탑일 경우: 화면 정중앙에 배치
• 헤더
  • 헤더가 없는 경우
  • 메인 페이지
  • 돌아가기 버튼
• 테스트 페이지 생성
  • 헤더가 없는 경우: /test/header/none
  • 기본 헤더(그림자o): /test/header
  • 돌아가기 버튼(그림자x): /test/header/back

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

• 피그마 디자인

헤더 x	메인페이지	돌아가기 버튼

• 구현

헤더가 없는 경우: /test/header/none	기본 헤더(그림자o): /test/header	돌아가기 버튼(그림자x): /test/header/back

✏️ 한 줄 요약

SpeechBubble 컴포넌트 작성

📝 상세 내용

type Props = {
  type?: 'color';
  text: string;
};

• type props가 'color' 로 존재하는 경우 chatGPT의 말풍선으로 사용
• type props를 사용하지 않으면 사용자의 말풍선으로 사용
• props로 사용하는 text의 길이에 따라 말풍선 height 자동 조절
• 반응형 작업 완료
• 테스트 페이지: /test/speechbubble

📚 참고 레퍼런스

말풍선 CodePen

⚠️ 참고 사항

06.22 am 05:30 수정사항

이전: 글자 기준 줄바꿈	수정: 단어 기준 줄바꿈

🖥️ 스크린샷

피그마 디자인

구현

✏️ 한 줄 요약

모달 컴포넌트 작성

📝 상세 내용

북마크를 삭제할 때와 회원탈퇴할 때 띄워지는 모달 컴포넌트 작성

• 테스트 페이지 생성: /test/modal

type Props = {
  isOpen: boolean;
  handleClose: () => void;
  text: string;
  rightBtnText: string;
  handleClick: () => void;
};

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

북마크 삭제 모달	회원탈퇴 모달

구현

북마크 삭제 모달	회원탈퇴 모달

✏️ 한 줄 요약

기존에 생성한 Header 컴포넌트 디자인 및 돌아가기 버튼 기능 추가

📝 상세 내용

type Props = {
  back?: boolean;
  TextColor?: 'white' | 'main';
};

• 테스트 페이지
  • 헤더가 없는 경우: /test/header/none
  • 기본 헤더(그림자o): /test/header
  • 돌아가기 버튼(그림자x): /test/header/back

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

헤더 x	메인페이지	돌아가기 버튼

구현

메인페이지	돌아가기 버튼 - main 배경	돌아가기 버튼 - white 배경

✏️ 한 줄 요약

버튼 컴포넌트 작성

📝 상세 내용

• theme에 버튼에서 사용하는 shadow 값 추가
• theme에 flex로 가로,세로 정중앙에 배치하는 center 추가
• 기본 값은 큰 사이즈 버튼으로 스타일링
• isSmall props를 넘겨주면 작은 버튼으로 스타일링
• /test/button 에 테스트 페이지 생성

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

• size='big'

• size='small'

구현

✏️ 한 줄 요약

생성된 질문리스트 페이지 퍼블리싱

📝 상세 내용

• 현재 북마크 기능 없기에 해당 기능 제외하고 퍼블리싱
• 더미 데이터 이용해서 작업
• 반응형 작업 완료
• 레이아웃 컴포넌트 height -> min-height 수정

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

기본 상태	북마크 추가