Portfolio/sopang (34) 썸네일형 리스트형 sopang - 결제 - 네이버페이(포인트) 네이버 카드 결제를 추가했다. 로그인상태가 아닐경우 로그인창이 먼저 뜬다. 네이버페이 팝업, 결제금액은 편리/추후 테스트를 위해 100원으로 맞췄다. 결제성공시 주문목록 결제실패를 위한 결제실패 페이지는 동일하다. 네이버 - 결제성공 - 포인트 sopang - 결제 - 네이버페이(카드) 네이버 카드 결제를 추가했다. 로그인상태가 아닐경우 로그인창이 먼저 뜬다. 네이버페이 팝업, 결제금액은 편리/추후 테스트를 위해 100원으로 맞췄다. 결제성공시 주문목록 결제실패를 위한 결제실패 페이지는 동일하다. 네이버 - 결제성공 - 카드 sopang - 결제 - 카카오페이 카카오 결제를 추가했다. 결제성공시 주문목록 잘못된 정보를 입력할 경우 결제실패를 위해 결제실패 페이지를 추가했다. 결제성공_영상시정시, 카카오가 새 브라우저로 열려 직접적인 녹화가 되지않았으며 직접인증/결제할동안 기다려주길 바란다. 결제실패_영상시정시, 카카오가 새 브라우저로 열려 직접적인 녹화가 되지않았으며 직접인증/결제할동안 기다려주길 바란다. sopang - 결제 - 신용카드 결제기능을 추가했다. 결제성공시 주문목록 잘못된 정보를 입력할 경우 결제실패를 위해 결제실패 페이지를 추가했다. 결제성공_영상녹화를위해잠시일부영역을type=password처리했다. 결제실패_영상녹화를위해잠시일부영역을type=password처리했다. 결제실패 장바구니_영상녹화를위해잠시일부영역을type=password처리했다. 장바구니에 담겨있던 상품 주문이 실패됬을경우, 장바구니에서 사라지지않도록 한다. sopang - 완료 구현완료 정리본. 결제api를 추가하기 전 페이지들이다. header https://standout.tistory.com/442 sopang 구현 - header 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 standout.tistory.com 회원가입 https://standout.tistory.com/436 sopang 구현 - 회원가입 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.. sopang 이미지 - 로고 sopang 이미지를 만들었다. 기본, 정사각형, 직사각형으로 로고가 들어가는 곳에 배치된다. 배송정보/안내 등의 코딩과 관련없는 영역들은 노력이 들어가지만 코딩과 큰 관련이 없다. 이러한 영역들을 아래의 이미지들이 배치됨으로써 코드작성에 집중할 계획이다. sopang 이미지 - 상품이미지 sopang 이미지 - 상품이미지 상품이미지는 메인, 디테일2개 이미지로 구성되며 모든 파일의 이름은 통일했다. 특별한 이유는 없다. 나만의 쇼핑몰이니 나만의 규칙에 맞춰 깔끔하게 만들고싶어서 그렇게 하기로 했다. 디자인 작업을 최소화하고 구현에 집중하는것이 목표이기 때문에 모든 상품이미지들은 서치해놨던 페이지들에 방문에 이미지를 추출한뒤 적절히 누끼를 따 png로 저장했다. 투명한 배경을 가진 이 상품이미지들은 추후 내가 필요할때 활용할 수 있을것이다. https://standout.tistory.com/211 sopang 기획 - 카테고리/상품 포폴 기본 프로젝트로 쇼핑몰이 있는데 경력이 아닌 개인 작업물이기에 뭔가 만들면 취업 이후 노출되지않는 프로젝트가 될 것같았다. 쇼핑몰 프로젝트의 상품목록들은.. sopang 이미지 - 메인페이지2 메인페이지에 사용될 이미지를 빠르게 제작해봤다. 위 이미지들은 아래처럼 배치될것이다. sopang 이미지 - 메인페이지1 메인페이지에 사용될 이미지를 빠르게 제작해봤다. 위 이미지들을 부를 caller영역 이미지도 함께 만들었다. 위 이미지들은 아래처럼 배치될것이다. sopang 구현 - 로그인 - 일반회원과 관리자 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 관리자 - 회원관리 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 관리자 - 주문관리 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 관리자 - 상품관리 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - header 기획한대로 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 마이페이지 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 메인페이지 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 상세페이지 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 장바구니 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 주문하기와 주문취소 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 구현 - 회원가입 기획에 따라 구현했다. 구현도중 수정된 내용이 있다면 빨간색으로 표시했다. 구현중 에러사항들은 따로 정리했다. https://standout.tistory.com/435 sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이 standout.tistory.com sopang 에러기록 https://standout.tistory.com/401 여러개등록 오류, sql 데이터 바꾸기 update set 장바구니를 클릭했을때 여러개가 등록되었다. 이유를 확인해보니 데이터가 의도한대로 inset하지 못했을때 이와같은 현상이일어난다. 데이터가 계획했던 패턴대로 잘 저장되지않을경우 오류가 standout.tistory.com https://standout.tistory.com/411 Eclipse 404 error - run as java직후/프로젝트생성 직후 run run as java application이후 server run시, 프로젝트를 만든 바로 직후 급하게 run할경우 404에러가 난다. 아무것도 한게 없는데 404에러가 난다면 프로젝트 우클릭 - run as server 프로젝트.. sopang 기획 - 기획서PPT - 기록/히스토리 앞선 계획대로 ppt는 미리 제작해놓은 ppt sample을 이용했다. https://standout.tistory.com/220 sopang 기획 - 기획스케줄 처음이라 쉽지않을것을 예상해 2주의 시간을 들여 기획서를 만들 계획을 세웠다. 절반 이상의 시간을 샘플예제 코드를 분석하고 이해가 되지않으면 기획서 제작기간을 줄여서라도 이해하는것 standout.tistory.com https://standout.tistory.com/276 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 Pretendard 1. 깔끔한 2. 얇고 두꺼움이 분명한 3. 한글일때 예쁜 폰트 https://sanghee.tistory.com/125 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 htt.. sopang 기획 - 기획서PPT - 상세기능 앞선 계획대로 ppt는 미리 제작해놓은 ppt sample을 이용했다. https://standout.tistory.com/220 sopang 기획 - 기획스케줄 처음이라 쉽지않을것을 예상해 2주의 시간을 들여 기획서를 만들 계획을 세웠다. 절반 이상의 시간을 샘플예제 코드를 분석하고 이해가 되지않으면 기획서 제작기간을 줄여서라도 이해하는것 standout.tistory.com https://standout.tistory.com/276 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 Pretendard 1. 깔끔한 2. 얇고 두꺼움이 분명한 3. 한글일때 예쁜 폰트 https://sanghee.tistory.com/125 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 htt.. sopang 기획 - 기획서PPT - 소팡의구성 - 버전/일정/툴/라이브러리/DB 앞선 계획대로 ppt는 미리 제작해놓은 ppt sample을 이용했다. https://standout.tistory.com/220 sopang 기획 - 기획스케줄 처음이라 쉽지않을것을 예상해 2주의 시간을 들여 기획서를 만들 계획을 세웠다. 절반 이상의 시간을 샘플예제 코드를 분석하고 이해가 되지않으면 기획서 제작기간을 줄여서라도 이해하는것 standout.tistory.com https://standout.tistory.com/276 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 Pretendard 1. 깔끔한 2. 얇고 두꺼움이 분명한 3. 한글일때 예쁜 폰트 https://sanghee.tistory.com/125 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 htt.. sopang 기획 - 기획서PPT - 이론 앞선 계획대로 ppt는 미리 제작해놓은 ppt sample을 이용했다. https://standout.tistory.com/220 sopang 기획 - 기획스케줄 처음이라 쉽지않을것을 예상해 2주의 시간을 들여 기획서를 만들 계획을 세웠다. 절반 이상의 시간을 샘플예제 코드를 분석하고 이해가 되지않으면 기획서 제작기간을 줄여서라도 이해하는것 standout.tistory.com https://standout.tistory.com/276 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 Pretendard 1. 깔끔한 2. 얇고 두꺼움이 분명한 3. 한글일때 예쁜 폰트 https://sanghee.tistory.com/125 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 htt.. sopang 기획 - 기획서 Excel - 기능 예제소스를 화면/기능별로 나눈 후 상세기능으로 나눠 Controller, Service, DAO를 거쳐 sql문등을 확인하며 기록해 나갔고 몇 기능들은 내가 추가/수정한 내용으로 변경되거나 계획되었다. 이 셀에서 시간이 가장 많이 소요됬는데, 코드가 움직이는 경로만 기록을 하는것이 아닌 각각의 코드들이 어떤 기능을 수행하고 어떻게 연결되는지를 최대한 이해를 하려다 보니 한줄한줄 적는데 시간에 오래걸렸던것같다. 작성이 완료되고 ppt 기획서로 넘어갔을때 이 Excel 셀을 많이 참고했으며, 동시에 수정할 부분도 계속 발견되어 아쉬웠다. sopang 기획 - 기획서 Excel - views 뷰 레이아웃2 잡아본 화면별 레이아웃으로 본격적으로 frontend코딩을 시작했다. backend 코딩에 영향이 가지않도록 bootstrap을 이용해 빠르게 구현하기로 했고, 아이콘은 fontawesome을 이용했다. 반응형으로 구현하려던 계획은 아쉽지만 욕심으로 판단되어 접어두기로 했다. 반응형코딩 + 크로스브라우징 테스트 + 모바일 갤럭시/아이폰 테스트 + 카카오앱 테스트 까지가 그동안 반응형 구현시 나의 루틴이였는데 이미 충분히 경험이 있고, 구현할 수 있는것을 sopang에 집어넣기에는 같은 시간대비 sopang 외 다른 프로젝트를 수행하거나 경험하지 못할 것이라고 생각했다. sopang은 pc화면으로만 구현되며, 아래와 같이 구현됬다. 회원가입, 로그인 페이지 메인페이지 리스트와 상세페이지 마이페이지 관리자 .. sopang 기획 - 기획서 Excel - views 뷰 레이아웃1 뷰를 결정 짓기전에, 우선 쿠팡에 방문하여 소팡에 쓰일 레이아웃들을 살펴봤다. 개발에 집중된 프로젝트이다보니 코드에 대한 경험과 완성도를 우선순위로 결정했고, 디자인과 세부화면/추가화면 등에 자칫 욕심을 부리거나 화려해지지않도록 다스려가며 벤치마킹/기획 했던것같다. https://www.coupang.com/ COUPANG 쿠팡은 로켓배송 www.coupang.com 쓰일 화면들을 골라내고 쿠팡의 소스들을 일부 다운받아 css가 깨지지않도록 일부 수정을 한 뒤, 조금씩 편집을 하고 여러 코드와 레이아웃들을 감소화하며 소팡의 무드를 잡아가기로 했다. 무드를 잡아보기로한 본래 목적에만 사용되고 버려질 코드임을 이해하며 우선 디자인에 영향을 주는 이미지들을 모두 placeholder 이미지를 활용하여 간섭이 .. sopang 기획 - 기획서 Excel - sitemap 사이트맵 화면별 기능/상세기능을 파악하는데 코드를 따라가고 DB, 화면을 따라가다 보니 마음이 앞섰는지 체계적인 분석이 되지않았다. 사이트맵을 먼저 작성하고, 차분히 하나씩 하나씩 들여다보기로 했다. 기획과 분석을 거듭하며 사이트맵이 계속 변경될것이라고 예상했고, figma로 보다 자유로운 편집과 보수가 쉽도록 작성했다. https://www.figma.com/file/OEGpMFT0mOPdF3v9z3Cw7X/2023?node-id=0%3A1&t=JH4VMhk2AMthjwc0-1 Figma Created with FigJam www.figma.com 완성된 사이트맵은 엑셀파일에 캡쳐본으로 첨부되었다. sopang 기획 - 브랜드 sopang은 제작중인 개인포트폴리오 / 해당블로그와 같은 무드를 가지길 바랬고 컨셉을 잡을 때 개인포트폴리오/블로그를 제작할때 figma로 작성했던 파일을 참고했다. http://xn--bh3bm9fory.com/ stylseheet xn--bh3bm9fory.com https://www.figma.com/file/OEGpMFT0mOPdF3v9z3Cw7X/2023?node-id=0%3A1&t=JH4VMhk2AMthjwc0-1 Figma Created with FigJam www.figma.com 이전 1 2 다음
