Skip to content

mock-rc8/wanted_web_royud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<<<<<<< HEAD

'본 템플릿의 저작권은 (주)소프트스퀘어드에 있습니다. 상업적 용도의 사용을 금합니다'

08/20

메인 페이지 틀 구축.

컴포넌트 분리 // 페이지 : MainPage ... 공통 컴포넌트 :header, footer

=======

08/21

메인페이지 90% 구축

슬라이더 기능 구현 및 컴포넌트 분리

로그인 팝업 구현

헤더 카테고리 이벤트 구현

채용 페이지 링크 적용 및 header, footer 컴포넌트 적용

섹션에 나오는 카테고리 리스트 이벤트 구현

공식 페이지 측에서 나온 svg형태의 이미지 적용에서 문제가 발생

-> 우선순위를 뒤에 두고 작업

서버 측 홈 api 데이터 불러오기

=======

08/22

메인 페이지에 서버측에서 전달한 데이터 적용

슬라이더 초기값이 공백일 시 뿌리는 과정에서 오류 -> 초기값을 기존 더미데이터로 하고 후에 바꾸는 것으로 수정

로그인 팝업 창 추가 작업

이메일 형식이 맞지 않을 경우 경고 문구 작성 및 css 변화 형식이 맞을 경우 회원 가입 창으로 이동

svg파일 메인 페이지 적용

채용 페이지 조금씩 컨텐츠 추가 후 서버측에서 전달한 데이터 적용

슬라이드 배너 idx 부분에서 문제 -> 배열 인덱스로 시도(성공) 슬라이드 idx부분 대신 fakeslide의 배열 인덱스로 구현 => 실패 기존 슬라이드 배열 인덱스로 구현 => 성공

너무 많은 css로 혼동

css 폴더를 만들고 app.css에 폴더에 있는 css를 import 폴더 속 css에 기존에 작성한 것들 옮기기

카테고리별 페이지 링크 적용 및 측 데이터 기반 기초 작업 진행

채용페이지의 채용 중인 포지션 보러 가기 버튼에 링크 적용 헤더 카테고리의 직군 전체에 링크 적용 스크롤 시 카테고리 변경란 fixed되도록 구현 서버측에서 전달받은 데이터를 해당 페이지의 리스트에 적용

=======

08/23

회원가입 구현

이메일, 이름, 휴대폰 번호, 비밀번호를 각각 state에 공백으로 저장 회원가입 api로 데이터 전달 -> 성공

메인 페이지 퍼블리싱 작업 완료

로그인 구현

공식 사이트 상 이메일 먼저 확인 후 비밀번호를 입력하는 구조로 진행 로그인 email.ver, password.ver로 api 사용 프로필 조회 api를 통해 로그인할 시 나올 데이터 출력 -> 로그인 화면 헤더에 프로필 이미지 삽입

1차 피드백

  • 빠진 svg 태그를 보충하여 최대한 유사하게 바꿀 것
  • 단순하게 제작된 회원 가입 팝업 창 또한 공식 페이지와 유사하게 할 것
  • CRUD를 적용할 수 있는 맞는 커뮤니티, 이력서 페이지를 만들 것
  • 이미지를 구하기 힘든 부분들은 대체할 이미지 등을 활용할 것

=======

08/24

프로필 데이터 불러오는 방식에서 문제

-> recoil을 통해 token을 저장하고 토큰 값에 따라 isLogin값을 변화하여 로그인 상태 변화

my 원티드 페이지, 프로필 페이지 작성

라우터 설정 및 링크 연결 비슷한 구조를 띄고 있어 페이지 왼쪽 프로필 부분 먼저 작성

08/25

my 원티드 페이지 데이터 적용, 페이지 완료

my 원티드 api에 토큰을 넣고 데이터를 가져와 페이지에 적용하면서 퍼블리싱

프로필의 퍼센트 바의 경우 퍼센트와 바의 너비값이 다름 -> 스타일 컴포넌트, switch문을 이용해 들어오는 고정 값에 따라 너비값을 적용

my 원티드 페이지에서 로그아웃을 시도할 경우 useNavigate와 isLogin에 따라 메인 페이지로 튕겨나가게 구현

08/26

프로필 페이지 데이터 적용 및 퍼블리싱

현재 재직중 checkbox 체크 유무에 따라 직장에서 일한 시기 마지막 날짜 유무 결정

  • checkbox의 checked 블리언값을 state값으로 저장하기 위해 onclick도 이용
  • 마지막 날짜 div를 스타일 컴포넌트로 감싸고 state를 전달하여 display에 적용

학교, 직장 검색 버튼 오른 편의 꺽쇠가 회사발 이모티콘이라 못구하는 문제

  • css의 after의 content로 해당 꺽쇠와 비슷한 문자 삽입

비워놨던 svg 작업 진행

오류 수정

프로필 페이지의 핸드폰 번호가 아직 공백일 때도 replace가 들어가 오류 발생

usestate를 통해 처음을 공백으로 시작 useeffect로 데이터가 들어오면 state 변경 그 state에 값이 있을 때를 if문으로 설정하여 replace 적용

=======

08/27

헤더 메뉴를 클릭했을 때의 css 변화

  • 메뉴마다 onclick을 설정하여 해당 list의 className이 변화하게 구현 -> 링크가 바뀔 때마다 className이 초기화돼서 실패

  • 현재 페이지를 인식하는 state 생성. state에 따라 클래스를 변화 -> 성공했으나, list의 데이터를 map을 이용해 뿌리는 경우의 파훼법을 모르겠음

커뮤니티 페이지 작성

