시험문제 디자인 변경하기 (스테픈 2km완료)

in sct-kr •  21 days ago 

오늘은 뭐.. 타이핑도 할게 많지만 일단 보여지는 화면이나 조금 수정하려고 합니다

image.png

일단 시급한것중 하나는 네비게이터인데요

상단과 좌측에 하나씩 넣으면 될것 같네요

image.png

이런느낌으로 분할을 해주면 될것 같은데요

좌측 메뉴는 화면의 크기에 맞춰서 사라졌다가 화면이 작아지면 나오게 하는 방식이 나을것 같습니다

일단은 분할을 해야겠네요

상단은 분할이 되어있고

좌측만 분할이 가능하게 하면되니 금방 하겠군요

image.png

사이드바 컴포넌트는 만들어놨군요

image.png

컴포넌트로 불러와서

시험문제와 함께 하도록 옆에 뒀습니다

sidenavi는 아마 fixed 옵션으로 포지션을 지정해야 할듯 하네요

시험문제가 길어서 말이죠..

시험문제도 화면 반으로 갈라서 표시하며

화면 크기에 맞춰서 작게 줄이면 될것 같은데요

만들다보니 생각을 잘못했네요

index에 outlet에 라우터로 보여주는 페이지에 네비를 구성하는게 훨씬 좋은 선택으로 보이네요

조금 변경해야겠습니다

image.png

일단 배치는 이런식으로 하고

사이드 바에도 메뉴를 추가해야합니다

무슨 메뉴가 좋을지 고민좀 해봐야겠네요

메모기능과 로그인 로그아웃 기능, 흐음...

이건 고민되네요

image.png

임의로 여기에 시험문제를 배치해 뒀는데

시험문제를 전부 분리시켜서

좀더 상위 컴포넌트에서 선택해서 화면을 넘어가는 방식으로 처리하는게 나을것 같습니다.

그리고 데이터는 props로 받되 스토어를 활용해서 처리하는 방식이 나을것 같네요

혹은 해당 객체를 하나의 배열로 전부 만든뒤 스토어에 저장시켜

사용하는것도 괜찮을것 같습니다.

image.png

제가 작성해둔 사이트 구조를 보니 링크를 클릭해서 화면을 넘어가는데요

음... 이런 방식으로 처리하려면

파람스를 사용해서 데이터를 넘기는 방식이 조금더 낫겠네요

image.png

일단 넘기긴 했는데

image.png

useEffect훅을 사용해서 페이지 전환시 화면에 넘어온 params를 활용해서

시험문제를 변경하도록 구성했다.

잘 동작하는지 봐야할듯 하다

테스트 해보니 화면은 변경되지 않느다.

현재 구현된 코드가 jsp 문제에 맞춰져 있어서 그런지 로직을 전체적으로 수정해야할듯 하다..;;

이런..

곰곰히 생각해보니 초보적인 실수군요

image.png

변수의 값을 변경시키고 있지만

일반 변수라서 값이 바뀌어도 렌더링이 되는게 아니라 발생하는 문제입니다

useState에 담아 렌더링 시키는 방식으로 처리하려고 합니다.

image.png

렌더링 처리는 잘 되는데 문제는 사진이 안뜨네요

require 설정을 안해서 그런건지.. 일단 테스트를 좀 해봐야겠네요

네비게이션 꾸미는것도 해야하는데 디자인이 고민입니다.

이것도 경로를 수정해서 해결했습니다.

오랜만에 리엑트로 작업하다보니 자잘한 버그가..

그리고 리엑트를 많이 까먹었네요 충격입니다 ㅠ

image.png
스테픈 완료했다

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!