220406-20 mycloset 지금까지 정리 + 문제점

https://curious-tarsier-9682e2.netlify.app/

 

1. html구조, 버튼 위치 변경함 => 문제점: 온도 설정바가 컨텐츠를 너무침범하는 현상+position을 윗 값만 줘서 부모의 맨 왼쪽에 붙게 됐는데 해결점이 필요함(검색해보기-position 공부!)

  -max-width를 1100px로 줬으니 안에 컨텐츠를 width: 90%로 설정하면 되지 않을까?  이 방법으로 변경

2. 아직 통신 배우지 않았음(ㅋㅎ 제이쿼리만 아는게 제일 웃김..ㅎ..)패캠 강의 듣고 할 예정 - 패캠에  바닐라 Js통신이 없어서 다른 강의 듣고 하겠음.

3. 옷장 등록을 새창에서 해야할 것 같은데.... 모르겠다... 모달로했음

4. 이미지를 수정하는 라이브러리를 검색해 봐야겠다....아님 하는 방법 찾기!(옷장 등록에 사용 가로세로 길이 똑같게 만들기)

5. 디자인 추후 변경

6. input type="range" 그거 색상 변경 방법 검색해서 해보기

7. 위로가기 버튼 새옷등록 버튼 위에 스크롤이 어느정도 되면 생기게 만들기 옷장등록 버튼 위에 달음

8. 설명 칸 활성화 됐을 때( 물음표버튼은 absolute로 스크롤 따라가지 않도록 함.)

-화면의 드래그가 되지 않도록 만들어야함. 해결 다만 모바일 크롬이었을때 살짝 스크롤이 되는데 막을 방도는 없을 듯.

-물음표를 눌렀을 때 알맞은 위치에 말풍선이 보여야하기에 누르면 바로 맨 위로 올라가도록 설정  

해결. 다른 버튼들을 fixed로 항상 띄워져 있는거로 바꿨기 때문에 말풍선의 위치만 버튼의 위치에 맞게 변경함.

+ body{ overflow:hidden; }

9. 정규식 배워서 폼만들때 쓰기 

 

 

4/2일 적어둔거 끌올

1. 스와이퍼 문법 배워서 옷장을 스와이퍼로 나타내기 폐기 스크롤로변경함. 보기 불편할것같아서.. 
- 카드형태, 사진 위에 태그형식으로 옷장등록시 선택한거 나오게 하기. #여름 #치마  JS아직 안함
- 사진에 active할때 수정, 삭제 버튼이 나오게 하기 <- 보류
2. 메인 설명창 js 스르륵 나타나게 하기<-메인의 옷장을 바꾸면서 레이아웃 변경할 것.
3. 내 옷장 날씨 api 통해서 날씨 지역 상태 받아오기
-https://www.data.go.kr/data/15057111/openapi.do 공부한 후 하기
(다들 저 온도계스러운 그림에 같은생각하는게 웃기다....사실 안웃김ㅠ)
-4와 같은 함수로 짜놓기..(계절 별로)
-상태에 따른 이모지 변화 switch문으로 짜기 ☁⛅⛈🌤🌥🌦🌧🌨☂☔⛱⛱⚡❄☃⛄🌞
-지역은 위치를 받는게 아니라 회원가입 시 등록하는 것으로 하기
4. 내 옷장 온도 설정 시, 맞는 옷 들고 오기
이후에 할 일
-회원가입 로그인창 분리, 디자인 변경
-회원가입 지역 +하기

+0407 추가

1. ?마크 거시기 버튼들 위치 다 조정해야함 해결

해결방법: 온도계가 지금 max-width때문에 가로 화면이 커지면 따라 붙을 수 없을 것 같아서 오프셋을 한쪽만 주었다(bottom, 부모의위치) . 

그래서 설명말풍선들을 묶어놓은 div에 position:fixed 를 주되, left를 안줬다. 같이 따라 움직이려면 

이 방도 밖에 없을 것 같아서...

그래서 온도, 추천하기 버튼만 absolute를 줬고, 업로드 버튼은 따로 fixed를 주었기 때문에 설명말풍선도 그것과 맞게 설정하였다.

2. 카드 정렬문제(★)

- flex 해봄 마지막 카드가 갯수가 안맞으면 가운데에 이상하게 되는 경향이 있음

- inline-block으로 줬음. 원하는 방향이 맞으나, 왼쪽으로 쏠리게 됨. text-align을 주게 될 경우, 정 중앙이 되지만 나머지 글자들도 중앙정렬이 되고, flex와 별 다를 바 가 없음을 확인함

-float:left를 줘봤지만, inline-block과 다를게 없음

★보류★

float와 grid 공부좀 해야겠음

 

 

+0408 추가

