172만명의 커뮤니티!! 함께 토론해봐요.
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href = "styles/card.css"> </head> <body> <section class = "container"> <article class = "card"> <header> <div class = "circle-image"> <img src = "images/profile.png"/> </div> <div class = "card-username"> <span>taeyun_kwon1118</span> </div> <div class = "option-more"> <button class = "transparent-button"><img src = "images/icons/mark.png"/></button> </div> </header> <main> <div class = "carousel" data = "0"> <div> <ul> <li><img src = "images/mountain1.jpg"/> </li><li><img src = "images/mountain2.jpg"/> </li><li><img src = "images/mountain3.jpg"/> </li><li><img src = "images/mountain4.jpg"/></li> </ul> <div class = "slide slide-left"> <button class = "transparent-button"><img src = "images/icons/arrow-left.png"/></button> </div> <div class = "slide slide-right"> <button class = "transparent-button"><img src = "images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class = "card-container"> <div class = "card-buttons"> <div> <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/chat.png"/> </button> </div> <div> <button class = "transparent-button"> <img src = "images/icons/paper-plane.png"/> </button> </div> <div class = "last-card-button"> <button class = "transparent-button"> <img src = "images/icons/bookmark.png"/> </button> </div> </div> <div class = "card-likes"> taeyun_kwon1118님 외 여러 명이 좋아합니다 </div> <div class = "card-contents"> <ul> <li> <div> <span>taeyun_kwon1118</span> 여행 사진 올립니다. 좋아요 부탁 드려요 !!! </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 1 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> <li class = "comment"> <div> <span>taeyun_kwon1118</span> 댓글 2 <button class = "transparent-button"> <img src = "images/icons/heart.png"/> </button> </div> </li> </ul> </div> <div class = "card-time"> 7일 전 </div> </div> </main> <footer class = "card-comment"> <input type = "text" placeholder = "댓글 달기..." name = "comment"> <div> <button class = "transparent-button"> 게시</button> </div> </footer> </article> </section> <script type = "text/javascript" src = "scripts/carousel.js"></script> <script type = "text/javascript" src = "scripts/smoothscroll.min.js"></script> </body> </html> !function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c<o.scrollHeight:"X"===t?o.clientWidth+c<o.scrollWidth:void 0}function a(t,l){var e=o.getComputedStyle(t,null)["overflow"+l];return"auto"===e||"scroll"===e}function d(t){var l,e,i,c,n=(s()-t.startTime)/r;c=n=n>1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}(); window.addEventlistener('load', function(){ var carousels = document.getElementsByClassName('carousel'); for(var i = 0; i < carousels.length; i++) { addEventToCarousel(carousels[i]); } }); function addEventToCarousel(carouselElem){ var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비 값 조정 var liWidth = liElems[0].clientWidth;//600px var adjustedWidth = liElems.length * liWidth; ulElem.style.width = adjustedWidth + 'px'; //슬라이드 버튼 이벤트 등록 var slideButtons = carouselElem.querySelectorAll('.slide'); for(var i = 0; i < slideButtons.length; i++) { slideButtons[i].addEventlistener('click', createListenerSlide(carouselElem)); } } function createListenerSlide(carouselElem){ return function(event){ var clickedButton = event.currentTarget; var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; var currentIndex = carouselElem.attributes.data.value; if(clickedButton.className.includes('right') && currentIndex < licount - 1){ currentIndex ++; scrollDiv(carouselElem, currentIndex); } else if(clickedButton.className.includes('left') && currentIndex > 0){ currentIndex --; scrollDiv(carouselElem, currentIndex); } // indicator update // slide button 보여줌 여부 update // 새롭게 보여지는 이미지 인덱스 값을 현재 data값으로 업데이트 carouselElem.attributes.data.value = currentIndex; } } function scrollDiv(carouselElem, nextIndex){ var scrollable = carouselElem.querySelector('div'); var liWidth = scrollable.clientWidth; var newLeft = liWidth * nextIndex; scrollable.scrollTo({left: newleft, behavior: 'smooth'}); }
taeyun1118
2023-07-30T14:50:27.127Z
댓글 1
좋아요 0
조회수 545
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
:hover 처럼 콜론 하나를 쓰는 것도 있고 ::after 로 콜론 두개를 쓰는 것도 있던데 어떤 차이가 있는건가요 ?? 의미가 있는지 궁금합니다.
hanyn
2023-07-30T07:30:32.649Z
댓글 1
좋아요 0
조회수 972
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
안녕하세요. certbot 실행 이후 git clone이 되지 않아 질문을 남겼었던 질문자입니다! 당시 얼추 인도해주신 솔루션이 인스턴스 설정 초기화 후 새로 설치 였던터라 시간이 걸릴것으로 예상이 되어서 우선순위를 좀 뒤로 미루고, 다른 일들을 하다가 오느라 이제야 다시 질문의 일로 돌아왔습니다. 그런데 이제와 생각해보니 certbot 과 git의 충돌이 유력한 원인이라면... certbot을 재설치? 재실행? 하면 되지 않을까 싶어서 인터넷에 검색을 해봤는데 자동갱신에 관한 글뿐이 없더군요.. 해서 혹시 certbot을 날렸다가 다시 설치하거나 certbot의 설정파일들이 임시로 작동하지 않도록 하는 방법이 있을까요? 만약 임시 비활성화가 가능하다면 그 사이에 git clone을 진행하고, 다시 활성화 하면 될것 같아서.. 혹시 아시는 방법이 있으실지 여쭤봅니다
HTML/CSS javascript aws git mysql rest-api github
전예준
2023-07-29T09:40:29.136Z
댓글 1
좋아요 0
조회수 306
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
const runCode = new Promise((resolve, reject) => { setTimeout(() => { let num = 1; if (num > 9) { resolve(num); } else { reject("error"); } }, 1000); }); runCode .then( (item) => { console.log("success", item); }, (err) => { console.log(err); } ) .then( () => { console.log("by Dave Lee"); }, () => { console.log("error2"); //error2 는 어떨때 출력되는거지? } ); 여기서 "error2" 는 강의중에 출력되진 않던데 언제 error2가 출력되나요 ?
hanyn
2023-07-29T05:26:29.023Z
댓글 1
좋아요 0
조회수 327
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
setProducts(products);가 products라는 state를 변경하는 거잖아요. 그런데 products는 바로 위 line에서 const로 정의되었는데 setProducts(products); 의 의미가 const 정의된 products라는 변수로 state를 변경한다는 의미인가요? 만약 state가 products가 아닌 다른 것이었다면 어떻게 되는 건가요? 정확히 어떤 과정인지 이해되지 않습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-07-28T20:26:23.499Z
댓글 2
좋아요 0
조회수 345
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useEffect를 setProducts(products);앞에 쓰는 것은 왜 에러인가요? 재실행하고 싶은 구간에만 써주면 되는 것이 아닌가요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-07-28T20:00:21.007Z
댓글 3
좋아요 1
조회수 810
미해결
처음 만난 리액트(React)
안녕하세요, Notification 예제를 풀다가 질문이 생겨 질문드립니다. 다른 수강생분께서 올려주신 질문에 대한 답을 읽고 제 코드가 잘못된거 같아서 질문드립니다! 소플님께서 설명해주신 것에 따르면, 1번과 2번이 mount가 되면, 재랜더링이 일어나면서 1번이 update가 된다. 또한 1, 2번이 mount된 시점에 3번이 마운트가 되면 1, 2번이 재랜더링이 일어나면서 update하며, 1, 2, 3번이 모두 마운트 된 이후에는 재랜더링이 아닌 unmount가 실행되는 순서라고 봤습니다. 하지만 제 코드의 로그를 보면 이 순서가 아닙니다, 혹시 mount-update-unmount의 실행되는 순서가 임의로 바뀔수가 있는지 아니면 단순히 제 코드의 문제인건지 궁금합니다. 또한 else{} 구문에 배열을 초기화 시켜주는 코드를 넣으면 Notification3번은 실행되지도 않은채 배열이 초기화 되어버립니다. 이건 왜 그런건지 궁금합니다.
dbqls6365
2023-07-28T01:38:12.461Z
댓글 2
좋아요 0
조회수 721
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
모달 창 만들 때 X 닫기 를 a태그로 사용하셨는데 button 태그로 사용하면 안되나요?
강은비
2023-07-27T12:26:47.746Z
댓글 1
좋아요 1
조회수 380
미해결
이런 식으로 코드를 사용중입니다 from PyQt6.QtWidgets import * from PyQt6.QtCore import * class thread (Qthread): def __init__(self): super().__init__() def run(self): while True: mainbot_window.fun1() class UI (QWidget): def __init__(self): super().__init__() self.inits() self.T1 = thread() self.T1.start() def inits(self): print("각종 변수 설정") def fun1(self): print("run code") def main(args=None): global mainbot_window app = QApplication(sys.argv) mainbot_window = UI() mainbot_window.show() try: app.exec() except KeyboardInterrupt: pass if __name__ == '__main__': main() 여기서 global 변수를 사용하지 않고 싶습니다. 글로벌 변수를 사용하지 않고 Thread 에서 Qwidget 의 함수를 사용할 방법이 있을까요? 시도한것 thread 에서 pyqtsignal.emit 을 사용해서 시도해봤는데 ui가 검은 화면으로 뜬체 작동하지않습니다. Qthread 대신 Qtimer 를 사용 =>작동은 잘되나 ui를 표시하는데 약간의 딜레이가 생깁니다. 그래서 되도록이면 Thread를 사용하고싶습니다.
python pyqt pyqy6 threading qtread
정민기
2023-07-27T08:39:53.760Z
댓글 1
좋아요 1
조회수 843
해결됨
실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit
안녕하세요 3강 콘다 가상환경에서 비주얼 스튜디오 터미널에서 conda activate myST해도 터미널에 계속 PS로 표시되며 가상환경으로 들어가지 않습니다. cmd에서는 같은 명령어를 입력하면 들어가지는데 비주얼 스튜디오 터미널에서는 들어가지지 않는 것 같습니다. 뭐가 문제일까요?
honest5858
2023-07-27T07:49:36.805Z
댓글 1
좋아요 0
조회수 511
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요 선생님:-) 강의 끝 부분에 특정 번호를 넣으면 그 번호의 문이 열리게 activate 함수를 수정해보라고 하셔서 코딩을 해봤는데 이 방법처럼 해도 되는지 잘 모르겠어서요~ 이렇게 해도 되나요? <script> (function(){ const stageElem = document.querySelector('.stage'); let currentItem; //활성화 function activate(elem){ if(typeof(elem) == "number"){ activate(document.querySelector('.door:nth-child('+ elem +')')); return; } elem.classList.add('door-opened'); currentItem = elem; } //비활성화 function inactivate(elem){ elem.classList.remove('door-opened'); } function doorHandler(e){ const targetElem = e.target; //비활성화 if(currentItem){ inactivate(currentItem); } //활성화 if(targetElem.classList.contains('door-body')){ activate(targetElem.parentNode); } } stageElem.addEventListener('click', doorHandler); activate(3); })(); </script>
HTML/CSS javascript 인터랙티브-웹
콩떡비비빅
2023-07-27T05:43:34.177Z
댓글 2
좋아요 0
조회수 224
해결됨
모바일 웹 퍼블리싱 포트폴리오 with Figma
피그마 작업파일이 커뮤니티에 공개되는데, 무료회원이라서 그런건가요? 깜짝 놀라서, 커뮤니티에 작업 파일 삭제 했는데, 제 원본도 같이 삭제됬더라고요..ㅠㅠㅠㅠㅠㅠ 무료회원이어서 그런건지, 제가 설정을 공개로 해놓은건지, 비공개 방법이 있는지 알고싶습니다.
HTML/CSS jquery 모바일-디자인 figma 포트폴리오
자영
2023-07-27T01:15:01.552Z
댓글 1
좋아요 1
조회수 1118
해결됨
[코드캠프] 시작은 프리캠프
html이나 css에서는 작성한 코드를 open with live server에서 확인할 수 있었는데 자바 스크립트에서는 그냥 콘솔에만 작성하고 작성된 코를 html처럼 확인할 수 있는 방법은 없나요?
kbtusno12
2023-07-26T16:58:57.748Z
댓글 1
좋아요 0
조회수 282
미해결
처음 만난 리액트(React)
안녕하세요, 강의 영상을 토대로 .jsx 파일을 chapter_03 폴더에 생성했는데요 영상 속 코드 사진과 다르게 파일을 인식하지 못하는것 같습니다. 이건 어떻게 해결해야할까요?
dbqls6365
2023-07-26T07:31:11.345Z
댓글 2
좋아요 0
조회수 743
미해결
처음 만난 리액트(React)
안녕하세요! 이제 막 리액트를 배우기 시작한 학생입니다. 다름이 아니라 아주 기초적인 부분인데 .css 파일이 html에 적용되지 않아서요. 이미 질문하기 전에 찾아본 방법으로, 캐시 삭제하기 및 강력 새로고침하는 방법과 herf="styles.css?ver=2" 이렇게 새로운 파일임을 인식시켜주는 방법도 사용해보았지만 적용이 되지않습니다. 혹시 이럴땐 어떻게 해야할까요?
dbqls6365
2023-07-26T02:28:35.689Z
댓글 2
좋아요 0
조회수 581
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요! vscode에서 emmet 사용법 강좌 끝에 보면 첨부파일에 핵심 단축키 정리된 파일을 다운로드 받으라고 되어 있는데, 아무리 찾아도 다운로드할 파일을 찾지 못하여... 제가 못찾는건지, 다운이 안되는 상황인건지 문의드립니다!
개수디
2023-07-25T15:45:08.086Z
댓글 2
좋아요 1
조회수 469
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 create-react-app을 설치하고 create-react-app . 를 입력한 후에 계속 이 에러가 떠서 진행을 못하고 있습니다.ㅠ EEXIST라는 에러코드인데요.. 일단 저는 sudo npm install -g create-react-app 코드를 이용해서 설치를 했고 create-react-app -V 라는 코드를 이용해서 create-react-app의 버전이 나옴을 확인해, 설치는 제대로 되었음을 확인했습니다. 그런데 create-react-app . 이 부분을 입력할 때마다 저 에러가 뜹니다.. 어떻게 해결하면 좋을까요? 처음부터도 다시 깔아보고, uninstall install도 해보고 npx로도 해봤지만 잘 안됐습니다..
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
eu13gene
2023-07-25T15:26:08.114Z
댓글 2
좋아요 2
조회수 2199
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
아무리 구글링 유튜브 찾아 봐도 알수가 없네요 mock-sever 주소 크롬 주소창에 넣으면 분명히 자료가 잘 나오는데 vs코드에서 실행 하면 위에 처럼 에러가 나옵니다. 선생님 해결좀 부탁드립니다.수업을 나갈수가 없네요.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
TV캠핑카 다있다
2023-07-25T08:33:21.770Z
댓글 1
좋아요 1
조회수 264
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
넷플릭스 공식사이트 만들기에서 header에 padding 35px 55px을 주니까 가로스크롤이 생깁니다. 어떻게하면 없앨 수 있을까요?
hw4688
2023-07-25T08:12:53.219Z
댓글 1
좋아요 1
조회수 252
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품 상세 페이지에서 구매 버튼을 누르게 되면, 해당 상품의 soldout값이 1로 바뀌게고 적용 완료. 그 이후 자동으로 구매 버튼이 회색으로 다시 바뀌겠끔도 구현 완료 그 이후 뒷 페이지로 돌아갔을 때, 상품 목록에서 blur처리 되는 기능이 구현되지 않아 이 방법이 궁금합니다. 뒤로가기 버튼을 눌렀을 때는 해당 페이지가 새로 불러와지는 로직이 아닌가요? // Main페이지 코드 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert } from "react-native"; import React, {useEffect, useState} from "react"; import axios from "axios"; import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import "dayjs/locale/ko" import Carousel from "react-native-reanimated-carousel" import { API_URL } from "../config/constants"; import AvatarImage from "../assets/icons/avatar.png"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function MainScreen(props) { const [products, setProducts] = useState([]); const [banners, setBanners] = useState([]); const getProduct = () => { axios .get(`${API_URL}/products`) .then((result) => { console.log(result); setProducts(result.data.products) }) .catch((error) => { console.error(error); }); } useEffect(() => { getProduct(); axios .get(`${API_URL}/banners`) .then((result) => { setBanners(result.data.banners); }) .catch((error) => { console.error(error); }) }, []); return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}`}} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.Headline}>판매되는 상품들</Text> <View sytle={styles.productList}> {products.map((product, index) => { return ( <TouchableOpacity onPress={() => { props.navigation.navigate("Product", { id: product.id }) }}> <View style={styles.productCard}> {product.soldout === 1 && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImage} source={{ uri: `${API_URL}/${product.imageUrl}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text sytle={styles.productName}> {product.name} </Text> <Text sytle={styles.productPrice}> {product.price}원 </Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={AvatarImage} /> <Text style={styles.productSellerName} > {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.createdAt).fromNow()} </Text> </View> </View> </View> </TouchableOpacity> ); })} </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", padding: 32, }, productCard: { width: 320, borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, productImage: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", alignItems: "center", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 16, }, productPrice: { fontSize: 18, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems: "center", }, Headline: { fontSize: 24, fontWeight: "800", marginBottom: 24, }, productBlur: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, backgroundColor : "#ffffffa6", zIndex: 999 }, bannerImage: { width: "90%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff" } }); // Product 화면 코드 import axios from "axios"; import React, { useEffect, useState } from "react" import {Image, ActivityIndicator, StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView} from "react-native" import { API_URL } from "../config/constants"; import Avatar from "../assets/icons/avatar.png" import dayjs from "dayjs" export default function ProductScreen(props){ const {id} = props.route.params; const [product, setProduct] = useState(null); const getProduct = () => { axios.get(`${API_URL}/products/${id}`) .then((result) => { console.log("product result : ", result.data); setProduct(result.data.product); }) .catch((error) => { console.error(error); }) } useEffect(() => { getProduct(); }, []); const onPressButton = () => { if(product.soldout !== 1) { axios.post(`${API_URL}/purchase/${id}`) .then((result) => { Alert.alert("구매가 완료되었습니다."); getProduct(); }) .catch((error) => { Alert.alert(`에러가 발생했습니다. ${error.message}`); }) } } if(!product){ return <ActivityIndicator /> } return ( <View style={styles.container}> <ScrollView> <View> <Image style={styles.productImage} source={{uri: `${API_URL}/${product.imageUrl}`}} resizeMode="contain" /> </View> <View style={styles.productSection}> <View style={styles.productSeller}> <Image style={styles.avatarImage} source={Avatar} /> <Text>{product.seller}</Text> </View> <View style={styles.divider} /> <View> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price} 원</Text> <Text style={styles.productDate}>{dayjs(product.createAt).format("YYYY년 MM월 DD일")}</Text> <Text style={styles.productDescription}>{product.description}</Text> </View> </View> </ScrollView> <TouchableOpacity onPress={onPressButton}> <View style={product.soldout ===1 ? styles.purchaseDisabled : styles.purchaseButton}> <Text style={styles.purchaseText}>{product.soldout === 1 ? "구매완료" : "구매하기"}</Text> </View> </TouchableOpacity> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff" }, productImage: { width: "100%", height: 300 }, productSeller: { flexDirection: "row", alignItems: "center" }, avatarImage: { width: 50, height: 50, }, productSection: { padding: 16 }, divider: { backgroundColor: "#e9ecef", height: 1, marginVertical: 16 }, productName: { fontSize: 20, fontWeight: "400" }, productPrice: { fontSize: 18, fontWeight: "700", marginTop: 8 }, productDate: { fontSize:14, marginTop: 4, color: "rgb(204,204,204)" }, productDescription: { marginTop : 16, fontSize: 17 }, purchaseButton: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "rgb(255,80,88)", alignItems : "center", justifyContent: "center" }, purchaseText : { color: "white", fontSize: 20, }, purchaseDisabled: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "gray", alignItems : "center", justifyContent: "center" } })
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
2023-07-25T08:04:02.930Z
댓글 1
좋아요 0
조회수 325
