들어가기
동네생활부분에 대해서 알아본다.
pages/community/[id].tsx, index.tsx, write.tsx
세개의 파일로 이루어짐.
1. pages/community/index.tsx
import type { NextPage } from 'next'
import Link from 'next/link'
import FloatingButton from '../../components/floating-button'
import Layout from '../../components/layout'
const Community: NextPage = () => {
return (
<Layout hasTabBar title="동네생활">
<div className="py-16 space-y-8">
{[1, 2, 3, 4, 5, 6].map((_, i) => (
<Link key={i} href={`/community/${i}`}> ///각각의 밀문 클릭시
///이동되게 설정
<a className="flex cursor-pointer flex-col items-start">
<span className="flex ml-4 items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
동네질문
</span>
<div className="mt-2 px-4 text-gray-700">
<span className="text-orange-500 font-medium">Q .</span> What is
the best mandu restaurant?
</div>
<div className="mt-5 px-4 flex items-center justify-between w-full text-gray-500 font-medium text-xs">
<span>니꼬</span>
<span>18시간 전</span>
</div>
<div className="flex px-4 space-x-5 mt-3 text-gray-500 py-3 border-t w-full border-b-[2px] shadow-lg">
<span className="flex space-x-2 items-center text-sm ">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span>궁금해요 1</span>
</span>
<span className="flex space-x-2 items-center text-sm ">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
></path>
</svg>
<span>답변 1</span>
</span>
</div>
</a>
</Link>
))}
<FloatingButton href="/community/write">
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
></path>
</svg>
</FloatingButton>
</div>
</Layout>
)
}
export default Community
2. pages/community/[id].tsx
import type { NextPage } from 'next'
import Layout from '../../components/layout'
import TextArea from '../../components/textarea'
const CommunityPostDetail: NextPage = () => {
return (
<Layout canGoBack>
<span className="inline-flex my-3 ml-4 items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
동네질문
</span>
<div className="flex mb-3 px-4 cursor-pointer pb-3 border-b items-center space-x-3">
<div className="w-10 h-10 rounded-full bg-slate-300" />
<div>
<p className="text-sm font-medium text-gray-700">Steve Jebs</p>
<p className="text-xs font-medium text-gray-500">
View profile →
</p>
</div>
</div>
<div>
<div className="mt-2 px-4 text-gray-700">
<span className="text-orange-500 font-medium">Q.</span> What is the
best mandu restaurant?
</div>
<div className="flex px-4 space-x-5 mt-3 text-gray-700 py-2.5 border-t border-b-[2px] w-full">
<span className="flex space-x-2 items-center text-sm">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span>궁금해요 1</span>
</span>
<span className="flex space-x-2 items-center text-sm">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
></path>
</svg>
<span>답변 1</span>
</span>
</div>
</div>
<div className="px-4 my-5 space-y-5">
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-slate-200 rounded-full" />
<div>
<span className="text-sm block font-medium text-gray-700">
Steve Jebs
</span>
<span className="text-xs text-gray-500 block ">2시간 전</span>
<p className="text-gray-700 mt-2">
The best mandu restaurant is the one next to my house.
</p>
</div>
</div>
</div>
<div className="px-4">
<TextArea
name="description"
label='Answer'
required
placeholder="Answer this question!"
/>
<button className="mt-2 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 focus:outline-none ">
Reply
</button>
</div>
</Layout>
)
}
export default CommunityPostDetail3. pages/commnity/write.tsx
import { NextPage } from 'next'
import Button from '../../components/button'
import Layout from '../../components/layout'
import TextArea from '../../components/textarea'
const Write: NextPage = () => {
return (
<Layout canGoBack title="Write Post!">
<form className="p-4 space-y-4">
<TextArea required placeholder="Ask a question!" />
///required와 placeholder가 {...rest}부분에 속하는 속성임.
<Button text="Submit" />
</form>
</Layout>
)
}
export default Write
코딩하는초딩쌤