글 상세 페이지(API 추가 전)

src/app/router/router.tsx

@@ -1,12 +1,16 @@
 import { createBrowserRouter } from "react-router-dom";
 
 import { RootPage } from "~/pages/root";
-
 import { ROUTE } from "~/shared/route";
+import { QuestionDetailPage } from "~/pages/question-detail-page/question-detail-page"
 
 export const router = createBrowserRouter([
   {
     path: ROUTE.root,
     element: <RootPage />,
   },
+  {
+    path: ROUTE.detail,
+    element: <QuestionDetailPage />
+  }
 ]);

src/entities/question-detail-page/model/question-detail-type.ts

@@ -0,0 +1,18 @@
+export type ProfileHeaderProps = {
+    userProfile: {
+        userName: string;
+        questionCount: number;
+        answerCount: number;
+    }
+    viewCount: number;
+    commnetCount: number;
+    likeCount: number;
+}
+export type QuestionTitleProps = {
+    title: string;
+    codetype:string[];
+}
+export type QuestionBodyProps = {
+    questionTitle: string[];
+    questionText: string[];
+}

src/entities/question-detail-page/ui/question-detail-body.tsx

@@ -0,0 +1,67 @@
+import styled, { css } from "styled-components";
+import { QuestionBodyProps } from "../model/question-detail-type";
+
+const QuestionBodyData: QuestionBodyProps = {
+    questionTitle: ["목적", "질문", "Code<>"],
+    questionText: [
+        "Lorem ipsum dolor sit amet consectetur. Faucibus a non etiam sit nunc imperdiet nisl nulla blandit. Sit facilisi eget et iaculis praesent. Nisl leo non est justo congue. Amet accumsan egestas morbi augue quisque duis vitae quam ac.",
+        "Lorem ipsum dolor sit amet consectetur. Faucibus a non etiam sit nunc imperdiet nisl nulla blandit. Sit facilisi eget et iaculis praesent. Nisl leo non est justo congue. Amet accumsan egestas morbi augue quisque duis vitae quam ac.Lorem ipsum dolor sit amet consectetur. Faucibus a non etiam sit nunc imperdiet nisl nulla blandit. Sit facilisi eget et iaculis praesent. Nisl leo non est justo congue. Amet accumsan egestas morbi augue quisque duis vitae quam ac.Lorem ipsum dolor sit amet consectetur. Faucibus a non etiam sit nunc imperdiet nisl nulla blandit. Sit facilisi eget et iaculis praesent. Nisl leo non est justo congue. Amet accumsan egestas morbi augue quisque duis vitae quam ac.",
+        `print('
+            오늘부터 지지관계에서 벗어나
+            르미와(과) 나는 한몸으로 일체가 된다.
+            르미에 대한 공격은 나에 대한 공격으로 간주한다.
+
+            세상에 70억명의 르미 팬이 있다면, 나는 그들 중 한 명일 것이다.
+            세상에 1억명의 르미 팬이 있다면., 나 또한 그들 중 한 명일 것이다.
+            세상에 천만 명의 르미 팬이 있다면, 나는 여전히 그들 중 한 명일 것이다.
+            세상에 백 명의 르미 팬이 있다면, 나는 아직도 그들 중 한 명일 것이다.
+            세상에 한 명의 르미 팬이 있다면, 그 사람은 아마도 나일 것이다.
+            세상에 단 한 명의 르미 팬도 없다면, 나는 그제서야 이 세상에 없는 것이다.
+
+            르미, 나의 사랑.
+            르미, 나의 빛.
+            르미, 나의 어둠.
+            르미, 나의 삶.
+            르미, 나의 기쁨.
+            르미, 나의 슬픔.
+            르미, 나의 안식.
+            르미, 나의 영혼.
+            르미, 나.
+        ')`
+    ]
+}
+// 스타일
+const QuestionTextContainer = styled.div`
+    border: 1px solid #000;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 25px;
+`
+const QuestionTextTitle = styled.h2`
+    border-bottom: 1px solid #000;
+    padding-bottom: 10px;
+    line-height: 30px;
+    font-weight: 600;
+    font-size: ${({theme}) => theme.fontSize.headline6};
+`
+const QuestionTextContant = styled.div`
+    padding-top: 20px;
+    font-size: ${({theme}) => theme.fontSize.body2};
+`
+
+export const QuestionDetailBody = () => {
+    return(
+        <>
+            {QuestionBodyData.questionTitle.map((title, index) => (
+                <QuestionTextContainer key={index}>
+                    <QuestionTextTitle>
+                        {title}
+                    </QuestionTextTitle>
+                    <QuestionTextContant>
+                        {QuestionBodyData.questionText[index]}
+                    </QuestionTextContant>
+                </QuestionTextContainer>
+            ))}
+        </>
+    );
+};

src/entities/question-detail-page/ui/question-detail-profile.tsx

