[BBB-99] Feat: 메인페이지 디자인

app/page.tsx

@@ -1,14 +1,50 @@
 'use client';
 
+import { Button } from '@/components/ui/button/button';
+import { StudyIcon } from '@/components/ui/icon/icon';
 import { userState } from '@/recoil/userAtom';
+import { VideoIcon } from 'lucide-react';
 import { useRecoilState } from 'recoil';
 
 export default function Home() {
   const [myData, setMyData] = useRecoilState(userState);
   return (
     <>
-      <div className="text-center">
+      {/* <div className="text-center">
         {myData?.username + '로 로그인된 상태입니다.'}
+      </div> */}
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-b from-white to-gray-300">
+        <div className="space-y-12">
+          <div className="ml-12 text-5xl grid grid-rows-3 grid-cols-2 gap-x-12 gap-y-3">
+            <b>개발자들의</b>
+            <b>Dev's</b>
+            <b>깊이 있는</b>
+            <b>Depth</b>
+            <b>스터디</b>
+            <b>Study</b>
+          </div>
+          <div className="flex flex-col space-y-2 items-center">
+            <Button className="w-1/2 bg-gray-900 text-white py-6 px-6 rounded-lg shadow-md hover:bg-gray-600">
+              <div className="text-xl flex items-center justify-center space-x-2">
+                <StudyIcon className="w-7 h-7"></StudyIcon>
+                <p>스터디 시작하기</p>
+              </div>
+            </Button>
+            <Button className="w-1/2 bg-gray-900 text-white py-6 px-6 rounded-lg shadow-md hover:bg-gray-600">
+              <div className="text-xl flex items-center justify-center space-x-2">
+                <VideoIcon className="w-7 h-7"></VideoIcon>
+                <p>강의 둘러보기</p>
+              </div>
+            </Button>
+          </div>
+        </div>
+        {/* <div className="relative">
+          <img
+            src="gray-hamster.png"
+            alt="hamster with laptop"
+            className="w-full max-w-md"
+          />
+        </div> */}
       </div>
     </>
   );

app/post/[id]/page.tsx

@@ -1,142 +1,87 @@
-/**
- * This code was generated by v0 by Vercel.
- * @see https://v0.dev/t/EYJ4s50uN2T
- * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
- */
-
-/** Add fonts into your Next.js project:
-
-import { Libre_Baskerville } from 'next/font/google'
-
-libre_baskerville({
-  subsets: ['latin'],
-  display: 'swap',
-})
-
-To read more about using these font, please visit the Next.js documentation:
-- App Directory: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
-- Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
-**/
+'use client';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button/button';
+import { Label } from '@/components/ui/label/label';
+import { Textarea } from '@/components/ui/textarea/textarea';
 
-export default function post() {
+export default function Post() {
   return (
-    <div className="container mx-auto px-4 py-12 md:px-6 lg:py-16">
-      <article className="prose prose-gray mx-auto dark:prose-invert">
-        <div className="space-y-2 not-prose">
-          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
-            스터디 입장전 필독
+    <div className="flex px-4 py-6 md:px-6 lg:py-16 md:py-12 ">
+      <article className="prose prose-gray mx-auto dark:prose-invert w-[600px]">
+        <div className="space-y-2 not-prose mb-3">
+          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl lg:leading-[3.5rem]">
+            스터디 입장 전 필독
           </h1>
-          <div className="flex items-center space-x-4 text-sm text-muted-foreground">
-            <div className="flex items-center space-x-2">
-              <Avatar className="h-6 w-6 border">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Avatar className="w-8 h-8 border">
                 <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
                 <AvatarFallback>JD</AvatarFallback>
               </Avatar>
-              <span>John Doe</span>
+              <div className="text-sm font-medium">멘토</div>
             </div>
-            <span>|</span>
-            <span>August 13, 2024</span>
+            <div className="text-muted-foreground text-sm">2024. 08. 13</div>
           </div>
         </div>
-
-        <p>
-          스터디 구성 최소 조건 요약 스터디 주기 및 인원 최소 4-6주 이상 지속
-          매주 또는 격주 진행 2시간 이내<br></br>
-          <br></br> 중간 쉬는시간 갖기 인원 4-8명 참여자 스터디 리더 스터디 방향
-          길잡이 매회차 스터디 사전 질문 준비 스터디원 공부 반드시 하고 참여하기
-          <br></br> 본인이 이해한 부분 설명, 못한 부분 질문 기록 남기기 모든
-          참여자 - 발표내용에 대한 질문, 코멘트, 새로 배운 것, 중요한 부분 등
-          최소 3개 이상 공유 지원자 - 공유 내용 취합 및 정리 후 공개 장소에 기록
-          <br></br> 규칙 공부 내용과 관련된 모든 질문 환영
-          비난/비방/욕/뒷담화/무시 등 절대 금지 정신 <br></br>
-          <br></br>1. 지식의 소화전 자신의 직업 또는 관심 분야에서 뛰어난 도서,
-          아티클, 강연을 찾아서 그것들을 깊이있게 공부하기 공부재료 찾는 방법 -
-          분야를 잘 아는 사람에게 좋아하는 책/작가, 영향을 받은 것들에 대해
-          물어보기 재료를 찾았으면 스터디 그룹 참여하기 공부 순서 정하기 공부
-          목록 구성하기<br></br> 2. 통찰력 웅덩이 혼자 공부한 내용을 스터디에서
-          나누기 공부하면서 헷갈렸던 부분 잘못 이해한 부분 새로 알게된 사실
-          몰랐던 부분이 어디인지 확실히 알게 됨 내가 모르는 것은 질문하고 아는
-          것은 설명하기 가장 좋은 스터디 그룹은 다른 사람과 같이 배우는 것을
-          편안하게 느낄 수 있는 곳 분위기는 대화하는데 중요한 역할을 함 질 높은
-          스터디를 위한 스터디 리더와 스터디원이 필요 <br></br>3. 안전한 공간 안
-          좋은 예시 자랑, 따돌림, 무시하는 말투, 무례하거나 싸우자 식의 태도
-          지나치게 한명만 많이 말하는 상황 개인에 대한 비난/비방 개인적 의견
-          충돌이 있을 때는 스터디가 끝난 후 따로 대화시간 갖기 스터디 내에서
-          따르는 규칙 정하기 어떤 질문이나 실수도 용인되는 환경 만들기<br></br>{' '}
-          4. 지속력 빈도 - 매주 또는 격주 시간 - 2시간 이내, 일찍 끝나면 그대로
-          스터디 종료 중간에 쉬는시간 갖기 참여자들이 실제로 관심 있어하는
-          주제에 대해서 다루기 이상적인 스터디 공간과 환경 갖추기 서브그룹과
-          스터디 주기 적절히 활용하기<br></br> 5. 동료 찾기 사내 스터디 -
-          성공확률 반반 컨퍼런스, 강연 등 큰 집단은 커넥션이 약하고 비효율적
-          작은 스터디를 지속하면서 본인이 실제로 관심있는 주제를 같이 공부하는
-          것이 가장 효율적 의미있는 네트워킹(관계형성)은 안전한 공간에서 제일 잘
-          이루어짐 네트워킹에 가장 좋은 시간대는 스터디 전/후
-        </p>
-      </article>
-      <div className="mx-auto mt-12 max-w-3xl space-y-6">
-        <h2 className="text-2xl font-bold">Comments</h2>
-        <div className="space-y-6">
+        <p>1. 9시 1분은 9시가 아니다</p>
+        <p>2. 실행은 수직적 문화는 수평적</p>
+        <p>3. 잡담을 많이 나누는 것이 경쟁력이다</p>
+        <p>4. 휴가나 퇴근 시 눈치주는 농담을 하지 않는다</p>
+        <p>5. 보고는 팩트에 기반한다</p>
+        <p>6. 회식은 100% 자율적으로 참석한다</p>
+        <br></br>
+        <h2 className="text-lg">댓글</h2>
+        <div className="space-y-4 mt-3">
           <div className="flex items-start gap-4">
-            <Avatar className="h-10 w-10 border">
+            <Avatar className="w-10 h-10 border">
               <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
               <AvatarFallback>JD</AvatarFallback>
             </Avatar>
-            <div className="flex-1 space-y-2">
-              <div className="flex items-center justify-between">
-                <div className="font-medium">Jane Doe</div>
-                <div className="text-sm text-muted-foreground">
-                  August 13, 2024
-                </div>
+            <div className="grid gap-1">
+              <div className="font-medium">장민석</div>
+              <div className="text-muted-foreground">
+                전 격주로 할 것 같은데 가능할까요?
               </div>
-              <p>
-                This is a great article! I really enjoyed learning about the
-                future of web development and the importance of automation and
-                collaboration. Can't wait to see what the future holds.
-              </p>
             </div>
           </div>
           <div className="flex items-start gap-4">
-            <Avatar className="h-10 w-10 border">
+            <Avatar className="w-10 h-10 border">
               <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
               <AvatarFallback>JD</AvatarFallback>
             </Avatar>
-            <div className="flex-1 space-y-2">
-              <div className="flex items-center justify-between">
-                <div className="font-medium">John Smith</div>
-                <div className="text-sm text-muted-foreground">
-                  August 14, 2024
-                </div>
-              </div>
-              <p>
-                Excellent insights! I'm really excited about the potential of AI
-                and machine learning in web development. Can't wait to see how
-                these technologies will shape the future.
-              </p>
+            <div className="grid gap-1">
+              <div className="font-medium">이현종</div>
+              <div className="text-muted-foreground">확인했습니다!</div>
             </div>
           </div>
           <div className="flex items-start gap-4">
-            <Avatar className="h-10 w-10 border">
+            <Avatar className="w-10 h-10 border">
               <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
               <AvatarFallback>JD</AvatarFallback>
             </Avatar>
-            <div className="flex-1 space-y-2">
-              <div className="flex items-center justify-between">
-                <div className="font-medium">Emily Johnson</div>
-                <div className="text-sm text-muted-foreground">
-                  August 15, 2024
-                </div>
-              </div>
-              <p>
-                This article really resonates with me. I've been seeing the
-                benefits of automation and collaboration in my own work, and I'm
-                excited to see how the industry continues to evolve. Thanks for
-                the great insights!
-              </p>
+            <div className="grid gap-1">
+              <div className="font-medium">송승훈</div>
+              <div className="text-muted-foreground">넵 확인했습니다</div>
             </div>
           </div>
         </div>
-      </div>
+        <div className="mt-8">
+          <form className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="comment">댓글 추가...</Label>
+              <Textarea id="comment" placeholder="..." rows={3} />
+            </div>
+            <div className="flex justify-end ">
+              <Button
+                type="submit"
+                className="hover:bg-gray-600 bg-gray-900 text-white"
+              >
+                작성
+              </Button>
+            </div>
+          </form>
+        </div>
+      </article>
     </div>
   );
 }

app/study/[id]/page.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import StudyDashBoard from '@/components/study/dashboard/dashboard';
+import PostBoard from '@/components/study/post-board';
 import JoinStudyDialog from '@/components/study/study-join-dialog';
 import { Button } from '@/components/ui/button/button';
 import Spinner from '@/components/ui/spinner/spinner';
@@ -26,6 +27,7 @@ export default function StudyPage() {
   const [canStart, setCanStart] = useState(false);
   const [myData, setMyData] = useRecoilState(userState);
   const [trigger, setTrigger] = useState(Date.now());
+  const [showPostBoard, setShowPostBoard] = useState(false);
 
   const handleStart = async () => {
     try {
@@ -76,12 +78,16 @@ export default function StudyPage() {
 
   return (
     <div className="flex space-x-4 justify-center">
-      <StudyDashBoard
-        details={details}
-        studyId={studyId}
-        round={round}
-        setRound={setRound}
-      />
+      {showPostBoard ? (
+        <PostBoard></PostBoard>
+      ) : (
+        <StudyDashBoard
+          details={details}
+          studyId={studyId}
+          round={round}
+          setRound={setRound}
+        />
+      )}
       <div className="mt-4">
         {isParticipant ? (
           canStart ? (
@@ -98,7 +104,12 @@ export default function StudyPage() {
             refresh={refresh}
           />
         )}
-        <StudyAbout details={details} users={round.users} />
+        <StudyAbout
+          details={details}
+          users={round.users}
+          showPostBoard={showPostBoard}
+          setShowPostBoard={setShowPostBoard}
+        />
       </div>
     </div>
   );