wip

AboutClan · May 25, 2024 · 01593a8 · 01593a8
1 parent 592a2c6
commit 01593a8
Show file tree

Hide file tree

Showing 19 changed files with 534 additions and 138 deletions.
diff --git a/assets/MainLogo.tsx b/assets/MainLogo.tsx
diff --git a/components/atoms/InfoCard.tsx b/components/atoms/InfoCard.tsx
@@ -39,13 +39,6 @@ export default function InfoCard({
   );
 }
 
-const Button = styled.button`
-  display: inline-block;
-  margin-left: 4px;
-  padding: 0 4px;
-  color: var(--gray-600);
-`;
-
 const CardContainer = styled.div`
   display: flex;
   align-items: center;
@@ -80,4 +73,5 @@ const CommentText = styled.span`
 
 const RightComponentContainer = styled.div`
   margin-left: auto;
+  margin-right: 4px;
 `;
diff --git a/components/atoms/badges/OutlineBadge.tsx b/components/atoms/badges/OutlineBadge.tsx
@@ -7,6 +7,7 @@ interface IOutlineBadge extends ITextAndColorSchemes {
 }
 
 export default function OutlineBadge({ text, colorScheme, size = "md" }: IOutlineBadge) {
+  console.log(text, colorScheme);
   return (
     <Badge
       p={size === "md" ? "3px 6px" : "2px 4px"}

diff --git a/components/atoms/buttons/HighlightedTextButton.tsx b/components/atoms/buttons/HighlightedTextButton.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 
 interface IHighlightedTextButton {
   text: string;
-
   onClick: () => void;
 }
 export default function HighlightedTextButton({ text, onClick }: IHighlightedTextButton) {
@@ -16,7 +15,7 @@ export default function HighlightedTextButton({ text, onClick }: IHighlightedTex
 
 const Text = styled.span`
   background-color: var(--color-mint-light);
-  font-size: 13px;
+  font-size: 14px;
   color: var(--color-mint);
   font-weight: 400;
 `;
diff --git a/components/molecules/cards/PostThumbnailCard.tsx b/components/molecules/cards/PostThumbnailCard.tsx
@@ -90,7 +90,9 @@ export function PostThumbnailCard({
         </Flex>
       </Flex>
       <Flex direction="column" justifyContent="space-between" align="flex-end">
-        <OutlineBadge size="sm" text={badge.text} colorScheme={badge.colorScheme} />
+        <Box>
+          {badge && <OutlineBadge size="sm" text={badge.text} colorScheme={badge.colorScheme} />}
+        </Box>
         <Flex
           mb="-2px"
           className="userIconContainer"
@@ -105,7 +107,7 @@ export function PostThumbnailCard({
             <Box
               as="span"
               color={
-                CLOSED_TEXT_ARR.includes(badge.text)
+                CLOSED_TEXT_ARR.includes(badge?.text)
                   ? "inherit"
                   : maxCnt && participants.length >= maxCnt
                     ? "var(--color-red)"

diff --git a/components/molecules/cards/ProfileCommentCard.tsx b/components/molecules/cards/ProfileCommentCard.tsx
@@ -30,7 +30,7 @@ export default function ProfileCommentCard({
           <span>{user.name}</span>
           <UserBadge score={user.score} uid={user.uid} />
         </UserNameBadgeContainer>
-        <Flex alignItems="center">
+        <Flex alignItems="center" flex={1}>
           <CommentText>{comment !== null ? comment : user.comment}</CommentText>
           {setMemo && (
             <Button onClick={setMemo}>
@@ -61,7 +61,8 @@ const CardContainer = styled.div`
 `;
 
 const UserInfoContainer = styled.div`
-  margin-left: 12px; /* ml-3 */
+  margin-left: 12px;
+  flex: 0.9;
 `;
 
 const UserNameBadgeContainer = styled.div`
@@ -79,10 +80,11 @@ const CommentText = styled.span`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
-  color: var(--gray-600); /* text-gray-4 */
+  color: var(--gray-600);
   font-size: 13px;
 `;
 
 const RightComponentContainer = styled.div`
+  margin-right: 4px;
   margin-left: auto;
 `;
diff --git a/components/organisms/VoteMap.tsx b/components/organisms/VoteMap.tsx
@@ -2,11 +2,12 @@ import { useEffect, useRef } from "react";
 import styled from "styled-components";
 
 import { IMapOptions, IMarkerOptions } from "../../types/externals/naverMapTypes";
+import { IPlace } from "../../types/models/studyTypes/studyDetails";
 
 interface IVoteMap {
   mapOptions?: IMapOptions;
   markersOptions?: IMarkerOptions[];
-  handleMarker?: (id: string) => void;
+  handleMarker?: (id: IPlace) => void;
   centerValue?: {
     lat: number;
     lng: number;

diff --git a/components/organisms/drawer/BottomDrawerLg.tsx b/components/organisms/drawer/BottomDrawerLg.tsx
@@ -6,34 +6,38 @@ import { IModal } from "../../../types/components/modalTypes";
 import ScreenOverlay from "../../atoms/ScreenOverlay";
 
 export interface IBottomDrawerLgOptions {
-  header: {
+  header?: {
     title: string;
     subTitle: string;
   };
-  footer: {
+  footer?: {
     buttonText: string;
     onClick: () => void;
     buttonLoading?: boolean;
   };
 }
 
 interface IBottomDrawerLg extends IModal {
-  options: IBottomDrawerLgOptions;
+  options?: IBottomDrawerLgOptions;
   children: React.ReactNode;
   isAnimation?: boolean;
+  height?: number;
+  isXPadding?: boolean;
+  isOverlay?: boolean;
 }
 
-const HEIGHT = 421.5;
-
 export default function BottomDrawerLg({
   setIsModal,
-  options: {
-    header: { title, subTitle },
-    footer: { buttonText, onClick, buttonLoading = false },
-  },
+  options,
   isAnimation = true,
+  height = 421.5,
   children,
+  isXPadding = true,
+  isOverlay = true,
 }: IBottomDrawerLg) {
+  const header = options?.header;
+  const footer = options?.footer;
+
   const handleDragEnd = (_, info) => {
     if (info.offset.y > 40) {
       setIsModal(false);
@@ -42,40 +46,46 @@ export default function BottomDrawerLg({
 
   return (
     <>
-      <ScreenOverlay onClick={() => setIsModal(false)} />
+      {isOverlay && <ScreenOverlay onClick={() => setIsModal(false)} />}
       <Layout
+        height={height}
+        isXPadding={isXPadding}
         drag="y"
         dragConstraints={{ top: 0, bottom: 0 }}
         onDragEnd={handleDragEnd}
-        initial={{ y: isAnimation ? HEIGHT : 0 }}
+        initial={{ y: isAnimation ? height : 0 }}
         animate={{ y: 0 }}
-        exit={{ y: HEIGHT, transition: { duration: 0.2 } }}
+        exit={{ y: height, transition: { duration: 0.2 } }}
         transition={{ duration: 0.4 }}
       >
         <TopNav />
-        <Header>
-          <span>{subTitle}</span>
-          <span>{title}</span>
-        </Header>
+        {header && (
+          <Header>
+            <span>{header.subTitle}</span>
+            <span>{header.title}</span>
+          </Header>
+        )}
         {children}
-        <Button
-          w="100%"
-          mt="auto"
-          colorScheme="mintTheme"
-          size="lg"
-          isLoading={buttonLoading}
-          borderRadius="var(--rounded-lg)"
-          onClick={onClick}
-        >
-          {buttonText}
-        </Button>
+        {footer && (
+          <Button
+            w="100%"
+            mt="auto"
+            colorScheme="mintTheme"
+            size="lg"
+            isLoading={footer.buttonLoading}
+            borderRadius="var(--rounded-lg)"
+            onClick={footer.onClick}
+          >
+            {footer.buttonText}
+          </Button>
+        )}
       </Layout>
     </>
   );
 }
 
-const Layout = styled(motion.div)`
-  height: ${HEIGHT}px;
+const Layout = styled(motion.div)<{ height: number; isXPadding: boolean }>`
+  height: ${(props) => props.height}px;
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -84,7 +94,8 @@ const Layout = styled(motion.div)`
   border-top-right-radius: var(--rounded-lg);
   background-color: white;
   z-index: 5000;
-  padding: 20px;
+  padding: ${(props) => (props.isXPadding ? "12px 20px" : "12px 0")};
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -95,7 +106,7 @@ const TopNav = styled.nav`
   height: 4px;
   border-radius: 4px;
   background-color: var(--gray-400);
-  margin-bottom: var(--gap-5);
+  margin-bottom: 12px;
 `;
 
 const Header = styled.header`

diff --git a/libs/study/getStudyVoteIcon.ts b/libs/study/getStudyVoteIcon.ts
@@ -2,22 +2,12 @@ export const getStudyVoteIcon = (type: "default" | "main" | "sub", text: string)
   const getBasicIcon = () => {
     switch (type) {
       case "default":
-        return `<button style="width: 48px; height: 48px; padding: 8px; border-radius: 50%; background-color: rgba(0, 194, 179, 0.1);">
-        <div style="width: 100%; height: 100%; background-color: #00c2b3; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-weight: 700; padding: 4px;">
-            <div style="width: 100%; height: 100%; border-radius: 50%; background-color: white;"></div>
-        </div></button>`;
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28px" height="28px"><path class="fa-secondary" opacity="1" fill="#bdbdbd" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 104c-6.1 0-11.7 3.5-14.3 8.9l-36.2 73.4-81 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.8 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81.1-11.8-36.2-73.4c-2.7-5.5-8.3-8.9-14.3-8.9z"/><path class="fa-primary" fill="#ffffff" d="M270.3 112.9c-2.7-5.5-8.3-8.9-14.3-8.9s-11.7 3.5-14.3 8.9l-36.2 73.4-81.1 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.9 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81-11.8-36.2-73.4z"/></svg>
+`;
       case "main":
-        return ` <button style="width: 48px; height: 48px; padding: 8px; border-radius: 50%; background-color: rgba(0, 194, 179, 0.1);">
-        <div style="width: 100%; height: 100%; background-color: #00c2b3; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-weight: 700;">
-            A
-        </div>
-    </button>`;
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28px" height="28px"><path class="fa-secondary" opacity="1" fill="#00c2b3" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 104c-6.1 0-11.7 3.5-14.3 8.9l-36.2 73.4-81 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.8 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81.1-11.8-36.2-73.4c-2.7-5.5-8.3-8.9-14.3-8.9z"/><path class="fa-primary" fill="#ffffff" d="M270.3 112.9c-2.7-5.5-8.3-8.9-14.3-8.9s-11.7 3.5-14.3 8.9l-36.2 73.4-81.1 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.9 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81-11.8-36.2-73.4z"/></svg>`;
       case "sub":
-        return `<button style="width: 48px; height: 48px; padding: 8px; border-radius: 50%; background-color: rgba(255, 107, 107, 0.1);">
-  <div style="width: 100%; height: 100%; background-color: rgb(255,107,107); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-weight: 700;">
-      B
-  </div>
-</button>`;
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28px" height="28px"><path class="fa-secondary" opacity="1" fill="#ffa500" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 104c-6.1 0-11.7 3.5-14.3 8.9l-36.2 73.4-81 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.8 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81.1-11.8-36.2-73.4c-2.7-5.5-8.3-8.9-14.3-8.9z"/><path class="fa-primary" fill="#ffffff" d="M270.3 112.9c-2.7-5.5-8.3-8.9-14.3-8.9s-11.7 3.5-14.3 8.9l-36.2 73.4-81.1 11.8c-6 .9-11 5.1-12.9 10.9s-.3 12.2 4 16.4l58.6 57.2-13.8 80.7c-1 6 1.4 12.1 6.4 15.6s11.5 4.1 16.9 1.2L256 342.1l72.5 38.1c5.4 2.8 11.9 2.4 16.9-1.2s7.4-9.6 6.4-15.6l-13.8-80.7 58.6-57.2c4.4-4.3 5.9-10.6 4-16.4s-6.9-10-12.9-10.9l-81-11.8-36.2-73.4z"/></svg>`;
     }
   };
   return `<div style=" width:72px; height:72px; justify-content:center; display: flex; flex-direction: column; align-items:center;">

diff --git a/pageTemplates/home/HomeStudySection.tsx b/pageTemplates/home/HomeStudySection.tsx
@@ -1,8 +1,8 @@
 import { ThemeTypings } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { AnimatePresence, motion, PanInfo } from "framer-motion";
-import { useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
@@ -144,11 +144,12 @@ export const getWaitingSpaceProps = (studyData: IParticipation[]) => {
   studyData.forEach((par) => {
     par.attendences.forEach((who) => {
       const user = who.user;
-      const place = par.place._id;
+      const place = { id: par.place._id, branch: par.place.branch };
       const findUser = userArr.find((obj) => obj.user.uid === user.uid);
       if (!findUser) {
-        if (who.firstChoice) userArr.push({ user, place, subPlace: [] });
-        else userArr.push({ user, place: null, subPlace: [place] });
+        if (who.firstChoice) {
+          userArr.push({ user, place, subPlace: [], createdAt: who.createdAt });
+        } else userArr.push({ user, place: null, subPlace: [place], createdAt: who.createdAt });
       } else {
         if (who.firstChoice) {
           findUser.place = place; // 첫 선택인 경우 place를 업데이트
@@ -160,7 +161,7 @@ export const getWaitingSpaceProps = (studyData: IParticipation[]) => {
       }
     });
   });
-  return userArr;
+  return userArr.sort((a, b) => (dayjs(a.createdAt).isAfter(dayjs(b.createdAt)) ? 1 : -1));
 };
 
 export const setStudyDataToCardCol = (
@@ -186,12 +187,12 @@ export const setStudyDataToCardCol = (
       url: data.place.image,
       priority: true,
     },
-    badge: getBadgeText(data.status, getVotePoint(data.attendences.length)),
+    badge: getBadgeText(data.status),
     type: "study",
     statusText:
       data.status === "pending" && data.attendences.some((who) => who.user.uid === uid) && "GOOD",
   }));
-
+  console.log(2, cardColData);
   if (isNotPassed) {
     cardColData.unshift({
       title: "스터디 대기소",
@@ -203,7 +204,7 @@ export const setStudyDataToCardCol = (
         url: "/",
         priority: true,
       },
-      badge: { text: "", colorScheme: "mintTheme" },
+      badge: null,
       type: "study",
     });
   }
@@ -215,8 +216,8 @@ const getVotePoint = (attCnt: number) => (attCnt === 0 ? 10 : attCnt === 5 ? 2 :
 
 const getBadgeText = (
   status: StudyStatus,
-  point: number,
 ): { text: string; colorScheme: ThemeTypings["colorSchemes"] } => {
+  console.log(234, status);
   switch (status) {
     case "open":
       return { text: "스터디 오픈", colorScheme: "mintTheme" };
@@ -225,7 +226,9 @@ const getBadgeText = (
     case "free":
       return { text: "자유 참여", colorScheme: "purple" };
     case "pending":
-      return { text: `+${point} POINT`, colorScheme: "redTheme" };
+      return null;
+    default:
+      return null;
   }
 };
 

diff --git a/pageTemplates/profile/DetailInfo.tsx b/pageTemplates/profile/DetailInfo.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import BlurredPart from "../../components/molecules/BlurredPart";
 import Chart from "../../components/organisms/chart/Chart";
+import { PLACE_TO_NAME } from "../../constants/serviceConstants/studyConstants/studyCafeNameConstants";
 import { IUser } from "../../types/models/userTypes/userInfoTypes";
 import { birthToAge } from "../../utils/convertUtils/convertTypes";
 
@@ -48,6 +49,10 @@ function DetailInfo({ user }: { user: IUser }) {
               )}
             </div>
           </ProfileItem>
+          <ProfileItem>
+            <span>즐겨찾기</span>
+            <span>{PLACE_TO_NAME[user?.studyPreference?.place] || "없음"}</span>
+          </ProfileItem>
         </Profile>
       </BlurredPart>
       <Chart type="study" user={user} />