코인 손절 알람기 만들기 - 1. 틀 만들기 - react, nextjs, v0, cursor

UI:

진행 과정:

1. 틀 만들기 --- 현재

2. 손절가 계산

 

틀 만들기 과정:

1. v0

- prompt:

• create a mobile web with header
• change the color scheme to orange
• on the main page. i want to have two buttons at the end. also i want have one text input with a search icon under the title
• v0 prompt example: https://v0.dev/chat/3Y2ZvsGYoyL?b=b_ENNK3G8HN1B

- 결과:

 

2. deploy (terminal)

 

- v0 에서 "add to codebase" 클릭해서 주소 복사

 

- 터미널에서 실행:

npx shadcn@latest add "https://v0.dev/chat/b/b_ENNK3G8HN1B"

 

- 선택지에서 다음 선택

The path ~ does not contain a package.json file. Would you like to start a new Next.js project? ... yes
What is your project named? ... crypto-stop-loss-alarm
Which style would you like to use? » New York
Which color would you like to use as the base color? » Neutral
Would you like to use CSS variables for theming? ... no / yes
√ The file layout.tsx already exists. Would you like to overwrite? ... y
√ The file globals.css already exists. Would you like to overwrite? ... y
√ The file page.tsx already exists. Would you like to overwrite? ... y
√ The file utils.ts already exists. Would you like to overwrite? ... y

 

3. run (terminal)

- 터미널에서 실행:

npm run dev

 

- 네이버 웨일 모바일웹에서 localhost:3000 접속

- 결과: 

- 피드백:

orange theme 이 적용되지 않았는데 이는 나중에 해결하기로 한다.

기능 구현이 먼저다.

 

4. cursor composer

- composer 실행 (Ctrl + L 해서 composer 클릭)

- +버튼 눌러서 context 에 app/page.tsx 추가

- composer prompt:

• change h1 title to "코인 손절 알람기"
• change default button text to "알림 신청"
• remove button with text "Secondary Action"
• remove first p paragraph
• change feature 1 text to "손절가"
• change feature 2 text to "현재가"
• change text for p under h2 손절가 to "stop loss price"
• change text for p under h2 현재가 to "current price"

- 결과:

관련 코드 (github):

- https://github.com/tyson-park/crypto-stop-loss-alarm

 

다음 글:

- 코인 손절 알람기 만들기 - 2. 손절가 계산 - nextjs, ChatGPT, 업비트 REST API

코인 손절 알람기 만들기 - 2. 손절가 계산 - nextjs, ChatGPT, 업비트 REST API