반응형 웹 디자인에 대한 의견 및 현재까지 진행 사항

[dkfma4915]

• changed files가 27개나 되는데, 웹 디자인의 의견을 묻는거라 보실 필요는 없습니다 !

  반응형 웹 디자인을 하기 위해서..

  검색을 해보니 react styled-components, react-responsive 두개가 많이 나오던데 react-responsive는 typescript를 사용해야해서 버렸고 styled-components는 props로 전달해서 색을 바꾼다던지 하는 조건부스타일링이 된다고해서 새로운 방법으로 해보려고 했지만 오히려 더 어려워서 때려치웠습니다..ㅎㅎ 그래서 현재 대부분은 css파일을 이용하여 스타일링하였고 반응형 웹은 Media Query를 이용했습니다!

Media Query를 이용한 반응형 웹

먼저 flexbox를 적용시킨 후 PC버전과 모바일 버전으로 한다는 가정으로 진행하였고 모바일 버전일때 폰트 크기, 로그인 창 모양을 변화시켰습니다. 현재 DB와 Server가 연결되지 않았고 구현되지 않은 기능들이 좀 있어서 그런지 딱히 변화시킬 부분이 많지 않더라구요. (메뉴판이나 결제창들은 기능 먼저 구현하고 css적용시키는게 나을 것 같아서 냅뒀습니다.)

• 그래서 이제 회원가입 창을 만들고 나서 css를 수정하는게 좋을 것 같다는 판단이 들었는데, 괜찮겠죠??!
• 현재 PC버전과 모바일버전 디자인 확인 후 어떤지 의견 부탁드려요~~! (볼것도 없긴하지만 그냥 진행사항 공유 느낌이랄까..)
• 사실 반응형 웹 디자인을 어떻게 하는지 방법을 공부하면서 한거라 디자인이 조금 못생길수도..!
• 하단에 있는 코드를 추가한게 다여서 생각보다 쉬웠음.

  // component.css
  @media screen and (max-width:600px){
  .Login{
  flex-direction: column;
  }
  .TopBarRoot{
  font-size: small;
  }
  }

  ->PC버전 ->모바일버전(iPhoneX)

[dkfma4915]

오,,,멋진걸!!!!!!!!!!

정말 소소한 의견이지만, 로그인 버튼을 텍스트박스 오른쪽으로 옮기는게 더 이쁘지 않을까!?

맞아 나도 동의! 시간남을때 해볼게 !

[dkfma4915]

생각보다 간단해 보여서 다행입니다.

디자인은 모바일쪽이 더 깔끔하네요. 가능하다면 왼쪽위 쪽에 로그인 버튼을 두어서 -3개로 된 버튼이 누르면 왼쪽에서 새로운 창이 옆으로 나오는 것을 하고 싶지만 필수적인 것은 아니므로 이후에 생각해 보면 좋을 것 같습니다.

그거 나도 정말 하고싶다는 의견입니다. ㅋㅋㅋ 일단 확인!