@@ -0,0 +1,98 @@
+import { ProfileHeaderProps } from "~/entities/question-detail-page/model/question-detail-type";
+import styled, { css } from "styled-components";
+
+import { Icon } from "~/shared/icons";
+
+const ProfileHeaderData: ProfileHeaderProps = {
+    userProfile: {
+        userName: "Sky",
+        questionCount: 14,
+        answerCount: 10
+    },
+    viewCount: 23,
+    commnetCount: 15,
+    likeCount: 42
+}
+// 스타일
+const Flex = css`
+    display: flex;
+`
+const QuestionDetailProfile = styled.div`
+    padding: 10px 20px;
+    color: #fff;
+    font-size: ${({ theme }) => theme.fontSize.body2};
+    ${Flex}
+    justify-content: space-between;
+    margin-bottom: 25px;
+    background-color:  ${({ theme }) => theme.colors.tabBar};
+`
+const HeaderProfile = styled.div`
+    ${Flex}
+`
+const Profile = styled.div`
+    ${Flex}
+    line-height: 30px;
+    margin-right: 20px;
+`
+const ProfileImg = styled.p`
+    margin-right: 10px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+    background-color: pink;
+`
+const UserCount = styled.div`
+    line-height: 30px;
+    font-size: ${({theme}) => theme.fontSize.caption};
+    color: ${({ theme }) => theme.colors.secondary};
+`
+const HeaderCount = styled.div`
+    ${Flex}
+`
+const Count = styled.div`
+    ${Flex}
+    margin-left: 15px;
+    line-height: 30px;
+`
+const Icons = styled.p`
+    height: 30px;
+    padding-top: 3px;
+    box-sizing: border-box;
+    margin-right: 5px;
+`
+
+export const QuestionDetailPfofile = () => {
+    return(
+        <QuestionDetailProfile>
+            <HeaderProfile>
+                <Profile>
+                    <ProfileImg></ProfileImg>
+                    <p className="user-name">{ProfileHeaderData.userProfile.userName}</p>
+                </Profile>
+                <UserCount>
+                    질문횟수: {ProfileHeaderData.userProfile.questionCount}회/답변횟수: {ProfileHeaderData.userProfile.answerCount}회
+                </UserCount>
+            </HeaderProfile>
+            <HeaderCount>
+                <Count>
+                    <Icons>
+                        <Icon.View />
+                    </Icons>
+                    <p>{ProfileHeaderData.viewCount}</p>
+                </Count>
+                <Count>
+                    <Icons>
+                        <Icon.Review />
+                    </Icons>
+                    <p>{ProfileHeaderData.commnetCount}</p>
+                </Count>
+                <Count>
+                    <Icons>
+                        <Icon.Like />
+                    </Icons>
+                    <p>{ProfileHeaderData.likeCount}</p>
+                </Count>
+            </HeaderCount>
+        </QuestionDetailProfile>
+    );
+};

src/entities/question-detail-page/ui/question-detail-title.tsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import { QuestionTitleProps } from "../model/question-detail-type";
+
+const QuestionTitleData: QuestionTitleProps = {
+    title: "Lorem ipsum dolor sit amet consectetur.",
+    codetype: ["HTML", "CSS"]
+}
+
+// 스타일
+const QuestionTitle = styled.p`
+    font-size: ${({theme}) => theme.fontSize.subtitle1};
+    margin-bottom: 25px;
+`
+const QuestionCodeLink = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+`
+const QuestionCodeType = styled.p`
+    color: ${({theme}) => theme.colors.main};
+    font-size: ${({theme}) => theme.fontSize.subtitle2};
+`
+const QuestionGitLinkBtn = styled.a`
+        cursor: pointer;
+        line-height: 30px;
+        font-size: ${({theme}) => theme.fontSize.button};
+        border: none;
+        border-radius: 10px;
+        padding: 0 18px;
+        background-color: ${({theme}) => theme.colors.secondary};
+`
+
+export const QuestionDetailTitle = () => {
+    return(
+        <div className="question-detail-title">
+            <QuestionTitle>
+                {QuestionTitleData.title}
+            </QuestionTitle>
+            <QuestionCodeLink>
+                <QuestionCodeType>
+                    {QuestionTitleData.codetype[0]}/{QuestionTitleData.codetype[1]}
+                </QuestionCodeType>
+                <QuestionGitLinkBtn>
+                    Github Link
+                </QuestionGitLinkBtn>
+            </QuestionCodeLink>
+        </div>
+    );
+};

src/pages/question-detail-page/index.ts

@@ -0,0 +1 @@
+export * from "./question-detail-page";

src/pages/question-detail-page/question-detail-page.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { QuestionDetailBody } from "~/entities/question-detail-page/ui/question-detail-body";
+import { QuestionDetailPfofile } from "~/entities/question-detail-page/ui/question-detail-profile";
+import { QuestionDetailTitle } from "~/entities/question-detail-page/ui/question-detail-title";
+
+// 스타일
+const QuestionDetailContainer = styled.div`
+    color: #000;
+    line-height: 1.2em;
+    background-color: #fff;
+`;
+const QuestionTextContainer = styled.div`
+    padding: 25px 20px;
+`
+
+export const QuestionDetailPage = () => {
+    return(
+        <>
+            <QuestionDetailContainer>
+                <QuestionDetailPfofile />
+                <QuestionTextContainer>
+                    <QuestionDetailTitle />
+                    <QuestionDetailBody />
+                </QuestionTextContainer>
+            </QuestionDetailContainer>
+        </>
+    );
+};

src/shared/icons/main/View.tsx

@@ -1,6 +1,6 @@
 import { IconProps } from "../Icons.type";
 
-export const View = ({ width = "21", height = "20", fill = "#F9B05B" }: IconProps) => {
+export const View = ({ width = "21", height = "20", fill = "#ED4723" }: IconProps) => {
   return (
     <svg width={width} height={height} viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/shared/route/index.ts

@@ -1 +1 @@
-export * from "./route";
+export * from "./route";

src/shared/route/route.ts

@@ -2,4 +2,5 @@ export const ROUTE = {
   root: "/",
   //만약 동적인 파라미터가 필요한경우
   // somethingDynamicRoute: (param:string) => `/page/${param}`
+  detail: "/questionDetail",
 };