회원가입 팝업 뷰 작업

=======

08/28

메인페이지 섹션의 맵핑으로 뿌린 카테고리 리스트 css 변화

다른 부분과 다르게 클래스 직접 변화 불가

  • 조건부 연산자를 통해 특정 조건에 맞으면 클래스에 current가 붙은 버전의 리스트 나머지는 current가 없는 클래스로 지정
  • 클릭한 리스트의 배열 idx를 알아내 state에 저장. 배열 idx는 리스트에 설정된 idx보다 1이 크므로 + 1 추가
  • state에 저장된 idx와 같은 idx를 가진 리스트를 조건으로 지정
  • 홈화면 조회 api에 해당 idx를 넣어 버튼에 따라 데이터가 변화하도록 변경

카테고리 페이지 api에 idx를 전달하여 기능 구현

  • 직군 카테고리, 직무 카테고리로 구분, 각각의 버튼을 클릭하면 리스트가 생성
  • 리스트를 클릭 시 그에 해당하는 idx값을 state로 저장, api에 전달

채용 상세 페이지 틀 작성

로그인 시 카카오페이지에서 보일 적극 채용 중인 회사 리스트 작성

로그인 상태면 true가 나오는 state가 true일 때만 추가할 리스트

채용 상세 페이지 api데이터 적용 및 퍼블리싱

채용 글 데이터가 엔터가 적용되지 않는 부분

  • 엔터가 처리될 부분을 split("\n")으로 지정하여 배열로 변환 후 맵핑

=======

08/29

채용 상세 페이지 이미지 슬라이드 구현

  • 슬라이드 방식이 tranform이 아닌 scroll 구조 화면에 보여질 div, 스크롤될 div, 그 안의 슬라이드 ul로 구성 useRef를 통해 스크롤될 div를 직접 조작

북마크 기능 구현

  • 북마크 삭제, 등록, 조회 api 활용
  • 북마크 컴포넌트 생성
  • 북마크 클릭 시 새로운 등록이면 등록 api, 이미 등록되어있으면 삭제 api를 적용
  • 북마크 페이지 작성. 북마크 조회 api의 배열을 가져와 구현

문제 해결

북마크를 누르고 새로고침을 눌러야 다시 랜더링하여 북마크가 활성화되는 문제

  • 북마크를 누를 때 임시로 window.location.replace()를 실행하여 현재 페이지로 새로고침하도록 진행

=======

08/30

커뮤니티 페이지 조회 데이터 적용 및 퍼블리싱

  • 커뮤니티 추천 페이지 조회 api 비회원 회원 데이터 다르게 적용
  • recoil의 isLogin 값에 따라 css값 변화

커뮤니티 작성 페이지 퍼블리싱

  • textarea의 height값이 문단의 줄 수가 많아질 수록 커져야함 작성할 때마다 변경이 되어야해서 useEffect 사용 textarea에 작성된 value값을 split("\n")으로 나눠 길이를 재서 줄 수를 구함 줄 수를 state에 저장 후 textarea의 height값에 반영

  • 커뮤니티 작성 페이지의 선택된 태그들에 있는 onClick 함수가 클릭했을 때는 발동하지 않고, 다른 곳에 변화가 있을 때마다 발동되는 버그가 생김

=======

08/31

2차 피드백

  • 채용 상세페이지 오른쪽 박스 좀 더 공식사이트와 유사하게 퍼블리싱할 것
  • 사용하는 api 갯수 20개까지 늘려볼 것

=======

08/31

채용 상세 페이지 우측 퍼블리싱

  • 공식 자체 이모티콘이 있어 유사한 컨텐츠로 대체
  • margin값을 마이너스로 두는것을 통해 박스가 겹치도록 구현

커뮤니티 작성 api 적용

  • 데이터에 obj 보내기 -> 실패

  • params에 obj 보내기 -> 실패 원인 - 이미지파일 업로드를 대비해 formdata를 사용하도록 서버분께서 설계

  • formdata방식으로 데이터에 obj 보내기 -> 성공

  • 작성 후 navigate를 통해 이동 => 이동 후 새로고침을 해야하는 문제가 생김 -> window.location.replace()를 통해 이동하여 새로고침하면서 페이지 이동

커뮤니티 상세 페이지 퍼블리싱 및 api 적용

Link에서 게시글의 idx를 url에 params로 넘김 useParams를 통해 넘긴 idx를 받아 api에 전달

커뮤니티 수정 페이지 작성

  • 커뮤니티 상세 조회 api를 활용하여 페이지 최초 랜더링 시 해당 글 idx와 일치하는 목록 가져오기 최초 랜더링 시 제목, 글 가져오기는 성공 태그 가져오기 -> 관심 태그의 idx와 커뮤니티 상세페이지에서 오는 태그 idx가 다름 => 네임 태그로 조회. 방법은 for문 2개를 겹치기 -> state 업데이트는 비동기로 실행되어 맨 마지막 값만 출력 => 배열 state를 복사한 let 변수 생성. let 변수를 for문에서 변형하고 state에 반영 성공!

커뮤니티 게시글 삭제 구현

=======

09/01

최종 점검

  • 로그인을 하지않아도 커뮤니티 상세페이지의 하단 아이콘에서 수정하기 및 삭제하기 메뉴가 나오는 현상 수정

  • 로그인을 안하면 커뮤니티 상세페이지의 댓글이 보이지 않는 현상 수정

  • 로그인 팝업 창에서 이메일형식에 맞지 않아 나오는 오류 메세지의 위치가 의도하지 않는 곳에서 나오는 현상 수정

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published