Merge pull request #33 from Team-BomBomBom/feat/book_study_dashboard#…

…BBB-99 Feat: #BBB-99 서적 스터디 대시보드 디자인
Team-BomBomBom · Aug 28, 2024 · 074508b · 074508b
2 parents 11cf746 + df78ee3
commit 074508b
Show file tree

Hide file tree

Showing 19 changed files with 729 additions and 47 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1 @@
+.env
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,47 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_PUBLIC_API_SERVER_URL https://www.dev-study.com
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD node server.js
diff --git a/app/page.tsx b/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&apos;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>
     </>
   );

diff --git a/app/post/[id]/page.tsx b/app/post/[id]/page.tsx
@@ -0,0 +1,91 @@
+'use client';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from '@/components/ui/avatar/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() {
+  return (
+    <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 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>
+              <div className="text-sm font-medium">멘토</div>
+            </div>
+            <div className="text-muted-foreground text-sm">2024. 08. 13</div>
+          </div>
+        </div>
+        <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="w-10 h-10 border">
+              <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <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="w-10 h-10 border">
+              <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <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="w-10 h-10 border">
+              <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <div className="grid gap-1">
+              <div className="font-medium">송승훈</div>
+              <div className="text-muted-foreground">넵 확인했습니다</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>
+  );
+}
diff --git a/app/study/[id]/page.tsx b/app/study/[id]/page.tsx
@@ -5,17 +5,14 @@ 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';
 import getStudyDetails from '@/lib/api/study/get-details';
 import startStudy from '@/lib/api/study/start';
 import { userState } from '@/recoil/userAtom';
-import {
-  AlgorithmRound,
-  StudyDetails,
-  StudyStatus
-} from '@/types/study/study-detail';
+import { Round, StudyDetails, StudyStatus } from '@/types/study/study-detail';
 import { toast } from 'react-toastify';
 import { useRecoilState } from 'recoil';
 
@@ -25,11 +22,12 @@ export default function StudyPage() {
   const studyId = Number(params.id);
 
   const [details, setDetails] = useState<StudyDetails | undefined>();
-  const [round, setRound] = useState<AlgorithmRound | undefined>();
+  const [round, setRound] = useState<Round | undefined>();
   const [isParticipant, setIsParticipant] = useState(false);
   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 {
@@ -80,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 ? (
@@ -102,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>
   );

diff --git a/components/study/dashboard/about.tsx b/components/study/dashboard/about.tsx
@@ -3,14 +3,25 @@ import {
   AvatarFallback,
   AvatarImage
 } from '@/components/ui/avatar/avatar';
+import {
+  BellIcon,
+  BoxIcon,
+  FilePenIcon,
+  LayoutGridIcon
+} from '@/components/ui/icon/icon';
+import { StudyType } from '@/constants/study/study';
 import { StudyDetails, StudyMemberInfo } from '@/types/study/study-detail';
 
 export default function StudyAbout({
   details,
-  users
+  users,
+  showPostBoard,
+  setShowPostBoard
 }: {
   details: StudyDetails;
   users: { [userId: number]: StudyMemberInfo };
+  showPostBoard: boolean;
+  setShowPostBoard: (arg0: boolean) => void;
 }) {
   const endDate = new Date(details.startDate);
   endDate.setDate(endDate.getDate() + details.weeks * 7);
@@ -21,8 +32,26 @@ export default function StudyAbout({
         <h2 className="text-xl font-bold">소개</h2>
         <SettingsIcon className="w-5 h-5 text-muted-foreground" />
       </div>
+
       <p className="mt-2 text-muted-foreground">{details.introduce}</p>
+
       <div className="mt-4 space-y-2">
+        <div
+          onClick={() => setShowPostBoard(!showPostBoard)}
+          className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
+        >
+          {showPostBoard ? (
+            <>
+              <LayoutGridIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></LayoutGridIcon>
+              <b>대시보드 </b>
+            </>
+          ) : (
+            <>
+              <BellIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></BellIcon>
+              <b>공지사항 </b>
+            </>
+          )}
+        </div>
         <div className="flex items-center space-x-2">
           <ActivityIcon className="w-5 h-5 text-muted-foreground" />
           <b>
@@ -57,6 +86,32 @@ export default function StudyAbout({
           <b>{details.reliabilityLimit}</b>
           <span>이상</span>
         </div>
+        {StudyType[details.studyType as keyof typeof StudyType] ===
+          StudyType.BOOK && (
+          <>
+            <div className="flex items-center space-x-2">
+              <BookIcon className="w-5 h-5 text-muted-foreground" />
+              {/* TODO details.book.title로 변경 */}
+              <span>자바의 정석</span>
+            </div>
+
+            <div
+              onClick={() => {}}
+              className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
+            >
+              <FilePenIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></FilePenIcon>
+              <b>과제 선택지 수정 </b>
+            </div>
+
+            <div
+              onClick={() => {}}
+              className="group w-fit hover:text-gray-900 text-blue-600 flex items-center space-x-2"
+            >
+              <BoxIcon className="group-hover:stroke-black stroke-blue w-5 h-5 text-muted-foreground"></BoxIcon>
+              <b>과제 투표 </b>
+            </div>
+          </>
+        )}
       </div>
       <div className="mt-6">
         <h3 className="text-lg font-bold">