영상보다가
https://youtu.be/Ij2e7hWs9aw?feature=shared&t=330
Claude 공식영상
https://youtu.be/rHqk0ZGb6qo?feature=shared
나도 한번 해보자. 싶어서 영상보고 30초 만에 아래 것들 만듬.
요즘에 시간날 때마다 만들어 보려고 했던 것, 고민은 몇 달은 한 듯한데....
그냥 툭 넣으니깐
거짓말처럼 만들어주네. 리액트 한달 가량 열심히 공부한 것보다 잘 만들어 줌. ㅠㅠ
import React, { useState } from 'react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
const FluidPropertiesCalculator = () => {
const [fluidType, setFluidType] = useState('');
const [pressure, setPressure] = useState('');
const [temperature, setTemperature] = useState('');
const [moleFractions, setMoleFractions] = useState('');
const [properties, setProperties] = useState(null);
const calculateProperties = () => {
// 실제 계산 로직은 여기에 구현해야 합니다.
// 이 예제에서는 임의의 값을 반환합니다.
const mockProperties = {
density: Math.random() * 1000,
viscosity: Math.random() * 0.001,
specificVolume: Math.random() * 0.01,
};
setProperties(mockProperties);
};
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">유체물성치 계산기</h1>
<div className="space-y-4">
<Select onValueChange={setFluidType}>
<SelectTrigger>
<SelectValue placeholder="유체 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="water">물</SelectItem>
<SelectItem value="hydrogen">수소</SelectItem>
<SelectItem value="custom">사용자 정의 혼합물</SelectItem>
</SelectContent>
</Select>
<Input
type="number"
placeholder="압력 (Pa)"
value={pressure}
onChange={(e) => setPressure(e.target.value)}
/>
<Input
type="number"
placeholder="온도 (K)"
value={temperature}
onChange={(e) => setTemperature(e.target.value)}
/>
{fluidType === 'custom' && (
<Input
placeholder="몰 분율 (예: 0.7,0.3)"
value={moleFractions}
onChange={(e) => setMoleFractions(e.target.value)}
/>
)}
<Button onClick={calculateProperties}>계산</Button>
</div>
{properties && (
<Card className="mt-4">
<CardHeader>
<CardTitle>계산된 물성치</CardTitle>
</CardHeader>
<CardContent>
<p>밀도: {properties.density.toFixed(2)} kg/m³</p>
<p>점성도: {properties.viscosity.toFixed(6)} Pa·s</p>
<p>비체적: {properties.specificVolume.toFixed(4)} m³/kg</p>
</CardContent>
</Card>
)}
</div>
);
};
export default FluidPropertiesCalculator;
import React, { useState } from 'react';
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
const FluidPropertiesCalculator = () => {
const [fluidType, setFluidType] = useState('water');
const [pressure, setPressure] = useState('');
const [pressureUnit, setPressureUnit] = useState('bar');
const [temperature, setTemperature] = useState('');
const [temperatureUnit, setTemperatureUnit] = useState('C');
const [moleFractions, setMoleFractions] = useState('');
const [properties, setProperties] = useState({
density: null,
viscosity: null,
specificVolume: null,
thermalConductivity: null,
specificHeat: null
});
const calculateProperties = () => {
// Actual calculation logic should be implemented here.
// This example returns mock values.
setProperties({
density: Math.random() * 1000,
viscosity: Math.random() * 0.001,
specificVolume: Math.random() * 0.01,
thermalConductivity: Math.random() * 0.5,
specificHeat: Math.random() * 2000
});
};
const ResultField = ({ label, value, unit }) => (
<div className="flex items-center space-x-2">
<Label className="w-1/3">{label}</Label>
<Input
value={value ? value.toFixed(4) : '-'}
readOnly
className="bg-gray-100 w-1/3"
/>
<span className="text-sm text-gray-500 w-1/3">{unit}</span>
</div>
);
return (
<div className="p-4 max-w-2xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Fluid Properties Calculator</h1>
<div className="space-y-6">
<div>
<Label className="mb-2 block">Fluid Type</Label>
<RadioGroup
defaultValue="water"
onValueChange={setFluidType}
className="flex space-x-4"
>
{[
{ value: 'water', label: 'Water' },
{ value: 'hydrogen', label: 'Hydrogen' },
{ value: 'custom', label: 'Custom Mixture' }
].map((item) => (
<div key={item.value} className="flex items-center space-x-2">
<RadioGroupItem
value={item.value}
id={item.value}
className="w-4 h-4 text-primary border-primary"
/>
<Label htmlFor={item.value} className="cursor-pointer">{item.label}</Label>
</div>
))}
</RadioGroup>
</div>
<div className="space-y-4">
<div>
<Label htmlFor="pressure">Pressure</Label>
<div className="flex space-x-2">
<Input
id="pressure"
type="number"
placeholder="Enter pressure"
value={pressure}
onChange={(e) => setPressure(e.target.value)}
className="flex-grow"
/>
<Select value={pressureUnit} onValueChange={setPressureUnit}>
<SelectTrigger id="pressure-unit" className="w-[80px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="bar">bar</SelectItem>
<SelectItem value="Pa">Pa</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div>
<Label htmlFor="temperature">Temperature</Label>
<div className="flex space-x-2">
<Input
id="temperature"
type="number"
placeholder="Enter temperature"
value={temperature}
onChange={(e) => setTemperature(e.target.value)}
className="flex-grow"
/>
<Select value={temperatureUnit} onValueChange={setTemperatureUnit}>
<SelectTrigger id="temperature-unit" className="w-[80px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="C">°C</SelectItem>
<SelectItem value="K">K</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{fluidType === 'custom' && (
<div>
<Label htmlFor="mole-fractions">Mole Fractions</Label>
<Input
id="mole-fractions"
placeholder="Enter mole fractions (e.g., 0.7,0.3)"
value={moleFractions}
onChange={(e) => setMoleFractions(e.target.value)}
/>
</div>
)}
</div>
<Button onClick={calculateProperties} className="w-full">Calculate</Button>
<div className="mt-6">
<h2 className="text-xl font-semibold mb-4">Calculated Properties</h2>
<div className="space-y-4">
<ResultField label="Density" value={properties.density} unit="kg/m³" />
<ResultField label="Viscosity" value={properties.viscosity} unit="Pa·s" />
<ResultField label="Specific Volume" value={properties.specificVolume} unit="m³/kg" />
<ResultField label="Thermal Conductivity" value={properties.thermalConductivity} unit="W/(m·K)" />
<ResultField label="Specific Heat" value={properties.specificHeat} unit="J/(kg·K)" />
</div>
</div>
</div>
</div>
);
};
export default FluidPropertiesCalculator;
와! 짱이다
_
반응형