✨ feat: add header navigation #40

DesignSystemLab · Jul 14, 2023 · 6c58c96 · 6c58c96
1 parent 69b0224
commit 6c58c96
Showing 1 changed file with 66 additions and 43 deletions.
diff --git a/src/layout/components/Header.tsx b/src/layout/components/Header.tsx
@@ -27,49 +27,72 @@ export const Header = () => {
     <header css={headerWrapper}>
       <nav css={headerContents}>
         <Image src="/images/logo.png" onClick={moveToMain} width={200} height={76} style={{ cursor: 'pointer' }} />
-        <CompositionBoundaryReactQuery suspense={<Loading />} error={(props) => <ErrorModal {...props} />}>
-          {userInfo ? (
-            <Dropdown>
-              <Dropdown.Trigger>
-                <Avatar src={userInfo.photo} size="lg" />
-              </Dropdown.Trigger>
-              <Dropdown.Menu>
-                <Dropdown.MenuItem>
-                  <Layout.Column>
-                    <Text variant="label" size="md" truncate>
-                      {userInfo.name}
-                    </Text>
-                    <Text variant="label" size="sm">
-                      {userInfo.email}
-                    </Text>
-                    <Text variant="paragraph" size="sm" truncate style={{ width: '200px' }}>
-                      {userInfo.note}
-                    </Text>
-                  </Layout.Column>
-                </Dropdown.MenuItem>
-                <Dropdown.Divider />
-                <Dropdown.MenuItem>
-                  <Link href={`/profile?user=${userInfo?.id}`}>
-                    <Text variant="paragraph" size="md" color="primary-500">
-                      프로필 보기
-                    </Text>
-                  </Link>
-                </Dropdown.MenuItem>
-                <Dropdown.Divider />
-                <Dropdown.MenuItem onClick={() => signout()}>
-                  <Text variant="paragraph" color="error">
-                    로그아웃
-                  </Text>
-                </Dropdown.MenuItem>
-              </Dropdown.Menu>
-            </Dropdown>
-          ) : (
-            <Layout.Row gap={4}>
-              <SigninModal />
-              <SignupModal />
-            </Layout.Row>
-          )}
-        </CompositionBoundaryReactQuery>
+        <div>
+          <Layout.Row gap={40} style={{ alignItems: 'center', cursor: 'pointer' }}>
+            <Link href="/">
+              <Text decoration="underline">Home</Text>
+            </Link>
+            <Link href="/challenge">
+              <Text
+                decoration="underline"
+                color={router.pathname.includes('/challenge') ? 'primary-500' : 'grey-darken3'}
+              >
+                Challenge
+              </Text>
+            </Link>
+            <Link href="/workspace">
+              <Text
+                decoration="underline"
+                color={router.pathname.includes('/workspace') ? 'primary-500' : 'grey-darken3'}
+              >
+                Workspace
+              </Text>
+            </Link>
+            <CompositionBoundaryReactQuery suspense={<Loading />} error={(props) => <ErrorModal {...props} />}>
+              {userInfo ? (
+                <Dropdown>
+                  <Dropdown.Trigger>
+                    <Avatar src={userInfo.photo} size="lg" />
+                  </Dropdown.Trigger>
+                  <Dropdown.Menu>
+                    <Dropdown.MenuItem>
+                      <Layout.Column>
+                        <Text variant="label" size="md" truncate>
+                          {userInfo.name}
+                        </Text>
+                        <Text variant="label" size="sm">
+                          {userInfo.email}
+                        </Text>
+                        <Text variant="paragraph" size="sm" truncate style={{ width: '200px' }}>
+                          {userInfo.note}
+                        </Text>
+                      </Layout.Column>
+                    </Dropdown.MenuItem>
+                    <Dropdown.Divider />
+                    <Dropdown.MenuItem>
+                      <Link href={`/profile?user=${userInfo?.id}`}>
+                        <Text variant="paragraph" size="md" color="primary-500">
+                          프로필 보기
+                        </Text>
+                      </Link>
+                    </Dropdown.MenuItem>
+                    <Dropdown.Divider />
+                    <Dropdown.MenuItem onClick={() => signout()}>
+                      <Text variant="paragraph" color="error">
+                        로그아웃
+                      </Text>
+                    </Dropdown.MenuItem>
+                  </Dropdown.Menu>
+                </Dropdown>
+              ) : (
+                <Layout.Row gap={4}>
+                  <SigninModal />
+                  <SignupModal />
+                </Layout.Row>
+              )}
+            </CompositionBoundaryReactQuery>
+          </Layout.Row>
+        </div>
       </nav>
     </header>
   );