옷 등록 세분화  
계절: 봄 여름 가을 겨울 < 얘를 체크박스로 줘야하나.....
종류: 아우터 상의 하의 일체형 
두께: 두꺼움 보통 얇음 드롭다운
색상: 빨강 노랑 주황 연두 초록 하늘 파랑 청록 갈색 보라 남색 분홍 흰색 회색 검은색 컬러피커 폐기
패턴: 없음 땡땡이, 일러스트, 줄 체크 꽃 그 외 
세부종류: 상의 -반팔티 민소매 맨투맨 셔츠 블라우스 후드티 니트 pk셔츠 조끼 
         하의 - 바지 치마 길이 - short medium long
         아우터 - 코트 자켓 패딩 후드집업 가디건
         일체형 - 점프수트 원피스 세트
먼저 계절로 나누고
-----------------
봄, 가을: 3월~5월, 9월~11월
늦봄, 초가을: 23도~ 18도 봄 가을 :17도~13도 초봄 늦가을: 12도~9도
------------------
겨울: 11월~2월 초, 늦겨울( 겨울은 껴입어야 하니까 봄.가을 보통 두꺼운소재 함께 보여주기):8도이하
겨울: 4도 이하
여름:24도 이상 그냥쩌죽어
어떻게 코드를 짤지 고민하기

1.option- 종류 선택시에 세부 종류의 option 바뀌게 js 코드 짜기 해결 switch문으로함 맞는지는 모르겠으니 검색해보겠음

2. 데이터 보낼 때, 코드 짜서 옷 추천하기를 위해 계절을 세분화해서  초봄, 초가을 어쩌구로 보내기위해서 코드 고려 필요함

 

+0410추가

+0411 추가

http://yoonbumtae.com/?p=3304 input file에 업로드했을때 사진 미리 보여주기

http://daplus.net/html-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%ED%91%9C%EC%8B%9C/ 

label을 어떻게 묶어야할 지 조금 헷갈린다... fieldset이나 그런것들...?<- 묶지 않기로함. 했을때 구조잡기 까다로웟음

 

+0412 추가

select 박스 꾸미기 https://doolyit.tistory.com/126

select 박스 참고: https://wsss.tistory.com/1004 

두가지 스타일의 셀렉트 메뉴 애니메이션

(0414)CSS 콤보박스 스타일링 - <select> | Engineering Blog by Dale Seo

 

+0413추가

fileReader() mdn에 작성된 코드를 복붙해서 우선 작성

flex wrap해서 하긴했는데 맞는지 모르겠다... 다 불확실성의 연속임...ㅠ.ㅠ.ㅠ.ㅠ.ㅠ.ㅠ.ㅠ.

 

+0416

컬러피커로 색상을 조절하려고 했었지만, 폰으로봤을 때 컬러피커가 나타나지 않음을 확인함.

고로 폐기=> select로하겠음 

+0419

헤더부분을 따로 관리하고 싶은데, 이전 프로젝트 때 분리했을 때 css적용이 되지 않음을 볼 수 있었다.

방법이 없는걸까?

https://www.w3schools.com/howto/howto_html_include.asp 이것 밖에 못찾음

How To Include HTML

헤더에서 로그인 했을 시

오른쪽에서  왼쪽- 마이페이지 오른쪽 로그아웃

로그아웃
<span class="material-icons">
logout
</span>

마이페이지

<span class="material-icons">
person
</span>

마이페이지 구조( 모바일 아코디언으로 할까?
1. 개인정보 변경
-아이디(disabled) (입력되어있어야함)
- 비밀번호
-비밀번호확인
-별명(입력되어있어야함)
2. 옷장비우기
옷장을 비우시겠습니까? 옷장에 있던 모든 옷들이 삭제됩니다.
부분적으로 삭제를 원하신다면 내옷장에서 관리를 클릭해 관리해 주세요
3. 회원탈퇴
탈퇴하시겠습니까?
탈퇴할 시 모든 옷장 관련 데이터가 사라집니다.
비밀번호 확인 칸/ 확인버튼

 

+0420 

자동완성시 input배경이 파랑색으로 변하는 것을 확인 => 구글링해서 해결하기 

1.open클릭시 로그인 페이지로 연결

2.로그인 했을 시 home이 옷장페이지가 되면서 억지로 인덱스페이지로 넘어가게된다면, 다시 옷장으로 리다이랙트

회원가입 -> 마이페이지

로그인 -> 로그아웃

3.회원가입이 완료됐을 때, 완료버튼을 누르면 로그인페이지로 연결

4. 로그아웃 됐을때 초기화면으로 리다이렉트

+0421

온도계 온도 기입 후, 로그인후 엔터쳤을때 폼이 자동으로 보내지도록 만들어야함

+0425

스크롤 css 변경해야함