feat: SelectBox 컴포넌트 작성

✏️ 한 줄 요약

SelectBox 컴포넌트 작성

📝 상세 내용

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

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

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

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

2023-06-24.3.58.42.mov

feat: question 페이지 api 작업

✏️ 한 줄 요약

question 페이지 api 작업

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

2023-06-25.7.39.42.mov

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

✏️ 한 줄 요약

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

📝 상세 내용

📚 참고 레퍼런스

Server Side Rendering Setting
- 공식문서 - Server Side Rendering Setting
- [Next.js] styled-component 설정하기 (SSR FOUC 이슈)
google font
themeProvider
- 공식문서 - Theming
- styled-component 설정 및GlobalStyle과 ThemeProvider 적용하기 with typescript

⚠️ 참고 사항

🖥️ 스크린샷

design: Header 컴포넌트 디자인 및 돌아가기 버튼 기능 추가

✏️ 한 줄 요약

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

📝 상세 내용

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

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

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

구현

2023-06-20.8.09.47.mov

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

feat: 데이터 불러오기 전 로딩 상태

✏️ 한 줄 요약

로딩 컴포넌트 생성 및 적용

📝 상세 내용

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

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

/question

default.mov

/interview

2023-06-25.3.15.12.mov

fix: 배포환경에서 MUI 스타일 적용 안 되는 이슈 해결

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

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

🖥️ 스크린샷

수정 전	수정 후

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

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

width를 props로 받아서 사용

🖥️ 스크린샷

피그마 디자인

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

구현

2023-06-20.6.02.19.mov

feat: SplashScreen 컴포넌트 작성

✏️ 한 줄 요약

SplashScreen 컴포넌트 작성

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

2023-06-22.7.43.05.mov

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

design: 파비콘 설정

✏️ 한 줄 요약

파비콘 설정

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

feat: interview 페이지에서 말로 입력할 수 있도록 기능 추가

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

feat: 모달 컴포넌트 작성

✏️ 한 줄 요약

모달 컴포넌트 작성

📝 상세 내용

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

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

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

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

구현

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

docs: 리드미 작성

✏️ 한 줄 요약

리드미 작성

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

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

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

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

feat: 기술면접 페이지 퍼블리싱

✏️ 한 줄 요약

기술면접 페이지 퍼블리싱

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마

구현

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

feat: SplashScreen 띄우기

✏️ 한 줄 요약

SplashScreen 띄우기

📝 상세 내용

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

📚 참고 레퍼런스

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

⚠️ 참고 사항

🖥️ 스크린샷

2023-06-24.2.28.30.mov

default.mov

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

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

2023-06-23.7.25.24.mov

기본 상태	북마크 추가

Interviz | Comment

https://interviz.vercel.app/comment

feat: SpeechBubble 컴포넌트 작성

✏️ 한 줄 요약

SpeechBubble 컴포넌트 작성

📝 상세 내용

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

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

📚 참고 레퍼런스

말풍선 CodePen

⚠️ 참고 사항

06.22 am 05:30 수정사항

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

🖥️ 스크린샷

피그마 디자인

구현

2023-06-22.5.22.29.mov

feat: 버튼 컴포넌트 작성

✏️ 한 줄 요약

버튼 컴포넌트 작성

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

size='big'

size='small'

구현

feat: 메인 페이지 퍼블리싱 및 api 요청 전 데이터 작업

✏️ 한 줄 요약

메인 페이지 헤더 없앤 버전으로 퍼블리싱 및 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

feat: 오픈그래프 설정

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

setting: 프로젝트 세팅

✏️ 한 줄 요약

프로젝트 세팅

📝 상세 내용

⚠️ 참고 레퍼런스

feat: interview 페이지 api 작업

✏️ 한 줄 요약

interview 페이지 api 작업

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

default.mov

feat: Question 컴포넌트 작성

✏️ 한 줄 요약

Question컴포넌트 작성

📝 상세 내용

type Props = {
  text: string;
};

구현 완료

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

추후 도입 예정

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

📚 참고 레퍼런스

⚠️ 참고 사항

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

🖥️ 스크린샷

구현 완료

2023-06-22.5.58.12.mov

도입 예정

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

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

feat: 404 페이지 작업

✏️ 한 줄 요약

404 페이지 커스텀

📝 상세 내용

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

📚 참고 레퍼런스

공식문서 - 404 page

⚠️ 참고 사항

🖥️ 스크린샷

2023-06-25.3.46.16.mov

design: 제출 전 디자인 수정 작업

✏️ 한 줄 요약

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

📝 상세 내용

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

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

/question

2023-06-25.10.59.48.mov

/interview

2023-06-25.10.35.57.mov

design: 레이아웃 구현

✏️ 한 줄 요약

레이아웃 구현

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

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

구현

2023-06-19.11.55.01.mov

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

halamlee / interviz Goto Github PK

interviz's Introduction

Hey there! I'm Lami

interviz's People

Contributors

Stargazers

Watchers

interviz's Issues

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

/question

/interview

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항

🖥️ 스크린샷

피그마 디자인

구현

✏️ 한 줄 요약

📝 상세 내용

📚 참고 레퍼런스

⚠️ 참고 사항